Hi - I'm using Kendo Date Picker and Date Time Picker with Date Input True, also i have update message of date input to change how place holder should display. Her the problem is date format placeholders are displayed even though there is no date set or component is empty. Is there any solution so that place holder gets displayed only when the component is focused?
My Code as below.
$field.kendoDateTimePicker({
dateInput: true,
format: "MM-dd-yyyy hh:mm tt",
parseFormats: "yyyy-MM-dd-HH.mm.ss",
min: new Date(1700, 0, 1)
}).data('kendoDateTimePicker')._dateInput.setOptions({
messages: {
"month": "__",
"day": "__",
"year": "____",
"hour": "__",
"minute": "__",
"dayperiod": "__"
}
});
$field.kendoDatePicker({
dateInput: true,
format: "MM-dd-yyyy",
min: new Date(1700, 0, 1)
}).data('kendoDatePicker')._dateInput.setOptions({
messages: {
month: "__",
year: "____",
day: "__"
}
});

I am building a custom widget with a kendo.ui.ContextMenu,
On Alt+M KeyUp event I open the menu using this.menu.open().
Following opening, I would like the menu to have the focus to navigate with arrow keys.
How can I achieve that?

I have an application that displays errors with the notification that uses templates.
One of the errors that I got was a telerik error that the template was wrong however the displayed message has interpreted the html code.
Looking in the documentation I saw that to encode the html you should use showText instead of show so I used it but the notification displayed the same thing. The html was not encoded.
Please see the reproduction
https://dojo.telerik.com/eNaBikIm
What can I do so that the message is not interpreted?

Hi, I currently have an app which is using Kendo UI by referencing the CDN hosted minified js file (https://kendo.cdn.telerik.com/2015.2.624/js/kendo.all.min.js).
I would like to incorporate kendo into my build script to only package the modules that I am using (kendoAutoComplete) into a single local js file that I can then reference in my application. I have tried building using webpack but the resultant file does not seem to work as the CDN hosted file did.
How can I compile the required modules inside the npm package into a standalone js file that I can reference as per the CDN hosted file?
Note: I do *not* want to have to modularise/rewrite my application to make it work with webpack...
With a cascading dropdown, it seems like the default behavior is to highlight a selection as a user starts typing with a 'begins with' type search.
Is there a simple way to switch this to a 'contains' type search if nothing begins with the users input?

Is it possible to lock/disable first two columns in my below code. Instead of cell lock I want to do column level lock.
@(Html.Kendo().Spreadsheet()
.Name("spreadsheet")
.Sheetsbar(false)
.Toolbar(x => x.Data(false).Insert(false))
.HtmlAttributes(new { style = "width:100%;" })
.Rows(5000)
.Events(e => e.ExcelImport("niinStockImport"))
.Sheets(sheets =>
{
sheets.Add()
.Name("NiinStock")
.DataSource<DynMRO.DTO.Logistics.Planning.NiinStockSearchResultDTO>(ds => ds
.Ajax()
.Batch(true)
.Read(r => r.Action("NiinStockBulkSearchResults", "Logistics").Data("getCriteria"))
.Update(u => u.Action("NiinStockBulkUpdate", "Logistics").Data("getCriteria"))
.Events(e => e.Change("onChange"))
.Model(m =>
{
m.Id(p => new { p.NiinStockID, p.ORGID });
})
)
.Columns(columns =>
{
columns.Add().Width(100);
columns.Add().Width(415);
columns.Add().Width(0);
columns.Add().Width(0);
columns.Add().Width(145);
})
;
})
)
Hi,
I am trying to use custom pop editor in kendo grid ( https://dojo.telerik.com/EvacaKAW ). What I am trying to do is, I need the grid to be editable and the column "text" must be a read-only column. If I try to click on that cell, it is converting as a normal text box hiding the edit button, instead I want to make the input field readonly and I want to enter the text only by using Edit button. I tried to make the column as "editable:false", but it is not allowing me to set the data to the column when I close the editing window.
How can I achieve this by making column (or div inside column) as read-only?
Appreciate the suggestion on this. Thanks in advance.
<script id="rowTemplate" type="text/x-kendo-tmpl"> <tr> <td> ${Phone} </td> <td> ${DetailUrl} </td> </tr> </script>
$("#grid").kendoGrid({
columns: [
{ field: "Phone", title: "Phone" },
{ field: "DetailUrl", title: "Detail" }
],
rowTemplate: kendo.template($("#rowTemplate").html())
});
Hi..
I'm using kendo gantt chart in my project using anular js,how can i disable drag and drop option
here is the my code
view :
<div id="activityganttchart" kendo-gantt k-options="createScheduleStep2.ganttOptions" class="row"
k-rebind="createScheduleStep2.ganttOptions"></div>
controller:
productionScheduleStep2Vm.ganttOptions = getActivitiesToDisplayOnGanttChart(activities);
productionScheduleStep2Vm.ganttOptions.edit = edit;
productionScheduleStep2Vm.ganttOptions.moveStart = ganttMove;
function processActivitiesToDisplayGanttChart(data: any) {
var activityList = new Array();
for (var i = 0; i < data.length; i++) {
var uomName = "";
if (data[i].pitOutputActivity.activityValueUOMId && data[i].pitOutputActivity.activityValueUOM !== undefined) {
uomName = data[i].pitOutputActivity.activityValueUOM.name;
}
var activity = {
ID: data[i].pitOutputActivity.id,
Title: data[i].pitOutputActivity.activity.name,
Start: '\/Date(' + (+new Date(data[i].pitOutputActivity.startDate + " " + data[i].pitOutputActivity.startTime)) + ')\/',
End: '\/Date(' + (+new Date(data[i].pitOutputActivity.endDate + " " + data[i].pitOutputActivity.endTime)) + ')\/',
target: data[i].pitOutputActivity.activityValue + " " + uomName,
activityId: data[i].pitOutputActivity.activityId,
shift: data[i].pitOutputActivity.pitOutputActivityPartA.shift,
pitOutputActivityUUID: data[i].pitOutputActivity.pitOutputActivityUUID,
percentComplete: data[i].progress === "NaN" ? 0 : data[i].progress,
planned: data[i].planned,
actual: data[i].actual,
variance: data[i].variance,
assetCount: data[i].assetCount
}
activityList.push(activity);
}
return activityList;
};
function edit(e) {
productionScheduleStep2Vm.selectedActivity = e.task;
win = $("<div class='ganntPopup' />").kendoWindow({
title: "Manage Activity",
resizable: false,
modal: true,
pinned: true,
position: { top: 100 }
});
e.preventDefault();
var template = createScheduleStep2Helpers.compileAngularContent($("#activityMenu").html(), $scope, $compile);
win.data("kendoWindow").content(template).center().open();
};
function ganttMove(e) {
console.log(kendo.format("task's curren Start {0:g}", e.start));
console.log(kendo.format("task's curren End {0:g}", e.end));
e.preventDefault();
};
i tried with moveStart event still im able to dran and drop
Appreciate your support!
Thanks!