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.
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
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 }]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);
});
}
}});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
};
});[ { "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 }]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,

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.
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
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>

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

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"); } } });

"transparent" or "" or "Transparent" do not work, result is solid white background This will only take a hex color string, will not accept an rgba string. I need a transparent background for all my charts.
function createChart() {
$("#detail-chart").kendoChart({
theme: "Material",
chartArea: {background:"transparent", height:300},
title: {
position: "top",
text: "Sales Percentage \n Per Market",
color: "#868686"
},
legend: {
visible: true,
position: "bottom",
labels: {
color: "#868686",
padding: {right:10,bottom:2},
margin: {right:14}
}
},
seriesDefaults: {
type: "bar",
stack: true
},
series: [{
name: "Sales Percentage",
data: [40, 32, 61],
color: "#425968"
}, {
name: "Total Local Market",
data: [100, 100, 100],
color: "#c3c3c3"
}],
valueAxis: {
max: 100,
majorUnit: 50,
line: {visible: false},
minorGridLines: {visible: false},
labels: {
format:"{0:n0}%",
color: "#525252"
}
},
categoryAxis: {
categories: ["African American", "Hispanic", "Asian American"],
majorGridLines: {visible: false},
labels: {
color: "#525252"
}
},
tooltip: {
visible: true,
template: "#= category # (#= series.name #): #= value #%",
font: "20px"
}
});
}