Questions on Kendo UI for jQuery Forum

1 answer

401 views

Skip and Take are Expression Constants in C# ToDataSourceResult

We have discovered that the Skip and Take parameters that are used for paging, are treated as expression constants inside the Kendo.Mvc librabry.

For this reason, each page will generate a slightly different query because these two numbers are IN the query versus begin a query parameter.

Most DBMS systems who use optimized query plans, will not be able to re-use these plans for different pages, which is a performance waste.

Here are some blogs also describing our issue:

https://anthonychu.ca/post/entity-framework-parameterize-skip-take-queries-sql/
https://visualstudiomagazine.com/articles/2016/12/06/skip-take-entity-framework-lambda.aspx

I also attached a screenshot of the Skip and Take implementation of the Kendo.Mvc Queryable Extensions library.

Our software is based on .NET 4.6 and we have no near-future plans to going to .NET Core.

Is there a workaround for this performance issue?

Grid

answered on 09 Nov 2017

5 answers

275 views

MVVM inheritance

In documentation it writes, that kendo.Observable inherits from kendo.Class. In documentation for Class I read "The base class of most Kendo objects. Provides simple inheritance support".

So with the upper statements this should work:

<div id="main">

<div data-bind="html: value"></div>

<div data-bind="html: value2"></div>

</div>

<script>

var MVVM1 = kendo.observable(

{

value: "bla",

});

var MVVM2 = MVVM1.extend(

{

value2: "bla2",

});

kendo.bind($('#main'), this.MVVM2);

</script>

but it doesn't.
Is there any way to inherit with MVVM? In my SPA I could share some MVVM and I don't want to duplicate code.

MVVM

answered on 09 Nov 2017

7 answers

1.6K+ views

Export to Excel Row Limit?

Is there a limit on the number of rows you can export from the spreadsheet into excel?

Im having trouble with 15,000 rows, 31 columns.

Thanks

Spreadsheet

answered on 08 Nov 2017

2 answers

636 views

Vanish selected values in multiselect in inline editing kendogrid

I have multiselect field in grid with inline editing. When I enter 1st time edit mode, everything displays correct. but when I enter 2nd and more, selected values in multiselect box dissapear, but they are staying selected in dropdown list. How can I fix it?

Code below:

function authorMultiSelectEditor(container, options) {

indexAuthor = options.model.Id

$('<select data-bind="value:' + options.field + '"/>')

.appendTo(container)

.kendoMultiSelect({

filter: "startswith",

suggest: true,

autoBind: false,

valuePrimitive: true,

dataTextField: "Name",

dataValueField: "Id",

dataSource: auhors,

select: onSelectAuthor,

deselect: onDeselectAuthor

});

};

