Hidden Custom command reappears after click Cancel in popup editor

[Paul]

I have a grid with a custom command and a client-side function specified for the grid's DataBound event. In the DataBound function, I hide the custom command on rows where a particular column has a certain value. My code is successfully showing the custom button only on the appropriate rows when the grid is displayed. I've also specified a custom popup editor for the grid.
Skeleton of the grid code is:

@(Html.Kendo().Grid<Models.Task>()
            .Name("gridTask")
            .Columns(columns =>
                    {
                        columns.Bound(task => task.Name);
                        columns.Bound(task => task.TaskStatus);
                        columns.Command(cmd =>
                        {
                            cmd.Edit();
                            cmd.Custom("Show Survey").Click("ShowSurvey");
                        });
                    })
                .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(10)
                    .ServerOperation(false)
                .Model(model => model.Id(m => m.Task_ID))
                .Read(read => read.Action("ReadTask", "TaskPartial"))
                .Update(update => update.Action("UpdateTask", "TaskPartial"))
                .Create(update => update.Action("CreateTask", "TaskPartial"))
            )
             .Events(e =>
             {
                 e.Cancel("EditCancel");
                 e.DataBound("TaskDataBound");
             })
            .Pageable()
            .Sortable()
            .Editable(ed => {
                ed.Mode(GridEditMode.PopUp);
                ed.TemplateName("TaskEditor");
                ed.Window(win => win.Title("Task Editor"));
            })
)

And the DataBound function is:

function TaskDataBound(e) {
        // Check the Show Survey button in each task row. Remove the button if the row has a certain value.
        $("[id^='gridTask'] tbody tr .k-grid-ShowSurvey").each(function () {
            var currentDataItem = $("[id^='gridTask']").data("kendoGrid").dataItem($(this).closest("tr"));
            //Check the current dataItem to see if the button should be removed
            if (currentDataItem.testValue == 0) {
                $(this).remove();
            }
        })
    }

Now suppose I click Edit on a row which does not show the custom button, and the edits I make do not effect the column determining the visibility of the custom button. When I click Update in the popup editor, the screen is updated as expected. The popup goes away, the updated data is shown, and the grid row still does not show the button.

However, when I click Cancel in the popup editor, the popup goes away but the custom command incorrectly reappears on the grid row, even though the column determining the visibility of the custom command hasn't changed. Why is the custom command mistakenly re-appearing? 

I've tried specifying a client-side function for the Cancel event as follows to remove the custom button upon the cancel. Even though I've traced the code to confirm my cancel function is called and the remove() command is hit and executed, the Custom button still comes back.

 function EditCancel(e) {
        // Check the Show Survey button in each task row. Remove the button if the row has a certain value.
        $("[id^='gridTask'] tbody tr").each(function () {
            var currentDataItem = $("[id^='gridtask']").data("kendoGrid").dataItem($(this));
            //Check the current dataItem to see if the button should be removed
            if (currentDataItem.testValue == 0) {

                $(this).find(".k-grid-ShowSurvey").remove();
            }
        })
    }

[Dimiter Madjarov]

Hello Paul,

I covered the question in the support thread on the same topic. I would recommend to wrap the logic in the cancel event in a setTimeout call.

Regards,
Dimiter Madjarov
Telerik

[Veena]

HI Dimiter,

I have the same issue. Can you please post the solution here to. I have a grid with some custom command buttons and edit. I am hiding one of the custom command button based on a condition on databind. When I click edit and update the hidden button was showing up so I manually did the hide the button on gridsave event to. When I click edit and cancel the hidden button is showing up so I have add the gridcancel event and added the same code but it is not working on GridCancel Event. Everything is working fine, it is going to gridcancel event and I can get the custom command button but when I try to hide the button it is not hiding.

 

  @(Html.Kendo().Grid<ViewModels.Payment.ProviderServiceRRViewModel>()
                .Name("PRRServiceGrid")
                .Columns(columns =>
                {
                    columns.Bound(p => p.Id).Hidden(true);
                    columns.Bound(p => p.IsEbsOnly).Hidden(true);
                    columns.Bound(p => p.BtnComamnd).Hidden(true);
                    columns.Bound(p => p.ReduceUnitsPrrId).Hidden(true);
                    columns.Bound(p => p.ServiceName);
                    columns.Bound(p => p.BHFormType);
                    columns.Bound(p => p.HeldUnits);
                    columns.Bound(p => p.ReduceUnits);
                    columns.Command(command =>
                    {
                        command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });
                        command.Custom("Remove").SendDataKeys(true).Click("removePRRServiceGridClick").Text("Remove").HtmlAttributes(new { @class = "k-button k-grid-remove k-primary", title = "Remove" });
                        command.Custom("BHForm").SendDataKeys(true).Click("bhFormPRRServiceGridClick").Text("BH Form").HtmlAttributes(new { @class = "k-button k-grid-add k-primary", title = "BH Form" });
                    }).Width(270);
                })
                .Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
                .Sortable()
                .Selectable()
                .Events(e => e.DataBound("onPRRServiceGridDataBound"))
                .Events(e => e.Edit("onPRRServiceGridEdit"))
                .Events(e => e.Save("onPRRServiceGridSave"))
                .Events(e => e.Cancel("onPRRServiceGridCancel"))
                .Resizable(resize => resize.Columns(true))
                        .DataSource(dataSource => dataSource.Ajax().ServerOperation(false).PageSize(5).Read(read => read.Action("PrrServiceGridRead", "ReimbursementRequestProvider"))
                .Model(model =>
                {
                    model.Id(p => p.Id); model.Field(p => p.Id).Editable(false); model.Field(p => p.ServiceName).Editable(false);  model.Field(p => p.BHFormType).Editable(false); model.Field(p => p.HeldUnits).Editable(false);
                })
                .Update(update => update.Action("Update_PrrServiceGrid", "ReimbursementRequest"))
                ))



