CODEWITHSUNDEEP
kendo-uikendo-grid
Sohan Bajpayee
Sohan Bajpayee

Reputation: 21

Kendo Grouping Not Working

I have a kendo grid and i have grouping enabled in it. The problem is that sometimes the grouping does not work.

It shows a circle with disabled notation in the top.

Below is my grid code:

$("#divGrid").kendoGrid({
        dataSource: {
            transport: {
                read: function (options) {
                    var webMethod = "Portal.aspx/DisplayNotes";
                    $.ajax({
                        type: "POST",
                        url: webMethod,
                        data: displayParams,
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (result) {
                            options.success(result.d);
                        }
                    })
                }
            },
            schema: {
                model: {
                    id: "ID",
                    fields: {
                        ID: { editable: false, nullable: true },
                        IsDeleted: { type: "boolean" },
                        Text: { type: "string" },
                        CreatedByDisplayName: { type: "string" },
                        CreatedDateTime: { type: "date" },
                        Order: { type: "number" },
                        PermissionType: { type: "string" },
                        LastEditedByUserGUID: { type: "string" },
                        GUID: { type: "string", validation: { required: true } },
                    }
                }
            },
            pageSize: 5
        },
        dataBound: onDataBound,
        batch: true,
        edit: function (e) {
            // To stop the Auto Refresh of the grid on edit
            isEditing = true;
        },
        groupable: true,
        scrollable: true,
        sortable: true,
        reorderable: true,
        toolbar: "<div><img id='imgExportDoc' style='margin-left:15px' onclick='ExportData(1);' title='Export in Word Format' src='images/doc-Icon.png'/><img id='imgExportExcel' onclick='ExportData(2);' style='margin-left:15px' title='Export in Excel Format' src='images/xls-Icon.png'/><img id='imgExportPDF' style='margin-left:15px' onclick='ExportData(3);' title='Export in PDF Format' src='images/pdf_icon.jpg'/></div>",
        resizable: true,
        selectable: "row",
        autoSync: true,
        editable: true,// "inline",
        navigatable: true,
        columnMenu: true,
        pageable: {
            refresh: true,
            pageSizes: true,
            buttonCount: 5
        },
        columns: [
        {
            field: "ID", width: width0, title: "Note ID", template: function (dataItem) {
                if (typeof dataItem.Id != "string") {
                    return "<a target=\"_blank\" href=\"http://www.google.com\">" + dataItem.ID + "</a>";
                } else {
                    return dataItem.ID;
                }
            }
        },
        { field: "IsDeleted", width: width1, title: "IsDeleted" },
        { field: "Text", title: "Note Text", width: width2 },
        { field: "CreatedDateTime", title: "Created Datetime", width: width3 },
        { field: "Order", title: "Order", width: "140px", width: width4 },
        { field: "PermissionType", title: "Permission Type", width: width5 },
        { field: "LastEditedByUserGUID", title: "Last Edited By", editor: ddlSimpleEditor, width: width6 },
        { command: { text: "Delete", click: deleteNoteData }, title: "Delete", width: width7, menu: false },
        { field: "GUID", hidden: true, title: "Hidden", menu: false, width: width8 }]
        , filterable: true,
        columnMenu: {
            sortable: false
        }
    });

What could be a possible reason.

Also want to know how to set the height of a kendo grid dynamically.

Upvotes: 2

Views: 1378

Answers (2)

user3040830
user3040830

Reputation:

I got the problem actually you are not destroying the grid properly before rebinding it:

Below is the code piece for proper destroying:

var grid = $("#YourGridName").data("kendoGrid");
        if (grid) {

            //destroy the previous Grid instance
            grid.destroy();

            //clean up the html
            grid.wrapper.html("");
        }

Hope this helps.

Upvotes: 1

user3040830
user3040830

Reputation:

Hi below is the code for the dynamic height:

//Below code is for defining the height of the grid
    $(".k-grid-content").height('400');

And just refer to the latest Kendo UI assemblies and your grouping problem will be removed.

Upvotes: 1

Related Questions