3

I am trying to accomplish the following with KendoUi Grid widget:

  1. Display a hierarchical grid - done
  2. Add a custom toolbar button for adding a detail item to a specific row - done
  3. When custom button is pressed expand the detail grid and add an item.

This all works up to the point of adding the item (i.e. clicking on the Add Item button expands the detail grid). However if I attempt to add the item in the detailExpand function then the detail grid automatically collapses. I have tried various variations of changing the order of expand\add but nothing seems to work correctly.

<body>
    <div id="example" class="k-content">
        <div id="grid"></div>
    </div>
</body>

$(document).ready(function() {
    $("#grid").kendoGrid({
        dataSource: {
            data: [
                {Name: "first", Items: []},
                {Name: "second", Items: []}
            ],
            schema: {
                model: {
                    fields: {
                        Name: { type: "string" }
                    }
                }
            },
            pageSize: 20
        },
        height: 430,
        scrollable: true,
        sortable: true,
        filterable: true,
        pageable: {
            input: true,
            numeric: false
        },
        detailInit: detailInit,
        detailExpand: detailExpand,
        columns: [

            { field: "Name", title: "Name", width: "130px" },
            { command: [
                {name: "edit"}, 
                {name: "destroy"},
                { text: "Add item", click: addItem }], 
             title: "&nbsp;", width: "172px" }
        ],
        editable: "inline",
        toolbar: ["create"]
    });
});
var addItemNow = false;
function addItem(e) {
    var row = $(e.currentTarget).closest("tr");

    addItemNow = true;  
    var grid = $("#grid").data("kendoGrid");
    grid.expandRow(row);
};

function detailInit(e) {
    $("<div id='detailGrid'/>").appendTo(e.detailCell).kendoGrid({
        dataSource: {
            data: e.data.Items,
            schema: {
                model: {
                    fields: {
                        Description: { type: "string" }
                    }
                }
            }
        },
        columns: [
            { field: "Description", title: "Description", width: "70px" },
            { command: [
                {name: "edit"}, 
                {name: "destroy"}
            ]}                               
        ]});
}

function detailExpand(e) {
    var grid = e.detailRow.find("#detailGrid").data("kendoGrid");
    if(addItemNow)
    {
        addItemNow = false;
        grid.dataSource.add({Description: ""});


    }
}

Here is a jfiddle showing this jfiddle

OnaBai
  • 40,767
  • 6
  • 96
  • 125
zashani
  • 31
  • 1
  • 2
  • 1
    I'm trying you JSFiddle with Chrome on OSX and what I see is: 1. Adding a new record works find as well as adding a new item for the new record; 2. Adding an item for an existing record does "nothing" (does not expand and does not add anything). But this doesn't seem to be the same that you describe. Is it? – OnaBai May 03 '14 at 13:09
  • @OnaBai , There was a minor bug in the JSFiddle so here is a new version [link](http://jsfiddle.net/q9nzJ/7/). The expected behavior is that each time the "Add Item" button is clicked, the detail for that row will expand and the new item will be shown in the detail. This is not hapenning. – zashani May 04 '14 at 17:27
  • @zashani so what you want is if detailgrid is expanded and i click on addnewrecord button Detailgrid is not collapse and add new record in parent grid or child grid? – Jaimin May 05 '14 at 11:22
  • well, I'm trying similar kind of stuff, my problem is, add new record button is not working for the existing row in child grid. Here is the link of my question: http://stackoverflow.com/questions/23355784/add-new-record-button-not-working-in-kendo-hierarchical-grid . Did you do it? – Badhon Jain May 06 '14 at 08:31

2 Answers2

0

Please take a look at this JSBin to see how nested grid child rows are added. The "add new row" button is kept on the child grid, not on the master row.

As long as i am aware if you are making change or do any operation on the master row, all the details will be collapsed automatically.

karthickj25
  • 1,207
  • 9
  • 16
0

This could help

//you can expand it programatically using the expandRow like this
element.on('click','tr',function(){
    $(element).data().kendoGrid.expandRow($(this));
})

Live example: http://jsfiddle.net/WKSkC/3/

basitjee
  • 19
  • 1
  • 4