function onPRRServiceGridDataBound(e) {
        var grid = this;
            if (grid != null && grid != "" && typeof grid != 'undefined') {
                var gridData = grid.dataSource.view();


                for (var i = 0; i < gridData.length; i++) {
                    var currentUid = gridData[i].uid;
                    var currenRow = grid.table.find("tr[data-uid='" + currentUid + "']");

                    if (gridData[i].BHFormType == null) {
                        var bhFormButton = $(currenRow).find(".k-grid-add");
                        bhFormButton.hide();
                    }

                    if (gridData[i].IsEbsOnly == false && gridData[i].BHFormType != null) {
                        var currenRowEbs = grid.table.find("tr[data-uid='" + currentUid + "']");
                        var editButton = $(currenRowEbs).find(".k-grid-edit");
                        editButton.hide();
                    }

                }
            }

    }


// this is working fine
  function onPRRServiceGridSave(e) {
        var bhFormButtonSA = $(e.container).find(".k-grid-add");
        bhFormButtonSA.hide();
    }


// this is not working.
    function onPRRServiceGridCancel(e) {
        alert("In");                     // getting this alert
        var bhFormButtonCancel = $(e.container).find(".k-grid-add");
        alert(bhFormButtonCancel);       // getting this object too
        bhFormButtonCancel.hide();       // button is not hiding
    }

.

[Dimiter Madjarov]

Hello Veena,

We would recommend to execute the hiding logic inside a setTimeout call.
E.g.

function onCancel(e) {
    setTimeout(function(){
        //hide button
    });
}

Regards,
Dimiter Madjarov
Telerik

[Veena]

Hi Dimiter,

I have tried the approach you mentioned but still it is showing up the hidden button. I tried keeping some seconds on timeout too but still it is not working. It is showing all the button on that row when binding back. 

As a work around, I am refreshing the grid on cancel event but it is an extra server call. Is there any other option here for me to skip the extra server call.

One small thing, I know it is out of the topic but I have searched for it and couldn't find it. what is the difference between grid refresh and grid read. Internally it seems like it works the same. When to use which. It seems sometimes refresh doesn't work so i always go for read. Is there really any difference?

Thanks,

Veena

[Dimiter Madjarov]

Hello Veena,

The read method of the dataSource will trigger a request to the remote service, while the refresh method of the Grid will only trigger re-rendering of the table rows, using the current data items.

Regarding the custom command question, if the problem is still persisting, I would suggest to open a support ticket and send us a runnable example, that demonstrates the issue.

Regards,
Dimiter Madjarov
Telerik

[Stacy]

This is still an issue in 2017.2.621. In additional if any icons are adding to the button in a onRowBound function they are dropped when the cancel action occurs.

function onRowBound(e) {
        e.sender.tbody.find(".k-grid-Enable").prepend("<span class='k-icon k-i-check k-i-checkmark'></span>");
        e.sender.tbody.find(".k-grid-Disable").prepend("<span class='k-icon k-i-close k-i-x'></span>");
        e.sender.tbody.find(".k-grid-AddView").prepend("<span class='k-icon k-i-plus'></span>");

}

[Georgi]

Hi Stacy,

The described behavior is expected since when canceling changes the grid is not rebound but refreshed. This means that the databinding mechanism is not executed.

With that said, in order to apply the logic from databinding events, it has to be added to the cancel event as well.

Remember to wrap the logic in the cancel event  in a setTimeout because it is fired when the cancel button is clicked and the grid is not refreshed yet.


Regards,
Georgi
Progress Telerik