We are getting a script error in kendo.all.js file when tried to load the below text in Kendo Editor control, this causes the remaining kendo controls to stop rendering properly.
The text has been copied from ms word and pasted to Editor control. The text is like the following, actually only the text is the only item that we copy from MS word but we are getting other formatting when we paste it to kendo editor.
Also attaching a screenshot of the error we are getting.
<span data-sheets-userformat="{"2":19005,"3":{"1":0},"5":{"1":[{"1":2,"2":0,"5":{"1":2,"2":0}},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"6":{"1":[{"1":2,"2":0,"5":{"1":2,"2":0}},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"7":{"1":[{"1":2,"2":0,"5":{"1":2,"2":0}},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"8":{"1":[{"1":2,"2":0,"5":{"1":2,"2":0}},{"1":0,"2":0,"3":3},{"1":1,"2":0,"4":1}]},"12":0,"14":{"1":2,"2":0},"17":1}" data-sheets-value="{"1":2,"2":"REAL-TIME BUSINESS INTELLIGENCE ON THE 'PRODUCT MANAGEMENT' FUNCTION, DRIVEN BY ONGOING 360-DEGREE ENTERPRISE & STAKEHOLDER COLLABORATION:\n \u2022 ENGAGE internal employees and other key stakeholders in an ongoing 360-degree real-time feedback process that focuses onCritical Success Factors (CSFs)for the Product Management function.\n \u2022 EVALUATE the effectiveness of five key areas within the Product Management function: (1) People & Leadership, (2) Analytics & Insights, (3) Strategy & Planning, (4) Execution & Process, and (5) Performance & Results, with fully customizable 360-degree surveys.\n \u2022 LEVERAGE cutting-edge technology with Performax360 Unified Enterprise Performance Management Application Platform: Adaptive Neuro-Fuzzy Inference System, Context-Aware Intelligent Recommendation System, Stakeholder Sentiment Analysis driven by Cognitive Computing, the world's largest 'Best Practices' knowledgebase, Expert Panels comprising your Subject Matter Experts, and Real-Time Collaboration Hubs.\n \u2022 GAIN real-time, ongoing, and collaborative business intelligence on effectiveness trends within the Product Management function: identification of strengths and weaknesses, SWOT analysis, stakeholder sentiment analysis, Key Performance Indicators, and prioritized Ideas for Action.\n \u2022 VIEW & SHARE real-time assessment results through an interactive online format, or download them in PDF report or PowerPoint Presentation formats.\n \u2022 TRACK & MANAGE ongoing performance improvements within the Product Management function, by appointing a Key Person Accountable for specific action items, tracking real-time progress updates on action-plan implementation, and following task updates and real-time Gantt Charts.\n \n "}" style="font-size:13px;font-family:arial, sans, sans-serif;font-weight:bold;">REAL-TIME BUSINESS INTELLIGENCE ON THE 'PRODUCT MANAGEMENT' FUNCTION, DRIVEN BY ONGOING 360-DEGREE ENTERPRISE &amp; STAKEHOLDER COLLABORATION:<br />&bull; ENGAGE internal employees and other key stakeholders in an ongoing 360-degree real-time feedback process that focuses onCritical Success Factors (CSFs)for the Product Management function.<br />&bull; EVALUATE the effectiveness of five key areas within the Product Management function: (1) People &amp; Leadership, (2) Analytics &amp; Insights, (3) Strategy &amp; Planning, (4) Execution &amp; Process, and (5) Performance &amp; Results, with fully customizable 360-degree surveys.<br />&bull; LEVERAGE cutting-edge technology with Performax360 Unified Enterprise Performance Management Application Platform: Adaptive Neuro-Fuzzy Inference System, Context-Aware Intelligent Recommendation System, Stakeholder Sentiment Analysis driven by Cognitive Computing, the world's largest 'Best Practices' knowledgebase, Expert Panels comprising your Subject Matter Experts, and Real-Time Collaboration Hubs.<br />&bull; GAIN real-time, ongoing, and collaborative business intelligence on effectiveness trends within the Product Management function: identification of strengths and weaknesses, SWOT analysis, stakeholder sentiment analysis, Key Performance Indicators, and prioritized Ideas for Action.<br />&bull; VIEW &amp; SHARE real-time assessment results through an interactive online format, or download them in PDF report or PowerPoint Presentation formats.<br />&bull; TRACK &amp; MANAGE ongoing performance improvements within the Product Management function, by appointing a Key Person Accountable for specific action items, tracking real-time progress updates on action-plan implementation, and following task updates and real-time Gantt Charts.<br /><br /></span>
Hi,
Trying out scheduler with custom editor. Looked and tried out examples provided, works great. But when I tried creating my own, with dropDownList, numericTextBox, etc.
Somehow validation errors shows up (which are blank) at custom editor.
I already looked up TroubleShooting> Validation.
Below is my code based on custom-editor scheduler example:
View:
01.
@using TelerikDemo2.Models;
02.
@(
03.
Html.Kendo().Scheduler<
SchedulerViewModel
>()
04.
.Name("scheduler")
05.
.Date(DateTime.Now)
06.
.StartTime(DateTime.Now)
07.
.Height(600)
08.
.Views(
09.
views =>
10.
{
11.
views.DayView(a => a.Selected(true));
12.
views.WeekView();
13.
views.MonthView();
14.
}
15.
)
16.
.Editable(e =>
17.
{
18.
e.TemplateName("CustomEditorTemplate");
19.
})
20.
.Timezone("Etc/UTC")
21.
.DataSource(d=>d
22.
.Model(m=> {
23.
m.Id(f => f.TaskID);
24.
m.Field(f => f.Title).DefaultValue("No title");
25.
m.RecurrenceId(f => f.RecurrenceID);
26.
})
27.
.Events(e => e.Error("error_handler"))
28.
.Read("Read", "Home")
29.
.Create("Create", "Home")
30.
)
31.
)
32.
33.
<
script
type
=
"text/javascript"
>
34.
$.validator.setDefaults({
35.
ignore: ""
36.
});
37.
38.
kendo.ui.validator.rules.mvcdate = function (input) {
39.
return input.val() === "" || kendo.parseDate(input.val(), "dd/MM/yyyy") != null
40.
}
41.
42.
function error_handler(e) {
43.
if (e.errors) {
44.
var message = "Errors:\n";
45.
$.each(e.errors, function (key, value) {
46.
if ('errors' in value) {
47.
$.each(value.errors, function () {
48.
message += this + "\n";
49.
});
50.
}
51.
});
52.
alert(message);
53.
54.
var scheduler = $("#scheduler").data("kendoScheduler");
55.
scheduler.one("dataBinding", function (e) {
56.
//prevent saving if server error is thrown
57.
e.preventDefault();
58.
})
59.
}
60.
}
61.
</
script
>
CustomEditorTemplate:
001.
@model TelerikDemo2.Models.SchedulerViewModel
002.
003.
@{
004.
ViewContext.FormContext = new FormContext();
005.
}
006.
007.
@functions{
008.
public Dictionary<
string
, object> generateDatePickerAttributes(
009.
string elementId,
010.
string fieldName,
011.
string dataBindAttribute,
012.
Dictionary<
string
, object> additionalAttributes = null)
013.
{
014.
015.
Dictionary<
string
, object> datePickerAttributes = additionalAttributes != null ? new Dictionary<
string
, object>(additionalAttributes) : new Dictionary<
string
, object>();
016.
017.
datePickerAttributes["id"] = elementId;
018.
datePickerAttributes["name"] = fieldName;
019.
datePickerAttributes["data-bind"] = dataBindAttribute;
020.
datePickerAttributes["required"] = "required";
021.
datePickerAttributes["style"] = "z-index: inherit;";
022.
023.
return datePickerAttributes;
024.
}
025.
}
026.
027.
<
div
class
=
"k-edit-label"
>
028.
@(Html.LabelFor(m=>m.PatientName))
029.
</
div
>
030.
<
div
data-container-for
=
"patientName"
class
=
"k-edit-field"
>
031.
@(
032.
Html.Kendo().DropDownListFor(model=>model.PatientName)
033.
.OptionLabel("Select a Person")
034.
.DataTextField("PatientName")
035.
.DataValueField("PatientId")
036.
.DataSource(s =>
037.
{
038.
s.Read(r =>
039.
{
040.
r.Action("GetPatients", "Home");
041.
})
042.
.ServerFiltering(true);
043.
})
044.
.HtmlAttributes(new { style = "width:100%" })
045.
)
046.
@Html.ValidationMessageFor(m=>m.PatientName)
047.
</
div
>
048.
049.
<
div
class
=
"k-edit-label"
>
050.
@(Html.LabelFor(model => model.Attendance))
051.
</
div
>
052.
<
div
data-container-for
=
"attendance"
class
=
"k-edit-field"
>
053.
@(Html.Kendo().DropDownListFor(model => model.Attendance)
054.
.OptionLabel("Select Attendance Type")
055.
.DataTextField("Text")
056.
.DataValueField("Value")
057.
.BindTo(new List<
SelectListItem
>()
058.
{
059.
new SelectListItem()
060.
{
061.
Text = "OK",
062.
Value = "1"
063.
},
064.
new SelectListItem()
065.
{
066.
Text = "NS",
067.
Value = "2"
068.
},
069.
new SelectListItem()
070.
{
071.
Text = "CX",
072.
Value = "3"
073.
}
074.
})
075.
.HtmlAttributes(new { style = "width:100%" })
076.
)
077.
@Html.ValidationMessageFor(m=>m.Attendance)
078.
</
div
>
079.
080.
<
div
class
=
"k-edit-label"
>
081.
@Html.LabelFor(model=>model.Today)
082.
</
div
>
083.
<
div
data-container-for
=
"today"
class
=
"k-edit-field"
>
084.
@(Html.Kendo().NumericTextBoxFor(m=>m.Today)
085.
.Min(0)
086.
.Max(100)
087.
.Value(0)
088.
.HtmlAttributes(new { style="width:100%" })
089.
)
090.
@Html.ValidationMessageFor(m => m.Today)
091.
</
div
>
092.
093.
<
div
class
=
"k-edit-label"
>
094.
@Html.LabelFor(model => model.Copay)
095.
</
div
>
096.
<
div
data-container-for
=
"copay"
class
=
"k-edit-field"
>
097.
@(Html.Kendo().NumericTextBoxFor(m => m.Copay)
098.
.Min(0)
099.
.Max(100)
100.
.Value(0)
101.
.HtmlAttributes(new { style = "width:100%" })
102.
)
103.
@Html.ValidationMessageFor(m => m.Copay)
104.
</
div
>
105.
106.
<
div
class
=
"k-edit-label"
>
107.
@Html.LabelFor(model => model.ExtraService)
108.
</
div
>
109.
<
div
data-container-for
=
"extraService"
class
=
"k-edit-field"
>
110.
@(Html.Kendo().NumericTextBoxFor(m => m.ExtraService)
111.
.Min(0)
112.
.Max(100)
113.
.Value(0)
114.
.HtmlAttributes(new { style = "width:100%" })
115.
)
116.
@Html.ValidationMessageFor(m => m.ExtraService)
117.
</
div
>
118.
119.
<
div
class
=
"k-edit-label"
>
120.
@(Html.LabelFor(model => model.Start))
121.
</
div
>
122.
<
div
data-container-for
=
"start"
class
=
"k-edit-field"
>
123.
@(Html.Kendo().DateTimePickerFor(model => model.Start)
124.
.HtmlAttributes(generateDatePickerAttributes("startDateTime", "start", "value:start,invisible:isAllDay")))
125.
126.
@(Html.Kendo().DatePickerFor(model => model.Start)
127.
.HtmlAttributes(generateDatePickerAttributes("startDate", "start", "value:start,visible:isAllDay")))
128.
@Html.ValidationMessageFor(m => m.Start)
129.
</
div
>
130.
131.
<
div
class
=
"k-edit-label"
>
132.
@(Html.LabelFor(model => model.End))
133.
</
div
>
134.
<
div
data-container-for
=
"end"
class
=
"k-edit-field"
>
135.
@(Html.Kendo().DateTimePickerFor(model => model.End)
136.
.HtmlAttributes(generateDatePickerAttributes(
137.
"endDateTime",
138.
"end",
139.
"value:end,invisible:isAllDay",
140.
new Dictionary<
string
, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))
141.
142.
@(Html.Kendo().DatePickerFor(model => model.End)
143.
.HtmlAttributes(generateDatePickerAttributes(
144.
"endDate",
145.
"end",
146.
"value:end,visible:isAllDay",
147.
new Dictionary<
string
, object>() { { "data-dateCompare-msg", "End date should be greater than or equal to the start date" } })))
148.
@Html.ValidationMessageFor(m => m.End)
149.
</
div
>
150.
151.
<
div
class
=
"k-edit-label"
>
152.
@(Html.LabelFor(model => model.IsAllDay))
153.
</
div
>
154.
<
div
data-container-for
=
"isAllDay"
class
=
"k-edit-field"
>
155.
<
input
data-bind
=
"checked: isAllDay"
data-val
=
"true"
id
=
"isAllDay"
name
=
"isAllDay"
type
=
"checkbox"
/>
156.
@Html.ValidationMessageFor(m => m.IsAllDay)
157.
</
div
>
158.
159.
<
div
class
=
"k-edit-label"
>
160.
@(Html.LabelFor(model => model.RecurrenceRule))
161.
</
div
>
162.
<
div
data-container-for
=
"recurrenceRule"
class
=
"k-edit-field"
>
163.
@(Html.Kendo().RecurrenceEditorFor(model => model.RecurrenceRule)
164.
.HtmlAttributes(new { data_bind = "value:recurrenceRule" }))
165.
@Html.ValidationMessageFor(m => m.RecurrenceRule)
166.
</
div
>
Model:
01.
public class SchedulerViewModel : ISchedulerEvent
02.
{
03.
public int TaskID { get; set; }
04.
public string Title { get; set; }
05.
public string Description { get; set; }
06.
07.
private DateTime start;
08.
[Required]
09.
public DateTime Start
10.
{
11.
get
12.
{
13.
return start;
14.
}
15.
set
16.
{
17.
start = value.ToUniversalTime();
18.
}
19.
}
20.
21.
public string StartTimezone { get; set; }
22.
23.
private DateTime end;
24.
[Required]
25.
public DateTime End
26.
{
27.
get
28.
{
29.
return end;
30.
}
31.
set
32.
{
33.
end = value.ToUniversalTime();
34.
}
35.
}
36.
37.
public string EndTimezone { get; set; }
38.
39.
[Display(Name ="Recurrence")]
40.
public string RecurrenceRule { get; set; }
41.
42.
public int? RecurrenceID { get; set; }
43.
public string RecurrenceException { get; set; }
44.
public bool IsAllDay { get; set; }
45.
public int? OwnerID { get; set; }
46.
47.
[Required]
48.
[Display(Name ="Person")]
49.
public string PatientName { get; set; }
50.
51.
public string Attendance { get; set; }
52.
public int Today { get; set; }
53.
public int Copay { get; set; }
54.
public int ExtraService { get; set; }
55.
56.
public Task ToEntity()
57.
{
58.
return new Task
59.
{
60.
TaskID = TaskID,
61.
Title = Title,
62.
Start = Start,
63.
StartTimezone = StartTimezone,
64.
End = End,
65.
EndTimezone = EndTimezone,
66.
Description = Description,
67.
RecurrenceRule = RecurrenceRule,
68.
RecurrenceException = RecurrenceException,
69.
RecurrenceID = RecurrenceID,
70.
IsAllDay = IsAllDay,
71.
OwnerID = OwnerID,
72.
PatientName = PatientName,
73.
Attendance = Attendance,
74.
Copay = Copay,
75.
ExtraService = ExtraService,
76.
TodayCopay = Today
77.
};
78.
}
79.
}
What did I do wrong? Help please? Thanks.
I am running my site against tools.pingdom.com and am getting the message that I should Specify a Vary: Accept-Encoding header for the Kendo CDN files, which I am referending using https://. Attached image shows the message I'm getting.
Am I able to do this and, if so, where and how?
Thanks.
I want to use the control for time only. Could I hide the date button ?
Best regards
Hello!
We had a issue with the grid filter, located on the modal window.
If your browser window has a vertical scroll, the filters that do not fit in the pop-up window,
displaying and hiding immediately.
The contents of the pop-up window is in the iframe.
The problem is typical for IE11.
The example in the attachment.
Kendo version: 2015.2.805
Hello I have a grid inside a horizontal Pane inside a splitter pane. I need the splitter pane to increase its height automatically according the size of the grid and not trigger scrolling inside the splitter.
Thank you
Hello,
I'm trying to trigger the Create operation using the custom button (created by using custom header template of the custom column, as shown on the screenshot) - in order to avoid use of the grid toolbar. Is there a way to bind the Create operation to the custom control, on the grid?
Regards
When using a datetime picker in a custom editor from a grid that has lot of columns that need to scroll for accessing the edit button,
The calendar display outside the editor window. Attached is a screenshot.
Any turnaround ?
MyView
@(Html.Kendo().Grid(Model)
.Name("myGrid")
.ToolBar(tools => tools.Excel()).Name("idsName")
.Columns(columns =>
{
columns.Bound(model => model.Genre).Title("Genre");
columns.Bound(model => model.Price).Title("Price");
columns.Bound(model => model.ReleaseDate).Title("ReleaseDate");
columns.Bound(model => model.Title).Title("Title");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' disabled='disabled'/>");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("<input type='checkbox' #= isAvailable ? checked='checked':'' # class='chkbx' />");
//columns.Bound(model => model.isAvailable).Title("Availability").ClientTemplate("@Html.Kendo().CheckBox()");
columns.Command(commands =>
{
commands.Edit().Text(@Localizer["idsEdit"].Value); // The "edit" command will edit and update data items.
commands.Destroy(); // The "destroy" command removes data items.
}).Title("Commands").Width(200);
})
.Editable(editable => { editable.Mode(GridEditMode.PopUp);
editable.TemplateName("MovieEditor");
editable.Window(w=>w.Title("MonTitre").
Width(450));}) // Use inline editing mode.
.DataSource(dataSource => dataSource
.Ajax())
)
MyEditor
@model MvcMovieCore.Models.Movie
@{
ViewData["Title"] = "Edit";
}
<div class="form-horizontal">
<h4>Movie</h4>
<hr />
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="ID" />
<div class="form-group">
<label asp-for="Genre" class="col-md-3 control-label"></label>
<div class="col-md-7">
<input asp-for="Genre" class="form-control" />
<span asp-validation-for="Genre" class="text-danger" />
</div>
</div>
<div class="form-group">
@(Html.Kendo().DateTimePicker()
.Name("MyPick")
.HtmlAttributes(new { style = "left:50px;" })
)
</div>
<div class="form-group">
<label asp-for="Price" class="col-md-3 control-label"></label>
<div class="col-md-7">
<input asp-for="Price" class="form-control" />
<span asp-validation-for="Price" type="number" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<label asp-for="ReleaseDate" class="col-md-3 control-label"></label>
<div class="col-md-7">
<input asp-for="ReleaseDate" asp-format="{0:D}" class="form-control" />
<span asp-validation-for="ReleaseDate" class="text-danger" />
</div>
</div>
<div class="form-group">
<label asp-for="Title" class="col-md-3 control-label"></label>
<div class="col-md-7">
<input asp-for="Title" class="form-control" />
<span asp-validation-for="Title" class="text-danger" />
</div>
</div>
</div>