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

Grid Incorrectly Keeps Groupable Clue Visible After Grouping

6 Answers 71 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brian
Top achievements
Rank 2
Iron
Brian asked on 05 Jan 2021, 04:55 PM

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.)

6 Answers, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 08 Jan 2021, 11:35 AM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
Brian
Top achievements
Rank 2
Iron
answered on 11 Jan 2021, 03:58 PM

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.}
0
Brian
Top achievements
Rank 2
Iron
answered on 11 Jan 2021, 04:00 PM

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

 

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

 

 

0
Brian
Top achievements
Rank 2
Iron
answered on 11 Jan 2021, 04:12 PM

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
0
Brian
Top achievements
Rank 2
Iron
answered on 11 Jan 2021, 04:32 PM

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!

0
Georgi Denchev
Telerik team
answered on 12 Jan 2021, 12:58 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Brian
Top achievements
Rank 2
Iron
Answers by
Georgi Denchev
Telerik team
Brian
Top achievements
Rank 2
Iron
Share this question
or