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

I have a grid with a filter row in the top. When zooming in, borders disappear. 

I could also repro it with your own demos of the combobox: http://demos.telerik.com/kendo-ui/combobox/index. When I zoom in to 90%, I see a missing top border for t-shirt size (see attached). When I zoom in further other borders disappear and appear.

I use Chrome Version 62.0.3202.94

Hello.

How can I use WebComponentsIcons.eot as webresource for example in microsoft CRM. When I add WebComponentsIcons.ttf to CRM as webresource and use kendo ui editor in a form of CRM, fiddler returns code 500 : WebComponentsIcons.ttf?gedxeo - undefined parameter gedxeo.

Thanks

hi all, 

    First of all thanks for implementing Grid checkbox selection feature. we were using it as a custom feature for quite some time with the help of events like databound, click events.

   After i have seen this feature is implemented, i tried to use this as poc in my existing project but failed as this feature is not helpful in cases where i have multi level grids (one main grid & grids inside detail template). It is working fine except check all in header. When i click check all in detail grid it effects in main grid.

 when I further analysed, i came to see that the all the header check all in that page is having same id (kendo guid) from the kendo default template. As a workaround i used the same template as header template explicitly. I hope this would be helpful for you.

Bug Dojo :

http://dojo.telerik.com/orEhu/9

Workaround Dojo :

http://dojo.telerik.com/orEhu/15 

Hi , 

    I am working with Kendo UI version 2017.3.913 for Jquery and using kendoUpload widget,the issue I am encountering is whenever I am selecting a file/files from explorer window which opens after clicking "Select file",the "input" DOM element of kendoUpload is created again and hence I am having multiple duplicated DOM "Input" elements with same id/name,hence is causing the issues with desired functionality of the project as I want to register a click handler on the kendoUpload widget.I am using the widget inside a window.Overall issue is very similar to the existing thread : http://www.telerik.com/forums/one-file-selection-causes-multiple-instances-are-created ,one difference being in my case the Input DOM element is getting created multiple times on the UI/Client side only,but the call of uploading documents is going exactly once(which is expected and right behaviour). 

   HTML:

 <form enctype="multipart/form-data" id='_duFrmdocForm_' action='uploadDoc' method='POST'    enctype="multipart/form-data">

<span>
         <div style="display: none">
                <input id="_ignore" name="_Ignore" />
         </div>
        </span> <span>
        <div style="display: none">
              <input id="action" name="Action" />
        </div>
       </span> <span>
       <div style="display: none">
            <input id ="data" name="Data" />
      </div>
 </span>

 <input id="duFiles" name="files[]" type="file" aria-label="files" />

</form>

   Initialization code : 

  $('#duFiles').kendoUpload({
   async : {
   "saveUrl" : "uploadDoc",
   "autoUpload" : false,
   "batch" : true
   },
   upload : function(e) {
      var data = {}; 
      var payloadData = {
         "test" : "abc"
      };
      $('#data')).val(JSON.stringify(payloadData));
      var form = $('#duFrmdocForm')).serializeArray();

      $.each(form, function() {
         data[this.name] = this.value;
     });

     e.data = data;
  }
});

Hi,

  In Kendo Scheduler I need to add colour to the slots based on the start and End date 
(i.e.) If startdate is Monday 10AM and EndDate is Tuesday 12PM means inbetween the slots are need to fill with yellow colour refer to not available period.

The start and End days are dynamically changed based on that the slots colour are need to change. 
currently I am using the following code to colored but it take long time to process. It took each slot one by one by.

I need based on start and End date, the in between slots are need to colored in a single shot itself, it should not loop for each and every slots in the table.

view.table.find("td[role=gridcell]").each(function () {
if ($(this) != null) {
var selectSlot = $(this)
var slot = scheduler.slotByElement(selectSlot);
/Comparing the start and Endate  and coloured
if ((slot.startdate >= startdate) && (slot.enddate <= enddate) //dummy conditions
selectSlot.addClass("slot-selected");
}
});