Questions on Kendo UI for jQuery Forum

1 answer

1.3K+ views

As part of a scheduler, I have a custom kendo template for the add/edit event, and into this template I want to insert a JS function for some autoComplete functionality.

<script id="addEditPopup" type="text/x-kendo-template">

## $("##UserIdSelector").kendoAutoComplete({ ##
## minLength: 3, ##
## dataTextField: 'fullname', ##
## dataValueField: 'login', ##
## dataSource: { ##
## type: 'json', ##
## serverFiltering: true, ##
## transport: { ##
## read: { ##
## url: 'remote/UserProxy.cfc?method=getuserSuggest', ##
## dataType: 'json' , ##
## parameterMap: function() { ##
## return { search: $(this).val() }; ##
## } ##
## } ##
## }, ##
## schema: { ##
## data: 'data' ##
## } ##
## }, ##
## select: function(e){ ##
## var dataItem = this.dataItem(e.item.index()); ##
## $("##userID").val(dataItem.login); ##
## } ##
## }); ##

<label for="user_uid">#getResource("reservation.UserID")#</label>
<div data-container-for="user_uid">
<input name="UserIdSelectorName" id="UserIdSelector" class="k-input k-textbox" required="required" />
<input type="hidden" id="userID" name="userID" />
<span class="" data-for="UserIdSelector"></span>
</div>

</script>

I get two errors:
"Uncaught SyntaxError: Unexpected token ILLEGAL"
"Uncaught Error: Invalid template:"

(Note that I have to double-up all the #s because server-side I'm using ColdFusion.)

Any idea where I'm going wrong?

Scheduler

answered on 05 May 2016

5 answers

287 views

need to display aggregations for Group footer template and footer template with drag and drop grouping

We have a requirement of displaying aggregations grouping in group footer template and footer template. And we want column drag and drop feature for grouping as well.

We tried with attached code, but we were not able to achieve it.

Grid

answered on 05 May 2016

3 answers

144 views

Development UI for Kendo Pro

Hi,

I was wondering what some developers use as their UI for creating Kendo UI Pro websites?

I have VS2012, however, it doesn't seem there are any NuGet packages anymore.

Thanks, Al

General Discussions

answered on 05 May 2016

7 answers

1.5K+ views

Master-detail kendo ui grid - how to sum by column from details grid and display that sum in master grid column by rows

Hi,

I am working on master details kendo ui application and I use angular. I am not using hierarchical grid. Master and details grid is separated and it is displayed in different tabStrip. Master grid is displayed within first tabStrip and details grid is displayed within second tabStrip. Also, I use angular service for CRUD. This is my JSON for master 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);

});

},

getAllItems: function (onSuccess, onError) { return $http.get('/Scripts/app/data/json/master/detailsGridData.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" }

},

Amount1: { //here there should be sum value from details grid column Amount1 },

Amount2: { //here there should be sum value from details grid column Amount2 }

}

},

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;

if (dataItem) {

gridDetails.dataSource.filter({ field: "foreignKeyId", value: dataItem.Id, operator: "eq" });

}

};

$scope.detailsDataSource = new kendo.data.DataSource({ transport: { read: function (options) { url = "/Scripts/app/data/json/detail/detailsGridData.js", myService.getAllItems(function (data) { options.success(data); }).error(function (data) { options.error(data); }); } }, schema: { model: { id: "Id", fields: { Id: { type: "number" }, foreignKeyId: { type: "number" }, DescriptionItem: { type: "string" }, Amount1: { type: "number" }, Amount2: { type: "number" } } } }, pageSize: 10 });

