Grid Incorrectly Keeps Groupable Clue Visible After Grouping

[Brian]

Hi,

 

After grouping my grid, the clue stays visible erroneously after grouping is complete.  See attached image for details.  I've tried removing it through JavaScript but then the grouping stops working after that.  This doesn't seem like standard behavior.  Thoughts?  Thanks!

01.@(Html.Kendo().Grid(Model.ServiceRequests)
02.    .Name("grid")
03.    .Columns(columns => {
04.        columns.Bound(c => c.Number).Filterable(false)
05.            .ClientFooterTemplate("Count: #=count#");
06.        columns.Bound(c => c.Type).Filterable(f => f.Multi(true));
07.        columns.Bound(c => c.RequestTitle).Filterable(false);
08.        columns.Bound(c => c.Requester).Filterable(f => f.Multi(true));
09.        columns.Bound(c => c.Priority).Filterable(f => f.Multi(true));
10.        columns.Bound(c => c.Status).Filterable(f => f.Multi(true));
11.        columns.Bound(c => c.EstimatedHours).Filterable(false);
12.    })
13.    .Resizable(r => r.Columns(true))
14.    .Reorderable(r => r.Columns(true))
15.    .Groupable(g => g.ShowFooter(false))
16.    .Sortable()
17.    .Filterable()
18.    .Selectable()
19.    .ToolBar(tools => tools.Excel())
20.    .Excel(excel => excel
21.        .FileName("ADEV - In Queue.xlsx")
22.        .Filterable(true)
23.        .ProxyURL(Url.Action("Export", "InQueue", new { Area = "Views" })))
24.    .Events(events =>
25.    {
26.        events.DataBound("onDataBound");
27.        events.Change("onChange");
28.    })
29.    .DataSource(dataSource => dataSource
30.        .Ajax()
31.        .Aggregates(aggregates =>
32.        {
33.            aggregates.Add(c => c.Number).Count();
34.        })
35.        .ServerOperation(false)
36.    )
37.)

[Georgi Denchev]

Hello Brian,

Thank you for the provided code snippet and screenshot.

The configuration of the grid looks good to me, I attempted to replicate the faulty behavior but to no success. Would it be possible for you to provide a small sample that reproduces the issue so I can examine it locally? Are there any errors in the Dev console?

I am looking forward to your reply.

Best Regards,
Georgi Denchev
Progress Telerik

[Brian]

Hi Georgi,

I've isolated the issue to the grid event 'onDataBound'.  I am using the following code to conditionally highlight cells on binding.  When this code is active, the error occurs.  When it is disabled, the error disappears.  Thoughts?

01.function onDataBound(e) {
02.    var columnIndex = this.wrapper.find(".k-grid-header [data-field=" + "Priority" + "]").index();
03.
04.    var dataItems = e.sender.dataSource.view();
05.    for (var j = 0; j < dataItems.length; j++) {
06.        var priority = dataItems[j].get("Priority");
07.
08.        var row = e.sender.tbody.find("[data-uid='" + dataItems[j].uid + "']");
09.        if (priority === "Emergency") {
10.            $(row[0].children[columnIndex]).addClass("emergency");
11.        }
12.        if (priority === "High") {
13.            $(row[0].children[columnIndex]).addClass("high");
14.        }
15.        if (priority === "Medium") {
16.            $(row[0].children[columnIndex]).addClass("medium");
17.        }
18.        if (priority === "Low") {
19.            $(row[0].children[columnIndex]).addClass("low");
20.        }
21.    }
22.}

[Brian]

In fact, I've isolated it to this line:

 

var priority = dataItems[j].get("Priority");

 

 

[Brian]

My console error is:

inqueue.js:10 Uncaught TypeError: dataItems[j].get is not a function
    at init.onDataBound (inqueue.js:10)
    at init.trigger (kendo.core.js:322)
    at init.refresh (kendo.grid.js:10928)
    at init.proxy (jquery.js:10771)
    at init.trigger (kendo.core.js:322)
    at init.query (kendo.data.js:4207)
    at init._query (kendo.data.js:4627)
    at init.group (kendo.data.js:4742)
    at init._change (kendo.groupable.js:426)
    at init.drop (kendo.groupable.js:193)
onDataBound @ inqueue.js:10
trigger @ kendo.core.js:322
refresh @ kendo.grid.js:10928
proxy @ jquery.js:10771
trigger @ kendo.core.js:322
query @ kendo.data.js:4207
_query @ kendo.data.js:4627
group @ kendo.data.js:4742
_change @ kendo.groupable.js:426
drop @ kendo.groupable.js:193
trigger @ kendo.core.js:322
_trigger @ kendo.draganddrop.js:633
_drop @ kendo.draganddrop.js:653
eval @ kendo.draganddrop.js:997
_withDropTarget @ kendo.draganddrop.js:1074
_end @ kendo.draganddrop.js:995
proxy @ jquery.js:10771
trigger @ kendo.core.js:322
notify @ kendo.userevents.js:548
_trigger @ kendo.userevents.js:379
end @ kendo.userevents.js:320
_eachTouch @ kendo.userevents.js:695
_end @ kendo.userevents.js:645
args.<computed> @ kendo.core.js:3838
dispatch @ jquery.js:5429
elemData.handle @ jquery.js:5233

[Brian]

I fixed it with this.

 

01.function onDataBound(e) {
02.    var data = e.sender.dataSource.data();
03.
04.    $.each(data,
05.        function (_i, row) {
06.            search(row, 'low');
07.            search(row, 'medium');
08.            search(row, 'high');
09.            search(row, 'emergency');
10.        });
11.}
12.
13.function search(row, text) {
14.    var row = $("tr[data-uid=" + row.uid + "]");
15.    row.find('td').each(function () {
16.        $(this).filter(function () {
17.            return $(this).text().toLowerCase() == text;
18.        }).addClass(text);
19.    });
20.}

 

Not the most elegant but it works.

Thanks!

[Georgi Denchev]

Hi Brian,

I am glad you managed to resolve the issue and thank you for sharing the solution!

Just as a follow up, the reason the error occurs is because the dataSource view is in different format when you apply grouping.

If you want to use the original approach, you can access the Priority like so:

    function onBound(e) {
        var dataItems = e.sender.dataSource.view();

        for (var i = 0; i < dataItems.length; i++) {
            let dataItem = dataItems[i];

            if (dataItem.field) {
                dataItem = dataItem.items[0];
            }

            let priority = dataItem.get("Priority"));
        }
    }

Best Regards,
Georgi Denchev
Progress Telerik