or
1 answer
306 views
I've created a Kendo grid that groups on 2 fields. So it groups on one field, and then further subgroups within the groups on a second field. I need to show sums for a third field for each group and subgroup.
The sums for the subgroups appear ok.
But the sums for the groups are wrong - they show the sum for all records instead of the sum per group.
This can be reproduced by pasting the code below in one of the demo areas in
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "company", groupHeaderTemplate: "#= value #" },
{ field: "department", groupHeaderTemplate: "#= value #" },
{ field: "headcount", groupFooterTemplate: "#= sum #", footerTemplate: "#= sum #" }
],
dataSource: {
data: [
{ company: "IBM", department: "Software", headcount: 4000 },
{ company: "IBM", department: "Software", headcount: 5000 },
{ company: "Apple", department: "Hardware", headcount: 2000 },
{ company: "IBM", department: "Hardware", headcount: 7000 },
{ company: "Apple", department: "Software", headcount: 6000 }
],
aggregate: [
{ field: "headcount", aggregate: "sum" }
],
group: [
{ field: "company" },
{ field: "department", aggregates: [ { field: "headcount", aggregate: "sum" }] }
]
}
});
</script>
How can I achieve correct multi level summing in a kendo grid?
The sums for the subgroups appear ok.
But the sums for the groups are wrong - they show the sum for all records instead of the sum per group.
This can be reproduced by pasting the code below in one of the demo areas in
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid
<div id="grid"></div>
<script>
$("#grid").kendoGrid({
columns: [
{ field: "company", groupHeaderTemplate: "#= value #" },
{ field: "department", groupHeaderTemplate: "#= value #" },
{ field: "headcount", groupFooterTemplate: "#= sum #", footerTemplate: "#= sum #" }
],
dataSource: {
data: [
{ company: "IBM", department: "Software", headcount: 4000 },
{ company: "IBM", department: "Software", headcount: 5000 },
{ company: "Apple", department: "Hardware", headcount: 2000 },
{ company: "IBM", department: "Hardware", headcount: 7000 },
{ company: "Apple", department: "Software", headcount: 6000 }
],
aggregate: [
{ field: "headcount", aggregate: "sum" }
],
group: [
{ field: "company" },
{ field: "department", aggregates: [ { field: "headcount", aggregate: "sum" }] }
]
}
});
</script>
How can I achieve correct multi level summing in a kendo grid?
Plamen Lazarov
Telerik team
answered
on
28 Sep 2015
14 answers
463 views
Hi,
In a horizontal menu, we would like to right-align the first submenu to the parents right border.
Is this an option in the control?
We're using the menu widget as a means of providing a "user control bar" where the user when he hovers his name, (parent menu item), shows a div below which has some infromation; this div should right-align to the parent item...
David.
In a horizontal menu, we would like to right-align the first submenu to the parents right border.
Is this an option in the control?
We're using the menu widget as a means of providing a "user control bar" where the user when he hovers his name, (parent menu item), shows a div below which has some infromation; this div should right-align to the parent item...
David.
Kiril Nikolov
Telerik team
answered
on
28 Sep 2015
2 answers
137 views
Hi,
I've been through all of the documentation I can find and I can't find any reference to filtering dates with a gte (>=) operator in the Pivot Grids.
We use gte operator for a date field, in the Grids, to filter the data but have been unable to find a way to do this for the Pivot Grids when connected to the Cube.
Is this possible?
What we are basically trying to do is say, where [MatchDate].[CalendarDate], operator:"gte", "01/08/2015".
Regards,
Kim
Georgi Krustev
Telerik team
answered
on
28 Sep 2015
1 answer
1.0K+ views
I have an app using Kendo and in my model I have several arrays of items that I need to display in dropdown lists. I can display items in dropdown lists that are directly off the model but can not figure out how to access the item for the current row.
HTML for displaying the grid.
<div kendo-grid="grid" options="surchargeGridOptions"></div>JavaScript for my grid options.
$scope.surchargeGridOptions = { dataSource: { pageSize: 15, autoSync: true, autoBind: false, transport: { read: function(e) { service.getCustomers($scope.model.customer.CustomerID) .success(function(data, status, headers, config) { e.success(data); }); } } }, toolbar: ["create"], sortable: true, pageable: true, selectable: true, editable: true, columns: [ { field: "CarrierID", title: "Carrier", editor: "<input kendo-drop-down-list k-data-text-field=\"'Value'\" k-data-value-field=\"'Key'\" k-data-source=\"model.Carriers\" ng-model=\"dataItem.CarrierID\"/>", template: "#=getCarrierName(CarrierID)#" }, { field: "RateGroupID", title: "Rate Group", editor: "<input kendo-drop-down-list k-data-text-field=\"'Name'\" k-data-value-field=\"'Id'\" k-data-source=\"dataItem.RateGroups\" ng-model=\"dataItem.RateGroupID\"/>", template: "#=getRateGroupName(RateGroupID, dataItem.RateGroups)#" }, { command: "destroy", title: " ", }, ] };In the column for RateGroupID, I get an error saying dataItem not defined. It happens when template is included in the column definition.
Function calls for templates
getCategoryName = function (key) { for (var idx = 0, length = $scope.model.Categories.length; idx < length; idx++) { if ($scope.model.Categories[idx].Key === key) { return $scope.model.Categories[idx].Value; } } return ""; }; getRateGroupName = function (key, list) { for (var idx = 0, length = list.length; idx < length; idx++) { if (list[idx].Id === key) { return list[idx].Name; } } return ""; };How do I access the dataItem to retrieve information from the array. Also, is there a better way to do what I am trying to do with the grid and dropdownlists in Angular and Kendo?
Georgi Krustev
Telerik team
answered
on
28 Sep 2015
5 answers
1.2K+ views
I have a Tab strip with multiple tabs. Each tab has a number of named controls\elements.
I want to be programaticaly select the tab which contains a specific control\element name.
function setTabIndev(tabStripName, iTab, ctrHighlight){ if ($('#' + tabStripName).length) { var tabStrip = $('#' + tabStripName).data('kendoTabStrip'); //If 'ctrHighlight' is set then find tab control is on and select that tab else use 'iTab' if (ctrHighlight && $('#' + ctrHighlight).length) { ???????????????
} else { if(itab) tabStrip.select(iTab); } }}
1 answer
84 views
Hi Team,
Last one week I didnt get any response for my different clarifications from your team past one week. THis is little emergency and critical. Could you please respond as soon as possible? It will be very helpful for me.
Dimo
Telerik team
answered
on
28 Sep 2015
9 answers
351 views
I want to use the Slider in a mobile Kendo UI Projekt.
It works fine exept the draging of the Slider. I can use the arrows or tab direct to the value, but I cannot hold down and slide left / right, as it works in the demo for example.
Any known problems with the slider and the mobile-package?
Greetings
Tom
It works fine exept the draging of the Slider. I can use the arrows or tab direct to the value, but I cannot hold down and slide left / right, as it works in the demo for example.
Any known problems with the slider and the mobile-package?
Greetings
Tom
Petyo
Telerik team
answered
on
28 Sep 2015
1 answer
95 views
HI I need to show loading symbol with records count after the grid. Please find the attached image for further reference.
Dimo
Telerik team
answered
on
28 Sep 2015
1 answer
229 views
Hy,
i cant find the best way to validate dependent fields within the popup dialog from Kendo.
Here are my grid options:
$scope.gridOptions = { dataSource: data, selectable: "row", language : $translate.use(), pageable: true, editable: { mode: "popup", template: kendo.template($("#orderEditTemplate").html()) }, save: function(e) { if(e.model.OrderStateId == 9) { if(!e.model.ErrorReason) { $scope.error = "Reason!!!"; e.preventDefault(); } } }, columns: [ { field: "CreatedOn", title: $translate.instant("ADMIN.ORDERS.GRID.CREATEDON"), template: "#= moment(CreatedOn).format('L LT') #" }, { field : 'TotalAmount', template : "{{ dataItem.TotalAmount | ccurrency:dataItem.Currency }}", title: $translate.instant("ADMIN.ORDERS.GRID.TOTALAMOUNT") }, { field: "Description", title: $translate.instant("ADMIN.ORDERS.GRID.DESCRIPTION") }, { field: "OrderStateId", title: $translate.instant("ADMIN.ORDERS.GRID.STATUS"), template : '{{ dataItem.OrderStateId | orderStatus }}' }, { command: "edit", title: " ", width: "100px" } ]};This is my Popup Template:
<script type="text/x-kendo-template" id="orderEditTemplate"> <div> <div class="alert alert-danger" ng-show="error"> {{error}} </div> <div class="form-group"> <label>PaymentState</label> <select kendo-drop-down-list k-on-change="dataItem.dirty=true" k-data-text-field="'Text'" k-data-value-field="'Value'" k-data-source="orderStates" ng-model="dataItem.OrderStateId"></select> </div> <div class="form-group" ng-show="dataItem.OrderStateId == 9"> <label>Reason:</label> <textarea class="form-control" rows="3" ng-model="dataItem.ErrorReason"></textarea> </div> </div></script>
What i woud like to to is. If the OrderStateId is set to 9, the ErrorReason field is required. If the OrderStateId is set the anything else, your good to go without ErrorReason. My Problem ist that my error-Alert in the Popup is never going to be displayed. I don't know why, but could it be possible that inside the popup its a different scope?
What is the best way with Kendo and Angular to Validate such things?
Best Regards
Dominik
Vladimir Iliev
Telerik team
answered
on
28 Sep 2015
1 answer
110 views
Hi I need to populate the columns and page size from database. Not from model and hardcoding. I mean everything will be in dynamic. Kindly help me and provide the samples for this. My Existing code below.
@(Html.Kendo().Grid<kendo_grid_with_web_api_and_ondemand.Models.MsgDetails>()
.Name("gridnew")
.Columns(columns =>
{
columns.Bound(o => o.MsgNum).Width(110);
columns.Bound(o => o.MsgDesc).Width(130);
})
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true))
.Pageable()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action("MsgDetails_Read", "Home"))
)
)
Columns,Pagesize,Scrollable every property will be in DB. So I need to load populate from db with mvc kendo grid. Kindly help me.
Kiril Nikolov
Telerik team
answered
on
28 Sep 2015
