This is a migrated thread and some comments may be shown as answers.

Kendo Grid Sorting invokes read action even with serveroperation false

7 Answers 632 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Anamika
Top achievements
Rank 1
Anamika asked on 26 Mar 2014, 10:34 AM
Hello ,

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

Sort by
0
Nikolay Rusev
Telerik team
answered on 28 Mar 2014, 09:07 AM
Hello Anamika,

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Avinash
Top achievements
Rank 1
answered on 07 Jul 2016, 08:18 PM

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>

0
Nikolay Rusev
Telerik team
answered on 08 Jul 2016, 06:35 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Avinash
Top achievements
Rank 1
answered on 08 Jul 2016, 06:55 PM

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??

0
Nikolay Rusev
Telerik team
answered on 11 Jul 2016, 09:40 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Avinash
Top achievements
Rank 1
answered on 11 Jul 2016, 02:56 PM

Nikolay,

 Is it going to be in Q3 update?

0
Nikolay Rusev
Telerik team
answered on 12 Jul 2016, 06:12 AM

Hello Avinash,

Yes, those events will be released in Q3 release. You can see the issue state here.

Regards,
Nikolay Rusev
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Grid
Asked by
Anamika
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Avinash
Top achievements
Rank 1
Share this question
or