Questions on Kendo UI for jQuery Forum

5 answers

1.7K+ views

Positioning issue when DropDownList is near bottom of page

Hi, I believe I have found a bug in the DropDownList when it is near the bottom of the page and opens upward. To see an example, go to this JSFiddle:

http://jsfiddle.net/7LCr4/1/

Click the dropdown once, close it, click it again, and observe that the popup is now offset incorrectly to the left.

Investigation of the issue revealed that the problem seems to be that there is a vertical scrollbar that appears temporarily as the dropdown is opening, the second and subsequent times it is opened. This causes the 'left' CSS property of the popup to be incorrect by the width of the scrollbar, because the scrollbar eventually disappears again.

More specifically, on line 12173 of kendo.web.js (v2012.2.710) -- in Popup.open() -- the kendo.wrap() call adds a .k-animation-container div that is pointing down, which is what causes the vertical scrollbar to appear (place a breakpoint there to see this). This pushes the .k-widget "anchor" over to the left so that when the popup's 'left' property is set in Popup._align(), it is offset by the width of the temporary scrollbar.

It isn't until line 12408 in Popup._position() that the .k-animation-container is finally flipped vertically and the scrollbar disappears again -- but at that point it's too late because the popup's positioning has been set.

Note that the reason this does not happen the very first time the popup is opened is because its default coordinates are 0,0. After the first open, the coordinates are changed to those of the widget/anchor down in the lower right of the page.

Let me know if you have any questions, and/or have a solution or workaround we can use to avoid this issue. Thanks!

ryan

DropDownList

answered on 06 Aug 2018

1 answer

250 views

Customized Scheduler

Hi,

I need to have the flexibility of the scheduler timeline over an editable grid to achieve similar functionality to the attached image.

If the scheduler view can be customized to have columns to the left and its cells are data oriented with inline editing,i think it can do.

I'm not sure if such functionality can be achieved by tweaking either of the Grid,Scheduler,Gantt views

any suggestions/help is much appreciated

Regards,

MOTASH

Scheduler

answered on 06 Aug 2018

8 answers

1.1K+ views

[Solved] Clear filter does not trigger refresh

Hi,

I have a grid with a remote datasource.

When i click filter it applies the filter to the grid and shows the correct data.

When i click "clear" nothing happens, it does not trigger a refresh ?

serverfiltering is set to false on the datasource if that means anything.

code:

datasource:

