Hi, I use a kendo grid helper in MVC, and use locked columns.

when the grid is displayed, the div containing the locked columns hight is too small, and I have a white box at the bottom, not seeing my last row.

Can anyone tell me what I am doing wrong?

 I pasted the result of my grid here: http://dojo.telerik.com/Onod/8

Here is the source code

@(Html.Kendo.Grid(Model.Analyses).
Name("grilleCumulatifLabo").
Columns(Sub(columns)
columns.Bound(Function(x) x.AfficherGraphique).
ClientTemplate("<input class='chkGraphique' type=#= ContientResultatNumeriques ? 'checkbox': 'hidden' # #= AfficherGraphique ? checked='checked':'' # />").
Title("").Width(25).Locked()
columns.Bound(Function(x) x.Libelle).Title("Analyse").Width(250).Locked().
TronquerSansInfobulle(Function(y) y.Libelle).
InfobulleHtml(Function(y) y.Libelle).
HtmlAttributes(New With {.class = "tronquer-texte"})
columns.Bound(Function(x) x.ValeurReference).Title("Valeurs de<br />référence").Width(100).Locked().
HtmlAttributes(New With {.Class = "centrer"}).
Hidden(Not Model.ContientUnitesDifferentes)
columns.Bound(Function(x) x.Unite).Title("Unités").Width(100).Locked().
HtmlAttributes(New With {.Class = "centrer"}).
Hidden(Not Model.ContientUnitesDifferentes)
If Model.Analyses.Any Then
For Each resultat In Model.Analyses.Item(0).Resultats
Dim index = Model.Analyses.Item(0).Resultats.IndexOf(resultat)
columns.Bound(Function(x) x.Resultats.Item(index).Descripteur.DescriptionCourte).
ClientTemplate("<span class='#= Resultats[" & index & "].Descripteur.ClasseStyle #'>#=Resultats[" & index & "].Descripteur.DescriptionCourte #</span>").
InfobulleHtml(Function(x) x.Resultats.Item(index).InfoBulleHtml).
InfobulleEnteteHtml(Model.Analyses.Item(0).Resultats.Item(index).NomLaboratoire).
Title(CStr(index + 1) & "<br />" & resultat.DateCollecteFormatee & "<br />" & resultat.HeureCollecteFormatee).
Width(resultat.Descripteur.Largeur).
HtmlAttributes(New With {.Class = "resultatAnalyse"})
Next
End If
End Sub).
DataSource(Sub(x) x.Ajax.
ServerOperation(False).
Group(Function(group) group.Add(Function(analyse) analyse.Chapitre)).
Sort(Function(sort) sort.Add(Function(analyse) analyse.Rang))).
Scrollable(Function(s) s.Height("100%")).
Deferred()
)

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