kendo grid redirects to API and shows JSON when column title is clicked for sorting

[Kapeel]

Hi,

I have a Kendo grid on a page that is created using this code in my cshtml file

 @(Html.Kendo().Grid<Entity>()
        .Name("productsGrid")
        .Columns(columns =>
        {
            columns.Bound(schema => schema.Ns).Width(150)
                .Filterable(false).Sortable(false);
            columns.Bound(schema => schema.Name).Title("Entity Name").Width(250);
            columns.Bound(schema => schema.Desc).Title("Description")
                .ClientTemplate("#= preserveDirtyFlag(data, data.Desc) #")
                .Filterable(false).Sortable(false);
        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Sortable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .ServerOperation(true)
            .PageSize(100)
            .Model(model =>
            {
                model.Id(entity => entity.Id);
                model.Field(entity => entity.Ns).Editable(false);
                model.Field(entity => entity.Name).Editable(false);
                model.Field(entity => entity.Desc);
            })
            .Read(read => read.Action("GetEntityList", "Products").Data("getQuery"))
            .Events(e => e.RequestStart("onPageChange"))
        )
        .Events(e => e.DataBound("onDataBound"))
        .ClientDetailTemplateId("fieldDescriptions")
)

Everything works perfectly fine on first load. 

The pagination works perfectly (have removed the code for that from above). Even the filtering works smoothly. super smooth.

The only issue is with sorting. 

---

As the code shows that sorting is enabled on the single column: 'Entity name'

As soon as that column title is clicked in order to sort the data, the browser redirects to a new URL

earlier it was at

/CatalogManager/Descriptions

but after clicking on the 'Entity Name' in order to sort that table, it redirects to:

/CatalogManager/Descriptions/GetEntityList?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc

and then shows the pure JSON output that the GetEntityList controller returns instead of rendering in the grid.

Why does filtering and pagination work well but sorting breaks the page?

---

The amazing thing is, if I remove the '/GetEntityList' from the url manually and just navigate to:

/CatalogManager/Descriptions?sortField=Relevancy&sortFieldValue=_score&descriptionsGrid-sort=Name-desc

Then the table is displayed in its full glory sorted by the required field. So they question is, why does it navigate to the API url and display the raw JSON data in the first place?

[Eyup]

Hello Kapeel,

 

Thank you for writing to us.

To try fixing this problem, you can try setting this option to false:

.ServerOperation(false)

And also, check whether you really need this one:

.Data("getQuery")

Make these changes and let me know if Sorting now works properly.

 

Regards,
Eyup
Progress Telerik

[Kapeel]

Hi Eyup,

Thanks for the reply.

I cannot keep the serverOperation(true) because I want the sorting/filtering/pagination to happen on the server-side. 

I still tried it by making the code change but it did not help. Neither did removing the .Data("getQuery") part.

The thing that is most peculiar about this problem is:

- The first load works perfectly fine. All the table rows are displayed and are interactive.

- The pagination works perfectly. I can go to next page/ previous page and all the data loads seamlessly from server-side.

- The filtering works perfectly. As soon as I select "contains" and enter a text in the filter box, another API call gets triggerd and the rows that only contain the keyword are displayed. 

Everything is smooth till here and you wouldn't even notice anything wrong if you did not try to sort.

The ONLY ISSUE occurs as soon as I TRY TO SORT by clicking on the table column header!

As soon as I do that, the browser URL changes (it changes to the URL of the API)  and all the UI that was being displayed goes away and I can see a JSON response similar to this one on the screen. 

So the most important question is:

Why does the UI get redirected to the API URL which is

/CatalogManager/Descriptions/GetEntityList

from the UI URL which was previously

/CatalogManager/Descriptions

only when trying to sort the grid?

[Eyup]

Hi Kapeel,

 

Thank you for the additional clarification.

Yes, this case seems a pretty specific one and we will need a runnable sample in order to investigate it deeper on our side.

Can you open a formal support ticket and send us a very basic runnable isolated version of your project?

Also, currently it seem that your account has no active license. Can you contact your Company License Representative so they can assign you a valid license? You can also write to our Sales Department directly.

[Kapeel]

Hi,

I was able to root cause this issue. 

The column of the kendo grid was redirecting to the /CatalogManager/Descriptions/GetEntityList because the .Read option was defined as:

.Read(read => read.Action("GetEntityList", "Descriptions").Data("getQuery"))

I changed it to

.Read(read => read.Action("Index", "Descriptions").Data("getQuery"))

and also changed the name of the Controller function to Index from GetEntityList and that seemed to solve the problem as the column click now redirects to /CatalogManager/Descriptions.

Just wanted to know if this is a bug or expected behavior and whether the fix that I applied is the best way to fix the problem?

[Ivan Danchev]

When binding the Grid to a Web API controller, the end point should be specified as demonstrated in this demo: https://demos.telerik.com/aspnet-mvc/grid/webapi

.Read(read => read.Url(Url.HttpRouteUrl("DefaultApi", new { controller = "Product" })))

You can see the Grid's configuration in the View Source tab in the demo.

If you are not using Web API, setting the Action option is enough, e.g.,

.Read(read => read.Action("ActionName", "ControllerName")