Get A Complete List Of Parent Groups From Child Group. (kendo Ui)
Executable code snippet: https://demos.telerik.com/kendo-ui/grid/index (Just go to this example and hit 'Edit') I want to display the full list of parent groups displayed as a list
Solution 1:
Ok. Stick the code below in the Telerik DOJO. By the way, remove the typescript tag from your question. This isn't typescript, this is Kendo UI jQuery. If the groups in play are Category and In Stock, the footer will show something like 'Seafood/available', 'Seafood/not available', etc. The idea to get the prior groups is to assign a reference to the Kendo grid object so that we can access the dataSource in the groupFooterTemplate function and that's where the Javascript black magic happens. Hope the code below will help you solve your problem.
<!DOCTYPE html><html><head><basehref="https://demos.telerik.com/kendo-ui/grid/index"><style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style><title></title><linkrel="stylesheet"href="https://kendo.cdn.telerik.com/2021.2.511/styles/kendo.bootstrap-v4.min.css" /><scriptsrc="https://kendo.cdn.telerik.com/2021.2.511/js/jquery.min.js"></script><scriptsrc="https://kendo.cdn.telerik.com/2021.2.511/js/kendo.all.min.js"></script></head><body><scriptsrc="//cdnjs.cloudflare.com/ajax/libs/jszip/2.4.0/jszip.min.js"></script><divid="example"><divid="grid"></div><script>
$(document).ready(function () {
var crudServiceBaseUrl = "https://demos.telerik.com/kendo-ui/service",
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: crudServiceBaseUrl + "/detailproducts",
dataType: "jsonp"
},
update: {
url: crudServiceBaseUrl + "/detailproducts/Update",
dataType: "jsonp"
},
destroy: {
url: crudServiceBaseUrl + "/detailproducts/Destroy",
dataType: "jsonp"
},
parameterMap: function (options, operation) {
if (operation !== "read" && options.models) {
return { models: kendo.stringify(options.models) };
}
}
},
batch: true,
pageSize: 20,
autoSync: true,
aggregate: [{
field: "TotalSales",
aggregate: "sum"
}],
group: {
field: "Category.CategoryName",
dir: "desc",
aggregates: [
{ field: "TotalSales", aggregate: "sum" }
]
},
schema: {
model: {
id: "ProductID",
fields: {
ProductID: { editable: false, nullable: true },
Discontinued: { type: "boolean", editable: false },
TotalSales: { type: "number", editable: false },
TargetSales: { type: "number", editable: false },
LastSupply: { type: "date" },
UnitPrice: { type: "number" },
UnitsInStock: { type: "number" },
Category: {
defaultValue: {
CategoryID: 8,
CategoryName: "Seafood"
}
},
Country: {
defaultValue: {
CountryNameLong: "Bulgaria",
CountryNameShort: "bg"
}
}
}
}
}
});
var grid = $("#grid").kendoGrid({
dataSource: dataSource,
columnMenu: {
filterable: false
},
height: 680,
editable: "incell",
pageable: true,
sortable: true,
navigatable: true,
resizable: true,
reorderable: true,
groupable: true,
filterable: true,
dataBound: onDataBound,
toolbar: ["excel", "pdf", "search"],
columns: [{
selectable: true,
width: 75,
attributes: {
"class": "checkbox-align",
},
headerAttributes: {
"class": "checkbox-align",
}
}, {
field: "ProductName",
title: "Product Name",
template: "<div class='product-photo' style='background-image: url(../content/web/foods/#:data.ProductID#.jpg);'></div><div class='product-name'>#: ProductName #</div>",
width: 300,
groupFooterTemplate: function(dataItem) {
var ds = grid.dataSource;
var groupingFields = [];
for (let a = 0; a < ds._group.length; a++) {
groupingFields.push(ds._group[a].field);
}
var items = dataItem.items;
for (let a = 0; a < items.length; a++) {
if (items[a].hasOwnProperty('hasSubgroups')) {
items = items[a].items;
break;
}
}
var path = '';
for (let a = 0; a < items.length; a++) {
var item = items[a];
for (let b = 0; b < groupingFields.length; b++) {
var groupingField = groupingFields[b];
if (b > 0) {
path += '/';
}
if (groupingField.includes('.')) {
path += groupingField.split('.').reduce(getValue, item);
} else {
if (groupingField === 'Discontinued') {
path += item[groupingField] ? 'available' : 'not available';
} else {
path += item[groupingField];
}
}
if (groupingField === dataItem.field) {
break;
}
}
break;
}
return path;
functiongetValue(obj, prop) {
return obj[prop];
}
},
}, {
field: "UnitPrice",
title: "Price",
format: "{0:c}",
width: 105
}, {
field: "Discontinued",
title: "In Stock",
template: "<span id='badge_#=ProductID#' class='badgeTemplate'></span>",
width: 130,
}, {
field: "Category.CategoryName",
title: "Category",
editor: clientCategoryEditor,
groupHeaderTemplate: "Category: #=data.value#, Total Sales: #=kendo.format('{0:c}', aggregates.TotalSales.sum)#",
width: 125
}, {
field: "CustomerRating",
title: "Rating",
template: "<input id='rating_#=ProductID#' data-bind='value: CustomerRating' class='rating'/>",
editable: returnFalse,
width: 140
}, {
field: "Country.CountryNameLong",
title: "Country",
template: "<div class='k-text-center'><img src='../content/web/country-flags/#:data.Country.CountryNameShort#.png' alt='#: data.Country.CountryNameLong#' title='#: data.Country.CountryNameLong#' width='30' /></div>",
editor: clientCountryEditor,
width: 120
}, {
field: "UnitsInStock",
title: "Units",
width: 105
}, {
field: "TotalSales",
title: "Total Sales",
format: "{0:c}",
width: 140,
aggregates: ["sum"],
}, {
field: "TargetSales",
title: "Target Sales",
format: "{0:c}",
template: "<span id='chart_#= ProductID#' class='sparkline-chart'></span>",
width: 220
},
{ command: "destroy", title: " ", width: 120 }],
}).data('kendoGrid');
});
functiononDataBound(e) {
var grid = this;
grid.table.find("tr").each(function () {
var dataItem = grid.dataItem(this);
if (dataItem === undefined) {
return;
}
var themeColor = dataItem.Discontinued ? 'success' : 'error';
var text = dataItem.Discontinued ? 'available' : 'not available';
$(this).find(".badgeTemplate").kendoBadge({
themeColor: themeColor,
text: text,
});
$(this).find(".rating").kendoRating({
min: 1,
max: 5,
label: false,
selection: "continuous"
});
$(this).find(".sparkline-chart").kendoSparkline({
legend: {
visible: false
},
data: [dataItem.TargetSales],
type: "bar",
chartArea: {
margin: 0,
width: 180,
background: "transparent"
},
seriesDefaults: {
labels: {
visible: true,
format: '{0}%',
background: 'none'
}
},
categoryAxis: {
majorGridLines: {
visible: false
},
majorTicks: {
visible: false
}
},
valueAxis: {
type: "numeric",
min: 0,
max: 130,
visible: false,
labels: {
visible: false
},
minorTicks: { visible: false },
majorGridLines: { visible: false }
},
tooltip: {
visible: false
}
});
kendo.bind($(this), dataItem);
});
}
functionreturnFalse() {
returnfalse;
}
functionclientCategoryEditor(container, options) {
$('<input required name="Category">')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "CategoryName",
dataValueField: "CategoryID",
dataSource: {
data: categories
}
});
}
functionclientCountryEditor(container, options) {
$('<input required name="Country">')
.appendTo(container)
.kendoDropDownList({
dataTextField: "CountryNameLong",
dataValueField: "CountryNameShort",
template: "<div class='dropdown-country-wrap'><img src='../content/web/country-flags/#:CountryNameShort#.png' alt='#: CountryNameLong#' title='#: CountryNameLong#' width='30' /><span>#:CountryNameLong #</span></div>",
dataSource: {
transport: {
read: {
url: " https://demos.telerik.com/kendo-ui/service/countries",
dataType: "jsonp"
}
}
},
autoWidth: true
});
}
var categories = [{
"CategoryID": 1,
"CategoryName": "Beverages"
}, {
"CategoryID": 2,
"CategoryName": "Condiments"
}, {
"CategoryID": 3,
"CategoryName": "Confections"
}, {
"CategoryID": 4,
"CategoryName": "Dairy Products"
}, {
"CategoryID": 5,
"CategoryName": "Grains/Cereals"
}, {
"CategoryID": 6,
"CategoryName": "Meat/Poultry"
}, {
"CategoryID": 7,
"CategoryName": "Produce"
}, {
"CategoryID": 8,
"CategoryName": "Seafood"
}];
</script><styletype="text/css">.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 001px#999, inset 0010pxrgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
.k-gridtr.checkbox-align {
text-align: center;
vertical-align: middle;
}
.product-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 001px#999, inset 0010pxrgba(0,0,0,.2);
margin-right: 5px;
}
.product-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
.k-rating-container.k-rating-item {
padding: 4px0;
}
.k-rating-container.k-rating-item.k-icon {
font-size: 16px;
}
.dropdown-country-wrap {
display: flex;
flex-wrap: nowrap;
align-items: center;
white-space: nowrap;
}
.dropdown-country-wrapimg {
margin-right: 10px;
}
#grid.k-grid-edit-row > td > .k-rating {
margin-left: 0;
width: 100%;
}
.k-grid.k-grid-search {
margin-left: auto;
margin-right: 0;
}
</style></div></body></html>
Post a Comment for "Get A Complete List Of Parent Groups From Child Group. (kendo Ui)"