I have a grid with serveroperation(false) set to have Client side filtering,sorting paging etc. the code works fine on Safari browser for Desktop. But on tablet or mobile paging, filtering, grouping all work good but sorting always invokes datasource read as if sorting is on Server side. Paging filtering or grouping will never invoke read Action and only serach TextBox text entry should invoke that. As Long as ServerOperation is set false i believe all should be Client side, why just sorting Fails and does a Server invoke?
Here is index.mobile.cshtml code
<script type="text/javascript">
function addSearch() {
return { SearchString: $('#searchbox').val() };
}
$('#searchbox').keyup(function () {
$('#Grid').data('kendoGrid').dataSource.read();
});
</script>
@model System.Data.DataTable
@(
Html.Kendo().Grid(Model).Name("Grid")
.DataSource(ds => ds.Ajax()
.Model(m =>
{
foreach (System.Data.DataColumn column in Model.Columns)
{
m.Field(column.ColumnName, column.DataType);
}
})
.Read(r => r.Action("product_Read", "Product").Data("addSearch"))
.ServerOperation(false)
)
.ToolBar(toolBar => toolBar.Template("<input class='k-textbox' id='searchbox'/>"))
.Columns(columns =>
{
for (int i = 0; i < ViewBag.ListHeader.GetLength(0); i++)
{
columns.Bound(ViewBag.ListHeader[i, 0]).Title(ViewBag.ListHeader[i, 1]);
}
})
.Pageable()
.Sortable()
.Groupable()
)
And the controller read action looks like this
public ActionResult product_Read([DataSourceRequest]DataSourceRequest request, string SearchString)
{
DataTable products = Products(SearchString);
return Json(products.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
}
7 Answers, 1 is accepted
I've tried to replicate the described behavior, but was not able to. Can you modify the attached example in order to replicate the behavior that you are observing? Maybe I'm missing something obvious here.
Regards,
Nikolay Rusev
Telerik
Even i'm facing the same issue.
Any fix for this?
Here is my razor code:
<
div
class
=
"col-sm-6"
>
<
div
class
=
"form-group"
>
@Html.LabelFor(model => model.EmployeeName, new { @class = "col-sm-4 control-label" })
<
div
class
=
"col-sm-8"
>
@Html.TextBoxFor(model => model.EmployeeName, new { @class = "form-control"})
</
div
>
</
div
>
</
div
>
<
div
class
=
"clearfix"
></
div
>
<
div
class
=
"col-sm-6"
>
<
div
class
=
"form-group"
>
<
div
class
=
"col-sm-8 col-sm-offset-4"
>
<
input
id
=
"btnSearch"
type
=
"submit"
value
=
"Search"
class
=
"btn"
/>
</
div
>
</
div
>
</
div
>
@(Html.Kendo().Grid<
Portal.EmployeeViewModel
>()
.Name("GridEmployeeInvitation")
.Columns(columns =>
{
columns.Bound(e => e.EmployeeNumber).Width("160px");
columns.Bound(e => e.EmployeeName).Width("180px");
})
.Excel(excel => excel
.FileName("File.xlsx")
.ProxyURL(Url.Action("Excel_Export_Save", "Shared"))
.AllPages(true)
)
.Pageable(x => x.PageSizes(new object[] { 10, 20, 50, 100, "All" }))
.Reorderable(reorder => reorder.Columns(true))
.AutoBind(false)
.Selectable()
.Sortable(sortable => sortable
.AllowUnsort(true)
.SortMode(GridSortMode.MultipleColumn))
.Scrollable(scr => scr.Height(322))
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.Contains("Contains")
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to"))))
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.ServerOperation(false)
.Read(read => read.Action("GetEmployees", "Admin").Data("GetSearchParameters"))
)
)
<
script
type
=
"text/javascript"
>
$('#btnSearch').click(function (e) {
('#GridEmployeeInvitation').data('kendoGrid').dataSource.read();
});
function GetSearchParameters() {
return {
employeeName: $("#EmployeeName").val()
};
}
</
script
>
Hello Avinash,
We are not sure how replicate the issue described in the original post in this thread. Thus it will be really helpful to provides us with a detail description of the behavior that you are observing and also the steps required to replicate it locally in the sample project from my previous post.
Regards,Nikolay Rusev
Telerik by Progress
Nikolay,
Here is how you can replicate the issue.
Create an ASP MVC project and add button and kendo grid with sorting enabled in the grid. Add post method which would return some data to the grid when button is clicked. The grid is only supposed to get data when the button is clicked. Now on empty grid, click on the column header as you would do to sort the column. You should see that, read method of the grid datasource is fired.
The issue with this is let's say we have form which takes user's search inputs and on button click it would bring the result back to the grid. If by mistake user clicks on the column, it will fire read function and try to get the data back when user wasn't expecting that.
Isn't there a way we could tell grid not to fire read function when user tries to sort column on empty grid??
Hello Avinash,
Indeed this is how DataSource/Grid works. When there isn't data in the DataSource and fetch or read methods are being called, due to user interaction in this case, request will be executed.
Currently the only way to prevent the request is to prevent requestStart event of the DataSource.
With next release we will expose more Grid events for more fine-grained control over widget behavior. Such event will be sort which you could use in such scenario to prevent user from performing sorting.
Regards,
Nikolay Rusev
Telerik by Progress
Nikolay,
Is it going to be in Q3 update?
Hello Avinash,
Yes, those events will be released in Q3 release. You can see the issue state here.
Regards,Nikolay Rusev
Telerik by Progress