Grid Incorrectly Keeps Groupable Clue Visible After Grouping

7 posts, 0 answers
  1. Brian
    Brian avatar
    45 posts
    Member since:
    Aug 2013

    Posted 05 Jan Link to this post

    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.)
  2.
  3. Georgi Denchev
    Admin
    Georgi Denchev avatar
    86 posts

    Posted 08 Jan Link to this post

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

  5. Brian
    Brian avatar
    45 posts
    Member since:
    Aug 2013

    Posted 11 Jan in reply to Georgi Denchev Link to this post

    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.}
  7. Brian
    Brian avatar
    45 posts
    Member since:
    Aug 2013

    Posted 11 Jan in reply to Brian Link to this post

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

     

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

     

     

  8.
  9. Brian
    Brian avatar
    45 posts
    Member since:
    Aug 2013

    Posted 11 Jan in reply to Brian Link to this post

    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
  11. Brian
    Brian avatar
    45 posts
    Member since:
    Aug 2013

    Posted 11 Jan in reply to Brian Link to this post

    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!

  13. Georgi Denchev
    Admin
    Georgi Denchev avatar
    86 posts

    Posted 12 Jan Link to this post

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

  14.
Back to Top