$scope.gridDetails = { columns: [ { field: "Id", hidden: true }, { field: "finGeneralLedgerId", hidden: true }, { field: "DescriptionItem", title: "Description Item", width: "270px" }, { field: "Amount1", title: "Amount 1", width: "80px", format: "{0:n2}" }, { field: "Amount2", title: "Amount 2", width: "80px", format: "{0:n2}" } ], dataSource: $scope.detailsDataSource, selectable: true, filterable: true, scrollable: true, pageable: { pageSize: 10, pageSizes: ["15", "30", "50", "All"] }, toolbar: [{ name: "createNew", template: '<button class=\'k-button\' ng-click=\'buttonAddDetails()\'>Add new item</button>' }], change: function () { var dataItem = this.dataItem(this.select()); $scope.foreignKeyId = dataItem.foreignKeyId; $scope.descriptionItem = dataItem.DescriptionItem; $scope.amount1 = dataItem.Amount1; $scope.amount2 = dataItem.Amount2; $scope.$digest(); }, height: 215 };

});

This is JSON for details grid:

[

{ "Id": 1, "foreignKeyId": 1, "DescriptionItem": "descr 1", "Amount1": 0, "Amount2": 1000.00 },

{ "Id": 2, "foreignKeyId": 1, "DescriptionItem": "descr 2", "Amount1": 900.00, "Amount2": 0 },

{ "Id": 3, "foreignKeyId": 2, "DescriptionItem": "descr 3", "Amount1": 970.00, "Amount2": 0 },

{ "Id": 4, "foreignKeyId": 3, "DescriptionItem": "descr 4", "Amount1": 0, "Amount2": 2000.00 },

{ "Id": 5, "foreignKeyId": 2, "DescriptionItem": "descr 5", "Amount1": 1970.00, "Amount2": 0 },

{ "Id": 6, "foreignKeyId": 2, "DescriptionItem": "descr 6", "Amount1": 0, "Amount2": 2250.00 },

{ "Id": 7, "foreignKeyId": 3, "DescriptionItem": "descr 7", "Amount1": 720.00, "Amount2": 0 },

{ "Id": 8, "foreignKeyId": 2, "DescriptionItem": "descr 8", "Amount1": 2800.00, "Amount2": 0 }

]

When I select some row in masterGrid, I have correspond row(s) in detailsGrid.
As you can see in JSON for details grid there are "foreignKeyId" that show values from masterDataSource Id. Also, there are "Amount1" and "Amount2" values. My question is how can sum by column "Amount1" and "Amount2" in detailsGrid and display that sum in "Amount1" and "Amount2" column by grid row masterGrid. For example:
Id = 1 and Id = 2 (from JSON details) have same foreignKeyId value (foreignKeyId = 1) which correspond Id from masterDataSource (Id =1 from JSON master). Sum of Amount1 equals 900.00 and sum of Amount2 equals 1000.00. How to display that sum in first row master grid in column Amount1 and Amount2, respectively.

Any help really useful. Thanks in advance.

Regards, Branimir

Grid

answered on 05 May 2016

4 answers

180 views

Blank screen on certain Android devices with Android 5.x

Hi,

We recently updated the kendo version in use by our app to v2016.1.226

Since the launch of our last version we have an increasing number of users who complain that when they first try to scroll the app, the result is an empty screen as can be seen in the attached image "empty-screen-galaxy-s4.png"

We know that all those users have Android 5.x (e.g. 5.1.1, 5.0.1) and various devices (Galaxy S4, Oneplus X, Huawei Mate s).
Our app is using kendo listview and we tried to debug this issue with a device connected to Chrome Dev tools. We reached the following conclusions:
- Trying to reset kendo scroller has no effect on the problem
- Even though it may look like the content is scrolled up outside of the screen area, the debug shows that the view and the listview are correctly placed on the screen, as can be seen in the attached image listview-correctly-placed.png

Are you familiar with any other cases of this nature? Any idea how can we solve them?

Thanks,

Ron.

Application

answered on 04 May 2016

0 answers

209 views

Errata for 2016.2.504: Exported Excel file has grid lines disabled

The official 2016 Q2 Release (2016.2.504) release will export Excel files with grid lines disabled.
The change is not intentional and will be reverted in the following hotfix and service pack releases.
As a workaround you can turn on the grid lines explicitly in the ExcelExport event:

$("#grid").kendoGrid({

...

excelExport: function(e) {

e.workbook.sheets[0].showGridLines = true;

}

});

