2013-08-05 29 views
0

我有兩個kendo UI網格(父網格,子網格)和我有複選框的父網格列,如果我點擊網格中的行中的複選框,我需要得到相應的行數據,我需要做的移動選定的行數據到另一個網格,當點擊按鈕,因爲我已經實現了像這樣的按鈕clikc ...我怎樣才能得到複選框選中項目從網格使用jquery

爲此,我做了這樣的事情。 ...

@Scripts.Render("~/bundles/jquery") 
    <script type="text/javascript"> 
    $(document).ready(function() 
    { 
     $('#btnMove').click(function() { 

      ('#GridParent').on("click", "td", function (e) { 
       var selectedTd = $(e.target).closest("td"); 
       var grdChkBox = selectedTd.parents('tr').find("td:first").next("td").find('input:checkbox'); 
       //grdChkBox.prop('checked', !grdChkBox.prop('checked')); 
       if(grdChBox.Checked) 
       { 
        // here I need to get the checkbox selected item row data 
        // i dont know it is the correct way to get the item pls correct me                 
       } 

      var sourcegrid = $('#GridParent').data('kendoGrid'); 
      var destinationgrid = $('#ChildGrid').data('kendoGrid'); 

      var checkeditem =       
      });  
</script> 
@model IEnumerable<KendoSampleMVCApp.Models.StudentDetails> 
@{ 
    ViewBag.Title = "Index"; 
} 

<h2>Index</h2> 
@using (Html.BeginForm()) 
{ 
    @(Html.Kendo().Grid<KendoSampleMVCApp.Models.StudentDetails>()  
    .Name("GridParent") 
    .Columns(columns => { 
     columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbx' type='checkbox' onclick='ToggleChkBox(this.checked);' />").ClientTemplate("<input id='checkbox' onclick='grdChkBoxClick(this); ' class='chkbxq' type='checkbox' />").Sortable(false).Filterable(false).Width(30); 
     columns.Bound(p => p.studentId).Filterable(false).Width(90); 
     columns.Bound(p => p.studentName).Filterable(false).Width(90); 
     columns.Bound(p => p.StudentBranch).Filterable(false).Width(90); 

    }) 
    .Pageable() 
    .Sortable() 
    .Scrollable() 
    .Filterable() 
    .Resizable(resize => resize.Columns(true)) 
    .Reorderable(reorder => reorder.Columns(true)) 
    .Selectable(s => s.Mode(GridSelectionMode.Multiple)) 
    .HtmlAttributes(new { style = "height:250px;" }) 
    .DataSource(dataSource => dataSource 
     .Ajax() 
     .PageSize(20) 
     .Read(read => read.Action("Orders_Read", "StudentDtls")) 
    ) 
) 

<input id="btnMove" type="button" value="Move" /> 
    // second grid ....... 

我不知道有關數據怎樣才能當複選框選中

將在此任何一個請幫助... 非常感謝.....

+0

你的'btnMove'我在哪裏看不到你的代碼。 – Jaimin

+0

我已編輯我的代碼... –

+0

任何其他方式我可以得到這個.... –

回答

0

在從控制器端新gridcheckbox檢查選擇行綁定。希望這是爲你工作

查看

@{ 
    ViewBag.Title = "GridListView"; 
} 
<h2> 
    GridListView</h2> 
<script src="~/Script/Jquery-1.8.1.min.js" type="text/javascript"></script> 
<script src="~/Script/jquery-ui-1.8.20.min.js" type="text/javascript"></script> 
<script src="@Url.Content("~/Script/kendo.all.min.js")" type="text/javascript"></script> 
<script src="~/Script/kendo.web.min.js" type="text/javascript"></script> 
<script src="~/Script/kendo.aspnetmvc.min.js" type="text/javascript"></script> 
<link href="~/Content/kendo.common.min.css" rel="stylesheet" type="text/css" /> 
<link href="~/Content/kendo.default.min.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#grid12').on("click", ".chkbxq", function (e) { 
      var selectedTd = $(this).is(':checked'); 

      var rowIndex = $(this).parent().index(); 
      var cellIndex = $(this).parent().parent().index(); 
      var grid = $("#grid12").data("kendoGrid"); 
      var datatItem = grid.dataItem(grid.tbody.find('tr:eq(' + cellIndex + ')')); 

      if (selectedTd == true) { 
       sampleItem = datatItem.SampleItems; 
       sampleCode = datatItem.SampleCode; 
       sampledescription = datatItem.SampleDescription; 

       datavalueitem = sampleItem + "--" + sampleCode + "--" + sampledescription; 

       $.ajax({ 
        url: '@Url.Action("NewGridView", "Test")', 
        type: "Post", 
        data: { sampleItem: sampleItem, sampleCode: sampleCode, sampledescription: sampledescription }, 
        dataType: 'json', 
        success: function (result) { 
         debugger; 
         $("#mygrid").val(null); 
         var customDataList = $('#grid'); 
         customDataList.empty(); 
         customDataList.append(result.Data); 
         customDataList.append(result.Data); 

          $("#divasd").kendoGrid({ 
         dataSource: result, 
         sortable: true, 
         pageable: { 
          refresh: true, 
          pageSizes: true 
         }, 
         columns: [ 
         { 
          field: "SampleDescription", 
          width: 90, 
         }, { 
          field: "SampleCode", 
          width: 90, 
         }, { 
          width: 100, 
          field: "SampleItems" 
         } 
        ] 
        }); 

        } 
       }); 
      } 


     }); 

    }); 
</script> 
@using (Html.BeginForm("GridListView", "Test", FormMethod.Post)) 
{ 

    <input id="Submit1" type="button" value="SubmitValue" /> 
    @(Html.Kendo().Grid<TwoModelInSinglePageModel.SampleModel>() 
    .Name("grid12") 
    .Columns(columns => 
    { 
     columns.Bound(p => p.studentclass).HeaderTemplate("<input id='selectall' class='chkbxq' type='checkbox' />").ClientTemplate("<input id='checkbox' class='chkbxq' type='checkbox' />"); 
     columns.Bound(p => p.SampleDescription); 
     columns.Bound(p => p.SampleCode); 
     columns.Bound(p => p.SampleItems); 
    }) 
     .AutoBind(true) // here I am disabling automatic binding at page load 
     .DataSource(dataSource => dataSource 
     .Ajax() 
      .Read(read => read.Action("Read", "Test")) 
    ) 
) 

    <br /> 

    <div id="divasd"> 
    </div> 
} 

控制器

public JsonResult NewGridView(string sampleItem, string sampleCode, string sampledescription) 
     { 

      List<SampleModel> sampleAddList = new List<SampleModel>(); 
      SampleModel sampleAdd = new SampleModel(); 
      sampleAdd.SampleCode = sampleCode; 
      sampleAdd.SampleDescription = sampledescription; 
      sampleAdd.SampleItems = sampleItem; 

      sampleAddList.Add(sampleAdd); 
      var result = sampleAddList; 


      return Json(result, JsonRequestBehavior.AllowGet); 

     } 

Controller side

型號此綁定電網

public class SampleModel 
    { 
     public bool studentclass { get; set; } 
     public string SampleDescription { get; set; } 
     public string SampleCode { get; set; } 
     public string SampleItems { get; set; } 
    } 
+0

非常感謝您的支持,我可以在這些Div''

' –

+0

'另一個問題包括另一個kendo ui網格,我想問你,什麼是WebGrid(它等於Kendo UI網格),因爲我需要爲兩個網格使用相同類型的網格(kendo UI網格) –

+0

我認爲Web網格與kendo ui網格完全不同如果這是正確的,我無法使用您的代碼..... –

相關問題