Mapping Array of Array in Grid Column

6 posts, 0 answers
  1. Muhammad Fiqih
    Muhammad Fiqih avatar
    13 posts
    Member since:
    Nov 2017

    Posted 21 May 2018 Link to this post

    Hello, 

    I have a case with kendo grid, can i mapping array of array in kendo grid column?

    Thank you

     

    *image capture.png for UI and image capture1.png for data

  2. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 23 May 2018 Link to this post

    Hello, Muhammad,

    Thank you for the details.

    Could you please share with us how the data has to be displayed?

    Is all of the data in the parameter field has to be displayed in one column or multiple columns?

    If it has to be shown in one column a recursion can be used inside the template function to extract all of the records:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/configuration/columns.template

    If they have to be shown in different columns we can recommend flattening the data structure as for example if every item in the upper array has to be a column, one array can have 2 items and the next may have 10, the Grid cannot determine the number of columns based on the items in the array.

    I will be expecting more details and I will gladly assist further with this scenario.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Muhammad Fiqih
    Muhammad Fiqih avatar
    13 posts
    Member since:
    Nov 2017

    Posted 23 May 2018 in reply to Stefan Link to this post

    Hello, Stefan,

    No, only the data with the parameters 'dealer name' and 'dealer code' will be displayed with one column as in the picture that I previously shared.

    My problem is I want to display the data in the 'parameters' list in the multi column with the 'plan' and 'actual' objects that exist on the object 'target Dealer'

     

    Thank you for your attention

    sorry for my bad english

  4. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 24 May 2018 Link to this post

    Hello, Muhammad,

    Thank you for the details.

    The values could be mapped based on the array index, but this will require knowing how many items can be present in the array:

    https://dojo.telerik.com/AloSUJiq

    The other option will be using the schema.parse property and programmatically flattening the data:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema#schema.parse

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Muhammad Fiqih
    Muhammad Fiqih avatar
    13 posts
    Member since:
    Nov 2017

    Posted 24 May 2018 in reply to Stefan Link to this post

    Dear, Stefan

    Thank you for the answer, of this case and i want to ask you about set data type in multi column header.
    In my grid, i set data type 'number', but when i want to edit the data, the data type is still 'string'. I set data type like this :

    {

                title: "Retail Sales Total 1",
                columns: [{
                  title: "Actual",
                  field: "parameter[0].targetDealer.actual",
                  width: 80,
                  type: 'number'
                }, {
                  title: "Plan",
                  field: "parameter[0].targetDealer.plan",
                  editable: function () {
                    return false;
                  },
                  width: 80,
                  type: 'number'
                }]
    }

     

    Thank you

  6. Stefan
    Admin
    Stefan avatar
    3034 posts

    Posted 25 May 2018 Link to this post

    Hello, Muhammad,

    This could usually be done using the schema.model but in this case, the data does not have expected structure:

    https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema#schema.model

    Please have in mind that if the data structure is not flattened, the editing, filtering, and the sorting may not work as expected because these operations only work with the flat data structure.

    I do understand that this will require a lot of additional work, but it could save a large amount of time once the Grid starts to become more complex.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top