Grid sorting / Filtering - doesn't work

19 posts, 1 answers
  1. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 11 Jul 2012 Link to this post

    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.

     

     

     

     

     

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 11 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 12 Jul 2012 Link to this post

    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!


  5. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 12 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 12 Jul 2012 Link to this post

    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!
  7. Answer
    Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 12 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. AP
    AP avatar
    187 posts
    Member since:
    Apr 2010

    Posted 12 Jul 2012 Link to this post

    Thanks, I'll try that.
  9. zenit1
    zenit1 avatar
    12 posts
    Member since:
    Jun 2008

    Posted 19 Jul 2012 Link to this post

    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
  10. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 19 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. zenit1
    zenit1 avatar
    12 posts
    Member since:
    Jun 2008

    Posted 19 Jul 2012 Link to this post

    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("");
  12. Scott
    Scott avatar
    15 posts
    Member since:
    Aug 2012

    Posted 24 Jul 2012 Link to this post

    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
  13. Mike
    Mike avatar
    4 posts
    Member since:
    Mar 2008

    Posted 01 Aug 2012 Link to this post

    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.
  14. Stewart
    Stewart avatar
    2 posts
    Member since:
    Jan 2011

    Posted 03 Aug 2012 Link to this post

    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.

  15. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 06 Aug 2012 Link to this post

    Hi Stewart,

     You probably have jQuery included twice.

    All the best,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  16. Stewart
    Stewart avatar
    2 posts
    Member since:
    Jan 2011

    Posted 06 Aug 2012 Link to this post

    Yep, you're right, that solved it.
  17. Angelo
    Angelo avatar
    3 posts
    Member since:
    Feb 2009

    Posted 24 Oct 2012 Link to this post

    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 :)
  18. Erik
    Erik avatar
    43 posts
    Member since:
    Jan 2011

    Posted 27 Nov 2012 Link to this post

    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.
  19. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 28 Nov 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  20. Erik
    Erik avatar
    43 posts
    Member since:
    Jan 2011

    Posted 28 Nov 2012 Link to this post

    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);
            }
Back to Top
UI for ASP.NET MVC is VS 2017 Ready