Apologies for the caused inconvenience.

Grid

asked on 04 May 2016

3 answers

3.2K+ views

Adding a Kendo Dropdown list to a Toolbar with databinding to the Model

Hello,

I have been unsuccessful adding a Kendo Dropdown list to a Kendo Toolbar.

Using the code below I can add a standard select to the items list.

items.Add().Template("<select id='areaDropdown' class='k-dropdown k-ie k-select k-state-border-down' /> ").Overflow(ShowInOverflowPopup.Never);

1) How can I replace this with a Kendo Dropdown List?

2) How can I make it read only?

3) How to I data bind the list to a member in the View Model of type List<SelectListItem>() ?

Thanks,

Reid

Toolbar

answered on 04 May 2016

1 answer

249 views

Batch Validation

I want to change default validation string message to some meaning full message please, can some tell me how to do that.this is my sample code i have attached a sample screen shot as well.Thanks.

<kendo:grid height="300" class="grid_status" name="grid_#=smscId#" dataBound="gridDataBound" insert="insertingRecordStatus" edit="editingRecord" pageable="false" sortable="true" scrollable="true" navigatable="true" editable="true" style="text-transform: uppercase" width="400">

<kendo:grid-toolbar>
<kendo:grid-toolbarItem name="create" />
<kendo:grid-toolbarItem name="save" />
<kendo:grid-toolbarItem name="cancel"/>
<kendo:grid-toolbarItem name="Newitem" template="<input type='button' class='k-button k-button-icontext' value=' Load All Status' onclick='LoadAllStatus()' />"/>
<kendo:grid-toolbarItem name="Newitem" template="<input type='button' class='k-button k-button-icontext' value=' Refresh' onclick='refreshStatus()' />"/>
</kendo:grid-toolbar>

<kendo:grid-columns>
<kendo:grid-column title="Description" field="smssStatusdesc">
</kendo:grid-column>
<kendo:grid-column title="smscType" field="smscType" hidden="true"/>
<kendo:grid-column title="code" field="smssStatus" hidden="true"/>
<kendo:grid-column title="Applied" field="smssFlg">
<kendo:grid-column-values value="${smssFlg}"/>
</kendo:grid-column>
<kendo:grid-column title="type" field="type" hidden="true"/>
</kendo:grid-columns>
<kendo:dataSource serverPaging="true" change="gridSuccessEvent" error="gridFailureEvent" data="data" serverSorting="false"
serverFiltering="false" serverGrouping="true" >
<%-- <kendo:dataSource-schema data="data" total="total"></kendo:dataSource-schema> --%>
<kendo:dataSource-transport>
<kendo:dataSource-transport-read url="${readUrlhasSMSSRead}" data="<%=data%>" dataType="json" type="POST" contentType="application/json" />
<kendo:dataSource-transport-update url="${updateUrlhasSMSSUpdate}" dataType="json" type="POST" contentType="application/json">
</kendo:dataSource-transport-update>
<kendo:dataSource-transport-create url="${createUrlhasSMSSCreate}" dataType="json" type="POST" contentType="application/json">
</kendo:dataSource-transport-create>

<kendo:dataSource-transport-parameterMap>
<script>
function parameterMap(options, type) {

return JSON.stringify(options);

}
</script>
</kendo:dataSource-transport-parameterMap>

</kendo:dataSource-transport>
<kendo:dataSource-schema errors="errors" data="data" total="total" >
<kendo:dataSource-schema-model id="smssId">
<kendo:dataSource-schema-model-fields>

<kendo:dataSource-schema-model-field name="smssStatusdesc" type="string">
<kendo:dataSource-schema-model-field-validation required="true" />
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="smssFlg" type="string" defaultValue="1">
<kendo:dataSource-schema-model-field-validation required="false" />
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="smssStatus" type="string" defaultValue="Y">
<kendo:dataSource-schema-model-field-validation required="false" />
</kendo:dataSource-schema-model-field>
<kendo:dataSource-schema-model-field name="smssSmscId" type="string" defaultValue="#=smscId#" >
<kendo:dataSource-schema-model-field-validation required="false" />
</kendo:dataSource-schema-model-field>
</kendo:dataSource-schema-model-fields>
</kendo:dataSource-schema-model>
</kendo:dataSource-schema>
</kendo:dataSource>
</kendo:grid>

