I have a page that contains a dropdown that will drive the contents of my kendo grid. When a button is clicked, I want to manually call my read function of my grid to get data from my MVC controller. See below:
$("#engineButton").click(function () { $("#logGrid").data("kendoGrid").dataSource.options.transport.read.data.engineId = $("#stationaryEngine").val(); $("#logGrid").data("kendoGrid").dataSource.read(); $("#logGrid").show(); });My grid is set up as follows:
$("#logGrid").kendoGrid({ dataSource: { transport: { read: { url: "@Url.Action("StationaryEngineLogGrid_Read", "Engine")", type: "get", dataType: "json", data: { engineId: 0 } }, create: { url: "@Url.Action("StationaryEngineLogPopup_Create", "Engine")", type: "post", dataType: "json" }, update: { url: "@Url.Action("StationaryEngineLogPopup_Update", "Engine")", type: "post", dataType: "json" }, destroy: { url: "@Url.Action("StationaryEngineLogPopup_Destroy", "Engine")", type: "post", dataType: "json" } }, schema: { model: { id: "Id", fields: { Id: { type: "number", editable: false }, EngineId: { type: "number", editable: false }, LogDate: { type: "date", parse: function (data) { var d = new Date(data); data = kendo.toString(new Date(d), "MM/dd/yyyy"); } }, EngineHoursStart: { type: "number", validation: { required: true } }, EngineHoursEnd: { type: "number", validation: { required: true, customValidation: function (input, params) { if (input.is("[name=engineHoursEnd]")) { var endHours = $(input).val(); var startHours = input.closest(".k-edit-form-container").find("input[name=engineHoursStart]").val(); if (endHours <= 0) { $(input).attr("data-customValidation-msg", "End Hours must be > 0."); return false; } else if (endHours <= startHours) { $(input).attr("data-customValidation-msg", "End Hours must be > Start Hours."); return false; } } else if (input.is("[name=engineHoursStart]")) { var startHours = $(input).val(); var endHours = input.closest(".k-edit-form-container").find("input[name=engineHoursEnd]").val(); if (startHours <= 0) { $(input).attr("data-customValidation-msg", "Start Hours must be > 0."); return false; } else if (startHours > endHours) { $(input).attr("data-customValidation-msg", "Start Hours must be < End Hours."); return false; } } else if (input.is("[name=logDate]")) { var date = $(input).data("kendoDatePicker").value(); if (date > new Date()) { $(input).attr("data-customValidation-msg", "Date must be today or less."); return false; } } return true; } } }, Hours: { type: "number", editable: false }, RunningTotalHours: { type: "number", editable: false }, EmergencyUse: { type: "boolean" }, MaintenanceUse: { type: "boolean" }, MonitorLight: { type: "string" }, Comments: { type: "string" } } } }, error: function (e) { if (e.errors) { var message = "Errors:\n"; $.each(e.errors, function (key, value) { if ('errors' in value) { $.each(value.errors, function () { message += this + "\n"; }); } }); alert(message); } } }, editable: { mode: "popup", template: $("#popup_editor").html() }, edit: function (e) { var editWindow = this.editable.element.data("kendoWindow"); editWindow.wrapper.css({ width: 600 }); if (e.model.isNew()) { editWindow.title("Add new logging record"); $("#EngineId").val($("#stationaryEngine").val()); e.model.LogDate = "@DateTime.Now.Date.ToShortDateString()"; e.model.EngineId = $("#stationaryEngine").val(); } else { editWindow.title("Edit logging record"); } $("#logDate").kendoDatePicker({ format: "MM/dd/yyyy", parseFormats: ["MM-dd-yyyy", "MM/dd/yyyy"] }); editWindow.center(); }, toolbar: [{ name: "create", text: "Add new logging record" }], columns: [ { field: "Id", hidden: true }, { field: "EngineId", hidden: true }, { field: "LogDate", title: "Date", format: "{0: MM/dd/yyyy}" }, { field: "EngineHoursStart", title: "Engine Hours Start" }, { field: "EngineHoursEnd", title: "Engine Hours End" }, { field: "EmergencyUse", title: "Emergency Use", template: "<input type='checkbox' #= EmergencyUse ? checked='checked':'' # />" }, { field: "MaintenanceUse", title: "Maintenance Use", template: "<input type='checkbox' #= MaintenanceUse ? checked='checked':'' # />" }, { field: "MonitorLight", title: "Monitor Light" }, { field: "Comments", title: "Comments" }, { command: [{ name: "edit", text: { update: "Save" } }, { name: "destroy" }], title: "Actions" } ] });Now, all of this works for my read function. I hit my breakpoint in my controller. Great. However, when I do a Create, I have a date field inside my popup template that will not come across to my controller. It's defined as follows:
<script id="popup_editor" type="text/x-kendo-template">... <input type="text" name="logDate" data-type="date" data-bind="value:LogDate" data-role="datepicker" required />...</script>Every time I submit the popup form, the date never comes across to my controller. I read in other posts that you have to use a ParameterMap in your datasource, but if doing so, it messes up the read functionality.
Is there a way to accomplish both the read functionality and the create with my date being parsed correctly and passed to my controller?

