Questions on Kendo UI for jQuery Forum

1 answer

102 views

Title tip on "Format" Dropdown control in Kendo editor not getting locallized

We are using Kendo Editor and trying to localize the fields.

Most of the controls are working fine but the 'Format' DropDown control title tip is not getting localized.

I am providing localized text for "message.formatting" key while initializing the kendo editor.

I dig into the kendo.all.min.js file and found that while initializing the Formatting control, title tip is hard code to 'Format'. And if I change it to some other value, totol

Editor

answered on 28 Apr 2016

4 answers

444 views

Insert and Delete after binding to Datasource

Hi,

how to perform insert and delete operation after binding to a dataSource. I tried to solve in different ways but all ends in some issue.

Create a dojo snippet to reproduce issue.

Issues :-

1. After applying formula to a column data sheet.range("F2:F").formula("C2*D2"); try to add a row

Getting error - kendo.all.js:98306 Uncaught Error: Shifting nonblank cells off the worksheet is not supported!

2. Change formula to sheet.range("F2:F14").formula("C2*D2"); leaving one final row. Can insert one record.

Is there any way to apply formula to all cells in column without affecting the add functionality.

3. " dataSource.cancelChanges()" will copies the below row to current row.

Spreadsheet

answered on 28 Apr 2016

3 answers

200 views

[Solved] SignalR DataSource with ListView in AngularJS

Hi,

I'm using the kendo dataSource (kendo.data.TreeListDataSource) for a treeList widget in an angularJS project.

Everytime I'm trying to update one of the items via inline editing I get the following error (in chrome). The error occurs when "other" clients are called via SignalR to update their data. Code on the server:

public ContactTreeListDto UpdateListItem(ContactTreeListDto item)

{

Clients.Others.UpdateListItem(item);

return item;

}

VM2835:3 Uncaught SyntaxError:

Unexpected number

extend.setter @ kendo.all.js:2018

Observable.extend._set @ kendo.all.js:4541

ObservableObject.extend.accept @ kendo.all.js:4734

Model.define.accept @ kendo.all.js:89185

DataSource.extend._createNewModel @ kendo.all.js:89252

Observable.extend.pushUpdate @ kendo.all.js:6187

Observable.extend._push @ kendo.all.js:6038

Observable.extend._pushUpdate @ kendo.all.js:6028

proxy @ jquery-2.2.1.js:492

hubProxy.fn.hubProxy.on.callbackMap.(anonymous function).(anonymous function) @ jquery.signalR-2.2.0.js:2611

jQuery.event.dispatch @ jquery-2.2.1.js:4732

elemData.handle @ jquery-2.2.1.js:4544

jQuery.extend.trigger @ jquery-2.2.1.js:7791

jQuery.fn.extend.triggerHandler @ jquery-2.2.1.js:7881

(anonymous function) @ jquery.signalR-2.2.0.js:2817

(anonymous function) @ jquery.signalR-2.2.0.js:791

jQuery.event.dispatch @ jquery-2.2.1.js:4732

elemData.handle @ jquery-2.2.1.js:4544

jQuery.extend.trigger @ jquery-2.2.1.js:7791

jQuery.fn.extend.triggerHandler @ jquery-2.2.1.js:7881

signalR.transports._logic.triggerReceived @ jquery.signalR-2.2.0.js:1490

(anonymous function) @ jquery.signalR-2.2.0.js:1511

jQuery.extend.each @ jquery-2.2.1.js:360

signalR.transports._logic.processMessages @ jquery.signalR-2.2.0.js:

1510(anonymous function) @ jquery.signalR-2.2.0.js:1933

Kendo version is Kendo UI v2016.1.226

Here's the treeList configuration from controller:

