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);
});
3 Answers, 1 is accepted
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
Rank 1
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
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