Questions on Kendo UI for jQuery Forum

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

862 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

250 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

132 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

394 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

262 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

768 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

3 answers

81 views

Bug - Stockchart starting 1/1/1970

When creating a stockchart (with the navigator) setting the frequency to annual. If the dataset starts on 1/1/1970 the chart doesn't display anything. If you show a dataset starting before 1970 (which can include a value on 1/1/1970) the chart displays fine.
I've got a temporarily fix - if the year is 1970 then I set the date to 2/1/1970 so the chart works as it should.

Kendo version: KendoUI-2014.2.1008 (don't judge, IE8)

Charts

answered on 28 Apr 2016

1 answer

125 views

vertical week sheduller

hello! I need a vertical sheduller for 7 day! Agenda view for a week is a good solution. And i have some question:

1. can set width smaller than 450px? May be not dispay name of a day, or display in another rows/

2. why set arrows -> <- add 7 day (not 1 day)

3. can not display link "today"?

thanks

Scheduler

answered on 28 Apr 2016

1 answer

307 views

Editing using InCell mode and adding using Popup mode

Hello,

Is there a way, in a grid, to combine GridEditMode.InCell (for row editing) and GridEditMode.PopUp (for row creation) ? Or should i use a custom action with my own creation window ?

Thanks

Grid

answered on 28 Apr 2016