Custom Command Icon Disappears

7 posts, 1 answers
  1. Joe
    Joe avatar
    184 posts
    Member since:
    May 2012

    Posted 25 Jul Link to this post

    I have a grid where I created a Custom button on it, alongside an Edit button.  I also have a wee bit of javascript that adds an icon to it.  When the grid first displays, the icon is there.  But when I click the Edit button (and after the edit popup closes), the custom icon is no longer there.  Any ideas?

     

    Here is my grid code:

    @(Html.Kendo().Grid<ClientWithAdminFee>()
        .Name("clientList")
        .AutoBind(false)
        .Resizable(r => r.Columns(true))
        .Columns(col =>
        {
            col.Bound(c => c.ClientId);
            col.Bound(c => c.ClientName).Width(900);
            col.Bound(c => c.Status);
            col.Bound(c => c.AdminFee).Title("Active Admin Fee").HtmlAttributes(new {style = "text-align:right; padding-right: 3px"}).Format("{0:n2} %");
            col.Bound(c => c.EffectiveFrom).HtmlAttributes(new {style = "text-align:right; padding-right: 3px"}).Format("{0:d}");
            col.Command(c => c.Edit());
            col.Command(c => c.Custom("History").Click("showHistory"));
        })
        .Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("AdminFeeEdit").Window(w => w.Width(525)))
        .DataSource(ds => ds
            .Ajax()
            .Model(m =>
            {
                m.Id(d => d.ID);
                m.Field(d => d.ClientId);
                m.Field(d => d.ClientName);
                m.Field(d => d.Status);
                m.Field(d => d.AdminFee);
                m.Field(d => d.EffectiveFrom);
                m.Field(d => d.EffectiveTo);
            })
            .Filter(f => f.Add(a => a.Status).IsEqualTo("A"))
            .Read(r => r.Action("GetClientsForAgent", "MGABilling").Data("additionalData").Type(HttpVerbs.Get))
            .Update(u => u.Action("SaveAdminFee", "MGABilling"))
            .Events(e => e.RequestEnd("refreshGrid"))
        )
        .Events(e =>
        {
            e.DataBound("gridBound");
            e.Edit("centerWindow");
        })
        .ToolBar(tb => tb.Template(@<div style="float: right;"><label>Only Active Clients:</label><input type="checkbox" id="chkStatus" checked/></div>))
    )

     

    The javascript that adds the icon is part of the DataBound Event:

    function gridBound(e) {
        var filter = this.dataSource.filter();
        this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active");
        if (filter) {
            var filteredMembers = {};
            setFilteredMembers(filter, filteredMembers);
            this.thead.find("th[data-field]").each(function () {
                var cell = $(this);
                var filtered = filteredMembers[cell.data("field")];
                if (filtered) {
                    cell.find(".k-header-column-menu").addClass("k-state-active");
                }
            });
        }
     
        // adding icons to custom command buttons
        var span = "<span class='k-icon k-i-reorder'></span>";
        e.sender.tbody.find(".k-grid-History").prepend(span);
    }

     

    It's the bottom 2 lines that add the icon.

     

  2. Answer
    Orlin
    Admin
    Orlin avatar
    58 posts

    Posted 27 Jul Link to this post

    Hello Joe,

    I assume you are losing the icon when canceling out of the popup, and not on Update. When updating, the Grid’s dataBound event is fired and the function adding the icon to the custom command button is executed.

    The reason why the icon is lost on Cancel is that the buttons are being redrawn when the popup is closed but the function adding the icon is not called. So one way to re-add the icon on cancel is to add the following to your code:

    .Events(e => { e.DataBound("gridBound"); e.Cancel("gridCancel"); })

    This calls a function named gridCancel on the Grid's Cancel event which looks like this:
    function gridCancel(e) {
        e.sender.dataSource.read();
    }

    This makes the Grid re-read the dataSource data and the dataBound event is fired.

    I hope this helps.

    Regards,
    Orlin
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Joe
    Joe avatar
    184 posts
    Member since:
    May 2012

    Posted 27 Jul in reply to Orlin Link to this post

    Thank you, that was exactly the issue, and solution.
  4. Roelande
    Roelande avatar
    48 posts
    Member since:
    May 2006

    Posted 29 Aug Link to this post

    You can also just use the text parameter to add the icon.

    This way you don't need to add the icon with jquery and you don't have to refresh your grid every time you cancel.

    col.Command(c => c.Custom("History").Click("showHistory")).Text($"<span class='k-icon k-i-reorder'></span> History");
  5. Joe
    Joe avatar
    184 posts
    Member since:
    May 2012

    Posted 29 Aug in reply to Roelande Link to this post

    There is no Text() method

    SeverityCodeDescriptionProjectFileLineSuppression State
    ErrorCS1061'GridActionColumnBuilder' does not contain a definition for 'Text' and no extension method 'Text' accepting a first argument of type 'GridActionColumnBuilder' could be found (are you missing a using directive or an assembly reference?)Vensure.BillingC:\DEVTEST\Vensure.Billing\Vensure.Billing\Views\MGABilling\ManageRates.cshtml81Active

     

  6. Joe
    Joe avatar
    184 posts
    Member since:
    May 2012

    Posted 29 Aug in reply to Joe Link to this post

    My bad, I had copied it exactly as you had it, but there's a parenthesis off in yours...   Thanks for this, testing it now...
  7. Orlin
    Admin
    Orlin avatar
    58 posts

    Posted 30 Aug Link to this post

    The Text method way works as well. Thanks for bringing up the alternative, Roeland.

    Regards,
    Orlin
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top