Questions on Kendo UI for jQuery Forum

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

1.9K+ 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

187 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

81 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

148 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

282 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

answered on 02 Aug 2018

3 answers

3.0K+ views

[Solved] Control the size of windows

I am trying to control the size of my windows. On my development environment, I have quite a large screen, so when the window opens, it never has an issue with automatically sizing the window. However, with other people's screens, the ajax loaded content can make the window resize so that it is outside of the viewport. I want to make sure that this never happens. Here is the angle that I have taken to make this work... unsuccessfully:

I create the window with maxHeight: 80% and add the onWindowMaximize function to the maximize event.

function onWindowMaximize(e) {

var window = $("#" + e.sender.wrapper.context.id).data("kendoWindow");//get window

//restore to original size

window.restore();

window.unbind('maximize', onWindowMaximize)//unbind this method from maximise event

window.setOptions({

position:{

top: window.wrapper.offset().top,

left: window.wrapper.offset().left,

},

height: window.wrapper.height(),

maxHeight: '100%'

});

window.maximize();//maximize window

}

The problem with this solution is that when I "restore" the window, it keeps the same width, but the height turns to 100px. I am happy to look into other options, but I really need to make sure that when they window loads, it is no more than 80% of the screen.

Window