Grid

answered on 04 May 2016

3 answers

172 views

2016 grid popup editor for memo

Hi,

I have version Kendo UI Professional Q1 2016 and was hoping to find and example for a memo style popup editor. Could you provide link or document how to accomplish this task. I see demos for date and combo boxes but not memo fields.

TIA

John

Grid

answered on 04 May 2016

1 answer

286 views

How to prevent drop on GridView from Treeview ?

I have a tree view and a grid view. I am dragging item from grid and dropping it to a selected node in my treeview, which is working great. Also I allow dragging and dropping of node with the tree. However if by accident I drag an element from treeview and drop it to grid view I get an exception "Uncaught TypeError: Cannot read property 'loaded' of undefined"

and my page froze.

How can I prevent droping any element in my grid view and avoid this exception?

//Bind data to Employee grid

$("#employeesGrid").kendoGrid({

dataSource: $scope.datasourceEmployees,

height: 660,

dragAndDrop: false,

sortable: true,

pageable: true,

selectable: 'row',

filterable: {

mode: "row"

},

pageable: {

refresh: true,

pageSizes: true,

buttonCount: 7

},

columns: [

{

field: "EmployeeKey",

title: "Employee Key",

filterable: false,

width: 100

},

{

field: "FullName",

title: "Employee Full Name",

filterable: {

cell: {

showOperators: false

}

},

width: 200

},

{

field: "JDEEmployeeName",

title: "JDE Employee Name",

filterable: {

cell: {

showOperators: false

}

},

width: 140

},

{

field: "SFEmployeeName",

title: "SF Employee Name",

filterable: {

cell: {

showOperators: false

}

},

width: 140

}

]

});

$("#employeesGrid").kendoDraggable({

filter: "tr:not(.k-filter-row)", //specify which items will be draggable

hint: function (element) { //create a UI hint, the `element` argument is the dragged item

employeeDragged = 1;

console.log(employeeDragged);

return element.clone().css({

"opacity": 0.6,

"background-color": "#0cf"

});

}

});

PayrollHierarchyService.getCommunities().then(

function (results) {

$scope.dsCommunity = results;

GenerateDefaultJSONData();

tvComunity = $("#treeview-Community").kendoTreeView({

dataSource: $scope.dsCommunityRolesDefault,

dragAndDrop: true,

dataTextField: "text",

loadOnDemand: false,

drop: onDrop

}).data("kendoTreeView");

},

function (error) {

console.log(error.statusText);

alertNotification.show("Can not Connect to the Database!", "error");

}

);

//Drag and Drop element within a tree (ie Copy, paste node within tree)

function onDrop(e) {

e.preventDefault();

var sourceItem = this.dataItem(e.sourceNode).toJSON();

var destinationNode = $(e.destinationNode);

var treevcomunity = $('#treeview-Community').data('kendoTreeView');

treevcomunity.append(sourceItem, destinationNode);

}

//Drag and add Employee elements to community treeview

$("#treeview-Community").kendoDropTarget({

drop: function (e) {

if (employeeDragged) {

employeeDragged = 0;

var draggableElement = e.draggable.currentTarget,

dataItem = $scope.datasourceEmployees.getByUid(draggableElement.data("uid"));

var treevcomunity = $('#treeview-Community').data('kendoTreeView');

var selectedNodeComunity = treevcomunity.select();

if (selectedNodeComunity.length != 0 && treevcomunity.parent(selectedNodeComunity).length != 0) {

if (dataItem === undefined || dataItem === null) {

}

else treevcomunity.append({ text: dataItem.FullName }, selectedNodeComunity);

}

else

alertNotification.show("Please select a Community Role first", "error");

}

});

Drag and Drop

answered on 04 May 2016