(function() {

'use strict';

angular

.module('XPhoneWeb')

.controller('contactTreeListController', ['$scope', 'signalrService', 'notificationService', contactTreeListController]);

function contactTreeListController($scope, signalrService, notificationService) {

var vm = this;

vm.reloadContactsCallback = function () {

// auf Befehl des Servers alle Kontakte neu laden :-)

notificationService.info("Kontaktliste wegen Änderung neu laden", "Nachricht vom Server");

$scope.contactTreeList.dataSource.read();

}

vm.reload = function () {

$scope.contactTreeList.dataSource.read();

}

vm.add = function (id) {

alert('groupId: ' + id);

var row = $("#contactTreeList").data("kendoTreeList")

.tbody

.find("tr[data-uid='" + id + "']");

//$scope.contactTreeList.addRow($("#contactTreeList tbody>tr[data-uid='" + groupId + "']"));

$scope.contactTreeList.addRow($(row));

}

initTreeList();

registerEvents();

function registerEvents() {

// Event-Callback registrieren

signalrService.on('contactTreeListHub', 'reloadContacts', vm.reloadContactsCallback);

// Im Destroy-Event des Controllers die SignalR-Event Callback Methode wieder deregistrieren

$scope.$on('$destroy', function () {

signalrService.off('contactTreeListHub', 'reloadContacts', vm.reloadContactsCallback);

});

}

// initialisiert die TreeList

function initTreeList() {

var hub = signalrService.getHubProxy('contactTreeListHub');

var startPromise = signalrService.getStartPromise();

vm.treelistOptions = {

// DataSource Konfiguration

dataSource: new kendo.data.TreeListDataSource ({

type: 'signalr',

autoSync: true, // muss für POPUP Edit false sein, sonst werden 2 Update events gefeuert...

transport: {

signalr: {

promise: startPromise,

hub: hub,

server: {

read: 'readContactTreeList',

update: 'updateListItem',

destroy: 'deleteListItem',

create: 'addListItem'

},

client: {

read: 'readContactTreeList',

update: 'updateListItem',

destroy: 'deleteListItem',

create: 'addListItem'

}

},

schema: {

errors: "serverErrors",

model: {

id: "id",

parentId: "parentId",

fields: {

parentId: { type: "string", visible: false, nullable: true },

groupName: { type: "string", editable: true, nullable: true },

displayName: { type: "string", editable: true }

// TODO: Presence aufdröseln

}

},

error: function(e) {

notificationService.error(e.errors, "Nachricht vom Server");

},

push: function(e) {

alert('e.type: ' + e.type);

alert('e.items: ' + JSON.stringify(e.items));

}

}),

// TreeList Konfiguration

sortable: false,

editable: true,

columns: [

{

field: 'displayName',

title: 'Name',

template: $('#contactTreeListItemTemplate').html(),

},

{

field: '',

title: '',

template: $('#contactTreeListItemAddTemplate').html(),

},

{

command: [

{ name: 'edit' },

{ name: 'destroy' }

]

}

]

};

}

})()

Data Source

answered on 28 Apr 2016

10 answers

2.0K+ views

Inline edit - validation not working on DropDownList

When a field is bound to a DropDownList it can't be validated in inline edit mode.

I have a field which is set as required in the schema. This field is bound to a DropDownList when the grid is in inline edit mode. This is all working fine -- but validation is failing -- users are able to save the row without making a selection (the first entry of the DropDownList is displayed, but 'null' is saved with the row's data for this field).

I've also noticed that in all the Grid examples that use a DropDownList - validation is not enabled on any of the fields. Maybe it's just not supported -- in which case it's a bit of a deal breaker.

If I'm wrong, then can somebody please explain how you combine validation with DropDownLists on an inline editable grid?

Thanks

Grid

answered on 28 Apr 2016

1 answer

871 views

Trying to get grid dataSource transport working with Web API

Going a little insane here, trying to bake my own ajax call to reach web api controller method.

Amongst many other efforts:

transport: {

read: function (options) {

$.ajax({

url: "api/FlfProd/GetSchedList/",

data: {

data: JSON.stringify(options)

},

type: 'GET',

dataType: 'json',

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

success: function (data, textStatus, xhr) {

//debugger;

},

error: function (xhr, textStatus, errorThrown) {

console.log('Error in Operation');

}

});

},

parameterMap: function (options, operation) {

if (operation.toString().toLowerCase() === 'read') {

return options;

}

This reaches the web api, but only if I specify nothing in the controller method signature (i.e. no {} parameter in the Route).

However, when it reaches the server, the parameters are all locked in a single string such as : [0]: {[data, {"data":{"take":10,"skip":0,"page":1,"pageSize":10}}]}.

Using ordinary web service no such difficulty exists, but I want to complete moving to Web API and I frankly hate everything about MVC. Most examples such as Telerik's GridWebApiCrud are ancient and involve MVC. Plus they don't work anymore as far as I can tell.

Really pulling my hair out on this one. Is anybody out there using $.ajax methods successfully with Web API controllers? At the back end I want to use Kendo DynamicLinq as I always have, but I need to be able to bake in the skip, take, sort and filter parameters and I just can't find a way to do it. Filling a grid from Web API that doesn't do any server-side paging is not difficult at all.

Bob Graham

Grid

answered on 28 Apr 2016

1 answer

257 views

kendo-slider: Setting slider value on destroy/rebind

I have a page where slider control options max value get updated as the user makes selections on the page.

The rebuild event occurs fine, and tick marks reflect the new max. However the value defaults to minimum and does not keep the value previously bound to the control.

I have wired up $scope.$on for both kendoWidgetCreated and kendoRendered and try to re-apply the value in these events but the result is the same, the slider does not reflect the value set in either event and defaults to the slider min value again.

What other events should I listen for, or otherwise, how can I set the slider value after the page has been rebound to new data and the slider has new options?

Slider

answered on 28 Apr 2016

1 answer

134 views

Including kendo DropDownList in kendo mobile

Hello,

I am making a kendo mobile application.
Instead of including kendo.mobile.all.js, I include js for the specific widgets.
So far I have: mobile.min, application, drawer, listview, and navbar.

I want to use the kendo ui drop down list but I don't know how to include it with the kendo mobile javascript files.
I've tried adding kendo.core, kendo.data, kendo.list and kendo.dropdownlist but I either get:
- .kendoDropDownList is not a function
- errors in kendo.mobile.min

Is there any way to include kendoDropDownList partially? (I've tested it with kendo.all.min.js and it works).

Thank you,
Dan

DropDownList

answered on 28 Apr 2016

7 answers

400 views

How to bind kendo ui foreign key from grid dataSource to dropdownlist with angularjs

Hi,
I am working on Kendo UI grid with angularjs application. I use angular service and controller. My data (JSON) is stored in separate file. My grid is located within first tabStrip and data for add/edit is located within second tabStrip.
This is my JSON for grid (in separate file):

[{ "Id": 1, "Date": "24.01.2015", "Description": "descr 1", "documentTypeId": 1 },{ "Id": 2, "Date": "26.01.2015", "Description": "description2", "documentTypeId": 2 },{ "Id": 3, "Date": "22.01.2015", "Description": "description3", "documentTypeId": 3 },{ "Id": 4, "Date": "24.01.2015","Description": "description4", "documentTypeId": 2 },{ "Id": 5, "Date": "29.01.2015", "Description": "description5", "documentTypeId": 4 },{ "Id": 6, "Date": "25.01.2015", "Description": "description6", "documentTypeId": 6 }]

This is my angular service:

angular.module("app").factory('myService', function ($http) {

return {

getAll: function (onSuccess, onError) {

return $http.get('/Scripts/app/data/json/master/masterGridData.js').success(function (data, status, headers, config) {

onSuccess(data);

}).error(function (data, status, headers, config) {

onError(data);

});

},

getDocumentTypes: function (onSuccess, onError) {

return $http.get('/Scripts/app/data/json/documentType.js').success(function (data, status, headers, config) {

onSuccess(data);

}).error(function (data, status, headers, config) {

onError(data);

});

}

});

This is my angular controller:

var app = angular.module("app", ["kendo.directives"]).controller("myController", function ($scope, myService) {

$scope.tabStrip = null;

$scope.$watch('tabStrip', function () {

$scope.tabStrip.select(0);

});

$scope.masterDataSource = new kendo.data.DataSource({

transport: {

read: function (options) {

url = "/Scripts/app/data/json/master/masterGridData.js",

myService.getAll(function (data) {

options.success(data);

}).error(function (data) {

options.error(data);

})

}

},

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number" },

Date: { type: "string" },

Description: { type: "string" },

DocumentTypeId: { type: "number" }

}

},

pageSize: 16

});

$scope.gridMaster = {

columns: [

{ field: "Id", width: "70px" },

{ field: "Date", title: "Date", width: "70px" },

{ field: "Description", title: "Description", width: "170px" },

{ field: "DocumentTypeId", hidden: true }

],

dataSource: $scope.masterDataSource,

selectable: true,

filterable: true,

scrollable: true,

pageable: {

pageSize: 16,

pageSizes: ["50", "100", "200", "All"]

},

toolbar: [{

name: "create"

}],

change: function () {

var dataItem = this.dataItem(this.select());

$scope.id = dataItem.Id;

$scope.date = dataItem.Date;

$scope.description = dataItem.Description;

$scope.documentTypeId = dataItem.DocumentTypeId;

}

};

$scope.documentType = {

dataSource: {

transport: {

read: function (options) {

url = "/Scripts/app/data/json/documentType.js",

myService.getDocumentTypes(function (data) {

options.success(data);

}).error(function (data) {

options.error(data);

});

}

},

schema: {

model: {

id: "Id",

fields: {

Id: { type: "number" },

Name: { type: "string" }

}

},

dataTextField: "Name",

dataValueField: "Id"

}

});

This is my JSON which contain data for documentType:

[

{ "Id": 1, "Name": "Document 1" },

{ "Id": 2, "Name": "Document 2" },

{ "Id": 3, "Name": "Document 3" },

{ "Id": 4, "Name": "Document 4" },

{ "Id": 5, "Name": "Document 5" },

{ "Id": 6, "Name": "Document 6" }

]

And, this is my HTML:

<html>

<head>

</head>

<body ng-app="app" ng-controller="myController">

<div class="divH3Style">

<h3 class="h3LabelForm">Grid Master</h3>

</div>

<div id="tabstrip" class="k-tabstrip-wrapper" data-kendo-tab-strip="tabStrip">

<ul>

<li>Overview</li>

<li>Update</li>

</ul>

<div id="tabstrip-1">

<div id="gridMaster" kendo-grid k-options="gridMaster" k-data-source="masterDataSource">

</div>

<div id="tabstrip-2">

<div id="tabStrip2Half1">

<div class="datepickerStyle">

<label for="date" class="labelTextSize">Date:</label>

<input id="date" class="k-datetimepickerMaster" name="date" ng-model="date" />

</div>

<div class="divHeightStyle">

<label for="desccription" class="labelTextSize">Description:</label>

<input id="desccription" type="text" class="k-textboxField" name="description" placeholder="Description" ng-model="description" />

</div>

<div id="tabStrip2Half2">

<div class="divHeightStyle">

<label for="documentType" class="labelTextSize">Document Type:</label>

<select kendo-drop-down-list

class="k-dropdownField" k-options="documentType"

ng-model="documentTypeId"

                                                           ng-bind=

"documentTypeId"></select>

</div>

<div>

<button type="button" id="saveDataMasterGrid" class="k-button buttonSaveCancel" ng-click="saveDataMasterGrid()">Save</button>

<button type="button" id="cancelDataMasterGrid" class="k-button buttonSaveCancel" ng-click="cancelButtonMasterGrid()">Cancel</button>

</div>

</body>

</html>

In HTML I have dropdownlist which contain data for documentType and my dropdownlist is populated with JSON data. But, problem is in binding.
When I select some grid row, dropdownlist always display first item. My grid datasource contain foreign key value (documentTypeId) and this
value should match with Id value from documentType JSON file.

My question is how to bind foreign key (documentTypeId) from grid dataSource to dropdownlist?

Any help will be very useful.

Regards, Branimir

DropDownList

answered on 28 Apr 2016

1 answer

265 views

Grid Performance & Virtual Scrolling

We're looking to improve the performance of the KendoUI Grid when rendering large data sets with client filtering & pagination. Is it possible to get virtual scrolling with client side pagination, where the scrolling is finite and limited to the current page size (yet still takes advantage of the virtual rendering).

Essentially, we want to take advantage of the virtual DOM rendering, but not the infinite scrolling and data fetching. Otherwise, is there a way to override the renderer to use another rendering library.

Also, is there a way to dynamically set the pageSize depending on the maximum number of visible rows. I.e.

pageSize = Math.floor(gridHeight / rowHeight)

Grid

answered on 28 Apr 2016

1 answer

774 views

Form Template Edit Form for Kendo

We'd like an inline form like TelerikUI has http://demos.telerik.com/aspnet-ajax/grid/examples/data-editing/form-template-update/defaultcs.aspx but for Kendo. Is that something that comes out of the box or will we have to roll our own?

Grid

answered on 28 Apr 2016