Questions on Kendo UI for jQuery Forum

8 answers

1.0K+ views

When I try to export a file to PDF the browser window locks up while the pdf file is generated. In my case, I am exporting a grid with 124 rows which takes about 5 seconds and another grid with 760 rows which takes about 20 seconds. Besides locking up the page from further scrolling, this is noticeable because the user expands a menu to select the download button and the menu gets stuck open until the file is generated. With this happening I'm also not sure how I would add a loading spinner to the page to tell the user something really is happening.

Any suggestions on how to make it faster and how to close the menu and add a loading spinner would be appreciated.

Grid

answered on 16 Dec 2019

2 answers

409 views

Grid EDIT Popup Double Click Event Bug

This may not be a bug, but I think it's a bug.

I found something strange while using the edit popup.

{command: [{name: "edit", text: "edit"}], title: "feature", width: 100, filterable: false}

If you modify it using, no problem occurs.

dataBound: function (e) {
var grid = this;

grid.element.on ('dblclick', 'tbody tr', function (e) {
grid.editRow ($ (e.target) .closest ('tr'));
})
},

However, if you try to use the edit screen by using double-click instead of edit command, you now have a definite problem.

After opening the registration window once and canceling, double-clicking an existing item creates several windows.

What bug is this?

We will replace it with a YouTube link due to video size limitation.

https://youtu.be/FEl7LLfWD1w

Grid

answered on 14 Dec 2019

14 answers

3.5K+ views

dataSource number format

Is there any way (or documentation) about formatting numbers in dataSources?

I have seen the formatting for dates, but I am trying to create a javascript datasource (array) for binding to a kendo grid that contains numbers with 4 decimal places. When the following code runs, it creates a grid with 4 decimal places listed, but when you edit the column it changes to 2 decimal places. Do i need to overwrite the edit function, or am i declaring my format incorrectly?

var mySource = [{"ID":1,"Item":1.1234}];

