How to group the columns if the column type is object in kendo grid

[Devineni]

Hi..

Im using kendo ui grid with row filtering and inline edit. im using cache mechanisam where i will be having reference data and binding data to grid,

  $scope.kendoParse = (result) => {
                var data = [];
                var results = result.results;
                for (var i = 0; i < results.length; i++) {
                    var activity = {
                        id: results[i].id,
                        name: results[i].name,
                        description: results[i].description,
                        departmentId: results[i].department,
                        activityCategoryId: results[i].activityCategory,
                        createdDate: results[i].createdDate ,
                        createDate: results[i].createDate,
                        createdBy: results[i].createdBy
                    };
                    data.push(activity);
                }
                return { "results": data, "totalResults": result.totalResults };

            };​

and im binding columns type as object. below is the code that im using to bind columns to grid

   kendoProperties.addColumnConfiguration({ type: "string", field: "name", title: "Name", filterable: { operators: { string: { contains: "Contains", startswith: "Starts With", eq: "Is Equal To" } } } });
            kendoProperties.addColumnConfiguration({ type: "string", field: "description", title: "Description", template: "#= (description == null) ? '-NA-' : description #", filterable: { operators: { string: { contains: "Contains", startswith: "Starts With", eq: "Is Equal To" } } } });
            kendoProperties.addColumnConfiguration({
                type: "object", field: "departmentId", title: "Departmets", template: "#= departmentId.name #",
                editor: departmentEditor, filterable: { cell: { template: departmentFilter, showOperators: true } }
            });
            kendoProperties.addColumnConfiguration({
                type: "object", field: "activityCategoryId", title: "Category", template: "#= activityCategoryId.name #",
                editor: activityEditor, filterable: { cell: { template: categoryFilter, showOperators: true } }
            });
            kendoProperties.addColumnConfiguration({
                type: "date", field: "createdDate", title: "Created Date", template: "#= (createdDate == null) ? '-NA-' : kendo.toString(kendo.parseDate(createdDate, 'yyyy-MM-dd'), 'yyyy-MM-dd') #",
                filterable: { cell: { operator: "EQUALS" } }
            });
            kendoProperties.addColumnConfiguration({
                type: "",
                field: undefined, command: [{ name: "edit", template: "<div class='kendo-grid-editbtn k-button'><span class='k-icon k-edit'></span></div>" },
                    { template: "<button class=\"rec-btn grid-action-btn tooltipstyle action- gird - btn\" data-toggle=\"tooltip\" data-placement=\"bottom\" ng-click=\"deleteEntity(dataItem.id)\"><i class=\"settinggrid fa fa-trash-o\"></i></button>" }],
                title: "Actions"
            });
where ever im using column type object grouping is not working for those column.

kindly help to solve the issue,

Thank you in advance.

[Nikolay Rusev]

Hello Devineni,

 

Grouping as well as any other data operation cannot be applied on object. The field to which is applied must be one of the supported JavaScript types, i.e string, number, date.

 

In order to group on nested field you must configure column field properly. Here is a quick example of this - http://dojo.telerik.com/uZoqU

 

Regards,
Nikolay Rusev
Telerik

 

 

[Devineni]

Hi..

Thank you for u r answer..

I have some questions,

What is the type of field in the explained example and in my case field name is string which is not available in cache object.how i can solve this issue.

Thank you in advance

[Devineni]

Hi..

Here is the example i created  http://dojo.telerik.com/EZiRa

I'm not able to send the selected departmentId to back end while updating.if i make department id as string,to solve tat issue i'm binding departmentId as object,so that i m able to access complete department object and sending data to back end,now update functinality is working fine but not grouping,

 here is the code for update button click

 

   $scope.updateActivity = (options) => {
                $scope.activity.id = options.data.id;
                $scope.activity.createdDate = $filter("date")(new Date(options.data.createdDate), "yyyy-MM-dd");
                $scope.activity.departmentId = options.data.departmentId.id;
                $scope.activity.activityCategoryId = options.data.activityCategoryId.id;
                $scope.activity.name = options.data.name;
                $scope.activity.description = options.data.description;
                $scope.activity.createDate = options.data.createDate;
                $scope.activity.createdBy = options.data.createdBy;
                activityFacade.activityApi.update($scope.activity, options.data.id).then((data) => {
                    activityFacade.toastr.success("Activity Update Successfully", " ", {
                        closeButton: true,
                        positionClass: "toast-top-right",
                        timeOut: 3000
                    });
                    $scope.activities.dataSource.read();
                });
            };

is there any other approach to make both update and grouping work.

kindly help to resolve isuue,

thanks in advance

 ​

 

[Nikolay Rusev]

Hello Devineni,

 

In order to have grouping working the field for the column should be `departmentId.name`, but the editor `data-bind="value:'` should point to `departmentId`field (which I assume as object).

 

I've updated the example in order to show one way to achieve this, without hard-coding editor values.

 

Example - http://dojo.telerik.com/@rusev/EcOwo

 

Regards,
Nikolay Rusev
Telerik