Tips/Tricks about KENDO

1) KENDO GRID: At anygiven time, if you want to access the edited or added data (before reload of grid/save)

var editableModel = $('#myGrid').data().kendoGrid.editable.options.model;

2) KENDO GRID: If you would like to update one of the property value manually for recent edited record in grid then

var editableModel = $('#myGrid').data().kendoGrid.editable.options.model;
editableModel.set("dobDate", '05/31/1983');

3) MONTH PICKER: Implementing month picker with Kendo. This would work with Grid Edit Pop also.

<input id="dobDate" type="date" class="input" name="dobDate" data-bind="value: dobDate" />
$(document).ready(function () {

start: "year",
depth: "year",
format: "MMMM yyyy",
parseFormats: ["MMMM yyyy"]


Month Picker cannot be achieved with Model binder as there is a known bug. The only available is the above

4) KENDO GRID: Format/Parse the date column (bound column)

columns.Bound(m =&amp;gt; m.DobDate).Width(50).Title("Dob Date").ClientTemplate("#= DobDate &amp;lt; 1/1/1900 ? '' : &nbsp; kendo.format('{0:MMMM yyyy}', DobDate) #")

5) KENDO DATE PICKER: Disable the control by editing it

<input id=”dobDate” type=”date” class=”input” name=”dobDate” onkeydown=”return false;”  data-bind=”value: dobDate” />

6) KENDO FILTER OPERATORS: Below are the few filter operators

  filter.push({ field: "IsNew", operator: "eq", value: 1 });



 .HtmlAttributes(new { style = "width: 100%", @readonly="readonly" }))



var myDate= $("#myDate").data("kendoDatePicker"); 


8) NUMERIC TEXTBOX: Don’t allow decimal value and don’t allow negative value (define min value)

a) format allows you to ignore/avoid entering decimal value

b) min allows you to set the min value to zero

$("#Hours").kendoNumericTextBox({ decimals: 0, format: "#", min: 0 });

9) HIDE/SHOW KENDO DROPDOWNLIST: Below is the syntax to hide/show kendo dropdownlist




10) Kendo Grid Filter Configuration : For a Kendo Grid, if you would like to customize the filter menu below is how you can do

    .Filterable(f => f.Operators(o => o.ForString(s => s
        .DoesNotContain("Does not contain")
        .EndsWith("Ends with")
// other configuration goes

If you would like to customize to a specific column then you would do same above filter configuration to a column rather than entire grid

    .Columns(columns =>
              columns.Bound(m => m.UserName)
              .Filterable(f => f.Operators(o =>
              o.ForString(s => s.Clear().Contains("Contains")
              .DoesNotContain("Does not contain")
              .EndsWith("Ends with")


11) Kendo Grid Clear Selected Row :

            var grid = $("#myGrid").data("kendoGrid");

Happy Koooding…..  Hope this helps!….

Parse Date string using Kendo in Javascript

If your date is in /Date(“14201020200”)/ format and would like to format this date string to MM/dd/yyyy using Kendo??

If yes then the syntax to do that is

kendo.toString(kendo.parseDate(dateString), 'MM/dd/yyyy')

Happy Kooding… Hope this helps!