Hierarchy grid bind on button click

8 posts, 0 answers
  1. Abdul
    Abdul avatar
    5 posts
    Member since:
    Sep 2014

    Posted 18 Sep 2014 Link to this post

    Dear admin,
    I need to bind Hierarchy grid on main grid by button click.  Following is my example code.

    001.var people = new kendo.data.DataSource({
    002.      data: {!Output},
    003.      batch: true,
    004.      schema: {
    005.            model: {
    006.                fields: {
    007.                    carId: { type: "string" },
    008.                    vehicleId: { type: "string", editable:false  },
    009.                    Percentage: { type: "number", editable:false  },
    010.                    Price: { type: "string", editable:false},
    011.                    CarType: { type: "string", editable:false},
    012.                    CarSize: { type: "string", editable:false},
    013.                    CarPerCase: { type: "number", editable:false },
    014.                    Family: { type: "string", editable:false},
    015.                    ModelType: { type: "string", editable:false},
    016.                    EPId: { type: "string" },
    017.                    Tax: { type: "string" }
    018.                }
    019.            }
    020.        },
    021.      pageSize: 20,
    022.      sort: { field: "vehicleId", dir: "asc" }
    023.    });   
    024.var element = $("#grid").kendoGrid({
    025.        dataSource: people,
    026.        navigatable: true,
    027.        pageable: true,
    028.        toolbar: [
    029.            "save",
    030.            "cancel",
    031.             {
    032.                name: "Add",
    033.                text: "Show Car Price",
    034.                click: function(e) {                        
    035.                    return false;
    036.                }
    037.             },
    038.             {
    039.                name: "Delete",
    040.                text: "Hide Car Price",
    041.                click: function(e) {                        
    042.                    return false;
    043.                }
    044.             }
    045.        ],
    046.        columns:[                 
    047.              {
    048.                  field: "carId",
    049.                  title: "Car ID",
    050.                  width: 150, 
    051.                  hidden:true                   
    052.              },
    053.              {
    054.                  field: "vehicleId",
    055.                  title: "Vehicle ID",
    056.                  width: 100
    057.              },
    058.              {
    059.                  field: "Percentage",
    060.                  title: "Percentage",
    061.                  width: 70
    062.              },
    063.              {
    064.                  field: "Price",
    065.                  title: "Price",
    066.                  width: 250
    067.              },
    068.              {
    069.                  field: "CarType",
    070.                  title: "Car Type"
    071.              },
    072.              {
    073.                  field: "CarSize",
    074.                  title: "Car Size"
    075.              },
    076.              {
    077.                  field: "CarPerCase",
    078.                  title: "Car Per Case"
    079.              },
    080.              {
    081.                  field: "Family",
    082.                  title: "Family"
    083.              },
    084.              {
    085.                  field: "ModelType",
    086.                  title: "Model Type",
    087.                  width: 100
    088.              },
    089.              {
    090.                  field: "EPId",
    091.                  title: "EP Id",
    092.                  hidden: false
    093.              },                
    094.              {
    095.                  field: "Tax",
    096.                  title: "Tax",
    097.                  format: "{0:c}",
    098.                  width: 100
    099.              }
    100.          ],  
    101.          editable:true,                                                                          
    102.         groupable: true
    103.         filterable: true,                    
    104.         sortable: true,
    105.         reorderable: true,
    106.         resizable: true,
    107.         columnMenu: true,                         
    108.         pageable: {
    109.            refresh: true,
    110.            pageSizes: [10, 20, 50],
    111.            buttonCount: 5
    112.         },
    113.         editable: "incell",              
    114.         detailInit: detailInit                  
    115.      });
    116.// hierarchy grid
    117.      function detailInit(e) {                
    118.              var detailRow = e.detailRow;
    119.              codeDetailData = e.data;
    120. 
    121.            $("<div/>").appendTo(e.detailCell).kendoGrid({                   
    122.                dataSource: e.data.ItemPrices.toJSON(),                                       
    123.                editable:true,
    124.                navigatable: true,
    125.                scrollable: false,
    126.                sortable: true,
    127.                pageable: true,
    128.                columns: [
    129.                    {
    130.                        field: "Engine",
    131.                        width: "200px",
    132.                        editor: serviceItemAutoCompleteEditor  
    133.                    },
    134.                    {
    135.                        field: "TN",
    136.                        title:"TN",
    137.                        width: "110px"
    138.                    },
    139.                    {
    140.                        field: "TaxApplied",
    141.                        title:"Tax Applied"
    142.                    },
    143.                    {
    144.                        field: "TaxChange",
    145.                        title: "Tax Change",
    146.                        width: "300px"
    147.                    },
    148.                    {
    149.                        field: "StartDate",
    150.                        title: "Start Date",
    151.                        format:"{0:dd-MM-yyyy}",
    152.                        editor: dateTimeEditor
    153.                    },
    154.                    {
    155.                        field: "EndDate",
    156.                        title: "End Date",
    157.                        format:"{0:dd-MM-yyyy}",
    158.                        editor: dateTimeEditor 
    159.                    }
    160.                ]
    161.            });
    162. 
    163.         }


    My requirement is that the line 114 detailInit: detailInit (responsible for hierarchy grid), should not be there at the time of load of grid. There should be a button, that bind/attach hierarchy grid to main grid on click.
    Hiding columns of arrows is not an option.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 22 Sep 2014 Link to this post

    Hi Abdul,

    For convenience I created small example which demonstrates how to load the nested grid on button click, which you can use as baseline to achieve the desired behavior in your real project:

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Abdul
    Abdul avatar
    5 posts
    Member since:
    Sep 2014

    Posted 23 Sep 2014 in reply to Vladimir Iliev Link to this post

    Hi Admin,
    No this is not I am looking for. I need that the line 114 detailInit: detailInit (responsible for hierarchy grid) in my code example, should not be there at the time of load of grid. then there should be a button, that bind/attach hierarchy grid to main grid on click.
  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 24 Sep 2014 Link to this post

    Hi Abdul,

    The desired behavior is not supported out of the box and custom solution would be needed. For example you can use the "destroy" method to destroy the current Grid, clean it's Html and initialize it again with the new settings.

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. DHHS
    DHHS avatar
    59 posts
    Member since:
    Mar 2015

    Posted 11 Jun 2015 Link to this post

    Hi Vladimir, 

    I have a hierarchical grid, on main grid i have a button on the top of the grid using toolbar template on click it opens the kendo window. This works perfectly fine. On the child grid I have to have the same functionality, where I have a button on the top of the child grid, On click of the button it should show the kendo window. But the button click on the child grid is not firing. Below is the code.

    //My main grid
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-18 col-md-12">
                @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.Id).Filterable(false).Width(50);
                columns.Bound(p => p.ContractorType);
                columns.Bound(p => p.BHSISNum);
                columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ContractorIsAlsoRegion);
                columns.Bound(p => p.ContractorName);
                columns.Bound(p => p.AddressBkNum);
     
            })
            .Pageable()
            .Sortable()
            .Scrollable()
            .Filterable()
            .Selectable()
            .ClientDetailTemplateId("template")
            .HtmlAttributes(new { style = "height:550px;" })
            .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
            )
                  
            .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <div class="toolbar">
                <button class="k-button k-button-icontext k-grid-add k-primary" id="providerskendowindow">Add Providers</button>
     
            </div>
        </text>);
    })
     
                )
            </div>
        </div>
    </div>
     
     
    //my child grid
     
    <script id="template" type="text/kendo-tmpl">
        @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
                .Name("grid_#=Id#")
                .Columns(columns =>
                {
                    columns.Bound(o => o.Id).Width(50);
                    columns.Bound(o => o.ServiceId);
                    columns.Bound(o => o.ServiceType);
                    columns.Bound(o => o.AdultChild);
                    columns.Bound(o => o.IFGSwitch);
                    columns.Bound(o => o.CodeModifier);
                    columns.Bound(o => o.ServiceModifier);
                    columns.Bound(o => o.StartDate).Format("{0:MM/dd/yyyy}");
                    columns.Bound(o => o.EndDate).Format("{0:MM/dd/yyyy}");
                })
                 .ToolBar(toolbar =>
    {
        toolbar.Template(@<text>
            <div class="toolbar">
                <button class="k-button k-button-icontext k-grid-add k-primary" id="serviceskendowindow">Add Services</button>
            </div>
        </text>);
    })
                        .DataSource(dataSource => dataSource
                            .Ajax()
                            .PageSize(10)
                          .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" }))
                        )
     
                        .Pageable()
                        .Sortable()
                        .ToClientTemplate()
     
        )
    </script>
     
    //Main grid button click window
     
    @(Html.Kendo().Window()
        .Name("providerwindow")
        .Title("Add Business Units")
        .Content(@<text><div class="container-fluid">
                <div class="row">
                    <div class="col-xs-18 col-md-12">
                        @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.providers>()
            .Name("grid1")
            .Columns(columns =>
            {
                columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />");
                columns.Bound(p => p.Id).Filterable(false).Width(50);
                columns.Bound(p => p.ContractorType);
                columns.Bound(p => p.BHSISNum);
                columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ContractorName);
            })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
                    .HtmlAttributes(new { style = "height:350px;" })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                                    .Read(read => read.Action("Contractors_Read", "Contract").Data("additionalInfo"))
                    )
                        )
                        <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button>
                        <button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button>
                    </div>
     
                </div>
     
     
            </div></text>
                )
                .Draggable()
        .Resizable()
        .Width(800)
     
        .Visible(false)  
    )
     
    //Child grid button click kendo window
     
    @(Html.Kendo().Window()
        .Name("servicewindow")
        .Title("Add Business Units")
        .Content(@<text><div class="container-fluid">
                <div class="row">
                    <div class="col-xs-18 col-md-12">
                        @(Html.Kendo().Grid<BHEBS.Areas.Admin.Models.ContractModel.serviceDetails>()
            .Name("grid1")
            .Columns(columns =>
            {
                columns.Template(x => { }).HtmlAttributes(new { @class = "chkbox" }).ClientTemplate("<input type='checkbox' class='checkbox' id = 'chk' onclick='SetCheckBOX()' />");
                columns.Bound(p => p.Id).Filterable(false).Width(50);
                columns.Bound(p => p.ServiceId);
                columns.Bound(p => p.ServiceType);
                columns.Bound(p => p.StartDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.EndDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.AdultChild);
            })
                    .Pageable()
                    .Sortable()
                    .Scrollable()
                    .Filterable()
                    .Selectable(selectable => selectable.Mode(GridSelectionMode.Multiple))
                    .HtmlAttributes(new { style = "height:350px;" })
                    .DataSource(dataSource => dataSource
                    .Ajax()
                    .PageSize(20)
                                          .Read(read => read.Action("Services_Read", "Contract", new { contractorId = "#=Id#" }))
                    )
                        )
                        <button class="k-button close-button k-primary" style="bottom: 10px; ">Cancel</button>
                        <button class="k-button k-primary" id="showSelection" style="bottom: 10px; ">Add</button>
                    </div>
     
                </div>
     
     
            </div></text>
                )
                .Draggable()
        .Resizable()
        .Width(800)
     
        .Visible(false)
        
    )
     
     
    <script>
        function additionalInfo() {
            var contractId =@Html.Raw(Json.Encode(ViewBag.ContractService.Id));
            return {
                Id: contractId
            }
        }
        $(document).ready(function(){
            $("#providerskendowindow").click(function(){
                alert("inside");
                $("#providerwindow").data("kendoWindow").center().open();
            });
            $("#serviceskendowindow").click(function(){
                alert("inside");
                $("#servicewindow").data("kendoWindow").center().open();
            });
     
        });
        $(".close-button").click(function(){
            // call 'close' method on nearest kendoWindow
            $(this).closest("[data-role=window]").kendoWindow("close");
        });
    </script>

  7. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 15 Jun 2015 Link to this post

    Hi,

    The reason for current behavior are the following points:
    • "id" attribute is used for finding the button - this is invalid approach as the child Grid can be rendered several times (for each parent row). I would suggest to use CSS class to find the buttons instead:
      <button class="k-button k-button-icontext k-grid-add k-primary serviceskendowindow">Add Services</button>
    • event handler is attached before the child grid is actually rendered - you should use the parent grid "detailInit" event to bind the "click" handler for the above button.

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  8. Rekha
    Rekha avatar
    4 posts
    Member since:
    Mar 2016

    Posted 22 Mar Link to this post

    Hi ,

    Currently I am rewritting the aspx and telerik rad control code to MVC and Kendo UI . My task is to create a page with one company grid where the user can click on contacts, projects,msgs,history of company  from the main company grid.. In old application the functionality looks like the below attachment of

    How can I achieve that below functionality in Kendo UI Javascript.Below is my code for that but I dont no how to link contacts,projects,MSg  to open when the user click on them..Please help me . Thanks in advance.

    var addcompanyGrid = addcompanyGrid || {};

    addcompanyGrid = function () {
        var gridInEditMode = false;
        var addcompanyDropDownChanged = false;
        var addcompanyDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/AddCompany/GetAddCompany",
                    type: "get",
                    dataType: "json"
                },


                create: {

                    url: "/AddCompany/CreateAddCompany",
                    type: 'POST',
                    dataType: "json",
                    contentType: "application/JSON"

                },
                update: {
                    url: "/AddCompany/UpdateAddCompany",
                    type: 'POST',
                    dataType: "json",
                    contentType: "application/JSON"
                },
                destroy: {
                    url: "/AddCompany/DeleteAddCompany",
                    type: "POST",
                    dataType: "json",
                    contentType: "application/JSON"
                },
                parameterMap: function (options) {
                    return kendo.stringify(options); // kendo.stringify serializes to JSON string
                }

            },

            pageSize: 10,
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: {
                            editable: false, nullable: true,
                            type: "int"
                        },
                        name: {
                            type: "string",
                            validation: { required: true }
                        },
                        website: {
                            type: "string",
                          //  validation: { required: true }
                        },
                        phone: {
                            editable: true,
                            type: "string"
                        },

                        fax: {
                            type: "string",
                            validation: { required: true }
                        },
                        address :{
                            type: "string",
                          //  validation: { required: true }
                        },
                        streetOne:
                        {
                            type: "string",
                            validation: { required: true }
                        },
                        streetTwo:
                      {
                          type: "string",
                          validation: { required: true }
                      },
                        description: {

                            type: "string",
                            validation: { required: true }
                        },
                                      
                        city: {
                            type: "string",
                            validation: { required: true }
                        },
                        state: {
                            type: "int",
                            validation: { required: true }
                        },

                        zip:
                            {
                                type: "string",
                                editabl: true,
                            },
                        country: {
                            type: "string"
                        },
                        timeZone:
                            {
                               type:"string" 
                            },
                        relationStart: {
                            type: "date"
                            // validation: { required: true}
                        },
                        stateId: {
                            type: "int",
                            validation: { required: true }
                        },
                      
                        relationEnd: {
                            type: "date"
                            // validation: { required: true}
                        },


                        error: function (a) {
                            $('#addcompanyGrid').data("kendoGrid").cancelChanges();
                        },
                    }
                }
            }
        });
         
       
        var states = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/AddCompany/GetStates/",
                    type: "get",
                    contentType: "application/json",
                    dataType: "json"
                }
            }
        });


        var companyType = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/AddCompany/GetCompanyType/",
                    type: "get",
                    contentType: "application/json",
                    dataType: "json"
                }
            }
        });

        var contactType = new kendo.data.DataSource({
            transport: {
                read: {
                    url: "/AddCompany/GetContactType/",
                    type: "get",
                    contentType: "application/json",
                    dataType: "json"
                }
            }
        });

      

        return {
            addcompanyDataSource: addcompanyDataSource,
            states: states,
            companyType: companyType,
            contactType:contactType,
            gridInEditMode: gridInEditMode


        }

    }();

    $(function () {

        function dateTimeEditor(container, options) {
            $('<input data-text-field="' + options.field + '" data-value-field="' + options.field + '" data-bind="value:' + options.field + '" data-format="' + options.format + '"/>')
            .appendTo(container)
            .kendoDateTimePicker({});
        }


        $("#addcompanyGrid").kendoGrid({
            dataSource: addcompanyGrid.addcompanyDataSource,
            scrollable: true,
            height: "250px",
            toolbar: ["create"], //, "save", "cancel"],
            pageable: true,
            height: 500,
            columns: [
         // { field: "LogsDate", title: "LogsDate*", filterable: false },
        
           { field: "name", title: "Contacts", filterable: false, hidden: true },
            { field: "description", title: "Projects", hidden: true, filterable: false },
              { field: "name", title: "MSG", filterable: false, hidden: true },
            { field: "description", title: "Office", hidden: true, filterable: false },
            { field: "description", title: "History", hidden: true, filterable: false },
             { field: "name", title: "Name", filterable: false },
            { field: "legalName", title: "Registered As", filterable: false }, 
            { field: "description", title: "Description", hidden: true, filterable: false },
             { field: "phone", title: "Phone", width: "5em" },
             { field: "fax", title: "Fax", width: "5em" },
               { field: "description", title: "ClientType", width: "5em", editor: contactTypeDropDownEditor },
             { field: "clientTypeName", title: "CompanyType", width: "5em", editor: companyDropDownEditor },
           { field: "website", title: "WebSite", width: "5em" },
        { field: "streetOne", title: "Street One", hidden:true, width: "5em" },
        { field: "streetTwo", title: "Street two",hideen:true, width: "5em" },
         { field: "address", title: "Address", width: "5em" },
          { field: "city", title: "City", width: "5em" },
             { field: "country", title: "Country", editor: countryDropDownEditor, width: "5em" },
             { field: "state", title: "State", editor: stateDropDownEditor, width: "5em" },
                  { field: "zip", title: "ZipCode", width: "5em" },
                   { field: "timeZone", title: "Time Zone", width: "5em" },           
                    {
                field: "relationstart", title: "Relatio StartDate", filterable: false, format: "{0:MM/dd/yyyy HH:mm tt}",
                        editor: dateTimeEditor, width:"5em",
                        filterable: {
                            ui: "datetimepicker"
                        }
                    },
                      {
                          field: "relationend", title: "Relatio EndDate",hidden:true, filterable: false, format: "{0:MM/dd/yyyy HH:mm tt}",
                          editor: dateTimeEditor,width:"5em",
                          filterable: {
                              ui: "datetimepicker"
                          }
                      },
                 { field: "notes", title: "Notes", width: "5em" },

          {
              title: "&nbsp;",
              width: "12em",
              command: ["edit", "destroy"]
              //command: [

              //    "edit",
              //    {
              //        name: "Delete",


              //        click: function (e) {
              //            debugger;
              //            var tr = $(e.target).closest("tr"); //get the row for deletion
              //            var dataItem = this.dataItem(tr); //get the row data so it can be referred later
              //            //see what is coming in dataItem
              //            if (dataItem.QuestionAnswers.length > 0) {
              //                $("#delValidation").addClass('in')
              //            }
              //            else {

              //                deleteTopicConfirmation(e, this);
              //            }
              //            return false;
              //        }
              //    }
              //]
          }
            ],
            filterable: {
                extra: false,
                operators: {
                    string: {
                        eq: "Is equal to",
                        neq: "Is not equal to"
                    }
                }
            },

            editable: "popup",
            sortable: {
                mode: "single",
                allowUnsort: false
            },
            selectable: true,
            edit: function () {
                addcompanyGrid.gridInEditMode = true;
            },
            cancel: function () {
                addcompanyGrid.gridInEditMode = false;
            }
        });

        addcompanyGrid.addcompanyDataSource.bind("requestEnd", showSuccessMessage);


        function showSuccessMessage(e) {
            if (e.type === "update" || e.type === "create") {
                scratchPadGrid.gridInEditMode = false;
                $("#saveConfirm").addClass('in');
                e.sender.read();
            }
        }


        $(".close").click(function () {
            $(this).parent().removeClass('in');
        });


        function deleteTopicConfirmation(e, widget) {
            var grid = $('#scratchGrid').data("kendoGrid");
            deleteConfirmation(e, widget, grid);
        }

        function deleteConfirmation(e, widget, grid) {

            var currentRow = $(e.target).closest("tr"); //get the row for deletion

            var currentRowData = widget.dataItem(currentRow); //get the row data so it can be  referred later

            var kendoWindow = $("<div />").kendoWindow({

                title: "Confirmation",
                resizable: true,
                modal: true,
                width: "400px"
            });

            kendoWindow.data("kendoWindow")

                .content($("#delete-confirmation").html())

                .center().open();

            kendoWindow

                .find(".delete-confirm,.delete-cancel")
                .click(function () {
                    if ($(this).hasClass("delete-confirm")) {

                        grid.dataSource.remove(currentRowData);

                        grid.dataSource.sync();

                    }

                    $(this).closest("[data-role=window]").kendoWindow("close");

                });

        }

        function stateDropDownEditor(container, options) {

            $('<input data-text-field="state" data-value-field="state" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
                autoBind: false,
                dataValueField: "state",
                dataTextField: "state",
                dataSource: addcompanyGrid.states

            });
        }

        function countryDropDownEditor(container, options) {
            $('<input id="countryId" data-text-field="dataText" data-value-field="dataValue"  data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
                autoBind: false,
                dataSource: { data: [{ dataText: "USA", dataValue: "1" }, { dataText: "CANADA", dataValue: "2" }, { dataText: "FRANCE", dataValue: "3" }, { dataText: "ITALY", dataValue: "4" }, { dataText: "ENGLAND", dataValue: "5" }] }

            });
        }

          function timeZoneDropDownEditor(container,options)
        {
            $('<input id="timeZoneId" data-text-field="dataText" data-value-field="dataText"  data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
                autoBind: false,
                dataSource: { data: [{ dataText: "ET", dataValue: "1" }, { dataText: "CT", dataValue: "2" }, { dataText: "PT", dataValue: "3" }, { dataText: "KT", dataValue: "4" }] }

            });
          }


          function contactTypeDropDownEditor(container, options) {

              $('<input data-text-field="description" data-value-field="description" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
                  autoBind: false,
                  dataValueField: "description",
                  dataTextField: "description",
                  dataSource: addcompanyGrid.contactType

              });
          }


          function companyDropDownEditor(container, options) {

              $('<input data-text-field="clientTypeName" data-value-field="clientTypeName" data-bind="value:' + options.field + '"/>').appendTo(container).kendoDropDownList({
                  autoBind: false,
                  dataValueField: "clientTypeName",
                  dataTextField: "clientTypeName",
                  dataSource: addcompanyGrid.companyType

              });
          }


    });

     

     

     

     

     

     

     

     

  9. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2172 posts

    Posted 23 Mar Link to this post

    Hi Rekha,

    As your question is out of the original topic of this support thread, may I kindly ask you to open a new support thread or forum post for the Grid? In this way it is much easier to follow and concentrate on the particular issue which usually leads to its faster resolving.

    Regards,
    Vladimir Iliev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready