Kendo Grid select over multiple pages - kendo-grid

I have created a kendo grid using Asp.Net MVC wrappers. I have included a checkbox for selecting multiple rows made the wiring and everything works ok. However, I have issues, when I change page, or do a filtering as the selecting rows/checkbox disappear.
What is the solution for this problem?

You need to use .PersistSelection(true) to ensure rows remain selected when changing pages:
#(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
.Name("rowSelection")
.Columns(columns => {
columns.Bound(o => o.ShipCountry).Width(300);
columns.Bound(p => p.Freight).Width(300);
columns.Bound(p => p.OrderDate).Format("{0:dd/MM/yyyy}");
})
.Pageable(pageable => pageable.ButtonCount(5))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.PersistSelection(true)
.Navigatable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(m=>m.Id("OrderID"))
.PageSize(6)
.Read(read => read.Action("Orders_Read", "Grid"))
)
Also ensure you have an id column declared in the DataSource, like .Model(m=>m.Id("OrderID")) in the example, otherwise it will fail.
Full details here.
I had issues with the jQuery grid.select() however:
var grid = $('#rowSelection').data('kendoGrid');
var rows = grid.select();
This only seemed to return rows selected on the currently displayed page rather than all the rows selected across all the pages.

Related

Kendo MVC Grid Filtering - Filters that consider multiple fields

I have a MVC Kendo grid where one column is a client template that actually uses multiple fields. By default the built in filtering is only applied to the field the column is bound to. How do I override that so it considers both fields. Ie, when I search for "Contains" "De" a column that displays "Detroit, MI" should return.
Here's what I have so far:
MVC View
#(Html.Kendo().Grid<ViewModel>()
.DataSource(dataSource => dataSource
.Custom()
.Transport(t =>
{
t.Read(r => r.Action("StatusGridRead", "DeviceStatus"));
})
.Schema(schema => schema
.Data("Result.Data")
.Total("Result.Total")
.Errors("Result.Errors")
.Model(m =>
{
m.Id(f => f.Id);
m.Field(f => f.StateOrProvince);
m.Field(f => f.City);
...
})
)
)
.Columns(columns =>
{
columns.Bound(c => c.StateOrProvince).Title("City & State").ClientTemplate("#=City#, #=StateOrProvince#");
...
})
.Events(e=>
{
e.Filter("statusGridFilter");
})
.Sortable()
.Filterable(f =>
{
f.Extra(false);
f.Operators(o => o.ForString(s =>
{
s.Clear();
s.Contains("Contains");
s.IsEqualTo("Is Equal To");
s.StartsWith("Starts With");
s.EndsWith("Ends With");
s.DoesNotContain("Does Not Contain");
s.IsNotEqualTo("Is Not Equal To");
}));
})
)
Javascript
function statusGridFilter(e) {
if (e.field == "StateOrProvince") {
//What do I do here?
}
}
I understand if I made a column for city and one for state that would resolve this issue, however I actually have a similar scenario (client template with many string fields displayed) where that won't work and am just picking this as the easiest example. Other than making 1 column for 1 field, I'm open to any other ideas that may solve filtering for this scenario.

How to add SSN mask to a kendo grid filter?

I have a Kendo grid that displays many columns. I have a column for SSN. When user clicks on the filter and types in 123-45-6789 it filters the correct SSN, however, when user types in 123456789 nothing is filtered. Is there any way that it can filter only 9 numbers with or without dashes.
columns.Bound(p => p.SSN)
.Title("SSN")
.Width(100);
.HtmlAttributes(new {style = "height: 579px; width: 110%"})
.Scrollable()
.Sortable()
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.IsEqualTo("Is equal to")
.StartsWith("Starts with")
.IsNotEqualTo("Is not equal to")
)
)
)
You can set the filter to use a kendoMaskedTextBox like this:
<script>
function ssnFilter(element) {
element.kendoMaskedTextBox({
mask: "000-00-0000"
});
};
</script>
#(Html.Kendo().Grid<YourModel>()
.Name("YourGridName")
.Columns(columns =>
{
columns.Bound(p => p.SSN).Filterable(f => f.UI("ssnFilter"));
}
)
Kendo MaskedTextBox documentation
Kendo Grid Filter Customization documentation

kendo grid date column format after filtering

