Questions on Kendo UI for jQuery Forum

5 answers

297 views

dataSource (on gantt widget) pushUpdate slow

Hello,

I need a little help regarding pushUpdate function on my gantt widget. When my gantt has significant number of items in dataSource (cca 700) pushUpdate takes approx. 15 seconds to update.

I can't use option to transform dataSource.data to array, insert/replace records, and then set it back, because I have multiple users working on same project, and I receive update notifications via webSocket, so frequency and number of updates can vary. Basically I don't have the time pocket where I can be sure that someone changes won't be overwritten, and specially because my gantt is being changed "from behind" because someone else changed project I am working on.

I am currently on Kendo UI version 2019. R3 (and have no chance to update it in next 2-3 months).

Thanks

Data Source

answered on 13 Oct 2020

3 answers

163 views

Justify Kendo Bar Chart

<div id="chart"></div>

<script>

$("#chart").kendoChart({

categoryAxis: [{

justified: true,

categories: ["2012", "2013"]

}],

series: [

{ type: "line", data: [1, 2, 3] },

{ type: "bar", data: [1, 2, 3] }

]

});

</script>

What I'm trying to do here is I want to justify both line and bar chart so that there is no space in the beginning and also at the end. But I cannot use justify since categoryAxis.justified is only works with line chart. Is there any other option I can use to that both line and bar chart can justify.

General Discussions

answered on 12 Oct 2020

3 answers

172 views

Remove the Update button from viewHtml?

Hi, is there a way to remove the Update button from viewHtml? We want the user to be able to edit as they please until they select view as html. We only want them to view html as read only for information purposes. Thanks.

https://dojo.telerik.com/USEwEgis

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.default-v2.min.css"/>

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
</head>
<body>

<textarea id="editor"></textarea>
<script>
$("#editor").kendoEditor({
tools: [
"bold", "italic", "underline",
{
name: "viewHtml",
tooltip: "View Html",
}
]
});
</script>
</body>
</html>

Editor

answered on 12 Oct 2020

4 answers

328 views

Drag multiple

Hello,
is it possible to drag more than one item from one list to another? or is this feature in planing?

For selecting more than 1 here is an angularjs example:

Angular Multiple Selection

combined with

Kendo linkedlist

Regards,
Sven

Sortable

answered on 09 Oct 2020

1 answer

332 views

Left-align overflow anchor button

I have tried to left-align the overflow anchor of the ToolBar, which I achieved using css, specifically by setting ".k-overflow-anchor { right: auto; }".

That works fine, but the problem is that the popup is still aligned to the right side of the overflow anchor button, see attached image.

Toolbar

answered on 09 Oct 2020

1 answer

2.3K+ views

Kendo Grid Grouping Column Title

Hi, is it possible to move the column name under the group header?

i want to move the column header below the group header.

Grid

answered on 09 Oct 2020

1 answer

186 views

Chart section scroll on mobile device is not working

Eg,

<div>

<div>Header</div>

<div>Content</div>

<div>Chart</div>

<div>Content</div>

<div>Footer</div>

<div/>

So the top header and content scroll on mobile but when chart div or section came then scroll is not working i can't scroll down also the left and right gutter space i can scroll down but not line chart div.

Charts

answered on 09 Oct 2020

5 answers

902 views

TreeList with groupable header columns

Hey Folks,

is it possible to achieve the same functionality that the grid component offers ( groupable header columns ) in the TreeList? The documentation does not mention something like that and i did not get it to work.

Is my only option to use the grid component with dynamic subgrids?

TreeList

answered on 08 Oct 2020

5 answers

4.8K+ views

Filter and sort string columns as Date

Hello,

I have a grid and the data I receive is in string, even for my 2 date columns. I was able to change them in the preferred Date format, but I can't seem to get the filter and sorting working.

I tried to change the datatype of the columns to datetime, but that was unsuccesfullI

I'm now looking for some help to create a custom filter (and sort) so that I can sort and filter my date columns the correct way.

