Skip to content Skip to sidebar Skip to footer

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: "&nbsp;", 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)"