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 () { $("#dobDate").kendoDatePicker({ 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 =&gt; m.DobDate).Width(50).Title("Dob Date").ClientTemplate("#= DobDate &lt; 1/1/1900 ? '' : 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 });
eq, gt, gte, lt, te, neq
7) READONLY:
@(Html.Kendo().DatePicker().Value(DateTime.Now) .Name("myDate").Min(DateTime.Now) .HtmlAttributes(new { style = "width: 100%", @readonly="readonly" }))
or
$("#myDate").kendoDatePicker(); var myDate= $("#myDate").data("kendoDatePicker"); myDate.readonly(true);
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
HIDE:
$("#ddlCountries").closest(".k-widget").hide();
SHOW:
$("#ddlCountries").closest(".k-widget").show();
10) Kendo Grid Filter Configuration : For a Kendo Grid, if you would like to customize the filter menu below is how you can do
@(Html.Kendo().Grid<UserModel>() .Name("MyGrid") .ColumnMenu() .Filterable(f => f.Operators(o => o.ForString(s => s .Clear() .Contains("Contains") .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
@(Html.Kendo().Grid<UserModel>() .Name("MyGrid") .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"); grid.clearSelection();
Happy Koooding….. Hope this helps!….