Documentation for depth / start is wrong.
Quote:
"MONTH"shows the days of the month"YEAR"shows the months of the year"DECADE"shows the years of the decade"CENTURY"shows the decades from the centuryMONTH, YEAR, DECADE ... is not working, month, year, decade ... is.

There are 2 different examples how to use confirm:
kendo.confirm("Are you sure that you want to proceed?").then(function () { //from online demoskendo.confirm("Are you sure that you want to proceed?").done(function () { //from online documentation
But kendo.all.d.ts has:
function confirm(text: string): void;which makes it impossible (without typecasting to any) for chaining (then/done). Same for prompt.

I have a grid declared as:
columns: [ { title: "", width: "55px", template: kendo.template($("#serviceActionsTemplate").html()) }, { field: "serviceDate", title: "Service Date", type: "date", template: "#= kendo.toString(kendo.parseDate(serviceDate), '" + vm.dateFormat + "') #", width: "120px" }, { field: "serviceType", title: "Service Type", width: "150px" }, { field: "referenceNumber", title: "Ref Number", width: "100px" }, { field: "odometer", title: "Odometer", type: "number", format: "{0:n0}", attributes:{style:"text-align:right;"}, width: "100px" }, { field: "engineHours", title: "Engine Hrs", type: "number", format: "{0:n0}", attributes: { style: "text-align:right;" }, width: "100px" }, { field: "totalCost", title: "Total Cost", type: "number", format: "{0:c2}", attributes: { style: "text-align:right;" }, aggregates: ["sum"], footerTemplate: "<div style='float: right'>#= kendo.toString(sum, 'c2') #</div>", width: "90px" }, { field: "itemId", title: "ItemId", type: "number", width: "90px", hidden: true }, { field: "serviceId", title: "ServiceId", type: "number", width: "90px", hidden: true } ], autoBind: false, dataSource: vm.serviceListGridData, editable: "inline", filterable: true, groupable: false, height: 400, navigatable: true, pageable: false, resizable: true, scrollable: true, sortable: { mode: "multiple" }}The html:
<md-tab label="Servicing"> <md-content> <div id="vehicleServicingList" name="vehicleServicingList"> <section class="page-bar"> <md-button ng-click="vm.addServicing($event)" ng-disabled="!vm.security.allowCreateServicing" aria-label="Add Servicing"> <md-tooltip>Add New Servicing</md-tooltip> <md-icon md-svg-icon="plus"></md-icon> Add </md-button> <md-button ng-click="vm.editServicing($event)" ng-disabled="vm.security.editLevelServicing < 1 || vm.selectedServices.length != 1" aria-label="Edit Servicing"> <md-tooltip>Edit Selected Servicing</md-tooltip> <md-icon md-svg-icon="pencil"></md-icon> </md-button> <md-button ng-click="vm.removeMultipleServices($event)" ng-disabled="!vm.security.allowDeleteServicing || vm.selectedServices.length < 1" aria-label="Delete Selected Servicing"> <md-tooltip>Delete Selected Servicing</md-tooltip> <md-icon md-svg-icon="delete"></md-icon> </md-button> </section> <kendo-grid id="serviceListGrid" name="serviceListGrid" options="vm.serviceListGridOptions" ></kendo-grid> </div> </md-content></md-tab>When I attempt to click the checkbox in the first column the grid moves and then I try again and it moves again until it pushes the toolbar off the top.
Please see attached images of how it looks before the click on checkbox and after. The grid seems to push the tabs, toobar and column headers off the top.
Kendo UI for JSP
Hi All,
How can i create dependency in kendo UI for JSP. for example. I have combo box with country names. I will select country names its respective states should get load in another combo box. please help me with this.
regards,
Irfan

Hello guys,
Is there a way to change the visual marker to be on left on the line on the middle.
I have provided this dojo to better illustrate what i want to do.
Thank you very much.
Can someone please have a look at the code and screen shots below and see
if you can give me some idea why the grid is blank after returning a valid collection
as part of a JsonResult?
Html.Kendo().Grid<AppointmentsDTO>().Name("FailedAppointments") .Columns(columns => { columns.Bound(o => o.MemberFirstName).Title("Member First").Width(80); columns.Bound(o => o.MemberLastName).Title("Member Last").Width(80); columns.Bound(o => o.ClientMemberID).Title("ClientID").Width(60); columns.Bound(o => o.ProviderID).Title("ProviderID").Width(60); columns.Bound(o => o.ProviderFirstName).Title("Provider First").Width(80); columns.Bound(o => o.ProviderLastName).Title("Provider Last").Width(100); columns.Bound(o => o.AppointmentDate).Title("Appointment Date").Width(200); columns.Bound(o => o.IHAAppointmentID).Hidden(true); }) .EnableCustomBinding(true) .AutoBind(true) .Pageable(page => page.Enabled(true).PageSizes(new Int32[] {20, 30, 50,100})) .Sortable(sorting => sorting.SortMode(Kendo.Mvc.UI.GridSortMode.SingleColumn)) .Selectable() .Scrollable(scroll => scroll.Height(350)) .DataSource(dataSource => dataSource .Ajax() .Read(read => read.Action("BindFailedAppointments", "AppointmentScheduling")))