Hello
We're experiencing slow performance in IE 11 with a Kendo Grid when it contains a couple hundred rows. We use a custom rowTemplate which is fairly complex, with icons and angular markup.
What I see when debugging is that on every change to one item of the grid (change is triggered externally, not via direct edit on the grid, and sent to the DataSource with pushUpdate()), the whole grid is being re-rendered, which is fairly expensive as it has to render the complex template for all hundreds of rows.
Is it possible to have the grid only re-render the affected row ? It should significantly increase performance in our case.
Thanks

I have an Angular App that muss send an authorization header within every request that makes to the server.
When defining the kendo datasource, I've added the header field:
this._tableData = new kendo.data.DataSource({
transport: {
read: {
cache: true,
url: `${this.baseUrl}/uiobjects/_search`,
dataType: "json",
contentType: "application/json; charset=utf-8",
type: "POST",
headers: {'Authorization': this.header}
},
Allowing me to fill the kendo grid with data, but for one of the rows I've defined a template:
template: `<div class='title'><div class='pic'><img src="#:_links.previewdata.href#" alt="thumbnail"></div><span>#: title #</span></div>`
and there makes another request to the server in order to grab the image.
My problem here, is that I am not being able to set this authorization header for these request. Angular interceptors doesn't work because they are not made through $http.
Is there any clean way to intercep these request, or to add a Header??
Hello,
I'm trying to create a kendo grid with pagination, sorting and filtering in server side.
The grid configuration in client side is:
$scope.options = { sortable: true, filterable: true, pageable: true, dataSource: { transport: { read: { url: "api/items", contentType: "application/json", dataType: "json", type: "POST" }, parameterMap: function (options) { return kendo.stringify(options); } }, schema: { total: "totalItems", data: "items" }, serverPaging: true, pageSize: 4, serverSorting: true } };In server side, I've tried to do the pagination but it doesn't work. I have used Kendo.DynamicLinq. The DataSourceRequest containg (take, skip, sort) is corrected loaded from the request but when the query is executed it returns an error because of AutoMapper conversion from Dto to Model.
What is the correct way of implementing server side pagination, sorting and filtering for Kendo UI Grid, Web API and Automapper(conversion from dto to model)?
Hi,
do you have any solution with Kendo UI to produce a simple Dual List Box like e.g. http://www.virtuosoft.eu/code/bootstrap-duallistbox/ ?
MultiSelect is fine, but if you have longer lists it is not viable. A dual list box does the same Thing as MultiSelect, but is much more intuitive and clear. Any hints are welcome. Thanks!
Best regards
Martin

I got some extra div showing in the scheduler view. Anyone knows why?
the three little very thin bars are not any of my events.
I have a Kendo Editor defined as below:
@(Html.Kendo().Editor()
.Name("RestrictionsEditor")
.Tag("div")
.Tools(tools => tools
.Clear()
.Bold().Italic().Underline().Strikethrough()
.JustifyLeft().JustifyCenter().JustifyRight().JustifyFull()
.CreateLink().Unlink()
.InsertImage()
.TableEditing()
.FontColor().BackColor()
)
.Value(@<text><p>This is readonly editor initially and only gets in edit mode after button is clicked</p></text>))
Below is how I am making the Editor as readonly:
<script type="text/javascript">
$(function () {
var editor = $("#RestrictionsEditor").data("kendoEditor"),
editorBody = $(editor.body);
// make readonly
editorBody.removeAttr("contenteditable").find("a").on("click.readonly", false);
})
</script>
I want to get editor in 'Edit' mode only when a button is clicked. Below is how I am defining my button:
<button class="btn-sm" id="edit">Edit</button>
I have defined my button just before initializing Kendo Editor.
And below is how I am trying to get the editor to edit mode:
<script type="text/javascript">
$("#edit .btn").click(function () {
var editor = $("#RestrictionsEditor").data("kendoEditor"),
editorBody = $(editor.body);
editorBody.attr("contenteditable", true).find("a").off("click.readonly");
})
</script>
Now, when I run application my editor is in read only and when I click 'Edit' button, editor doesn't gets in edit mode and instead as soon as I click button, I m directed to the original page. Forgot to mention, my editor is inside a tab, which is inside of a modal.
Can you tell me where I am doing wrong and how can I acheive th
Thanks!
I've tested in Chrome (49.0.2623.112 m), Firefox (45.0.2), IE 11 (11.212.10586.0), and MS Edge (25.10586.0.0).
I'm having to programmatically resize some parent panes and a vertical splitter, it would be nice to bind that event and call my resize function there.
And while the contentLoad event doesn't appear to be working, the resize event does fire.
I'd also like to note that the kendoSplitter loads beautifully in IE 11.
Thanks!
Is it possible to have jQuery run inside of an inline template?
Here's what I'm trying to accomplish. I have an inline template that contains a form that the user fills out to submit back to my controller. I have a set of radio buttons on the form. If they click on the last radio button, I need my textarea to appear and be required for form submission.
Here's my template:
<script type="text/x-kendo-template" id="rejectTemplate"> <div id="reject-container"> @using (Html.BeginForm("RejectConcern", "Filter", FormMethod.Post, new { @id = "rejectConcern", @style = "width:100%", @class = "k-content" })) { @Html.AntiForgeryToken() <input type="hidden" id="id" name="id" value="#= data.id #" /> <table> <tr> <td valign="top"> <label>Reason</label> </td> <td> <label> @Html.RadioButton("reasonForRejection", "NotQuestion", false, new { @id = "reasonForRejection" })Concern is not a question and will not be answered </label> <label> @Html.RadioButton("reasonForRejection", "Inappropriate", false, new { @id = "reasonForRejection" })Concern contains inappropriate language and will not be answered </label> <label> @Html.RadioButton("reasonForRejection", "Irrelevant", false, new { @id = "reasonForRejection" })Concern is not relevant to our business/operation and will not be answered </label> <label> @Html.RadioButton("reasonForRejection", "Personal", false, new { @id = "reasonForRejection" })Concern is about an individual, a specific group, or area and will not be answered </label> <label> @Html.RadioButton("reasonForRejection", "Other", false, new { @id = "reasonForRejection" })Other </label> </td> </tr> <tr> <td> </td> <td> @Html.TextArea("answer", new { @id = "answer", @name = "answer", @class = "k-textbox", @placeholder = "Enter the reason for rejection here.", @validationmessage = "The reason for rejection is required.", @style = "width: 600px; min-width:600px; max-width:69%; height:200px", @maxlength = "1000" } ) </td> </tr> <tr> <td> </td> <td> <div class="actions"> <button type="submit" id="rejectConcernButton" class="k-button">Submit</button> </div> </td> </tr> </table> } </div></script>How can I use jQuery to show/hide the answer textarea field depending on if the last radio button is checked or not? If jQuery isn't possible, can it be done via regular JavaScript?
