grid cancel event

4 posts, 0 answers
  1. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 14 Nov 2017 Link to this post

    Hi,

    I have client template in some column that generate pie chart of doughnut on databinding event, everything is working well, but when I click on the edit button of each row and after I click on the cancel button then the pie chart is disappeared.

    so I try to generate one more time in cancellation event and it also not good because the cancellation event is still not come to his end.

    so I need event the happens after cancellation event come to his end? is some event like that exist?

    someone can help me?

    here is my grid and js:

    @(Html.Kendo().Grid<TaskManagementUI.Models.TaskViewModel>()
              .Name("GridTasks")
              .Columns(columns =>
              {
                  columns.Bound(c => c.ID).Hidden();
                  columns.Bound(c => c.ProjectID).Title("Project Id").Hidden();
                  columns.Bound(c => c.ProjectName).Title("Project Name").Hidden();
                  columns.Bound(c => c.Name).Title("Name");
                  columns.Bound(c=>c.DevelopersNames).ClientTemplate("#=DevelopersTemplate(DevelopersDataSource)#").EditorTemplateName("DevelopersEditor").Title("Developers").Sortable(false).Filterable(f => f.UI("developersMultiFilter")
                      .Mode(GridFilterMode.Row)
                      .Extra(false)
                     .Operators(operators => operators
                        .ForString(str => str.Clear()
                             .IsEqualTo("Is equal to"))))/*.Filterable(e => e.Enabled(false)).Sortable(false)*/;
                  columns.Bound(c => c.ActualStartDate).Title("Actual Start Date").EditorTemplateName("ActualStartDateEditor").Format("{0: MM/dd/yyyy}");
                  columns.Bound(c => c.ActualEndDate).Title("Actual End Date").EditorTemplateName("ActualEndDateEditor").Format("{0: MM/dd/yyyy}");
                  columns.Bound(c => c.EstimatedStartDate).Title("Estimated Start Date").EditorTemplateName("EstimatedStartDateEditor").Format("{0: MM/dd/yyyy}");
                  columns.Bound(c => c.EstimatedEndDate).Title("Estimated End Date").EditorTemplateName("EstimatedEndDateEditor").Format("{0: MM/dd/yyyy}");
                  columns.Bound(c => c.PercentCompleted).Title("Percent Completed").Width(130).ClientTemplate("<canvas id='chart_#=ID #' width='94' height='94' style='display: block; width: 94px; height: 94px;'></canvas>").EditorTemplateName("PercentCompletedEditor");
                  /*.ClientTemplate("#=kendo.format('{0:p2}', PercentCompleted / 100)#")*/;
                  columns.Bound(c => c.Comment).Title("Comment");
                  columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);

              })
               .Scrollable(x => x.Virtual(true))
               .Resizable(resize => resize.Columns(true))
               .Editable(editable => editable.Mode(GridEditMode.InLine))
               .Groupable(g => g.Enabled(false))
               .Filterable()
               .ToolBar(toolbar =>
               {
                   toolbar.Template(@<text>
            <div class="toolbar" style="float:left">
                <a class="k-button k-button-icontext" onclick='addTaskAjax()' href="#">
                    <span class="k-icon k-i-add"></span> ADD TASK
                </a>
           
                <a class="k-button k-grid-excel k-button-icontext" href="#">
                    <span class="k-icon k-i-excel"></span>Export to Excel
                </a>

            </div>
                </text>);
               })
               .Excel(excel => excel
                              .AllPages(true)
                              .FileName("Tasks.xlsx")
                              .Filterable(true)
                              .ForceProxy(true)
                              .ProxyURL(Url.Action("FileExportSave", "Home")))
              .Pageable(pager => pager
                                .Refresh(true)
                                .PageSizes(true)
                                .PageSizes(new int[] { 6, 15, 20 })
                                .ButtonCount(5))
              .Sortable(sortable =>
              {
                  sortable.SortMode(GridSortMode.MultipleColumn)
                 .Enabled(true);
              })
              .Events(events => events.DataBound("onDataBoundSavedTasks").Cancel("createPieAfterCancellation"))
              .DataSource(dataSource => dataSource
                                       .Ajax()
                                       .Group(group => group.Add(p => p.ProjectName))
                                       .PageSize(20)
                                       .Events(events => events.Error("errorHandlerTask"))
                                       .Read(read => read.Action("GetSavedTasks", "Task"))
                                       .Update(update => update.Action("UpdateTask", "Task"))
                                       .Destroy(update => update.Action("DeleteTask", "Task"))
                                       .Model(model => model.Id(item => item.ID))))

     

    js code:

     

     

    function createSinglePie(chart, grid) {
        var tr = chart.closest('tr');
        var model = grid.dataItem(tr);

        var config = {
            type: 'doughnut',
            data: {
                datasets: [
                    {
                        data: [
                            model.PercentCompleted,
                            100 - model.PercentCompleted
                        ],
                        backgroundColor: [
                            "rgb(92, 184, 92)",
                            "rgb(217, 83, 79)"
                        ],
                        hoverBackgroundColor: [
                            "rgb(113, 186, 113)", "rgb(214, 114, 111)"
                        ],
                        borderWidth: 0
                    }
                ],
                labels: [
                    "Completed",
                    "Not Completed"
                ]
            },
            options: {
                segmentShowStroke: false,
                responsive: true,
                legend: {
                    display: false
                },
                animation: {
                    animateScale: true,
                    animateRotate: true
                },
                tooltips: {
                    mode: 'label',
                    backgroundColor: "rgba(0,0,0,0.5)",
                    bodyFontSize: 10,
                    yPadding: 5,
                    xPadding: 5,
                    bodySpacing: 5,
                    cornerRadius: 2,
                    callbacks: {
                        label: function (tooltipItem, data) {
                            var labels = ["completed", "uncompleted"];
                            var val = data.datasets[0].data[tooltipItem.index];
                            var title = " " + val + "%" + "\n" + labels[tooltipItem.index];
                            return title;
                        }
                    }

                }

            }
        }

        var ctx = document.getElementById(chart.id).getContext("2d");
        window[chart.id] = new Chart(ctx, config);
    }
    function createPie(gridSelector) {
        debugger;
        var grid = $(gridSelector).getKendoGrid();
        $(gridSelector).find("[id^='chart']").each(function () {
            createSinglePie(this, grid);
        });

     

  2. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 16 Nov 2017 Link to this post

    Hello, Michael,

    Thank you for the details.

    The described result is expected because the cancel event is preventable.

    In general, in order to execute a code inside a preventable event and to ensure that it will be called after the event, the code should be executed inside a setTimeout() method.

    Please try executing the code inside setTimeout and advise if the issue still occurs.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Michael
    Michael avatar
    50 posts
    Member since:
    May 2014

    Posted 27 Nov 2017 Link to this post

    Hi, this helped me a lot.

    if  I click on edit button and then click on edit button on another row the prev row is cancel by itself.

    how can I catch this event or cancel this case?

    thank you

  4. Stefan
    Admin
    Stefan avatar
    2491 posts

    Posted 29 Nov 2017 Link to this post

    Hello, Michael,

    I'm glad to hear that the previous reply was helpful.

    I can suggest a custom approached with flags to determine if the record is canceled or updated before going to another row and prevent it. The main idea is that if an item is not saved or canceled this means that it is still in edit.

    I made a Dojo example demonstrating this. Please have in mind that it may require additional logic to keep the flags in the expected state:

    https://dojo.telerik.com/ECUyoH/2

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-save

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-cancel

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-editRow

    As the request is a valid one I will forward this to the developers' team to advise if this scenario can fire the cancel event as well.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top