Hidden Custom command reappears after click Cancel in popup editor

6 posts, 0 answers
  1. Paul
    Paul avatar
    1 posts
    Member since:
    Nov 2014

    Posted 06 Apr Link to this post

    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();
                }
            })
        }

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 08 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Veena
    Veena avatar
    14 posts
    Member since:
    Oct 2015

    Posted 26 Apr Link to this post

    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
        }

    .

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 28 Apr Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Veena
    Veena avatar
    14 posts
    Member since:
    Oct 2015

    Posted 03 May Link to this post

    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

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2159 posts

    Posted 04 May Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET MVC is VS 2017 Ready