Questions on Kendo UI for jQuery Forum

2 answers

196 views

[Solved] Range selection is not working with Start, Depth as month

We are evaluating the Kendo UI Component for product, and have a requirement to display the MultiViewCalendar control with month range selection

Based on the documentation tried with the following option and I am unable to select the range of the month

Dojo link

<div id="multiViewCalendar"></div>

<script>

$("#multiViewCalendar").kendoMultiViewCalendar({

views: 1,

start: "year",

depth: "year",

selectable: "range"

});

</script>

Could you please help me on this?

MultiViewCalendar

answered on 19 May 2020

1 answer

936 views

[Solved] FileManager set default Sort and Paging?

Hi Telerik,

Can I set default Sort and Paging in FileManager?
I was try with code but It's not working:

<!DOCTYPE html>

<html>

<head>

<base href="https://demos.telerik.com/kendo-ui/filemanager/index">

<style>

html {

font-size: 14px;

font-family: Arial, Helvetica, sans-serif;

}

</style>

<title></title>

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

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.2.513/js/kendo.all.min.js"></script>

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.common.min.css">

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.rtl.min.css">

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

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.513/styles/kendo.mobile.all.min.css">

<script src="https://kendo.cdn.telerik.com/2020.2.513/js/angular.min.js"></script>

<script src="https://kendo.cdn.telerik.com/2020.2.513/js/jszip.min.js"></script>

</head>

<body>

<div id="example">

<div id="filemanager"></div>

<script>

