在kendoui格添加詳細條目

我試圖實現與KendoUi網格插件的以下內容：在kendoui格添加詳細條目

顯示層次格 - 做
添加自定義工具欄按鈕添加一個詳細條目給特定的行 - 完成
按下自定義按鈕後，展開細節網格並添加一個項目。

這一切都可以在添加項目（即點擊添加項目按鈕展開詳細信息網格）的情況下運行。但是，如果我嘗試在detailExpand函數中添加項目，那麼細節網格會自動摺疊。我已經嘗試了改變擴展\添加的順序的各種變化，但似乎沒有任何工作正確。

<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: ""}); 


    } 
}

下面是本jfiddle

來源

2014-05-02 zashani

我想你的jsfiddle使用Chrome在OSX和我所看到的是：1.添加一個新的記錄找到工作，以及增加新紀錄的新項目; 2.爲現有記錄添加項目不會「無」（不會擴展，也不會添加任何內容）。但這似乎與您描述的不一樣。是嗎？ – OnaBai

@OnaBai，JSFiddle有一個小錯誤，所以這裏是一個新版本[link]（http://jsfiddle.net/q9nzJ/7/）。預期的行爲是，每次單擊「添加項目」按鈕時，該行的詳細信息將展開，新項目將顯示在細節中。這不是發愁。 – zashani

@zashani所以你想要的是如果detailgrid展開，我點擊addnewrecord按鈕Detailgrid不崩潰，並添加新的記錄在父網格或子網格？ – Jaimin

請看一看這個JSBin看到網格孩子怎麼嵌套行添加一個jfiddle。「添加新行」按鈕保留在子網格上，而不是主要行上。

只要我知道你是否正在對主控行進行更改或做任何操作，所有的細節都會自動摺疊。

來源

2014-08-05 09:51:45 karthick

這將有助於

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

活生生的例子： http://jsfiddle.net/WKSkC/3/

來源

2014-09-11 14:35:09 basitjee

在kendoui格添加詳細條目

回答

相關問題