I have an explorer type window with a treeview on the left and MVC forms in the right splitter pane. Is there a way to, such as on a submit (AJAX), to then render new content into the right pane only? I do not want to re-load the tree and lose the way the tree was setup by the user...
Thanks
Matt
Hi,
I have the following code for a complex scheduler. When I switch to the month view, it randomly changes the position of the first column (grouping column) left, middle or right. Is there any solution to fix this rendering issue? The first attached image, "scheduler_0.png", is normal. The rest of attached images are for this rendering issue. Any ideas?
window.schema = { model: { id: "id", fields: { id: { from: "id", type: "number" }, title: { from: "ev1_title", defaultValue: "", validation: { required: true } }, description: { from: "ev1_desc" }, isAllDay: { from: "ev1_is_all_day", type: "boolean" }, startTimezone: { from: "ev1_start_timezone" }, start: { from: "ev1_start", type: "date" }, endTimezone: { from: "ev1_end_timezone" }, end: { from: "ev1_end", type: "date" }, recurrenceId: { from: "ev1_recurring" }, recurrenceRule: { from: "ev1_recurring_rule" }, recurrenceException: { from: "ev1_recurring_exception" }, ev1_status: { from: "ev1_status", }, ev1_type: { from: "ev1_type", }, jt1_id: { from: "jt1_id", }, ev1_event_resource_types: { from: "ev1_event_resource_types", nullable: true }, ev1_event_resources: { from: "ev1_event_resources", nullable: true }, ev1_event_users: { from: "ev1_event_users", nullable: true }, ev1_urgent: { from: "ev1_urgent", nullable: true }, ev1_date_count: { from: "ev1_date_count", nullable: true }, }, },};window.parameterMap = function (options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models) }; }};var timelineMonth = kendo.ui.TimelineView.extend({ options: { selectedDateFormat: "{0:D} - {1:D}" }, name: "timelineMonth", calculateDateRange: function() { //create a range of dates to be shown within the view var selectedDate = this.options.date; var start = kendo.date.dayOfWeek(selectedDate, this.calendarInfo().firstDay, -1); var dates = []; for (var idx=0, length=25; idx<length; idx++) { dates.push(start); start = kendo.date.nextDay(start); } this._render(dates); }});$("#scheduler").kendoScheduler({ //timezone: "America/Chicago", date: new Date("2015/10/01"), startTime: new Date("2015/10/01 00:00 AM"), //endTime: new Date("2015/10/01 00:00 AM"), workDayStart: new Date("2015/10/01 00:00 AM"), workDayEnd: new Date("2015/10/01 11:59:59 PM"), currentTimeMarker: { useLocalTimezone: true, }, showWorkHours: false, //selectable: true, majorTick: 60, eventHeight: 20, toolbar: [ "pdf", ], pdf: { fileName: "JobSchedules.pdf", proxyURL: "http://demos.telerik.com/kendo-ui/service/export" }, views: [ { type: "timeline", title: "Day", majorTick: 60, columnWidth: 20, eventHeight: 12, startTime: new Date("2015/10/01 00:00 AM"), editable: { create: false, update: false, destroy: false, move: true, resize: true, }, eventTemplate: $("#event-template").html(), }, { type: "timelineWeek", title: "Week", majorTick: 720, columnWidth: 15, eventHeight: 12, startTime: new Date("2015/10/01 00:00 AM"), editable: { create: false, update: false, destroy: false, move: true, resize: true, }, eventTemplate: $("#event-template").html(), }, { type: timelineMonth, name: "timelineMonth", title: "Month", selected: true, majorTick: 1440, columnWidth: 10, eventHeight: 12, startTime: new Date("2015/10/01 00:00 AM"), editable: { create: false, update: false, destroy: false, move: true, resize: true, }, eventTemplate: $("#event-template").html(), dateHeaderTemplate: kendo.template('<strong>#=kendo.toString(date,"MMM")#<br>#=kendo.toString(date,"dd")#</strong>'), } ], group: { resources: ["Jobs"], orientation: "vertical" }, resources: [ { title: "Status", field: "ev1_status", dataTextField: "text", dataValueField: "value", name: "EventStatus", multiple: false, dataSource: [ { text: "Tentative", title: "Tentative", value: 1, color: "#808080" }, { text: "Active", title: "Active", value: 2, color: "#008000" }, { text: "In Progress", title: "In Progress", value: 3, color: "#008000" }, { text: "Pending", title: "Pending", value: 4, color: "#808080" }, { text: "Completed", title: "Completed", value: 5, color: "#000000" }, ], }, { title: "Type", field: "ev1_type", dataTextField: "text", dataValueField: "value", name: "EventType", multiple: false, dataSource: [ { text: "Activity", title: "Activity", value: 1, color: "#008000" }, { text: "Activity", title: "Activity", value: 2, color: "#d9534f" }, { text: "Individual", title: "Individual", value: 0, color: "#39B3D7" }, ], }, { title: "Jobs", field: "jt1_id", dataTextField: "text", dataValueField: "value", name: "Jobs", multiple: false, dataSource: [{"text":"C14050 - Walmart Blaine\/Ramsey","value":"51","color":"#3C763D","title":"Walmart Blaine\/Ramsey","code":"C14050"},​...], }, { title: "Trucking", field: "ev1_event_resource_types", dataTextField: "text", dataValueField: "value", name: "ResourceTypes", multiple: true, dataSource: [{"text":"Box Trailer","value":"32","color":"","title":"Box Trailer","code":"Box Trailer"},​...], }, { title: "Equipment", field: "ev1_event_resources", dataTextField: "text", dataValueField: "value", name: "Resources", multiple: true, dataSource: [{"text":"1 Foot Bucket","value":"68","color":"#3C763D","title":"1 Foot Bucket - 1 Foot Bucket","code":"1 Foot Bucket"},​...], }, { title: "Employee", field: "ev1_event_users", dataTextField: "text", dataValueField: "value", name: "Employees", multiple: true, dataSource: [{"text":"[FMAN] Brian H","value":"53","title":"[Foreman] Brian H"},​...], }, ], dataSource: { batch: false, transport: { read: function(options) { $("body").append('<div class="spinner-modal row-centered"><div class="col-centered"><i class="fa fa-spinner fa-2x faa-spin animated"></i></div></div>'); var view = $("#scheduler").data("kendoScheduler").view(); $.ajax({ dataType: "jsonp", data: { view: view.title=="Day"?"timeline":(view.title=="Week"?"timelineWeek":(view.title=="Month"?"timelineMonth":"agenda")), start: kendo.format("{0:d}", view.startDate()), end: kendo.format("{0:d}", view.endDate()), active: 2, eventType: 3, users: [], jobTickets: $("#s2id_Scheduler_jobTickets").select2("val"), }, success: function(result) { options.success(result); $(".spinner-modal").remove(); }, error: function(result) { options.error(result); $(".spinner-modal").remove(); } }); }, parameterMap: window.parameterMap, }, requestEnd: function(e) { if (e.response && e.response.length > 0) { $.each(e.response, function(key, event) { event.ev1_start = new Date(event.ev1_start); event.ev1_end = new Date(event.ev1_end); }); } }, schema: window.schema, }, dataBound: function(e) { dropTargetArea(); $("#scheduler .k-event").each(function() { $(this).tooltip({ title: $.trim($(this).children(":nth-child(2)").attr("data-tooltip")), html: true, container: "body", placement: "bottom" }); }); $(".schedule-edit-btn").tooltip({ title: "Edit", html: true, container: "body", placement: "top" }); $("#scheduler .k-event-content[data-event-type='0']").parent().addClass("event-type-individual"); $("#scheduler .k-event-content[data-event-type='2']").parent().addClass("event-type-locate"); var view = $("#scheduler").data("kendoScheduler").view(); if (view.title == "Day" || view.title == "timeline") { // } else if (view.title == "Week" || view.title == "timelineWeek") { // } else if (view.title == "Month" || view.title == "timelineMonth") { window.slots = {}; view.datesHeader.find("tr:first th").each(function(index) { var text = $(this).children().first().text(); window.slots[index] = { date: text.substring(text.length-2, text.length), x: $(this).offset().left, width: $(this).width() + parseFloat($(this).css("border-left-width")) //+ parseFloat($(this).css("border-right-width")) + parseFloat($(this).css("padding-left")) + + parseFloat($(this).css("padding-right")), }; }); $("#scheduler .k-event-content[data-event-type='2'][data-urgent='1']").each(function() { $(this).prepend('<i class="fa-locate-warning fa fa-warning fa-lg faa-flash animated"></i>'); window.locateX = $(this).parent().offset().left; window.locateIndex = 0; $.each(window.slots, function(index, slot) { if (slot.x <= window.locateX && window.locateX <= slot.x+slot.width) { window.locateIndex = parseInt(index); } }); var tick = 0; var locateIndex = window.locateIndex; var locateWidth = 0; var totalLocateWidth = $(this).parent().width(); var locateContent = '<div class="k-event-locate">'; while(locateWidth <= totalLocateWidth && tick < 14 && window.slots[locateIndex] !== undefined) { var width = window.slots[locateIndex].width; if (locateWidth+width > totalLocateWidth) { width = totalLocateWidth - locateWidth; } if (tick < 11) locateContent += '<div class="k-event-locate-slot" style="width: '+width+'px;"></div>'; else locateContent += '<div class="k-event-locate-slot" style="width: '+width+'px;"><i class="fa-locate-warning fa fa-warning fa-lg faa-flash animated"></i></div>'; locateWidth += width; locateIndex++; tick++; } locateContent += '</div>'; $(this).parent().append(locateContent); }); } $(".spinner-modal").remove(); }, navigate: function(e) { $(".tooltip").remove(); var dataSource = new kendo.data.SchedulerDataSource({ batch: false, transport: { read: function(options) { $("body").append('<div class="spinner-modal row-centered"><div class="col-centered"><i class="fa fa-spinner fa-2x faa-spin animated"></i></div></div>'); var date = e.date; //if (e.action == "previous") { // date.setDate(date.getDate()-27); //} $.ajax({ dataType: "jsonp", data: { //view: e.view, view: e.view=="Day"?"timeline":(e.view=="Week"?"timelineWeek":(e.view=="Month"?"timelineMonth":"agenda")), action: e.action, start: kendo.format("{0:d}", e.date), end: kendo.format("{0:d}", e.date), active: 2, eventType: 3, users: [], jobTickets: $("#s2id_Scheduler_jobTickets").select2("val"), }, success: function(result) { options.success(result); $(".spinner-modal").remove(); }, error: function(result) { options.error(result); $(".spinner-modal").remove(); } }); }, parameterMap: window.parameterMap, }, requestEnd: function(e) { if (e.response && e.response.length > 0) { $.each(e.response, function(key, event) { event.ev1_start = new Date(event.ev1_start); event.ev1_end = new Date(event.ev1_end); }); } }, schema: window.schema, }); $("#scheduler").data("kendoScheduler").setDataSource(dataSource); }, edit: function(e) { e.preventDefault(); $(".tooltip").remove(); window.editEvent(e.event.id, e.event.ev1_type, e.event.ev1_status); },});
Thank you,
JB
Hi,
I am facing difficulties converting my scheduler from ASP.NET MVC to Kendo UI. Here is my ASP.NET MVC code. It's working fine but Kendo UI scheduler is not working and throws "500 (Internal Server Error)" in browser console
@(Html.Kendo().Scheduler<TaskViewModel>() .Name("schedulerJob") .Date(new DateTime(System.DateTime.Today.Year, System.DateTime.Today.Month, System.DateTime.Today.Day)) .StartTime(new DateTime(System.DateTime.Today.Year, System.DateTime.Today.Month, System.DateTime.Today.Day, 7, 00, 00)) .Height(600) .Views(views => { views.DayView(); views.WeekView(); views.TimelineView(v => v.Selected(true)); }) .Events(e => { e.Edit("schedulerJob_edit"); e.Navigate("schedulerJob_navigate"); }) .Timezone("Etc/UTC") .Group(group => group.Resources("Techs").Orientation(SchedulerGroupOrientation.Vertical)) .Resources(resource => { resource.Add(m => m.TechName) .Title("Techs") .Name("Techs") .DataTextField("emm_code") .DataValueField("emm_code") .DataSource(d => d.Read("Techs", "JOBS")); }) .DataSource(d => d .Model(m => { m.Id(r => r.emm_code); }) .ServerOperation(true) .Read(r => r.Action("JobSchedule_Read", "JOBS").Data("passFilter")) .Create("JobSchedule_Create", "JOBS") .Update("JobSchedule_Update", "JOBS") .Destroy("JobSchedule_Delete", "JOBS") ))Here is JS code for passFilter function
function passFilter() { var statusCheckBoxesValues = ""; var area = $("#areaDropDownList").data("kendoDropDownList").value(); var dispatch = $("#dispatchDropDownList").data("kendoDropDownList").value(); var assignto = $("#techDropDownList").data("kendoDropDownList").value(); var category = $("#categoryDropDownList").data("kendoDropDownList").value(); var product = $("#productDropDownList").data("kendoDropDownList").value(); var proditem = $("#itemDropDownList").data("kendoDropDownList").value(); var filter = $("#sortFilterDropDownList").data("kendoDropDownList").value(); var datefrom = $("#fromDatePicker").val(); var dateto = $("#toDatePicker").val(); return { ip_cond: "opq2", ip_area: area == "" ? "[All]" : area, ip_dispatch: dispatch == "" ? "[All]" : dispatch, ip_assignto: assignto == "" ? "[All]" : assignto, ip_category: category == "" ? "[All]" : category, ip_product: product == "" ? "[All]" : product, ip_proditem: proditem == "" ? "[All]" : proditem, ip_streetno: "", ip_filter: filter == "" ? "[All]" : filter, ip_datefrom: datefrom == "" ? null : datefrom, ip_dateto: dateto == "" ? null : dateto, ip_unsched: false, ip_contr_only: false, ip_quote: false }}
Here is C# code
public JsonResult JobSchedule_Read([DataSourceRequest] DataSourceRequest request, string ip_cond, string ip_area, string ip_dispatch, string ip_assignto, string ip_category, string ip_product, string ip_proditem, string ip_streetno, string ip_filter, DateTime? ip_datefrom, DateTime? ip_dateto, bool ip_unsched, bool ip_contr_only, bool ip_quote){ DateTime startDateTime; DateTime endDateTime; List<TaskViewModel> tasks = new List<TaskViewModel>(); List<JscMstr> JscMstr; List<JhMstr> JhMstr; List<JdDet> JdDet; List<JscDet> JscDet; List<CoMstr> CoMstr; List<CodDet> CodDet; List<JrSumm> JrSumm; List<CsMstr> CsMstr; List<HhStatus> HhStatus; List<HhSumm> HhSumm; List<GrJscMstr> GrJscMstr; JobRepository jr = new JobRepository(); DateTime dateFrom = ip_datefrom == null ? DateTime.Today : (DateTime)ip_datefrom; DateTime dateTo = ip_dateto == null ? DateTime.Today : (DateTime)ip_dateto; jr.GetJobs(ip_cond, ip_area.ToLower(), ip_dispatch.ToLower(), ip_assignto.ToLower(), ip_category.ToLower(), ip_product.ToLower(), ip_proditem.ToLower(), ip_streetno, ip_filter, dateFrom, dateTo, ip_statlist, ip_unsched, ip_contr_only, ip_quote, out JscMstr, out JhMstr, out JdDet, out JscDet, out CoMstr, out CodDet, out JrSumm, out CsMstr, out HhStatus, out HhSumm, out GrJscMstr); foreach (var item in JscDet) { startDateTime = SchedulerUtility.GetDateTimeFromSeconds(item.jsd_sch_date, item.jsd_sch_start_time); endDateTime = SchedulerUtility.GetDateTimeFromSeconds(item.jsd_sch_date, item.jsd_sch_end_time); tasks.Add(new TaskViewModel() { TaskID = item.jsd_jobno, TechName = item.jsd_sch_assto, emm_code = item.jsd_sch_assto, Title = "Job Title (" + item.jsd_jobno + item.jsd_lineno + item.jsd_schno + ")", Start = new DateTime(startDateTime.Year, startDateTime.Month, startDateTime.Day, startDateTime.Hour, startDateTime.Minute, startDateTime.Second), End = new DateTime(endDateTime.Year, endDateTime.Month, endDateTime.Day, endDateTime.Hour, endDateTime.Minute, endDateTime.Second), Description = "Description 101", IsAllDay = false }); } return Json(tasks.ToDataSourceResult(request));}
public ActionResult Techs(){ ComboUtility er = new ComboUtility(); List<EmMstr> assignToList = new List<EmMstr>(); assignToList = er.LoadEmployee(true); return Json(assignToList, JsonRequestBehavior.AllowGet);}
Here is my Kendo UI code for scheduler. It's not working and throws "500 (Internal Server Error)" in browser console
$("#recreateButton").on("click", function () { var statusCheckBoxesValues = ""; var area = $("#areaDropDownList").data("kendoDropDownList").value(); var dispatch = $("#dispatchDropDownList").data("kendoDropDownList").value(); var assignto = $("#techDropDownList").data("kendoDropDownList").value(); var category = $("#categoryDropDownList").data("kendoDropDownList").value(); var product = $("#productDropDownList").data("kendoDropDownList").value(); var proditem = $("#itemDropDownList").data("kendoDropDownList").value(); var filter = $("#sortFilterDropDownList").data("kendoDropDownList").value(); var datefrom = $("#fromDatePicker").val(); var dateto = $("#toDatePicker").val(); var schedulerElement = $("#schedulerJob"); var scheduler = schedulerElement.data("kendoScheduler"); scheduler.destroy(); schedulerElement.html(""); schedulerElement.kendoScheduler({ date: new Date("2015/9/30"), startTime: new Date("2015/9/30 07:00 AM"), height: 600, views: [ "day", "week", { type: "timeline", selected: true } ], timezone: "Etc/UTC", dataSource: { batch: true, transport: { read: { url: "/JOBS/JobSchedule_Read", dataType: "json" }, update: { url: "/JOBS/JobSchedule_Update", dataType: "jsonp" }, create: { url: "/JOBS/JobSchedule_Create", dataType: "jsonp" }, destroy: { url: "/JOBS/JobSchedule_Delete", dataType: "jsonp" }, parameterMap: function (options, operation) { if (operation !== "read" && options.models) { return { models: kendo.stringify(options.models), ip_cond: "opq2", ip_area: area == "" ? "[All]" : area, ip_dispatch: dispatch == "" ? "[All]" : dispatch, ip_assignto: assignto == "" ? "[All]" : assignto, ip_category: category == "" ? "[All]" : category, ip_product: product == "" ? "[All]" : product, ip_proditem: proditem == "" ? "[All]" : proditem, ip_streetno: "", ip_filter: filter == "" ? "[All]" : filter, ip_datefrom: datefrom == "" ? null : datefrom, ip_dateto: dateto == "" ? null : dateto, ip_statlist: statusCheckBoxesValues == "" ? "DB" : statusCheckBoxesValues, ip_unsched: false, ip_contr_only: false, ip_quote: false }; } } }, schema: { model: { id: "emm_code" } } }, group: { resources: ["Techs"], orientation: "vertical" }, resources: [ { field: "emm_code", name: "emm_code", dataSource: { transport: { read: { url: "/JOBS/Techs", dataType: "json" } }, }, title: "Techs" } ] });});
In my case I need to apply grouping to the scheduler on the fly. That's why I am destroying and then recreating the scheduler. Please I need to know what's wrong in Kendo UI scheduler code here.
Thanks in advance.
I can't seem to see a way to wait x milliseconds before updating the data if I have filterable: true on my kendoMobileListView.
As it is right now, every time the user types a character, it immediately fetches the next set of data. Unacceptable on mobile devices where data usage is a concern.
How can I wait until no keypresses have occured for 1000ms before implementing the refresh?
We have implemented the back button on our header for a phone gap app.
Clicking on the back button intermittently gives this error "Uncaught Error: Syntax error, unrecognized expression: #:back"
If I type this $("body").data().kendoMobilePane.navigate("#:back"); in the console window it works perfectly, this error comes from jquery.
Please help, can't figure this out as it's intermittent.
Here's the back button in the layout
<a data-role="backbutton" class="icon-button"><i class="fa fa-angle-left"></i></a>
​
Thanks!
Hello, I am trying to apply a custom (non-kendo) template to a filterable cell. The project is in angular. The issues is that when I attempt to apply the custom template, the data from my controller does not seem to be bound at all to the template. See the attached code:
Controller:
$scope.header = "Hello";Grid Configuration:
field: "dataSource", title: "REPORTING_TABLE_COLUMN_TITLE_DATASOURCE", filterable: { cell: { template: function getteamplate(args) { args.element.replaceWith($templateCache.get("modules/reporting/" + "retrieve/templates/dataSourceMultiSelect.tpl.html")); }, operator: "contains", showOperators: false } }Template:
<h1>{{vm.header}}</h1>Am I missing a compile step or something along those lines?
Thanks,
Note: Obviously, these are only code snippets.
We are using Selenium and running our UI tests with BrowserStack.
In our application the user can configure charts to display whatever data she feels like.
In our tests we need to create a chart configuration, mock appropriate data and verify that the data is shown in the chart.
We need to be able to find each datapoint and its associated value.
This was possible in HighCharts where a class is added to all the datapoints (and labels, titles etc.) and thus queryable with Selenium.
I have seen elsewhere that the recommendation is to use the "d" attribute of the path elements but this is not a reasonable solution as we are testing on several different platforms and the value of the "d" attribute does not appear to be constant.
How do you propose we solve this with Selenium?
Thanks,
Casper
Does the Kendo Scheduler or RadScheduler offer a recurrence type that would contain the First Monday of Each Quarter, starting from a specific Monday?
I've got a client requirement to fulfill that request from his clients so they can have a consistent first Monday schedule. Right now the closest I can get is specifying a start date and saying every 3 months, which will land on different days of the week (including the weekend).