$("#filemanager").kendoFileManager({

initialView: 'grid',

views: {

grid: {

// kendoGrid options

pageable: {

pageSize: 2

}

},

dataSource: {

schema: kendo.data.schemas.filemanager,

sort: {

field: 'createdUtc',

dir: 'desc'

}, // => not working

transport: {

read: {

url: "/kendo-ui/service/FileManager/Read",

method: "POST"

},

create: {

url: "/kendo-ui/service/FileManager/Create",

method: "POST"

},

update: {

url: "/kendo-ui/service/FileManager/Update",

method: "POST"

},

destroy: {

url: "/kendo-ui/service/FileManager/Destroy",

method: "POST"

}

},

pageSize: 2,

//serverPaging: true,

},

uploadUrl: "/kendo-ui/service/FileManager/Upload",

toolbar: {

items: [{

name: "createFolder"

},

{

name: "upload"

},

//{ name: "sortDirection" },

//{ name: "sortField" },

{

name: "changeView"

},

{

name: "spacer"

},

{

name: "details"

},

{

name: "search"

}

]

},

contextMenu: {

items: [{

name: "rename"

},

{

name: "delete"

}

]

},

draggable: true,

resizable: true

});

$(document).ready(function () {

var filemanager = $("#filemanager").getKendoFileManager();

filemanager.executeCommand({

command: "TogglePaneCommand",

options: {

type: "preview"

}

});

filemanager.toolbar.fileManagerDetailsToggle.switchInstance.toggle();

})

</script>

</div>

</body>

</html>

FileManager

answered on 19 May 2020

4 answers

950 views

Loading HTML with tables into editor

I am seeing an issue with tables that seems to be related to HTML that is loaded into the editor from another source, and I hope you can clarify if this is how it should work, or if I need to process the HTML in some way.

The steps to recreate this issue are as follows:

1. Create some html outside of Kendo with a table that has styling (borders, backgrounds, etc., we are using the RadRichTextBox WPF editor).

2. Load this html into the Kendo editor.

3. In the Kendo editor, add a new table below the original table by selecting the grid control and dragging to get the rows/columns desired.

At the point the new table is added, the original table loses all styling (see attached images).

After investigating this issue, I found that there is a class associated to a table when the table is created within the Kendo editor. The class is "k-table". When this class is not present from html outside of the editor, the issue seems to be happening. Also, I noticed that if I create the second table using the Table Wizard button at the bottom of the grid control, the styling is not removed from the first table. Only when using the grid drag does it happen.

Is this something that you can fix, or are we required to insert the k-table class to get around this issue?

Thanks for your help, and let me know if you need more information.

Editor

answered on 19 May 2020

1 answer

361 views

Observing issus when the column name consists of only numbers

Fiddle: https://jsfiddle.net/avnsri4986/e7nfrj9h/3/

Stack Trace:

Uncaught SyntaxError: Unexpected number

at Function (<anonymous>)

at getter (kendo.all.js:2127)

at Object.<anonymous> (kendo.all.js:6550)

at each (jquery.min.js:2)

at new init (kendo.all.js:6537)

at new init (kendo.all.js:6888)

at Function.de.create (kendo.all.js:9179)

at init._dataSource (kendo.all.js:67457)

at new init (kendo.all.js:63291)

at HTMLDivElement.<anonymous> (kendo.all.js:2517)

Grid

answered on 19 May 2020

2 answers

702 views

MaskedTextBox Custom Rules

I'm looking to add custom rules to a masked textbox and there is not enough documentation or examples to explain how this works properly.

$(this).kendoMaskedTextBox({

mask: "mm/dd",

rules: {

mm: "any number between 01 - 12",

dd: "any number between 01 - 31"}})

I attempted to use a masked date picker, but it still allows for entries like "48/99" which is incorrect.

Is it possible to do something like this using custom rules and regex?

MaskedTextBox

answered on 19 May 2020

10 answers

291 views

Ken-do Grid current Page disable

I have kendo grid and have paging options which is working as expected and issue is when i click on Page 2 some again page 2 is showing . Is there any possiblity to hide that . Please refer to attachment it should be very clear.

Grid

answered on 19 May 2020

6 answers

699 views

TreeView with remote hierarchical datasource

I have this datasource

var HDS = new kendo.data.HierarchicalDataSource({

error: raiseAjaxErrorWindow,

transport: {

read: {

url: HDS_URL,

dataType: "jsonp"

}

},

schema: {

model: {

id: "id",

hasChildren: "hasChildren",

data: "data"

}

});

and this tree view config

    $("#treeview").kendoTreeView({

        dataSource: HDS,

        dataTextField: "text",

        dragAndDrop: false,

        select: onSelect,

        expand: onExpand,

        collapse: onCollapse

    });

The HDS url delivers a callback that looks like

jQuery18209300398211926222_1361181052330(
[{"id":"2a1bfc85-06d5-4702-bc92-d659fcae9d39",
"text":"Group 1",
"hasChildren":"1",
"data":{"type":"1","depth":2,"color":"red","flavor":"up"}
}])

call this the foobar node.

How do I add extra rendering to the tree node to display the items in the data field?

When a node having children is opened, the HDS url is automatically ajaxed with data id=<id of node>.

Is there a way to configure the transport.read so that when it is to be opened, it will use some or all of the the extra data of the foobar node when ajaxing the url. ?

For instance, I would like the HDS to be called with the additional data depth=2&type=1

If so, where would I put this little magic ?

Thanks,
Richard

TreeView

answered on 19 May 2020

12 answers

733 views

[Solved] plot lines or bands on scatter charts?

I would like to draw a line parallel to the X axis on a scatter chart at the average of the Y values. I see plot bands listed for other types of charts, but nothing for scatter charts. For run, I tried adding a plotBands config to the yAxis element of my scatterline chart, but nothing shows up.

Is there a plot line feature available for scatter charts?

I didn't see anything in the documentation:
http://demos.telerik.com/kendo-ui/scatter-charts/index

Charts

answered on 19 May 2020

7 answers

1.2K+ views

Value Axis Label Formatting

Hello,

I have the value axis labels shown in the "current" screenshot. I'm hoping to format them as shown in the "desired" screenshot, ie. displaying "25000" as "$25k". I am able to add the "$" and "k" using valueAxis.labels.format. But I'm unable to perform math on the value itself or remove the last two zeros.

Any help is greatly appreciated.

Thanks!

Charts

answered on 19 May 2020

1 answer

230 views

Drag & drop support

I'm very excited to see the birth of this new component. Does the component support drag & drop. My use case would be to have a tilelayout dashboard area to which I would like to drag & drop new items from a side toolbar.

Looking at the reference, it doesn't seem that this component currently support dynamic changes (add/remove) at all. Is that right? And if so, is it on the roadmap?

Best regards,
Ron

TileLayout

answered on 19 May 2020