Sort does not work when rendered in partial view

[Vadim]

Hi

I just started the evaluation of the MVC wrappers for Kendo UI.  While I am not a novice in development (including MVC) I am a bit confused how you handle things and how to achieve the basic functionality.

I need to be able to work with the grid control inside the panel that would be coming as a result of the higher level AJAX call.  My current preference is the server binding - the binding that renders the grid HTML during the single round of rendering.  However, our users should be able to sort by columns, filter rows - all standard functionality; and that functionality must not reload the entire browser window - only the grid.

So I created the test scenario - the Index action returns the view, which renders the basic skeleton HTML with the target DIV.  After page loading I invoke AJAX call using jQuery to another action of my controller - simulating the real case scenario when views will be coming dynamically.  That action returns the partial view that calls for a grid.

@model List<Telerik1.Models.Item>

@* Basic Kendo MVC Grid sortable by Age column *@
@(Html.Kendo().Grid(Model)
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ID).Groupable(false).Sortable(false);
        columns.Bound(p => p.Name).Groupable(false).Sortable(false);
        columns.Bound(p => p.Age).Groupable(false).Sortable(true);
    })
    .Pageable()
    .Sortable(sort => sort.SortMode(GridSortMode.SingleColumn).AllowUnsort(false))
    .Scrollable()
    .Filterable()
        .DataSource(ds => ds
            .Ajax()
            .Sort(s =>
            {
                s.Add("Age").Ascending();
            })
            .Read(cfg => cfg.Action("Read", "Eval1"))
        )
)

I tried several things.  

My initial attempt was to use .Server() for the data source.  When I clicked on the "Age" column for sorting, your component redirected the entire page to its Index view (attaching grid's routing values to that address).  It took me awhile to recognize why I was always getting the initial grid.

After that I switched the binding to .Ajax().  With that I pointed the .Read action to an action that returns the data source as a JSON collection but also tried to point to the action that calls for the partial view with the grid.  In either case, when I try to sort or filter the result of the AJAX call is an empty grid.

I am sure I am missing something basic- some setting that would direct your component to the "Grid" action which returns the partial view with the grid specification - but I cannot pinpoint it.  And I really cannot find the documentation article nor forum or blog entry, which would clearly explain the binding mechanisms, options and their implications in crystallized way.

I am attaching my sample project in hope of you spotting that missing thing.  There is Eval1 controller, which I am using for evaluation.
Please note that I have removed Scripts and Content folders from the attachment to reduce the size of the attachment.
Please also note that the project was created by creating an empty MVC application and running your "Convert to Telerik application" wizard.

 

 

 

 

[Dimo]

Hi Vadim,

The server response from the Read() action method is a plain JSON, while the Grid expects a different response format. Please follow points 6, 7 and 8.

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/ajax-binding

Regards,
Dimo
Telerik

[Vadim]

I am following this example from the beginning to no avail.  I can make the sorting working using Ajax binding and I can make server side template working using Server binding.  
I am failing to make both working.

Below, I am summarizing the required capabilities (1) that must produce the required behavior (2). 

1. Here are required capabilities for the grid

a. Grid's cells are bound to the data properties
b. Grid's cells can be computed on a fly based on the source row being rendered
c. Grid's rows can be generated using the razor based template
d. Grid's cells can be generated using the razor based template
e. Grid's detail rows can be generated using the razor based template

2. Here is the required behavior:
a. Grid is displayed in the partial view
b. Sorting refreshes the grid's presentation without reloading the browser page
c. Grouping refreshes the grid's presentation without reloading the browser page
d. Paging refreshes the grid's presentation without reloading the browser page
e. Expanding details row refreshes the grid's presentation without reloading the browser page

Can you confirm that all of the required capabilities above can be implemented with the required behavior? 

If yes, can you point me to the documentation article, FAQ, sample project or a forum post that describes my scenario?

Thanks.

[Dimo]

Hello Vadim,

The described behavior is supported. If I understand you correctly, you want Ajax binding, but the Grid should display its first page rendered from the server. In other words, you need initial server binding and subsequent client (ajax) binding.

Your example almost does that. You only need to make the following change to the Read() action method:

public ActionResult Read([DataSourceRequest]DataSourceRequest request)
{
    var data = DS.ToDataSourceResult(request);
    return Json(data);
}

and reference these namespaces:

using Kendo.Mvc.Extensions;
using Kendo.Mvc.UI;

1b) requires Grid column templates.

If you need to define column templates, you will need both server and client templates, as the Grid uses both types of data binding. The server templates will be used on initial page load, while client templates will be used for subsequent data operations (paging, sorting, etc).

My recommendation is to go through our offline ASP.NET MVC demos (including all client and server-bound hierarchy examples) and inspect their views and controllers. We provide even more ASP.NET MVC Grid demos here:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid

All the articles in the MVC Grid section also provide valuable information:

http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/grid/overview

Regards,
Dimo
Telerik

[Vadim]

Dimo

You misinterpreted my question.

My question was as specific as it gets: having server templates, is it possible to sort,group,page the grid without reloading the browser page.

We are NOT considering client templates as a viable option.  But we cannot reload the entire browser page on each grid update either.

Please respond to my prior question as it was describing the evaluated capabilities (using razor for all templates) in the described scenario (sort, group, expand, page grid without reloading the browser page).  This is pretty much YES/NO question: is it possible to use your toolset to accomplish the required capabilities to achieve the intended behavior or not.

Please do not take another 48 hours for responding to this simple question, which I am discussing with you for last week, since we need to complete the evaluation of your product and move on to other options if your toolset does not support what we need to build as part of our project.

Thank you for fast and specific answer.

[Dimo]

Hi Vadim,

Server templates work for server-side binding only. Sorting, paging and other data operations, which do not refresh the whole page, require client-side data-binding. Client-side data-binding requires client-side templates.

Regards,
Dimo
Telerik