This is a migrated thread and some comments may be shown as answers.

Navigatable grid with Cascading dropdowns

1 Answer 29 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Rakesh
Top achievements
Rank 1
Rakesh asked on 14 Aug 2015, 03:12 PM

Hi,

 

I am trying to set up a kendo UI grid with cascading dropdown. I have attached the sample HTML file I am using.

I am able to bind the grid with the data. But the cascading drop down seem to fail. Is it required the grid to be in inline edit mode so that the cascading drop downs are visible?

<!DOCTYPE html>
<html>
<head>
    <title>Basic usage</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.min.css" rel="stylesheet">
    <link href="../../styles/kendo.dataviz.default.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script src="../../js/products.js"></script>
    <script>
      
        var catAreaListNames=[{ "AreaId": 188, "AreaName": "Construction", "CategoryId": 35 },
        { "AreaId": 193, "AreaName": "Process  Equipment", "CategoryId": 35 },
        { "AreaId": 164, "AreaName": "All Standards", "CategoryId": 2 }, 
        { "AreaId": 24, "AreaName": "Asbestos", "CategoryId": 2 },
        { "AreaId": 119, "AreaName": "Behavior Based Safety", "CategoryId": 2 },  
        { "AreaId": 165, "AreaName": "Housekeeping ", "CategoryId": 5 }];
                        var taskList = [{id:"1921273", TaskId:"1921273", CategoryId:35, sortCategoryId:"MOC", AreaId:"0", sortArea:"",Task:"Test Task ", RQD:"", sortRQD:"", DueDate:"", PPR:"", sortPPR:"", Comments:"", CompletedDate:"", LockCoreFields:"false", IsDeleted:"false", HasAssessment:"false", AllLocked:"false", lTaskOccurrenceId:"3249927",Category:{CategoryId:35,CategoryName:"MOC"},Area:{AreaId:0,AreaName:""}},{id:"-1", TaskId:"-1", CategoryId:0, sortCategoryId:"", AreaId:"0", sortArea:"",Task:"", RQD:"0", sortRQD:"", DueDate:"", PPR:"0", sortPPR:"0", Comments:"", CompletedDate:"", LockCoreFields:"false", IsDeleted:"false", HasAssessment:"false", AllLocked:"false", lTaskOccurrenceId:"0",Category:{CategoryId:0,CategoryName:""},Area:{AreaId:0,AreaName:" "}}];
                        var Category = [{CategoryId:0,CategoryName:""},{CategoryId:48,CategoryName:"BMP"},{CategoryId:3,CategoryName:"CPS"},{CategoryId:36,CategoryName:"Elec"},{CategoryId:37,CategoryName:"Engg"},{CategoryId:1,CategoryName:"Env"},{CategoryId:44,CategoryName:"General"},{CategoryId:38,CategoryName:"HR"},{CategoryId:45,CategoryName:"IFC"},{CategoryId:39,CategoryName:"Inst"},{CategoryId:50,CategoryName:"Inv"},{CategoryId:40,CategoryName:"Lab"},{CategoryId:41,CategoryName:"Maint"},{CategoryId:35,CategoryName:"MOC"},{CategoryId:5,CategoryName:"OTHER"},{CategoryId:42,CategoryName:"Prod"},{CategoryId:23,CategoryName:"Prod Stew"},{CategoryId:32,CategoryName:"PS"},{CategoryId:43,CategoryName:"Purch"},{CategoryId:12,CategoryName:"QUALI"},{CategoryId:2,CategoryName:"Safety"}];
                       
                        var pprList = [{id:"123213", type:"1", name:"Rakesh ", email:""}];
                        var pprListString = '';
                        var requiredList = '0:;1:T;2:S;3:D;4:N';
                       
                        
                      
                        var catArea=[{"AreaId":0,"AreaName":""}];
        function predicatBy(prop) {
            return function (a, b) {
                if (a[prop] > b[prop]) {
                    return 1;
                } else if (a[prop] < b[prop]) {
                    return -1;
                }
                return 0;
            }
        }
        catAreaListNames = catAreaListNames.sort(predicatBy("AreaName"));
        function categoryDropDownEditor(container, options) {
            $('<input id="Category" name="Category" required data-text-field="CategoryName" data-value-field="CategoryId" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: Category

                })
        };
        function AreaDropDownEditor(container, options) {
            $('<input id="catAreaListNames" name="catAreaListNames" required data-text-field="AreaName" data-value-field="AreaId" data-bind="value:' + options.field + '"/>')
                .appendTo(container)
                .kendoDropDownList({
                    autoBind: false,
                    dataSource: catAreaListNames, cascadeFrom: "Category"


                })
        };
        function dueDateEditor(container, options) {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                    .appendTo(container)
                    .kendoDatePicker({});
        }
        function compDateEditor(container, options) {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
                    .appendTo(container)
                    .kendoDatePicker({});
        }
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    
<div id="example">
            <div id="grid"></div>

            <script>
                $(document).ready(function () {
                    $("#grid").kendoGrid({
                        dataSource: {
                            data: taskList,
                            schema: {
                                model: {
                                    fields: {
                                        lTaskOccurrenceId: { type: "number", editable: false },
                                        Category: { defaultValue: { CategoryId: 0, CategoryName: "" } },
                                        Area: { defaultValue: { AreaId: 0, AreaName: "" } },
                                    }
                                }
                            },
                            pageSize: 10

                        },

                        navigatable: true,
                        sortable: true,

                        columns: [
                            { field: "lTaskOccurrenceId", title: " ", width: 75, editable: false },
                            { field: "CategoryId", title: "Cat", width: 120, editor: categoryDropDownEditor, template: "#=Category.CategoryName#" },
                            //{ field: "CategoryId", title: "Cat", width: 120,editor: categoryDropDownEditor, template: "#=Category.CategoryName#"  },
                            {
                                //The modelId column
                                title: "Area",
                                width: 150,
                                field: "AreaId",  // bound to the modelId field
                                template: "#=catAreaListNames.AreaName#", //the template shows the name corresponding to the modelId field
                                editor: AreaDropDownEditor
                                
                            },
                            //{ field: "Area",title: "Area", width: 150 },
                            { field: "Task", title: "Task", width: 200 },
                            { field: "RQD", title: "RQD", width: 100 },
                            { field: "PPR", title: "PPR", width: 100 },
                            { field: "DueDate", title: "Due Date", format: "{0:MM-dd-yyyy}", editor: dueDateEditor },
                            { field: "CompletedDate", title: "Completed", width: 100, format: "{0:MM-dd-yyyy}", editor: compDateEditor },
                            { field: "Comments", title: "Comments", width: 200 },
                            { field: "IsDeleted", title: "IsDeleted", hidden: true },
                            { command: "destroy", title: "&nbsp;", width: 95 }],

                        editable: true
                    });
                });
            </script>

    </div>



<style type="text/css">
        .customer-photo {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
        background-size: 32px 35px;
        background-position: center center;
        vertical-align: middle;
        line-height: 32px;
        box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
        margin-left: 5px;
    }

    .customer-name {
        display: inline-block;
        vertical-align: middle;
        line-height: 32px;
        padding-left: 3px;
    }
</style>

<script>
    
  
</script>
    
</body>
</html>

1 Answer, 1 is accepted

Sort by
0
Viktor Tachev
Telerik team
answered on 18 Aug 2015, 02:08 PM
Hello Rakesh,

In order to implement the functionality you should follow the approach described in the following article. Note that the approach is only supported in inline and popup edit modes.



Regards,
Viktor Tachev
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Rakesh
Top achievements
Rank 1
Answers by
Viktor Tachev
Telerik team
Share this question
or