Questions on Kendo UI for jQuery Forum

1 answer

148 views

Export to CSV Error with serverGrouping:true on DataSource definition

Hi,

My DataSource is presented below in coffescript. I omit some field for simplicty.

version: Kendo UI v2016.1.412

kendo.data.DataSource({
serverAggregates: true
serverGrouping: true
...
schema:
aggregates: 'aggregates'
data: 'trips'
total: 'total'
model:
id: 'period'
fields:
max_speed: {type:'number'}
avg_speed: {type:'number'}
trip_distance: {type:'number'}
groups: (response) ->
...
transport:
read: (options) -> ...
})

When I export the CSV, I got the error "Uncaught TypeError: Cannot read property 'data' of undefined"

Looking on the kendo Export source code, I found that when the serverGrouping is enabled, it expects an option object defined in the schema.transport parameter. This code is illustrated bellow.

(function ($, kendo) {
kendo.ExcelExporter = kendo.Class.extend({

...
var data = dataSource.data();
if (data.length > 0) {
this.dataSource._data = data;
var transport = this.dataSource.transport;
if (dataSource._isServerGrouped() && *transport.options*.data) {
transport.options.data = null;
}
}

...

The avaliable documentation does not have any reference to a parameters transport.options (http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport). When I defined transport.options: {}, the CSV export works well.

In this context, I would like to know if there is an error in this implementation or if I made any mistake on defining the datasource.

Best Regards,

Grid

answered on 25 Apr 2016

7 answers

2.5K+ views

adding footer to grid

how do I add a footer to the grid? the only examples I found were column footers on http://docs.kendoui.com/api/web/grid and it was for text

Is there something like rowTemplate for adding footer templates?

Grid

answered on 25 Apr 2016

8 answers

398 views

Export scheduler to PDF in new window. MVC5

I'm using asp.net mvc 5 but I'm using the html5/js widgets though. I would like to have the scheduler open in PDF format in a new tab. Right now its currently opening a save file dialog to allow the user to download the file. I set the proxyTarget to "_blank" like the documentation says. The documentation also mentions setting the Content-Disposition header field but it doesn't really give much detail on that or give any examples. Can someone explain the full process of getting this to work?

Thanks in advanced.

Scheduler

answered on 25 Apr 2016

1 answer

97 views

Filterable Multi not being consistent

Is there anything in the kendo framework that would cause inconsistency for multi select filters ?

We have a multiselect filter applied to a column (filterable: "Multi") and when we apply a filter before the grid renders using setOptions to restore the grid settings, then we apply a filter using the multiselect we are getting the following after we call dataSource.filters().

*not exact syntax*

filters [

{ filters: [{column: "Column A", value: "x", operator: "eq" }, { column: "Column A", value: "Y", operator: "eq" }], logic: "or" } ]

Logic: "AND"

but if we don't have that filter applied prior to rendering then we don't get the nested filter where the multiselect items are grouped

Grid

answered on 25 Apr 2016

1 answer

93 views

Is filter supported for a strict markup list?

Can I use the filterable attribute on a markup only list? I suspect the issue is that you will need a model, for the filter to work.

In this example, the list goes empty when trying to write in the filter input

<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Kendo UI Snippet</title> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.common.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.rtl.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.silver.min.css"/> <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.1.412/styles/kendo.mobile.all.min.css"/> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://kendo.cdn.telerik.com/2016.1.412/js/kendo.all.min.js"></script> </head> <body> <div data-role="view"> <ul data-role="listview" data-filterable="true" data-style="inset"> <li>Foo</li> <li>Bar</li> </ul> </div> <script> new kendo.mobile.Application(); </script> </body> </html>

ListView (Mobile)

answered on 25 Apr 2016

9 answers

1.3K+ views

[Solved] Update and Create in Grid throws "Unable to get property 'data' of undefined or null reference"

I am trying to update and create records in the grid but I get the error "Unable to get property 'data' of undefined or null reference" whenever I click "Update".

My grid is defined in the HTML as;

<div class="row">

<ul class="nav nav-tabs" style="margin-bottom: 10px;">

<li class="active"><a data-toggle="tab" href="#Users">Users</a></li>

<li><a data-toggle="tab" href="#Reports">Reports</a></li>

<li><a data-toggle="tab" href="#Sections">Sections</a></li>

<li><a data-toggle="tab" href="#Charts">Charts</a></li>

</ul>

<div class="tab-content">

<div id="Users" class="tab-pane fade in active">

<kendo-grid options="userGridOptions"></kendo-grid>

</div>

<div id="Reports" class="tab-pane fade">

<h3>Report Maintenance</h3>

</div>

<div id="Sections" class="tab-pane fade">

<h3>Section Maintenance</h3>

</div>

<div id="Charts" class="tab-pane fade">

<h3>Chart Maintenance</h3>

</div>

The script to define the grid options is;

$scope.userGridOptions = {

dataSource: {

transport: {

read: "/Home/GetUsers",

dataType: "json",

type: "POST"

},

update: {

url: "/Home/UpdateUser",

dataType: "json",

type: "POST"

},

create: {

url: "/Home/UpdateUser",

dataType: "json",

type: "POST"

},

parameterMap: function (data, operation) {

if (operation !== "read") {

return kendo.stringify(data);

}

},

batch: false,

pageSize: 15,

schema: {

model: {

id: "id",

fields: {

id: { type: "number", editable: false, nullable: true, defaultValue: 0 },

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

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

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

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

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

active: { type: "boolean", validation: { required: true }, defaultValue: true},

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

updatedDtTm: { type: "date", editable: false, nullable: true },

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

}

},

height: "500px",

selectable: "row",

filterable: true,

sortable: true,

pageable: true,

toolbar: ["create"],

editable: {

mode: "inline",

update: true,

destroy: false

},

columns: [

{ field: "id", title: "User ID" }, //, width: "60px"

{ field: "active", title: "Active", template: '<input type="checkbox" #= active ? "checked=checked" : ""#></input>' }, //width: "80px",

{ field: "loginName", title: "Login Name" }, //, width: "250px"

{ field: "firstName", title: "First Name" }, //, width: "200px"

{ field: "lastName", title: "Last Name" }, //, width: "200px"

{ field: "position", title: "Position" }, //, width: "200px"

{ field: "email" },

{ command: ["edit"], title: " "}

]

};

And the procedures called to read, update and create data are (the stored procedure will insert the record if ID=0);

public ActionResult GetUsers()

{

List<User> lstUsers = new List<User>();

var users = from rt in ctx.tblUsers orderby rt.NameLast, rt.NameFirst select rt;

try

{

foreach (var item in users)

{

User userItem = new User();

userItem.ID = item.ID;

userItem.LoginName = item.NameLogin;

userItem.FirstName = item.NameFirst;

userItem.LastName = item.NameLast;

userItem.Position = item.Title;

userItem.Email = item.Email;

userItem.Active = item.Active;

userItem.UpdatedBy = item.UpdatedBy;

userItem.UpdatedDtTm = item.UpdatedDtTm;

userItem.RowVersion = item.RowVersion;

lstUsers.Add(userItem);

}

return GetJsonResult(lstUsers);

}

catch (Exception ex)

{

List<string> errors = new List<string>();

errors.Add(ex.Message);

if (ex.InnerException != null) errors.Add(ex.InnerException.Message);

return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, string.Join("<br />", errors));

}

public ActionResult UpdateUser(User UserData)

{

try

{

var results = ctx.usp_Users_Update(UserData.ID, UserData.LastName, UserData.FirstName, UserData.LoginName, UserData.Position, UserData.Email, UserData.Active, UserData.UpdatedBy, UserData.UpdatedDtTm, UserData.RowVersion);

return GetJsonResult(results);

}

catch (Exception ex)

{

List<string> errors = new List<string>();

errors.Add(ex.Message);

if (ex.InnerException != null) errors.Add(ex.InnerException.Message);

return new HttpStatusCodeResult(HttpStatusCode.InternalServerError, string.Join("<br />", errors));

}

When I click "Update" from the grid I get the error reported above, the actual code breaks in kendo.all.min.js at "o=ut(r.data)?r.data(e.data):r.data". Examining the variables shows the "e.data" contains the updated data from the grid but "r" is undefined.

I have tried modifying code based on several examples from the Telerik product demos and documentation as well some responses in the forums but without any success. I'm not clear on the purpose of the "parameterMap" option and have just tried various different code examples in an attempt to get this to work.

Any help on this would be appreciated.

Grid

answered on 25 Apr 2016

7 answers

437 views

Kendo web UI Scheduler Control with Context Menu Facility

Hi,

I have rad scheduler in my project and now we plan to convert it in to MVC using Kendo scheduler Control. So, I want to know that
is there a context menu facility in the Kendo Web UI Scheduler control like ajax scheduler or silver light control.

Regards,
Chirag

Scheduler

answered on 22 Apr 2016

7 answers

430 views

sharing div space with tabstrip

I have a vertical splitter with 3 panels. The bottom panel is as wide as the window. I have a tabstrip with 3 tabs that don't fill it. There is a big white space on one side. I can change which side. But, I cannot figure out how to put information in that space. Like, maybe instructions. Or something.

I have searched this forum without success.

Maybe somebody knows how to do it.

Thanks,

Rick

TabStrip

answered on 22 Apr 2016

1 answer

272 views

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

Hi,
I am working on kendo ui grid with angular application. I use angular service and controller. Grid is displayed within first tabStrip and data for add/edit is displayed within second tabStrip. My grid dataSource contain JSON data which is within separated file.

This is my JSON data for grid:

[{ "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 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.dateConfig = {

format: "dd.MM.yyyy"

}

$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" kendo-date-picker class="k-datetimepickerMaster" k-options="dateConfig" 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 from grid dataSource to dropdownlist?

Any help will be very useful.

Regards, Branimir

DropDownList