It's a pretty complicated solution, but here's some of the code were I load my grid:

function loadGrid(userGridSettings) {

var gridSettings = {

selectable: "multiple row",

sortable: true,

filterable: true,

pageable: {

refresh: true,

pageSizes: [10, 20, 50, 100],

buttonCount: 5

},

resizable: true,

columnMenu: true,

toolbar: kendo.template($("#searchgrid-toolbar").html()),

editable: "popup",

reorderable: true,

columnHide: saveState,

columnShow: saveState,

columnResize: saveState,

columnReorder: saveState,

columns: [{

field: "IsSelected",

title: null,

sortable: false,

filterable: false,

width: 25,

menu: false,

reorderable: false

}, {

field: "BatchName",

title: "Batchnaam",

filterable: { multi: true }

}, {

field: "RequesterPartyRequired",

title: "Kabelsel.",

filterable: { multi: true }

}, {

field: "StartDate",

title: "Plandatum start",

type: "date",

format: "{0: dd-MM-yyyy}",

filterable: {

ui: function (element) {

element.kendoDatePicker({

format: '{0: dd-MM-yyyy}'

})

},

multi: false

}

}, {

field: "EndDate",

title: "Plandatum eind",

type: "date",

format: "{0: dd-MM-yyyy}",

filterable: {

ui: function (element) {

element.kendoDatePicker({

format: '{0: dd-MM-yyyy}'

})

},

multi: false

}

}, {

field: "ID",

title: " ",

filterable: false,

sortable: false,

width: 25,

menu: false,

reorderable: false

}]

};

var customFields = [{

field: "IsSelected",

template: "<input type='checkbox' class='checkbox' #= IsSelected !== undefined && IsSelected ? checked='checked' : '' # />",

headerTemplate: "<input type='checkbox' id='checkAll' />"

},

{

field: "StartDate",

filterable: {

ui: function (element) {

element.kendoDatePicker({

format: '{0: d-M-yyyy}'

})

},

operators: {

string: {

eq: "Is gelijk aan",

neq: "Is niet gelijk aan"

}

},

multi: false

},

format: '{0: d-M-yyyy}'

},

{

field: "EndDate",

filterable: {

ui: function (element) {

element.kendoDatePicker({

format: '{0: d-M-yyyy}'

})

},

operators: {

string: {

eq: "Is gelijk aan",

neq: "Is niet gelijk aan"

}

},

multi: false,

},

format: '{0: d-M-yyyy}'

},

{

field: "ID",

template: "#=actionTemplate(data)#"

}];

if (userGridSettings !== undefined && userGridSettings !== "" && userGridSettings !== null && JSON.stringify(userGridSettings) !== "{}") {

gridSettings.columns = userGridSettings;

}

$.each(customFields, function (customFieldIndex, customField) {

$.each(gridSettings.columns, function (columnIndex, column) {

if (column.field == customField.field) {

if (customField.sortable) {

column.sortable = customField.sortable;

}

if (customField.template) {

column.template = customField.template;

}

if (customField.headerTemplate) {

column.headerTemplate = customField.headerTemplate;

}

if (customField.filterable) {

column.filterable = customField.filterable;

}

});

searchGrid = $("#searchGrid").kendoGrid(gridSettings).data("kendoGrid");

searchGrid.thead.find("[data-field=IsSelected]>.k-header-column-menu").remove();

searchGrid.thead.find("[data-field=ID]>.k-header-column-menu").remove();

}

Grid

answered on 08 Oct 2020

2 answers

106 views

Find grid row from embedded chart click

Hi,

I have a grid with an embedded bar chart. The bar chart is firing a seriesClick() event.
How can I find the grid row containing the chart that fired the event?

Prototype is in this snippet copied from the embedded chart demo. Just click in any bar of a chart.
https://dojo.telerik.com/@eyep/exIVAraw

Thanks in advance,

Eugenio Yep

Grid

answered on 08 Oct 2020