function setDatasource() {

_dataSource = new kendo.data.HierarchicalDataSource({

transport: {

read: {

url: _crudServiceBaseUrl + "/api/grid/",

dataType: "json",

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

headers: {

"RequestVerificationToken": _tokenHeaderValue

}

},

destroy: {

url: function (dataItem) { return _crudServiceBaseUrl + "/api/grid/" },

type: "DELETE",

dataType: "json",

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

headers: {

"RequestVerificationToken": _tokenHeaderValue

}

},

parameterMap: function (data, operation) {

if (operation !== "read") {

return JSON.stringify(data);

}

else {

var itemId = (data.ItemId ? data.ItemId : null);

return {

ContactId: _contactId,

ProjectId: _projectId,

SaleId: _saleId,

ItemId: (itemId === parseInt(_rootFolderId) ? null : itemId)

};

}

},

schema: {

model: {

id: "ItemId",

fields: {

ItemId: { type: "number", nullable: false, editable: false },

ParentId: { type: "number", nullable: true, editable: true },

IsGroup: { type: "boolean", nullable: false, editable: true },

AppointmentId: { type: "number", nullable: true, editable: false },

DocumentId: { type: "number", nullable: true, editable: false },

Company: { type: "string", nullable: true, editable: false },

Contact: { type: "string", nullable: true, editable: false },

Associate: { type: "string", nullable: true, editable: false },

Registered: { type: "date", editable: false },

Type: { type: "string", nullable: true, editable: false },

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

IsCompleted: { type: "boolean", editable: false },

ContactId: { type: "number", nullable: true, editable: true },

ProjectId: { type: "number", nullable: true, editable: true },

SaleId: { type: "number", nullable: true, editable: true }

}

},

serverPaging: false,

serverFiltering: false,

serverSorting: false,

sort: [

{ field: "Registered", dir: "desc" },

{ field: "Text", dir: "asc" }

],

filter: {

logic: "and",

filters: getGridFilters()

}

});

}

grid:

function initGrid() {

$grid.kendoGrid({

dataSource: _dataSource,

filterable: true,

sortable: true,

pageable: false,

resizable: true,

height: getWindowHeight(),

editable: {

mode: "popup",

confirmation: false

},

noRecords: {

template: $Resources$.GridNoData

},

columns: [

{

title: "Folder",

headerTemplate:

"<span class=\"far fa-folder\" style=\"padding-right: 7px;\"></span><span id=\"breadcrumbText\"></span><span class=\"float-right\"><label class=\"checkboxHeader\" style=\"padding-right: 7px;\"><input type=\"checkbox\" id=\"toggleDocuments\" name=\"toggleDocuments\""

+ getToggleDocuments() + "> " + $Resources$.CheckboxDocuments + "</label><label class=\"checkboxHeader\"><input type=\"checkbox\" id=\"toggleAppointments\" name=\"toggleAppointments\"" + getToggleAppointments() + "> " + $Resources$.CheckboxAppointments + "</label></span>",

columns:

[{

field: "IsCompleted",

headerTemplate: "<span class=\"fas fa-check\" aria-hidden=\"true\"></span>",

template: $("#checkboxtemplate").html(),

width: 34,

filterable: false,

sortable: false

},

{

field: "Type",

template: $("#categorytemplate").html(),

headerTemplate: "",

width: 34,

filterable: false,

sortable: false,

},

{ field: "Registered", template: $("#registeredtemplate").html(), headerTemplate: "Date", width: 110 },

{ field: "Type", headerTemplate: "Type", width: 150 },

{ field: "Text", template: $("#texttemplate").html() },

{ field: "Contact" },

{ field: "Associate", headerTemplate: "Associate", width: 150 }]

}

],

dataBound: function (e) {

}

});

}

Grid

answered on 03 Aug 2018

8 answers

2.0K+ views

Auto re-size Kendo Editor Height

Currently in my application, all textareas auto-resize (vertically) as content is added. We use the opensource jquery.autogrow-textarea.js to auto-resize all textarea by simply using the code:

$('textarea').autogrow();

However Kendo Editor does not autogrow as we require. How can I make editor to auto grow as users enter more content? I think Telerik Ajax editor has a similar function?

Kindly help me with this if there is any solution to this. Thank you.

Editor

answered on 03 Aug 2018

9 answers

1.1K+ views

Grid rendering with white space

Hi there,

I've been using Node JS/Express rendering of Kendo Grid with EJS on Windows
and get next visual (d)efect just after grid initialization (see pic. White space.jpg). After
column re-sizing everything become OK. But after filter also there is a visual
(d)efect (see pic. Filtered Grid.jpg). I checked in all browsers with the same result.
Anybody knows something how to avoid it?

Grid

answered on 02 Aug 2018

4 answers

192 views

Column Title containing '#' prevents excel export

If the "title" of a column contains a '#' such as "Workorder #", when trying to export to excel, no error will be thrown but the prompt for saving the file never appears and and the excelExport event is not ever fired either. Is this a known bug? Can you reproduce it on your side?

Grid

answered on 02 Aug 2018

1 answer

86 views

Can I add array of items to grid that will cause only one refresh ?

After some investigation I discovered that when you add an array of items do grid bound datasource, the grid will refresh (rebuild from scratch) for every new item. In some cases that a major performance hit. Can I add array of items to grid that will cause only one refresh ?

Grid

answered on 02 Aug 2018

1 answer

154 views

stripped down js and css

I was looking at using the gauges and and possibly a few other things on an interface loaded in to a micro controller however the size of kendo.all.min.js and other required files are way too large. the entire system ends up being some 4mb and there is no way to fit it in to the 2mb of available space in the file system. Are there stripped down versions of the widgets rather than having to include everything?

LinearGauge

answered on 02 Aug 2018

4 answers

289 views

[Solved] Sortable work in similar was as TreeView drag and drop

Is it possible to configure the sortable to make it work in the similar was as TreeView drag and drop?

I would like not to move element during dragging, but only on drop.

I would also like to prevent some drop targets dynamically based on source element.

Sortable

answered on 02 Aug 2018

5 answers

1.6K+ views

Dynamic Min/Max value

I made an example that use NumerticTextbox and the Min/Max value can be changed if the button "Change Min/Max" clicked
Please see my example at http://dojo.telerik.com/ufeyU

Explain:

when the button was clicked, i expected that the validation range will be changed, but it s not.

Question:

Is it possible to use NumericTextBox to validate a range that can be changed on the fly.

NumericTextBox