let datasource = new kendo.data.DataSource({

transport: {

read: function (e) {

$.ajax({

type: "GET",

url: '/Book/Index',

contentType: "application/json; charset=utf-8",

dataType: "json",

success: function (data) {

e.success(data);

},

error: function (data) {

e.error("", "400", data);

}

});

},

update: function (e) {

var postData = new createUpdatedBook(e.data);

$.ajax({

type: "POST",

url: '/Book/Update',

contentType: "application/json; charset=utf-8",

dataType: "json",

data: JSON.stringify(postData),

success: function (data) {

$('#grid').data('kendoGrid').dataSource.read();

$('#grid').data('kendoGrid').refresh();

},

error: function (data) {

$('#grid').data('kendoGrid').dataSource.read();

$('#grid').data('kendoGrid').refresh();

e.error("", "400", data);

}

});

},

create: function (e) {

var postData = e.data;

$.ajax({

type: "POST",

url: '/Book/Insert',

contentType: "application/json; charset=utf-8",

dataType: "json",

data: JSON.stringify(postData),

success: function (data) {

e.success(data);

$('#grid').data('kendoGrid').dataSource.read();

$('#grid').data('kendoGrid').refresh();

},

error: function (data) {

e.error("", "400", data);

$('#grid').data('kendoGrid').dataSource.read();

$('#grid').data('kendoGrid').refresh();

}

});

},

destroy: function (e) {

var postData = e.data.Id;

$.ajax({

type: "POST",

url: '/Book/Delete/?id=' + postData,

contentType: "application/string; charset=utf-8",

dataType: "string",

data: postData,

success: function (data) {

e.success(data);

},

error: function (data) {

e.error("", "400", data);

}

});

}

},

batch: false,

pageSize: 20,

schema: {

model: {

id: "Id",

fields: {

Id: { type: "string", editable: false, },

Name: { type: "string", validation: { required: true } },

IdPublisher: { type: "string", editable: false },

PublisherName: { type: "string", validation: { required: true } },

IdAuthor: { type: "string", editable: false },

AuthorName: { type: "string", validation: { required: true } },

}

},

change: function (e) {

if (e.action === "itemchange" && e.field == "PublisherName") {

var model = e.items[0],

currentValue = dataItem.Id;

if (currentValue !== model.IdPublisher) {

model.IdPublisher = currentValue;

$("#grid").find("tr[data-uid='" + model.uid + "'] td:eq(3)").text(currentValue);

}

},

requestEnd: onRequestEnd

});

$("#grid").kendoGrid({

dataSource: datasource,

navigatable: true,

pageable: true,

height: 550,

toolbar: ["create", "cancel"],

columns: [

{ field: "Id", title: "id" },

{ field: "Name", title: "Book Name", width: 400 },

{ field: "Authors", title: "Authors", template: authorMultiTemplate, editor: authorMultiSelectEditor, width: 700 },

{ field: "IdPublisher", title: "IdPublisher" },

{ field: "PublisherName", title: "Publisher", editor: publisherAutoCompleteEditor, width: 300 },

{ command: ["edit", "destroy"], title: " ", width: 300 }],

toolbar: ["create"],

editable: "inline",

dataBound: function (e) {

this.hideColumn(0);

this.hideColumn(3);

}

});

MultiSelect

answered on 08 Nov 2017

3 answers

262 views

Add image in cell

Hello,

I want to ask, is in spreadsheet can add images on cells?

Thanks

Spreadsheet

answered on 08 Nov 2017

9 answers

523 views

Send token as part of "Remove file request"

Hi,

I'm currently using your File Uploader widget as part of an edit dialog in a Grid. When uploading I've managed to send a token as part of the header, but I can't get this to work when I'm trying to remove files? I've debugged in to the code and the event-object is missing the "XMLHttpRequest" property. Has this been added in later versions of Kendo(I'm using ) or is there another way I can append said token as part of the header?

My code for the "onUpload" and "onRemove" events are as follows:

01.function onUpload(e) {

02. var xhr = e.XMLHttpRequest;

03. xhr.addEventListener('readystatechange', function(e) {

04. //1 = Opened, append the Authorisation token with the request

05. if (xhr.readyState === 1) {

06.

07. // jscs:disable requireCamelCaseOrUpperCaseIdentifiers

08. xhr.setRequestHeader('Authorization', 'Bearer ' + apiservice.getAccessToken()); //jshint ignore: line

09. // jscs:enable requireCamelCaseOrUpperCaseIdentifiers

10. }

11. });

12. }

13.

14. function onRemove(e) {

15. //Send file ids to the server

16. //This seems to always contain one file..

17. var fileIds = [];

18. for (var j = 0; j < e.files.length; j++) {

19. fileIds.push(e.files[j].fileid);

20. }

21. e.data = {fileIds: fileIds};

22. }

Upload

answered on 08 Nov 2017

2 answers

881 views

DropDown filter on DataValueField

Hi.
I have this dropdown

function SomeFilter(element) {

$(element).attr('id', "SOmething");

element.kendoDropDownList(
{
dataSource: {
    transport: {
      read:
      {
        type: "POST",
        url: "@Url.Action("SomeAction", "SomeController")"
      }
    }
},
filter: "contains",
highlightFirst: true,
delay: 300,
optionLabel: "Select Something",
  dataTextField: "dataTextField",
  dataValueField: " dataValueField ",
  select: onSelect,
dataBound: onDataBound,
open: onOpen
});
}

that is a filter in my grid

columns.Bound(e => e.SomeValue).Title("SomeTitle").Width(85).Filterable(x => x.UI("SomeFilter").Extra(false));

So far, so good. This all works fine. What I need to need is if there is a way to do the filtering on dataValueField instead of dataTextField.

DropDownList

answered on 08 Nov 2017

8 answers

3.2K+ views

Row Number In Kendo grid

i am using kendo grid.
is there any inbuilt API for generate Row Number Column in kendo Grid.

i tried this way in onGridDataBound Event.

           gridName = gridName == null ? '' : '#' + gridName;
           var dataTable = $(gridName + ' .k-grid-header table');
           var ContentTable = $(gridName + ' .k-grid-content table tr');
           if(dataTable.find('th[role=RowNumber]').length == 0)
           {
              dataTable.first().find('thead tr th:eq(0)').before("<th width='100px' scope='col' role='RowNumber' >Row Number</th>");
           }
           var hasRowNumber = ContentTable.first().find('td.rownumber').length == 0 ? true : false;
           ContentTable.each(function(index, row){
                  if(hasRowNumber)
                  {
                    $(row).find('td').first().before("<td title='RowNumber' role='gridcell' class='rownumber' >"+ (index + 1)+"</td>");
                  }
                  else
                  {
                    $(row).find('td.rownumber').html(index + 1);
                  }
          });

but when i change data source client side then it's not working.

please help

Thanks,

Mayank

Grid

answered on 08 Nov 2017

1 answer

135 views

Columns menu not scrolling on filterable columns

I'm working with grids that have a lot of columns. Using your latest version (2017.3.1026), the 'Columns' menu for any column that is also filterable can no longer be scrolled using a trackpad or scroll wheel. The dojo example below was copied from the column menu demo: http://demos.telerik.com/kendo-ui/grid/column-menu but more columns were added to demonstrate scrolling. The undesired behavior can be seen on the first four columns which are filterable. Beginning with the fifth column, 'Test 2', the 'filterable' property is set to 'false' and scrolling behaves as expected. This is reproducible in the latest versions of Chrome and Firefox.

http://dojo.telerik.com/aQoxa

Grid

answered on 08 Nov 2017

1 answer

76 views

Want to show relevent google icons/images into gantt chart columns along with start/end date columns

Need to show google icons into gantt chart column to see the status of task. Here is my code!

var tasksDataSource = new kendo.data.GanttDataSource({
data:DS,
schema: {
model: {
id: "id",
fields: {
sr: { from: "sr", type: "number" },
id: { from: "id", type: "string" },
runtimes: { from: "runtimes"},
parentId: { from: "parentId", type: "string", defaultValue: null, validation: { required: true } },
start: { from: "start", type: "date", format: "{0:MM/dd/yyyy}" },
end: { from: "end", type: "date", format: "{0:MM/dd/yyyy}" },
diff: { from:"diff", type: "string" },
title: { from: "title", defaultValue: "", type: "string" },
summary: { from: "summary", type: "boolean" },
expanded: { from: "expanded", type: "boolean", defaultValue: true }
},
computedRuntimes: function() {if (this.runtimes == JSON.stringify({"included":true,"pending":true,"executed":false}) ) {

x.push("a");

}
if (this.runtimes == JSON.stringify({"included":true,"pending":true,"executed":true}) ) {
x.push("b");
}
if (this.runtimes == JSON.stringify({"included":false,"pending":false,"executed":true}) ) {
x.push("b");
}
if (this.runtimes == JSON.stringify({"included":true,"pending":false,"executed":true}) ) {
x.push("c");
}
return x;
}
},
}
});

NumericTextBox

answered on 08 Nov 2017