var myDataSource = new kendo.data.DataSource({

data:mySource,

schema: {

model:{

id:"ID",

fields:{

ID:{type="number"},

Item:{type="number",format:"{n4}"}

}

});

$('#grid').kendoGrid({

dataSource:myDataSource,

columns:[

{field:"ID",title:"ID"},

{field:"Item",title:"Item",format:"{n4}"}

],

editable:true

});

Data Source

answered on 13 Dec 2019

6 answers

717 views

How to format for print and export group of graphs

I am trying to export a group of charts to a pdf. The chart grouping is similar to the ones here: https://demos.telerik.com/kendo-ui/pdf-export/index

I would like to reformat them so that they fit nicely on a letter size piece of paper. I looked at the example here: https://demos.telerik.com/kendo-ui/pdf-export/page-layout.

My issue is that in this example, the web page is already formatted like the printed page. In my case I want to take example 1 (pdf-export/index) and format it like example 2 (pdf-export/page-layout).

I tried using the .k-pdf-export class to do this but my charts ended up sized incorrectly with pieces cut off.

What is the best way to accomplish my goal?

General Discussions

answered on 12 Dec 2019

3 answers

632 views

Kendo elements not working without using unsafe-eval

I am facing a problem for kendo UI element(Dropdown, MultiSelect, Grid etc. ) in our application where we are implementing Content Security Policy(CSP) in the application. We need to give “unsafe-eval” Value to CSP so that the kendo elements work on the page . But using"unsafe-eval" violates the content security policy. Without the "unsafe-eval" the kendo elements don’t work. Is there any work around if we don’t want to include “unsafe-eval” and all kendo elements should work as expected ?

General Discussions

answered on 12 Dec 2019

1 answer

447 views

Kendo elements not working without unsafe-eval

Hello, are you planning to remove the unsafe-eval as part of the content security policy?

In this documentation is saying that this is required

https://docs.telerik.com/kendo-ui/troubleshoot/content-security-policy

We need to remove this option from our website and we can't due Kendo library. Are you going to change this requirement in some of the upcoming version?
Thanks,

General Discussions

answered on 12 Dec 2019

8 answers

1.1K+ views

Window positioning

There isn't a function in kendo for a window to set the location / position of the window. It took me 30 minutes to figure this out, hopefully it'll help someone.

var kendoWindow = $("#window").data("kendoWindow");

kendowWindow.element.parent().css({left:400,top:200});

The kendowWindow object contains the content of the window, and that is contained inside another div which has the window bar.

Window

answered on 12 Dec 2019

4 answers

155 views

How can I plot a serie starting from a desired X value?

Hello Kendo support!

I am trying to plot a chart in which a serie ends in a desired x value and another serie starts from a desired x value. (I already tried the valueAxis min property, but this is not what I need at all).

To make the question clear, I am uploading two images that represents what I want graphically ;)

I need this quickly, since I need to deliver a feature with this behavior on the chart.

Thank you very much!

Best regards,

Nilton

Charts

answered on 10 Dec 2019

1 answer

1.0K+ views

Unable to refresh dynamic grid

Hello,

I am creating a jQuery grid dynamically like below. A user is able to add new data (columns) via an external dialog and button. When the button is clicked a new column is added to the dynamic list for the grid's data and then I send the "read" and "refresh" commands for the grid. However, the grid never displays the grid with the new column. The new column also doesn't show when physically click on the refresh icon button on the bottom of the grid.

Here's how I create my grid:

function createGrid(gridName, baseUrl) {

$.ajax({

type: "POST",

url: baseUrl,

dataType: "json",

success: function (response) {

var sampleDataItem = response[0];

var model = generateModel(sampleDataItem);

var dataSource = generateDataSource(baseUrl, model);

var columns = generateColumns(sampleDataItem);

var gridOptions = {

toolbar: [

{ template: kendo.template($('#toolbartemplate').html()) }

],

dataSource: dataSource,

dataBound: grdRRManagement_OnDataBound,

columns: columns,

pageable: {

pageSizes: [5, 10, 20, 50, "all"],

numeric: true,

refresh: true

},

editable: false,

selectable: false

}

var grid = $("#" + gridName).kendoGrid(gridOptions);

},

error: function (error) {

console.log("Error while creating R&R Management Grid! " + JSON.stringify(error));

}

});

}

function generateModel(sampleDataItem) {

var model = {};

var fields = {};

for (var property in sampleDataItem) {

if (property.indexOf("ThreatId") !== -1) {

model["Id"] = property;

}

var propType = typeof sampleDataItem[property];

if (propType === "number") {

fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {

from: "['" + property + "']",

type: "number",

validation: {

required: false

}

};

if (model.id === property) {

fields[property].editable = false;

fields[property].validation.required = false;

}

} else if (propType === "boolean") {

fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {

from: "['" + property + "']",

type: "boolean"

};

} else if (propType === "string") {

var parsedDate = kendo.parseDate(sampleDataItem[property]);

if (parsedDate) {

fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {

from: "['" + property + "']",

type: "date",

validation: {

required: false

}

};

isDateField[property] = true;

} else {

fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {

from: "['" + property + "']",

validation: {

required: false

}

};

}

} else {

fields[property.replace(/(\n|\r|[^a-zA-Z0-9])/g, '')] = {

from: "['" + property + "']",

validation: {

required: false

}

};

}

model.fields = fields;

return model;

}

function generateDataSource(baseURL, model) {

var dataSource = new kendo.data.DataSource({

transport: {

read: {

url: baseURL,

dataType: "json",

contentType: "appliation/json",

async: true,

cache: false

}

},

schema: {

model: model

},

pageSize: 50

});

return dataSource;

}

var grid = $("#RRManagement").data("kendoGrid"):

//I've tried read() and refresh()
grid.dataSource.read();
grid.refresh();

//I've also tried sync(), but I only get the spinning loading icon that never goes away.
grid.dataSource.sync();

I'm not sure what I'm doing wrong. Any help is appreciated. Thanks.

Shawn A.

Grid

answered on 09 Dec 2019

3 answers

3.7K+ views

Seriously slow Grid performance

Hi

We have integrated KendoUI Grid in our project and it went fine. But until recently we used it for a particularly complicated page, the performance become very slow and unacceptable when browse in IE. We tested IE8,9,11, all perform poorly. sometimes we even get the "stop script" error in IE.

Is there any suggestion? or solutions?

Here's some details:

Kendo UI v2014.3.1119
33 columns
250+ rows
3 level grouping
some column is cell editable
no paging is allowed
use groupHeaderTemplate and groupFooterTemplate to display subtotal
2 columns freeze

Grid

answered on 09 Dec 2019