I have a kendo MVC grid that has a bound column like below
columns.Bound(c => c.CreatedDate).Format("{0:M/d/yyyy h:mm tt}").Title("Submitted on").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains"))).Format("{0: MM/dd/yyyy HH.mm.ss}");
the column formats fine when first loading the view:
06/22/2017 15.02.00
but i have some buttons which use AJAX to post back and get back filtered data and when re-populating the grid the column looks like this:
/Date(1498161720000)/
Any help?
First off, you have two seperate .Format tags with different formats specified, which is probably causing some problems. Pick which one you want to use and try just removing the other.
If that doesn't solve the problem, I would try declaring the format using data annotations. In your model, try adding this line above the declaration of CreatedDate:
[DisplayFormat(ApplyFormatInEditMode = true, DataFormatString = "{0:M/d/yyyy h:mm tt}")]
and then remove .Format from your column binding.
i.e. change
columns.Bound(c => c.CreatedDate).Format("{0:M/d/yyyy h:mm tt}").Title("Submitted on").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
to
columns.Bound(c => c.CreatedDate).Title("Submitted on").Filterable(ftb => ftb.Cell(cell => cell.Operator("contains")));
and make sure you include the
using System.ComponentModel.DataAnnotations;
line at the top of your model if you don't already have it.

Kendo UI grids with dropdown editor templates edit issue

I have a grid with two drop-down list columns which are mapped with Editor Templates in a razor page. All single edit and update is working fine without any issues. But when I click first row to edit and trying to edit second row without update or cancel the first row it automatically close the edit mode of first row and second one made editable. It is fine but when I click back the first row without update or cancel the second row then the values from second row get updated in the first row as well.
How do I stop this issue. By the way it is found by tester not me.. :(
all problems are coming when we try to edit multiple rows without update or cancel the active editable row.
Please help me because I have spent lot of time on it. I am attaching the sample code here..the field name and template names are modified to give simple example.
Grid
#(Html.Kendo().Grid(Model.Employees)
.Name("GridEmployees")
.Columns(columns =>
{
columns.Bound(i => i.Frequency).Title("Frequency").EditorTemplateName("Frequency").ClientTemplate("#:Frequency#").HtmlAttributes(new { #style = "text-align:Left; " }).Width(75);
columns.Bound(i => i.Quarter).Title("Quarter").EditorTemplateName("Quarter").ClientTemplate("#= kendo.toString(Quarter,\"MMM yyyy\") #").HtmlAttributes(new { #style = "text-align:left; " }).Width(75);
columns.Bound(i => i.EmpId).Hidden();
columns.Command(command => command.Edit()).Width(175);
})
.ToolBar(toolbar => toolbar.Create())
.Editable((editable => editable.Mode(GridEditMode.InLine)))
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Multiple))
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.ServerOperation(false)
.Model(model =>
{
model.Id(s => s.EmpId);
model.Field(s => s.Frequency);
model.Field(s => s.Quarter);
})
.Create(update => update.Action("CreateEmployee", "Employee"))
.Read(read => read.Action("ReadEmployee", "Employee"))
.Update(update => update.Action("UpdateEmployee", "Employee"))
)
)
Editor Templates
Quarter.cshtml
#using System.Collections
#(Html.Kendo().DropDownListFor(i => i)
.Name("Quarter")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Quarters)
.OptionLabel("Select Quarter")
)
Frequency.cshtml
#using System.Collections
#(Html.Kendo().DropDownListFor(i => i)
.Name("Frequency")
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Frequencies)
.OptionLabel("Select Frequency")
)
Thanks in advance,
Late is better than never...The problem is, that you generate multiple dropdown lists with the same id. Just assign a dynamic ID to the dropdown in the EditorTemplate and you should be fine.
#(Html.Kendo().DropDownListFor(i => i)
.Name("Frequency")
.HtmlAttributes(new { #id = "Frequency_#=UniqueId#" }) //eg. row id
.DataValueField("Id")
.DataTextField("Name")
.BindTo((IEnumerable)ViewBag.Frequencies)
.OptionLabel("Select Frequency")
)

store kend grid data to data base

I want to store a grid data to a table in database.
Grid which i use is Kendo Grid
//View
#(Html.Kendo().Grid<OnlineAB.Models.Sales>()
.Name("SalesGrid")
.Columns(columns =>
{
columns.Bound(p => p.Resource).Width(150);
columns.Bound(p => p.Customer).Width(150);
columns.Bound(p => p.GS).Width(150);
columns.Bound(p => p.Price).Width(150);
})
.Sortable()
)
Can anyone help me in how to store these column values to a database. When we click an "Save" button. This action is to be performed.
And also i want to add "DropDown Box" in the Column Customer. That dropdown will hold a set of data.
Go with the kendo official site's demo. I can help you if you leave the server side wrapper & wish to use httm 5. I did this sort of things recently.