This is a migrated thread and some comments may be shown as answers.

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

4 Answers 350 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Devineni
Top achievements
Rank 1
Devineni asked on 30 Sep 2015, 12:38 PM
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.

4 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 02 Oct 2015, 12:14 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Devineni
Top achievements
Rank 1
answered on 05 Oct 2015, 09:36 AM
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
0
Devineni
Top achievements
Rank 1
answered on 05 Oct 2015, 10:34 AM

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

 ​

 

0
Nikolay Rusev
Telerik team
answered on 07 Oct 2015, 08:35 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Devineni
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Devineni
Top achievements
Rank 1
Share this question
or