Custom Command Icon Disappears

3 posts, 1 answers
  1. Joe
    Joe avatar
    173 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:

        .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
            .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 =>
        .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();
        if (filter) {
            var filteredMembers = {};
            setFilteredMembers(filter, filteredMembers);
            this.thead.find("th[data-field]").each(function () {
                var cell = $(this);
                var filtered = filteredMembers["field")];
                if (filtered) {
        // adding icons to custom command buttons
        var span = "<span class='k-icon k-i-reorder'></span>";


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


  2. Answer
    Orlin avatar
    51 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) {;

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

    I hope this helps.

    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
    173 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.
Back to Top