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

Custom Command Icon Disappears

7 Answers 477 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 1
Joe asked on 25 Jul 2017, 07:04 PM

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.

 

7 Answers, 1 is accepted

Sort by
0
Accepted
Orlin
Telerik team
answered on 27 Jul 2017, 09:00 AM

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.
0
Joe
Top achievements
Rank 1
answered on 27 Jul 2017, 02:04 PM
Thank you, that was exactly the issue, and solution.
0
Roelande
Top achievements
Rank 1
answered on 29 Aug 2017, 08:27 AM

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");
0
Joe
Top achievements
Rank 1
answered on 29 Aug 2017, 02:20 PM

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

 

0
Joe
Top achievements
Rank 1
answered on 29 Aug 2017, 02:24 PM
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...
0
Orlin
Telerik team
answered on 30 Aug 2017, 12:51 PM
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.
0
Manish
Top achievements
Rank 1
answered on 25 Jul 2019, 07:48 PM
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 
Tags
Grid
Asked by
Joe
Top achievements
Rank 1
Answers by
Orlin
Telerik team
Joe
Top achievements
Rank 1
Roelande
Top achievements
Rank 1
Manish
Top achievements
Rank 1
Share this question
or