DataSource Remote Grouping

13 posts, 0 answers
  1. Brian
    Brian avatar
    1 posts
    Member since:
    Sep 2011

    Posted 30 Sep 2011 Link to this post

    Hello all,

    I had a quick question. 

    I have been looking at Kendo for a couple of days now, and am really impressed. Everything is smooth and works quite well.

    My question is: To support remote grouping on a datasource, what gets sent to the server when someone changes the grouping (Meaning query parameters), and how is the data expected to come back to the data source (JSON in my case)?
  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 03 Oct 2011 Link to this post

    Hello Brian,

    By default, params which will be passed, will be the dataSource's sort/filter/group descriptors and paging information if such are set. However you may use transport's dialect to pass a custom function which can be use to serialize those descriptors to a custom format. 

    new kendo.data.DataSource({
        type: "json" ,  
        transport: {
            read: "Products/Select",
            dialect: function(params) {           
                return mySerializeParamsFunction(params); //return an object containing the new name/value params to be send to the server
            }
        }  
    });

    The format which DataSource requires the grouped items to be in is similar to the following:

    {
      field: "ProductID", //name of the field on which data is grouped
      value: "Product1", // value of the current group
      items: [item1, item2, item3] // items
      hasSubgroups: false, // there are multiple nested groups and items collection contains groups instead of the actual items
      aggregates: []
    }

    In case your server returns data in a different format, schema object's group function can be use to transform the data.

    new kendo.data.DataSource({
        transport: {
            read: "Products/Select"       
        },
        schema: {
            group: function(data) {
                return myMapGroupsFunction(data);
                // return array of object in the following format:
                //{
                //  field: "ProductID", //name of the field on which data is grouped
                //  value: "Product1", // value of the current group
                //  items: [item1, item2, item3] // items
                //  hasSubgroups: false, // there are multiple nested groups and items collection contains groups instead of the actual items
                //  aggregates: []
                //}
            }
        }   
    }).read();

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Ryan
    Ryan avatar
    5 posts
    Member since:
    Sep 2010

    Posted 10 Dec 2011 Link to this post

    I'm trying to set up remote grouping and am not having much success.  My datasource looks like this:

    var dataSource = new kendo.data.DataSource({
        serverPaging: true,
        serverSorting: true,
        serverFiltering: true,
        serverGrouping: true,
        pageSize: 20,
        transport: {
            read: {
                type: 'get',
                dataType: 'json',
                url: url
            }
        },
        schema: {
            group: 'group',
            data: 'data',
            total: 'total',
            model: {
                id: 'EmployeeId',
                fields: {
                    FirstName: { type: 'string' },
                    LastName: { type: 'string' },
                    Email: { type: 'string' }
                }
            }
        }
    });

    My group object contains aggregates, field, hasSubgroups, and items is a list of Employees (Email, EmployeeId, FirstName, and LastName).  Where might I be going wrong?  I can't seem to find a good example of remote grouping anywhere.  Thanks.
  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 12 Dec 2011 Link to this post

    Hi Ryan,

    Could you please provide a bit more information about the exact issue you are facing with the remote grouping? Also you could show the data format return from the server.

    All the best,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Ryan
    Ryan avatar
    5 posts
    Member since:
    Sep 2010

    Posted 12 Dec 2011 Link to this post

    I attached an image of the json data from fiddler.  With this dataset, I get a grid that shows the "data" object, but there is no grouping.  After looking at some of the telerik examples, I am assuming my data object should contain my group object.
  7. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 13 Dec 2011 Link to this post

    Hi Ryan,

    Could you change the schema to be groups instead of group and see if this makes any difference in the observed behavior.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  8. Ryan
    Ryan avatar
    5 posts
    Member since:
    Sep 2010

    Posted 13 Dec 2011 Link to this post

    Yes!  I see a slight change in behavior, but the grid still turns up empty on grouping.  This is the change in behavior I'm seeing:

    If I have this:

    group: 'asdfasdf'

    no error is thrown.  If I have this: 

    groups: 'asdfasdf'
     
    I receive a javascript error.  With this:

    groups: 'group'

    I don't get an error when grouping by first name.  Just an empty grid.  I'm not sure if it will help, but this is the way I'm building my json object in C#.

    Controller:
    public ActionResult List(KendoRequest request)
    {
        var employees = _repository.GetAllEmployees(request);
     
        employees.group.field = "FirstName";
        employees.group.aggregates = new string[] { };
        employees.group.hasSubgroups = false;
        employees.group.items = employees.data;
        employees.group.value = "First Name";
     
        return Json(employees, JsonRequestBehavior.AllowGet);
    }

    Model:
    public class KendoGrid<T>
    {
        private KendoGroup<T> _group;
     
        public T[] data { get; set; }
        public int total { get; set; }
        public KendoGroup<T> group
        {
            get
            {
                return _group ?? (_group = new KendoGroup<T>());
            }
            set
            {
                _group = value;
            }
        }
    }
     
    public class KendoGroup<T>
    {
        public string field { get; set; }
        public string value { get; set; }
        public T[] items { get; set; }
        public bool hasSubgroups { get; set; }
        public string[] aggregates { get; set; }
    }
  9. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 14 Dec 2011 Link to this post

    Hi Ryan,

    The group property of the response should be an array. It should contain the grouped data, thus a separate entry for each unique value should be present. For example:

    {
     groups: [
        {
        field = "FirstName",
            aggregates = {},
            hasSubgroups = false,
            items = [ { FirstName = "First Name", LastName = "Last Name 1" },
              { FirstName = "First Name", LastName = "Last Name 2" }],
            value = "First Name"
            },
            {
        field = "FirstName",
            aggregates = {},
            hasSubgroups = false,
            items = [ { FirstName = "First Name 2", LastName = "Last Name 3" },
              { FirstName = "First Name 2", LastName = "Last Name 4" }],
            value = "First Name 2"
            }]
    }


    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. Stef Heyenrath
    Stef Heyenrath avatar
    14 posts
    Member since:
    Dec 2009

    Posted 31 Oct 2012 Link to this post

    1)
    When doing server side grouping, the JSON data should be returned to client as you describe, correct ? The Grid on the client will not do any processing of the data ?


    2)
    What should be the content for the aggregates field ?
    For example I've defined this on the datasource:
     group: {
                     field: "First",
                     aggregates: [
                         {
                             field: "NumberOfEmployees",
                             aggregate: "count"
                         }
                     ]
                 }

    And the post request is posted to the server as:
    take    4
    skip    0
    page    1
    pageSize    4
    group[0][field]    First
    group[0][dir]    asc
    group[0][aggregates][0][field]    NumberOfEmployees
    group[0][aggregates][0][aggregate]    count

    should the JSON result contain text below?
    "aggregates": { "NumberOfEmployees": { "count": 2 } }

    Please advice.
  11. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 01 Nov 2012 Link to this post

    Hello Stef,

    - Indeed, if server operation are enabled the DataSource will not process the data itself but will expect the already processed data from the server.
    - Information of the required format of the grouped result can be found here.
    - The format in which the operation descriptors are send to the server can be customized using the transport's parameterMap function.

    Regards,
    Rosen
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  12. Joseph
    Joseph avatar
    6 posts
    Member since:
    Jan 2016

    Posted 26 Jan Link to this post

    I am new and also very impressed with the Grid.  It was a lot of work...but I created a JSFiddle here showing the GRID I created to assist with this question.

     https://jsfiddle.net/x11joex11/zz3jfp20/15/

     

    How do I get this to work with server grouping, server filtering, server sorting and server aggregates?

     

    For example what is a sample JSON I can give to the 'read' datasource on the jsfiddle I have so that it will load the table with all the features I mentioned above.  For example...

     I have a database called Company, it has 4fields, id, company name, phone, and email

    Many companies might share the same email, so an example of grouping by email and using the aggregate count would be nice to see how that looks as a JSON response.

     Any help is much appreciated!

  13. Joseph
    Joseph avatar
    6 posts
    Member since:
    Jan 2016

    Posted 26 Jan in reply to Joseph Link to this post

    I also created a stack overflow showing the issue in more detail.

     

    http://stackoverflow.com/questions/35006484/kendo-ui-json-response-for-grid-using-remote-data-source-w-server-grouping

  14. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 28 Jan Link to this post

    Hello Joseph,

     

    The format of the response expected by the DataSource when remote grouping is set is described in the documentation here. A simple implementation of server operations are demonstrated in Kendo UI PHP wrappers sample application which is accompanying the distribution. You could take a look and use it as a base for your own implementation.

     

    Regards,
    Rosen
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready