Grid sorting / Filtering - doesn't work

[AP]

I'm trying to recreate a data grid that I've got working with the old MVC extensions, with the Kendo UI MVC extensions, but the documentation is virtually non-existent. Looking at the example, I've managed to get data into a grid, but it doesn't sort or filter (I'm not sure about apging, as there's only a few records at present.

The view is:-

@(Html.Kendo().Grid<PLCV2.Models.PLCVUser>() 

    .Name("Grid")

    .Columns(columns =>

    {

        columns.Bound(p => p.UserName);

        columns.Bound(p => p.FullName);

        columns.Bound(p => p.SystemAdmin);

        columns.Bound(p => p.SystemUser);

    })

    .Pageable()

    .Sortable()

    .Scrollable()

    .Filterable()

    .DataSource(dataSource => dataSource

        .Ajax()

        .Read(read => read.Action("AjaxBinding", "UserMgmt"))

    )

)

and the controller is:-

public ActionResult AjaxBinding([DataSourceRequest] DataSourceRequest request)

       {

 

           Models.PLCVdBDataContext db = new Models.PLCVdBDataContext();

           var query = from p in db.PLCVUsers

                       select p;

           //query = query.OrderByDescending(c => c.UserName);

           return Json(query.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);

       }

 

How do I enable sorting and filtering?
Also, I had to add the AllowGet JsonRequestBehaviour, to get the grid to work. Your examples don't seem to require this - how?

Where is the documentation for the MVC extensions? I can only find a very brief (and very lacking!) migration overview, which fails to mention many of the server-side changes (no GridAction, the new DataSourceRequest etc..).

I'm keen to try out the new extensions, but without more documentation, it doesn't seem feasible.

 

 

 

 

 

[Atanas Korchev]

Hello,

 The documentation can be found here: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/introduction 


 Your code looks correct. Could you please clarify what do you mean by "sorting and filtering does not work"? Do you see a JavaScript error? What happens when you click on a column header? Did you check the developer console of your browser?

Kind regards,
Atanas Korchev
the Telerik team

[AP]

I mean that when a grid header is clicked, an ajax request is fired, the headers sort indicator changes, but the sort order of the data remains the same.

In fiddler, the request being fired is:- http://localhost:50793/UserMgmt/AjaxBinding?take=10&skip=0&page=1&pageSize=10&sort%5B0%5D%5Bfield%5D=UserName&sort%5B0%5D%5Bdir%5D=asc but no sort is taking place.

Again, filtering behaves the same way, the filter options are displayed, an ajax request is fired, but the data remains the same. An error seems to be generated when the filter (which isn't applied) is cleared, it generates the 'Object reference not set to an instance of an object.' error.

However, paging does seem to work.

The link you have posted is not to documentation, but just a brief guide, which hardlytouches the surface - it doesn't give details of the server side changes at all - a fairly major omission!

[Atanas Korchev]

Hello Andrew,

 The documentation of the Kendo Grid for ASP.NET MVC can be found here: http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/overview 

 I am afraid I cannot reproduce the behavior you are seeing. I have created a sample project for you which shows a working implementation. What is different in your case?

Regards,
Atanas Korchev
the Telerik team

[AP]

Thanks for your help.

I finally found the cause - I had referenced the DataViz scripts as well.

<link href="@Url.Content("~/Content/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" />

<script src="@Url.Content("~/Scripts/kendo.dataviz.min.js")"></script>

After removing these, the grid functioned as expected.

Aren't the UI and data Viz components compatible?

Thanks for the documentation link - I'll bookmark it!

[Atanas Korchev]

Hi Andrew,

 The Web and DataViz components are compatible. You however need to include kendo.all.min.js instead of kendo.web.min.js and kendo.dataviz.min.js if you want to use both. We will update the documentation to reflect that.

Regards,
Atanas Korchev
the Telerik team

[AP]

Thanks, I'll try that.

[zenit1]

Hi, Atanas

I observe the similar problem:
Here is View part

@(Html.Kendo().Grid<PersonToken>()

      .Name("Grid")

      .Columns(columns =>

      {

          columns.Bound(o => o.FirstName);

          columns.Bound(o => o.LastName);         

          columns.Bound(o => o.IsActive);

      })

      .Pageable()

      .Sortable()

      .Filterable()

    .DataSource(dataSource => dataSource.Ajax()

                                        .Model(model => model.Id(p => p.PersonId))

                                        .Read(read => read.Action("ReadPersons", "Person"))

                )

)

Here controller

public ActionResult ReadPersons([DataSourceRequest] DataSourceRequest request)

       {

           var list = PersonLibRepository.All();

 

           return Json(list.ToDataSourceResult(request),JsonRequestBehavior.AllowGet);

       }

In debug mode I see what Sorts and Filters equals NULL , whenever in firebug on client side I see all requested parameters(filters/sorts) correctly. Please see attached screen shots.

The same problem I receive also on Server binding like :

@model IEnumerable<PersonToken>

 

@(Html.Kendo().Grid(Model)   

    .Name("person-report-grid")   

    .Columns(columns => {       

        columns.Bound(p => p.FirstName);

        columns.Bound(p => p.LastName);

        columns.Bound(p => p.IsActive);

        columns.Bound(p => p.Contact.Email);

        columns.Bound(p => p.Contact.Phone);

        columns.Bound(p => p.Contact.CellPhone);

        columns.Template(

                            @<text>

                                @Html.ActionLink("Edit", "PersonManage", new BaseToken {name = String.Format("{0} {1}",@item.FirstName,@item.LastName), id = @item.PersonId }, new { @class = "k-button" })

                             </text>

                        );      

                           

    })

    .ToolBar(toolbar => toolbar.Custom().Action("PersonManage", "Person", new BaseToken{ name = string.Empty,id = Guid.NewGuid() }).Text("Add new person"))   

    .Sortable()

    .Filterable()   

    .DataSource(dataSource => dataSource.Server().Model(model => model.Id(p => p.PersonId)))

    )

 

public ActionResult Persons([DataSourceRequest] DataSourceRequest request)

        {

            var list = PersonLibRepository.All();

            return View(list);

        }

Where I'm wrong ?

Please help

Best Regards

Serge

[Atanas Korchev]

Hi Serge,

 Can you confirm that you have included kendo.aspnetmvc.min.js as outlined in the documentation?

All the best,
Atanas Korchev
the Telerik team

[zenit1]

Atanas, thanks a lot. 

I very confused , but i forgot to add it. Now It's work.

On the way:

I prefer to use Ajax binding. But I need OnCreate/Update redirect it to other page.

I read , what column template works only on Server binding.

Exists , some other ways to solve a problem (Server bind grid from my code example)

Thanks again and nice day

Serge

P.S. I solved it in following way : 

columns.Bound(m => m.PersonId).ClientTemplate("<a href='Redirect2PersonManage/#=PersonId#?name=#=FirstName + ' ' + LastName#' class='k-button' >Edit</a>").Title("");

[Scott]

Hi,

I had the same problem as a few other people. The DataSourceRequest object was coming through with a NULL Sorts collection and the AJAX request was a GET instead of a POST.

The culprit for me was the order of my script includes. You MUST include the kendo.web.min.js file BEFORE the kendo.aspnetmvc.min.js for it to work correctly. Otherwise you will get a javascript error on page load saying "TypeError c is undefined" and the error stating that you must set the JsonRequestBehavior to AllowGet.

I was using the new BundleConfig in MVC 4 and simply adding a script include for "~/Scripts/kendo*". The * was adding the scripts in alphabetic order, which in this scenario was wrong. Just something else to watch out for with MVC 4.

Scott McNeany

[Mike]

The documentation should also be updated to note that including kendo.all.min.js is not enough to get filtering to work in MVC if you are using DataSourceRequest. You also need to include kendo.aspnetmvc.min.js - which is not entirely obvious if you are using kendo.all.min.js. Otherwise, the filters come in as null.

[Stewart]

I think i have the same problem as the previous two posters.

No matter what i do i can't get the Ajax updating to work properly.  I have this error in my console

Uncaught TypeError: Object [object Object] has no method 'kendoGrid'  

my bundle set up looks like this:
bundles.Add(new ScriptBundle("~/bundles/kendo").Include("~/Scripts/Kendo/jquery.min.js",
    "~/Scripts/Kendo/kendo.web.min.js",
    "~/Scripts/Kendo/kendo.aspnetmvc.min.js"
));

The gird displays, but does not load any data, but is styled correctly.

if i use it without ajax i still get this uncaught type error, but i can sort and load data just fine.

[Atanas Korchev]

Hi Stewart,

 You probably have jQuery included twice.

All the best,
Atanas Korchev
the Telerik team

[Stewart]

Yep, you're right, that solved it.

[Angelo]

After racking my brain around I figured out that I was declaring jquery twice (The default MVC4 templates adds jquery script at the end of the document.

Remove this line:
        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)

And the ajax will start working again :)

[Erik]

I am new to this, and am having a similar problem described in this post, but don't think the resolution will be the same.

I am using ASP.Net MVC 4 with Razor, and have used NuGet to update all standard packages that are included in a new MVC 4 project (this includes jQuery).  I used NuGet to install KendoUI.

The data loads into the view just fine. But whenever I try a sort or filter, the results are unchanged. I would *like* for all of this to be done client-side (I get the data for the list when the page is loaded and would prefer not going back to the database at all).  But if I need to go round-trips on these things, it's fine.  I can keep the data in the controller if it needs to go back there. 

I have already checked for multiple jquery refs -- don't have them.  I have also checked for the aspnetmvc js file in the kendo folder -- it doesn't exist.  I'm guessing it's been deprecated?

Here is the code in my _layout.cshtml to include the necessary scripts (I'm not including any twice):

<script src="@Url.Content("~/Scripts/jquery-1.8.3.min.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/modernizr-2.6.2.js")" type="text/javascript"></script>

<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")" type="text/javascript"></script>

@Styles.Render("~/Content/css")

@Scripts.Render("~/bundles/modernizr")

<!-- BEGIN Telerik Kendo UI stuff -->

<link href="~/Content/kendo/2012.3.1114/kendo.common.min.css" rel="stylesheet" type="text/css" />

<link href="~/Content/kendo/2012.3.1114/kendo.default.min.css" rel="stylesheet" type="text/css" />

<script src="~/Scripts/kendo/2012.3.1114/kendo.web.min.js" type="text/javascript"></script>

<!-- END Telerik Kendo UI stuff -->

Here is my code for the view:

@(Html.Kendo().Grid(Model)   

    .Name("Grid")

    .Columns(columns =>

    {

        columns.Bound(p => p.MigrationId).Groupable(false);

        columns.Bound(p => p.DestCd);

        columns.Bound(p => p.PropertyNo);

        columns.Bound(p => p.SupplierId);

        columns.Bound(p => p.UserNm);

        columns.Bound(p => p.Status);

    })

    .Groupable()   

    .Sortable()

    .Scrollable()

    .Filterable()

    .DataSource(dataSource => dataSource       

        .Ajax()       

        .Read(read => read.Action("History", "Grid"))

     )

 

)

Here is my controller code:

public ActionResult History()

        {

            //var migList = GetHistoryList();

            var beginDt = DateTime.Now.AddDays(-10);

            return View(new dbSdkEntities(Helper.SdkConnection).PropertyMigrations.Where(a => a.BeginDs > beginDt));

        }

I am probably missing something simple, but I can't see what it is.  Any help is appreciated.

[Atanas Korchev]

Hello Erik,

 Your action method is hot properly configured for ajax binding. Please refer to the ajax binding help article.

Greetings,
Atanas Korchev
the Telerik team

[Erik]

Thanks Atanas!  Your AjaxBinding link was exactly what I needed.  My controller now has two methods as shown below.  A key point for me is that the "History" method could return a view without the list of data -- that is retrieved by the GetHistory method.  Don't want to hit the DB twice!  :)

Thanks again!

public ActionResult History()

        {           

            return View(); // don't need to get data here -- we do that with the Json GetHistory method below.

        }

 

        public ActionResult GetHistory([DataSourceRequest]DataSourceRequest request)

        {       

            var beginDt = DateTime.Now.AddDays(-10);

            var migList = new dbSdkEntities(Helper.SdkConnection).PropertyMigrations.Where(a => a.BeginDs > beginDt);

            var result = migList.ToDataSourceResult(request);

 

            return Json(result, JsonRequestBehavior.AllowGet);

        }