Custom Command Icon Disappears

[Joe]

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.

 

[Orlin]

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

[Joe]

Thank you, that was exactly the issue, and solution.

[Roelande]

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");

[Joe]

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

 

[Joe]

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

[Orlin]

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

Regards,
Orlin
Progress Telerik

[Manish]

You saved the day for me. I couldn't believe adding icon to custom command is so convoluted. Kendo needs to offer a better solution.around