Questions on Kendo UI for jQuery Forum

21 answers

2.4K+ views

Is it possible to set a custom Authorization header for the Kendo Upload to send as part of the request when a file is uploaded? I have seen several forum posts and the getting started article about adding custom information to the content of the POST itself, but this is not what I need. The controller to which I am uploading files is designed to process specific authorization information when it is packed in the header, so I am looking for something similar to what ajax provides for in its beforeSend event handler:

$.ajax({

type: "PUT",

url: URL_FOR_UPLOAD,

beforeSend: function (xhr) {

xhr.withCredentials = true;

xhr.setRequestHeader('Authorization', CUSTOM_AUTHORIZATION_HERE);

}

Can this be done?

Thank you.
Heather

Upload

answered on 19 Sep 2018

2 answers

338 views

Group Collapse All with Endless Scroll

Hi,

I am using the Endless Scroll feature and I am trying to implement a "Collapse All Groups" function. The problem is that, with Endless Scroll, I don't have all groups visible when I run my function.

I am using this code to iterate and collapse groups"

$(".k-grouping-row").each(function (e) {

grid.collapseGroup(this);

});

I tried to do it recursively, like this:

function collapseAllGroups(grid){

grid.element.find('.k-grouping-row [aria-expanded="true"]').each(function(e){

grid.collapseGroup(this.parentElement);

});

const gridContent = grid.content;

gridContent.scrollTop(gridContent[0].scrollHeight);

if (grid.element.find('.k-grouping-row [aria-expanded="true"]').length > 0){

collapseAllGroups(grid);

}

This works with a small set of data, but when I have more than 500 records, the processes of collapsing takes some time and it breaks my recursive solution.

I tried to use the event (https://docs.telerik.com/kendo-ui/api/javascript/ui/grid/events/groupcollapse) to trigger my function only after the groups collapsed, but that didn't work either.

Any ideas or other solutions?

Thanks!

Grid

answered on 19 Sep 2018

3 answers

121 views

Keyboard Navigation - Cannot get F10 to work

Hi,

I'm using the keyboard navigation demo and I can't get the F10 - Focus Toolbar functionality to work. I will hit F10 and then try to tab to the next toolbar item, but it instead starts focusing on the existing events. Basically in the demo I can't do any of the actions listed as Actions Applied On Scheduler Toolbar. What do I need to do to get that working?

And as a side question, if it is working, is the Show Full Day / Show Business Hours button considered part of the toolbar? So if once I have focus on the toolbar working, will I also be able to tab to that button?

Thanks,

Mike

Scheduler

answered on 18 Sep 2018

2 answers

114 views

[Solved] sass theme builder misunderstood

Hi,

Trying to use the sass theme builder online, when downloading I only get a .zip with 2 files : all.css and variables.scss

The all.css file contains styles for all the components even when deselecting half of them in themebuilder. Is it normal?

If so, how to build a css file with only the selected components.

Best regards,

Laurent

General Discussions

answered on 18 Sep 2018

2 answers

262 views

[Solved] ES6 Classes lose functions when converted to observables.

When converting an instance of an ES6 class to an observable, the observable won't contain the functions of the class (maybe because they're under the prototype technically?) Any way to resolve this or do I have to hack something together?

HTML

<input data-bind="value: selected.name" />

<button data-bind="click: add">Add Role</button>

Sample model

import UserGroup from './user-group.js';

export default class UserGroupModel {

constructor () {

this.selected = new UserGroup();

this.data = [];

}

add() {

console.log('wont see me...');

}

Convert:

let vm = new kendo.observable(new UserGroupModel());

kendo.bind($(document.body), vm);

No function when clicking the button

Uncaught TypeError: ((n.event.special[g.origType] || {}).handle || g.handler).apply is not a function

at HTMLButtonElement.dispatch (jquery.min.js:3)

at HTMLButtonElement.r.handle (jquery.min.js:3)

Now put the function in the constructor:

import UserGroup from './user-group.js';

export default class UserGroupModel {

constructor () {

this.selected = new UserGroup();

this.data = [];

this.add = function() {

console.log('WILL see me...');

}

Works:

WILL see me...

MVVM

answered on 18 Sep 2018

3 answers

579 views

Kendo control with TWO button (with icons)

At this link:

http://www.telerik.com/blogs/styling-forms-like-a-pro-with-kendo-ui

it describes how you can have a button next to a control (example below)

http://plnkr.co/gfVg1WwEPcIAmBmXdM6i?p=preview

Is there a way to have a control and then TWO buttons (with icon) next to the control?

General Discussions

answered on 18 Sep 2018

4 answers

640 views

Populating DropDownTree with SQL Data

I have a table in SQL that contains the breakdown of the hierarchy list. The table has three columns

1. ID - the id of the item

2. Item Name - the name of the item

3. ParentID - the parent id of the item

The table hierarchy goes down 5 levels (please see attached example.png)

I am reading the SQL data in C# and then passing the data to jQuery to then populate the drop down tree but I'm having trouble figuring out how to create the data structure to be passed back to jQuery.

Any ideas or suggestions would be greatly appreciated

DropDownTree

answered on 18 Sep 2018

13 answers

455 views

[Solved] Range Copy Paste

Hi,

Is there anyway to overwrite the default value of the copy / paste functionality so that when a user copies a range and pastes it, the copy range formatting is not copied? (ie, copy value only)

Or is there some event I can intercept and use to do this?

Thanks

Marc

Spreadsheet

answered on 18 Sep 2018

1 answer

184 views

Treeview binding to OData-V4 service example

For your convinience I alterered the example on

https://demos.telerik.com/kendo-ui/treeview/odata-binding

to work with Odata-V4.

https://dojo.telerik.com/uYAlEKaL

TreeView

answered on 18 Sep 2018

6 answers

908 views

Export to PDF

Hi,

I'd like to export the grid to PDF, and need to add column headers on each page.

I was able to apply the page template (page header and footer), but couldn't add the column headers on the grid on each page..

Also, I'd like to change font size when it exports to PDF. how can I change the font size?

Thank you,

// Export handler
  $("#export").on("click", function () {
   var grid = $("#grid").data("kendoGrid");
   grid.hideColumn(3);
  grid.columns[0].width = "60px";
   grid.columns[1].width = "60px";
   grid.refresh();
   kendo.drawing.drawDOM("#grid", {
    forcePageBreak: ".page-break",
    paperSize: "Legal",
    landscape: true,
    margin: {
     left   : "2mm",
     top    : "30mm",
     right : "2mm",
     bottom : "40mm"
    },
    template: $("#page-template").html()
   })
   .then(function (group) {
    kendo.drawing.pdf.saveAs(group, "CFCReport.pdf");
    var grid = $("#grid").data("kendoGrid");
    grid.showColumn(3);
   grid.refresh();
   });

Grid

answered on 18 Sep 2018