Questions on Kendo UI for jQuery Forum

5 answers

185 views

Hiya,

I was trying to get the x&y value of a scatter chart while dragging a point. I was able to get the x&y value using the plotAreaClick event but could not do the same in the drag and also on the dragStart and dragEnd events. Can you show me a way to achieve this?

Best regards,

Ruby

Charts

answered on 05 May 2016

1 answer

137 views

SignalR create record puts new row at bottom of grid - how do we make it go to the top?

Users are creating a new record for a bound grid inside of a popup. Upon return, the new row is created via SignalR & the .create method but it's showing at the bottom of the grid. Is it possible to place the new record at the top of the grid (w/out changing sort)?

For, refreshing the grid is a partial workaround (SO link below), but still does not place the row where we would like it.

Thanks!

http://stackoverflow.com/questions/29529318/how-to-use-signalr-datasource-with-kendo-grid

Grid

answered on 05 May 2016

1 answer

1.2K+ views

Using Javascript in a custom template

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

275 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

133 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.4K+ 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

171 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

196 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

243 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