добавить запись в родительскую сетку, выбрав строку в дочерней сетке, используя kendo

Как обновить основную сетку (родительскую), выбрав строку в дочерней сетке с помощью kendo ui? У меня есть родительская сетка, которая использует локальные данные для заполнения и onlclick добавления новой записи есть сетка вкладок. Когда я выбираю строку в дочерней сетке и затем нажимаю на обновление, данные должны привязываться к родительской сетке. Я могу получить выбранные элементы, но не могу привязка к исходному источнику данных grid.Kindly предоставить предложения для того же самого.добавить запись в родительскую сетку, выбрав строку в дочерней сетке, используя kendo

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>Popup editing</title> 
     <meta charset="utf-8"> 
    <link href="css/examples-offline.css" rel="stylesheet"> 
     <link href="css/kendo.common.min.css" rel="stylesheet"> 
     <link href="css/kendo.rtl.min.css" rel="stylesheet"> 
     <link href="css/kendo.default.min.css" rel="stylesheet"> 

     <script src="../js/jquery.min.js"></script> 
     <script src="../js/kendo.web.min.js"></script> 
     <script src="../js/userMaintenance.js"></script> 
     <script src="../js/console.js"></script> 
    <script> 

     </script> 


    </head> 
    <body> 
    <center><h2 style="color:blue;">User Maintenance</h2> </center> 
    <!-- grid element --> 
    <div id="example" class="k-content"> 
    <div id="grid" ></div> 
    <script> 
    var data = createRandomData(50); 
    var main = [{Globalid:"fdsdf",UserName:"System Admin",SystemRole:"5",Title:"5"}, 
    {Globalid:"qwewqeqwe",UserName:"System Admin",SystemRole:"5",Title:"5"} 
          ]; 
          var mylocaldatasource=new kendo.data.DataSource({ 
          data:main 
          }); 


          mylocaldatasource.read(); 

    $(document).ready(function() { 
     $("#grid").kendoGrid({ 
      dataSource: { 
       data: data, 
       schema: { 
        model: { 
         fields: { 
          Globalid: { type: "string" }, 
          UserName: { type: "string" }, 
          SystemRole: { type: "string" }, 
          Title: { type: "string" } 

         } 
        } 
       } 

      }, 
      height: 430, 
      pageable: false, 
      editable: { 
       mode: "popup", 
       template: kendo.template($("#popup_editor").html()) 
      }, 

      toolbar: ["create"], 
      columns: [ 
       { 
        field: "Globalid", 
        title: "Global id" 

       }, 
       { 
        field: "UserName", 
        title: "User Name" 

       }, 
       { 
        field: "SystemRole", 
        title: "System Role" 
       }, 
       { 
        field: "Title", 
        title: "Title", 
        format: "{0:c}", 
        width: "100px" 
       }, 
       { 
        command: ["edit", "Remove"], 
        title: "&nbsp;", 
        width: "160px" 
       } 
      ], 
      edit: function(e){ 
       e.container.find(".nested-tabstrip").kendoTabStrip({}); 

       e.container.find(".tabstrip-grid").kendoGrid({ 
        dataSource: mylocaldatasource, 
       pageable: false, 
       selectable:true, 
           height: 300, 
          columns:[ 
            { 
             field: "Globalid", 
             title: "Global id" 

            }, 
            { 
             field: "UserName", 
             title: "User Name" 

            }, 
            { 
             field: "SystemRole", 
             title: "System Role" 
            }, 
            { 
             field: "Title", 
             title: "Title", 
             format: "{0:c}", 
             width: "100px" 
            } 
           ], 
           change:grid_change 


          }); 


        } 


     }); 
    function grid_change(e) { 
     var selectedRows = this.select(); 
     var selectedDataItems = []; 
     for (var i = 0; i < selectedRows.length; i++) { 
      var dataItem = this.dataItem(selectedRows[i]); 
      selectedDataItems.push(dataItem); 
     // var globalid=this.dataItem(this.select()).Globalid; 
      alert(this.dataItem(this.select()).Globalid); 

     } 
     // selectedDataItems contains all selected data items 
     } 
     var grid = $("#grid").data("kendoGrid");   
     grid.bind("change", grid_change); 
     grid.dataSource.add({ 
      id:i+1, 
      Globalid: this.dataItem(this.select()).Globalid, 
      UserName: selectedDataItems.UserName, 
      SystemRole: selectedDataItems.SystemRole, 
      Title: selectedDataItems.Title 
     }); 

    }); 

    </script> 
    </div> 



    <!-- popup editor template --> 
    <script id="popup_editor" type="text/x-kendo-template"> 
     <div class="nested-tabstrip"> 
     <ul> 
      <li> 
       Search 
      </li> 
      <li> 
       Search Results 
      </li> 
     </ul> 
     <div> 
      <div class="Search">  
     <div class="k-edit-label"> 
      <label for="Globalid">Global id:</label> 
     </div> 

      <div class="k-edit-field"> 
       <input type="text" class="k-input k-textbox" name="Globalid" data-bind="value:Globalid"> 
      </div> 

      <div class="k-edit-label"> 
       <label for="UserName">User Name: </label> 
      </div> 

      <div class="k-edit-field"> 
       <input name="UserName" 
        data-bind="value:UserName" 
        data-value-field="UserName" 
        /> 
      </div> 

       <div class="k-edit-label">System Role: </div> 
        <div class="k-edit-field"> 
        <select name="SystemRole" > 
         <option value="PAA User">PAA User</option> 
         <option value="PAA Admin">PAA Admin</option> 
         <option value="Executive">Executive</option> 
         <option value="System Admin">System Admin</option> 
        </select> 
       </div> 

     <div class="k-edit-label"> 
      <label for="Title">Title:</label> 
     </div> 
     <div class="k-edit-field"> 
      <input type="text" name="Title" data-bind="value:Title" /> 
     </div> 
    </div> 
    </div> 
    <div> 
      <div class="tabstrip-grid" id="childgrid"></div> 
     </div> 



    </div> 




    </body> 
    </html>

источник

2014-02-11 user3274335

Вы можете написать что-то вроде этого, когда вы определяете дочернюю решетку.

$("#ChildGrid tbody tr").on("click", function (e) { 
    var grid = $("#ChildGrid").data("kendoGrid"); 
    var dataItem = grid.dataItem(grid.select()) 
    window.parent.CallFromChild(dataItem); 
});

В основной сетке создать эту функцию:

function CallFromChild(dataItemFromChild){ 
    var parentGrid = $("#ParentGrid").data("kendoGrid"); 
    var parentDataItem = parentGrid.dataItem.set("ColumnName",dataItemFromChild.Value); 
}

Вы можете попробовать что-то вроде этого. Надеюсь это поможет.

источник

2014-02-11 10:37:44

спасибо за ввод, но это, похоже, не работает, возможно, потому что дочерняя сетка представляет собой сетку вкладок и фактически присутствует в всплывающем окне. – user3274335

Можете ли вы создать пример скрипки? –

Пожалуйста, найдите js скрипку: http: //jsfiddle.net/sriramk/uLQgM/2/ – user3274335

добавить запись в родительскую сетку, выбрав строку в дочерней сетке, используя kendo

ответ

Смежные вопросы