Mapping Array of Array in Grid Column

[Muhammad Fiqih]

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

[Stefan]

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

[Muhammad Fiqih]

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

[Stefan]

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

[Muhammad Fiqih]

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

[Stefan]

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