Hierarchy grid bind on button click

[Abdul]

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.

[Vladimir Iliev]

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:

• http://dojo.telerik.com/iSOKU/3

Regards,
Vladimir Iliev
Telerik

 

 

[Abdul]

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.

[Vladimir Iliev]

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

 

 

[DHHS]

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>

[Vladimir Iliev]

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

 

 

[Rekha]

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

          });
      }


});

 

 

 

 

 

 

 

 

[Vladimir Iliev]

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