I have a scheduler with an Edit Template. The scheduler initialiser has a Resources section that is currently containing 3 hard coded items for the three Kendo drop downs I have in the template. When I run the code the drop downs are rendered but not bound to the resources. Eventually I will want the resources to be bound to database.
This is my initialiser
////initialise scheduler$("#scheduler").kendoScheduler({ date: Date.now(), timezone: "Europe/London", workDayStart: new Date("2013/1/1 08:00 AM"), workDayEnd: new Date("2013/1/1 8:00 PM"), dateHeaderTemplate: kendo.template("<strong>#=kendo.toString(date, 'ddd dd/M')#</strong>"), selectable: true, messages: { ariaSlotLabel: "Selected from {0:g} to {0:g}", showWorkDay: "Show core work hours" }, editable: { window: { title: "Work Request", width: "720px" }, template: $("#customEditorTemplate").html() }, height: 400, views: [ { type: "day", editable: { destroy: false } }, { type: "week", editable: { destroy: false }, eventHeight: 40 }, { type: "timeline", editable: { destroy: false }, eventHeight: 40 }, { type: "timelineWeek", selected: true, majorTick: 1440, minorTickCount: 1, editable: { destroy: false }, eventHeight: 40 }, { type: "agenda" }, { type: "month", editable: { destroy: false }, eventHeight: 40 } ], timezone: "Etc/UTC", dataSource: { type: "signalr", push: function (e) { var notification = $("#notification").data("kendoNotification"); notification.success(e.type); }, transport: { signalr: { hub: sHub, promise: sHubStart, server: { read: "read", create: "create", update: "update", destroy: "destroy" }, client: { read: "read", create: "create", update: "update", destroy: "destroy" } } }, schema: { model: { id: "wRequestID", fields: { wRequestId: { editable: false, from: "WRequestID", type: "number", defaultValue: 0 }, start: { from: "Start", type: "date", culture: "en-GB" }, end: { from: "End", type: "date", culture: "en-GB" }, diary: { from: "Diary", type: "object", defaultValue: "UIS" }, team: { from: "Team", type: "object" }, title: { from: "Title", type: "string", validation: { required: true } }, workManager: { from: "WorkManager", type: "object" }, assignee: { from: "Assignee", type: "object" }, changeRef: { from: "ChangeRef", type: "string", validation: { required: true } }, activity: { from: "Activity", type: "string", validation: { required: true } }, impactedServers: { from: "ImpactedServers", type: "string", validation: { required: true } }, impactedServices: { from: "ImpactedServices", type: "string", validation: { required: true } }, isBAU: { from: "IsBAU", type: "boolean", defaultValue: false }, projectRef: { from: "ProjectRef", type: "string", validation: { required: true } }, notes: { from: "Notes", type: "string" }, isOOH: { from: "IsOOH", type: "boolean", defaultValue: false }, isAllDay: { from: "IsAllDay", type: "boolean", defaultValue: false }, recurrenceRule: { from: "RecurrenceRule", type: "string" }, recurrenceId: { from: "RecurrenceID", type: "number" }, recurrenceException: { from: "RecurrenceException", type: "string" }, startTimezone: { from: "StartTimezone", type: "string" }, endTimezone: { from: "EndTimezone", type: "string" } } }, }, }, resources: [ { field: "team", dataSource: [ { text: "Team 1", value: "Team 1", color: "#f8a398" }, { text: "Team 2", value: "Team 2", color: "#51a0ed" }, { text: "Team 3", value: "Team 3", color: "#56ca85" } ], title: "Team" }, { field: "workManager", dataSource: [ { text: "Manager 1", value: "12345", color: "#f8a398" }, { text: "Manager 2", value: "23456", color: "#51a0ed" }, { text: "Manager 3", value: "34567", color: "#56ca85" } ], title: "Work Manager", }, { field: "assignee", dataSource: [ { text: "Alex", value: "12345", color: "#f8a398" }, { text: "Bob", value: "23456", color: "#51a0ed" }, { text: "Charlie", value: "34567", color: "#56ca85" } ], title: "Assigned To" } ]});and this is my Edit template...
<script id="customEditorTemplate" type="text/x-kendo-template"> <div class="container-fluid"> <div class="editor-row form-group-sm"> <div class="col-sm-1"> <label for="wRequestID">ID</label> <input type="text" class="form-control" id="wRequestID" name="wRequestID" readonly data-bind="value:wRequestID"> </div> <div class="col-sm-4"> <label for="diary">Diary</label> <input type="text" class="form-control" id="diary" name="diary" readonly data-bind="value:diary" value="UIS"> </div> <div class="col-sm-5 form-group-sm"> <label for="team">Team</label> <select id="team" data-bind="value:team" data-role="dropdownlist" data-value-field="value" data-text-field="text"> <option value="UIS Solaris">UIS Solaris</option> <option value="UIS Unix1">UIS Unix1</option> <option value="UIS Worthing">UIS Worthing</option> </select> </div> </div> <div class="editor-row form-group-sm"> <div class="col-sm-10"> <label for="title">Title</label> <input type="text" class="form-control" id="title" name="title" required="required" data-bind="value:title"> </div> </div> <div class="editor-row form-group-sm"> <div class="col-sm-5"> <label for="start">Start</label> <input type="text" data-role="datetimepicker" data-interval="15" data-type="date" data-bind="value:start,invisible:isAllDay" name="start"/> <input type="text" data-type="date" data-role="datepicker" data-bind="value:start,visible:isAllDay" name="start" /> <span data-bind="text: startTimezone"></span> <span data-for="start" class="k-invalid-msg" style="display: none;"></span> </div> <div class="col-sm-5"> <label for="end">End</label> <input type="text" data-type="date" data-role="datetimepicker" data-bind="value:end,invisible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" /> <input type="text" data-type="date" data-role="datepicker" data-bind="value:end,visible:isAllDay" name="end" data-datecompare-msg="End date should be greater than or equal to the start date" /> <span data-bind="text: endTimezone"></span> <span data-bind="text: startTimezone, invisible: endTimezone"></span> <span data-for="end" class="k-invalid-msg" style="display: none;"></span> </div> </div> <div class="editor-row form-group-sm"> <div class="col-sm-3"> <label for="isAllDay"><input type="checkbox" id="isAllDay" name="isAllDay" data-type="boolean" data-bind="checked:isAllDay"> Anytime</label> </div> <div class="col-sm-4"> <label for="isOOH"><input type="checkbox" id="isOOH" name="isOOH" data-type="boolean" data-bind="checked:isOOH"> OOH</label> </div> <div class="col-sm-3"> <label for="isBAU"><input type="checkbox" id="isBAU" name="isBAU" data-type="boolean" data-bind="checked:isBAU"> BAU</label> </div> </div> <div class="editor-row form-group-sm"> <div class="col-sm-5"> <label for="changeRef">Change Reference</label> <input type="text" class="form-control" id="changeRef" name="changeRef" required="required" data-bind="value:changeRef"> </div> <div class="col-sm-5"> <label for="projectRef">Project Reference</label> <input type="text" class="form-control" id="projectRef" name="projectRef" required="required" data-bind="value:projectRef"> </div> </div> <div class="editor-row form-group-sm"> <div class="col-sm-5"> <label for="workManager">Work Manager</label> <select id="workManager" name="workManager" data-bind="value:workManager" data-role="dropdownlist" data-value-field="value" data-text-field="text"> <option value="FZS78T">Manager 1</option> <option value="FZS89M">Manager 2</option> <option value="FZS98S">Manager 3</option> </select> </div> <div class="col-sm-5"> <label for="assignee">Assignee(s)</label> <select id="assignee" name="assignee" class="form-control" date-bind="value:assignee" data-role="dropdownlist" data-value-field="value" data-text-field="text"> <option value="FZS78T">Alex</option> <option value="FZS89M">Bob</option> <option value="FZS98S">Charles</option> </select> </div> </div> <div class="editor-row form-group-sm"> <div class="col-sm-5"> <label for="impactedServers">Impacted Servers</label> <input type="text" class="form-control" id="impactedServers" name="impactedServers" required="required" data-bind="value:impactedServers"> </div> <div class="col-sm-5"> <label for="impactedServices">ImpactedServices</label> <input type="text" class="form-control" id="impactedServices" name="impactedServices" required="required" data-bind="value:impactedServices"> </div> </div> <div class="editor-row form-group-sm"> <div class="col-sm-5"> <label for="activity">Activity</label> <textarea id="activity" name="activity" class="form-control" required="required" data-bind="value:activity"></textarea> </div> <div class="col-sm-5 form-group-sm"> <label for="notes">Notes</label> <textarea id="notes" name="notes" class="form-control" data-bind="value:notes"></textarea> </div> </div> <div class="editor-row form-group-sm"> <div class="col-sm-10"> <label for="recurrenceRule">Repeat</label> <div data-bind="value:recurrenceRule" name="recurrenceRule" data-role="recurrenceeditor"></div> </div> </div> </div> </script>
I have a C# / ASP.NET web application using Kendo web UI controls and Razor Views. Depending on the user's selection of one drop down ("ddlModelProperty"), it needs to enable or disable other dropdowns ("ddlSomeOtherModelProperty").
In my View file, I have a DropDownList defined like so:
@(Html.Kendo().DropDownListFor(m => m.ModelProperty).HtmlAttributes(new { id = "ddlModelProperty", @class = "k-dropdown-width-30", @tabIndex = "1", style = "width:60px", onchange = "OnChangeModelProperty(this);" }).BindTo(ViewBag.ZeroToOne).OptionLabel(" "))
@(Html.Kendo().DropDownListFor(m => m.SomeOtherModelProperty).HtmlAttributes(new { id = "ddlSomeOtherModelProperty", @class = "k-dropdown-width-30", @tabIndex = "1", style = "width:60px" }).BindTo(ViewBag.ZeroToThree).OptionLabel(" "))
In the controller, I have a method that returns the ViewResult. In this method, the ViewBag is populated like so:
ViewBag.ZeroToOne = FillDropDownValues(dtData, "ZeroToOne", "Notes", "Item");ViewBag.ZeroToThree = FillDropDownValues(dtData, "ZeroToThree", "Notes", "Item");
The FillDropDownValues method returns a List<System.Web.Mvc.SelectListItem> object containing the values to be displayed in the drop down.
The OnChangeModelProperty(this) method referenced in the onchange HtmlAttribute for ddlModelProperty performs the following:
var cmbVal = $("#" + cmb.id).val(); var enabled = (cmbVal != "0"); if (!enabled) $("#ddlSomeOtherModelProperty").kendoDropDownList({ index: 0 }); $("#ddlSomeOtherModelProperty").kendoDropDownList({ enable: enabled});
The problem is this:
My page loads, all drop downs populate and are able to be interacted with as expected. If I select "0" for ddlModelProperty, it disables ddlSomeOtherModelProperty as I expect it to. Then I change ddlModelProperty to a different value. This causes ddlSomeOtherModelProperty to be re-enabled, however when I click the Arrow to expand the DropDown menu nothing appears.
This leads me to believe 1 of 2 things is happening:
Either the DataSource is somehow being wiped out and the animation plays-- it just has nothing to display, or simply the animation is broken and isn't displaying at all.
What am I doing incorrectly?
Hi,
I have fileObjects and it has properties (name, extension, size, filepath). I understand name, extension and size are the reserved keywords that can be used in template code. However, i need the filepath (additional parameter) to be passed and used in template code.
So that when user click on the hyperlink, it will call the download function with two parameter (path and name). File path is mandatory because each file is stored in respective unique id (folder name) folder.
<% List<FileModel> files = ViewBag.files; %>var fileObjects = <%: Html.Raw(Json.Encode(files)) %>$("#upload-file").kendoUpload({ async: { saveUrl: "<%: Url.Action("UploadFile", ViewBag.Controller, new { topicId = Model.Id }) %>", removeUrl: "<%: Url.Action("RemoveFile", ViewBag.Controller, new { topicId = Model.Id }) %>", autoUpload: true }, template: "<span class='k-progress' style='width: 100%;'></span>" + "<span class='k-icon k-i-doc'></span>" + "<span class='k-filename' title='#=name#'><a href='\\#' onclick='downloadFile(\"#=name#\")'>#=name#</a></span>" + "<strong class='k-upload-status'>" + "<button type='button' class='k-button k-button-bare k-upload-action'>" + "<span class='k-icon k-i-close k-delete' title='Remove'></span>" + "</button>" + "</strong>", files: fileObjects, success: onSuccess, error: onError, upload: onUpload});
Thanks.
Regards,
Yap Hui Hong
I used Angular-style to create a TreeList.
In my initial test, the tree only have 3 level, root level with 1 node, second-level with 30 nodes, third-level with 1 or 2 nodes. Total are ~60 nodes.
I checked another thread mentioned that defining column template will have performance penalty and I already fixed all and it works fine on Chrome (Version 50.0.2661.102 m)
But when I use Firefox (46.0.1), it is very slow. Loading the tree is already slower than Chrome. Especially, when expand / collapse the node, it takes 3-4 seconds (while Chrome only take less than a second).
I already disabled all Plugins on Firefox.
Please advise any way I can improve the performance.
Hello,
Is it possible to have multicolumn headers in TreeList? I have followed the example of the grid http://demos.telerik.com/kendo-ui/grid/multicolumnheaders but it doesn't work for tree list.
I tried different options but it seems form is obsolete and I don't know how to use filterMenuInit to filter date only for datetime field. It will give me getTime() error when I select date in date filter.
columns: [
{ field: "EntryDate", title: "Date", attributes: { style: "text-align:left" }, width: "200px", template: "#= kendo.toString(kendo.parseDate(EntryDate, 'yyyy-MM-ddTHH:mm:ss'), 'dd MMM yyyy hh:mm:ss tt') #" },
I tried to insert a field of date only but it is empty.
schema: {
parse: function (d) {
$.each(d, function (idx, elem) {
elem.EntryDateOnly = kendo.parseDate(elem.EntryDate, "MM/dd/yyyy");
});
return d;
},

This really should be a minor but i cannot get it to work
I need to bind to a value (StatusId) from the parent row in my DropDownList
In my clientDetailTemplate i have
var parmStatusId = new HtmlString("#: StatusId #");
@Html.TextBox("txtBox", parmStatusId) //this works just fine
@Html.DropDownList("myDropDownList", new SelectList(Model.StatusList, "Value", "Text", parmStatusId), string.Empty, new { @class = "form-control" }); //this doesnt work :-(
The source from the above is as following
<input id="txtBox" name="txtBox" type="text" value="#: StatusId #" />
<select class="form-control" name="1"><option value=""></option>
<option value="1">Ubehandlet</option>
<option value="2">Behandlet</option>
<option value="3">Lukket</option>
</select>
Am i missing the obvious??
I'm trying to add an axis to the categoryAxis to a stacked area chart http://dojo.telerik.com/@morten@munch-andersen.dk/UlEju
My data is date based but has gaps which show up when I set:
categoryAxis: {
field: "Date",
baseUnit: "day"
}
When I set baseUnit to "month" the chart loose the fine details.
I would like to add major ticks to the categoryAxis showing months and keep the fine details.
Is this possible?