Rebind DropDownList trong KendoGrid, tùy thuộc vào giá trị được chọn trong DropDownList khác trên cùng một hàng

Đây là một vấn đề phổ biến, nhưng tôi không biết làm thế nào để con số nó ra với KendoUI widget và Javascript. Tôi có một KendoGrid có nguồn dữ liệu đến từ một cuộc gọi AJAX đến một Dịch vụ Web. Dữ liệu bị ràng buộc vào các cột. Hai cột (Nguồn và Đích) là hai danh sách thả xuống:Rebind DropDownList trong KendoGrid, tùy thuộc vào giá trị được chọn trong DropDownList khác trên cùng một hàng

Mỗi cột được định nghĩa là

if (stringStartsWith(colTitle, 'Source')) { 
        columns.push({ 
         field: dataItem.replace(/\s+/g, ''), 
         title: colTitle, 
         width: 150, 
         locked: false, 
         editor: sourceDropDownEditor, 
         //template: "#=SourcetankIdentifier#", 
         attributes: { style: "text-align: left" }, 
         type: "text" 
        }); 
       }

Và SourceDropDownEditor là như sau:

function sourceDropDownEditor(container, options) { 
    $('<input id="sourcesDropDownList" required data-text-field="Source" data-value-field="Source" data-bind="value:' + options.field + '"/>') 
     .appendTo(container) 
     .kendoDropDownList({ 
      dataTextField: "Source", 
      dataValueField: "Source", 
      dataSource: Sources   
     }); 
}

Cùng được thực hiện cho Danh sách thả xuống đích.

Bây giờ, điều tôi muốn là khi người dùng nhấp vào nút Chỉnh sửa (Lưới được xác định bằng Chỉnh sửa nội dòng) và chọn một giá trị nguồn nhất định từ DDL nguồn; danh sách vào DDL đích phải thay đổi theo giá trị này.

Tôi đã viết một hàm để truy xuất danh sách chính xác, tùy thuộc vào giá trị được chọn trong DDL nguồn. Nhưng những gì tôi KHÔNG THỂ làm, là để có được DLL Destion của hàng đó và để thiết lập Datasource cho phù hợp.

Xem chi tiết theo yêu cầu:

Lưới được xây dựng tự động:

function generateGrid(JSONData) { 

    var model = generateModel(JSONData, selectedMenu); 
    var columns = generateColumns(model); 
    var data = generateData(gridData, columns); 

    var grid = $("#mainGrid").kendoGrid({    
     edit: function (e) {    
      .. 
     }, 
     dataSource: { 
      data: data, 
      schema: { 
       model: model 
      }, 
      sort: { 
       field: defaultSort.replace(/\s+/g, ''), 
       dir: "desc"    
      } 
     }, 
     toolbar: [ 
      .. 
     ], 
     columns: columns,   
     editable: "inline",  
     sortable: true,     
     resizable: true, 
     filterable: true, 
     selectable: "multiple", 
     cancel: function(e) { 
      $('#mainGrid').data('kendoGrid').dataSource.cancelChanges(); 
     },

Kendo Dojo

đây dojo.telerik.com/uXeKa. Nó phản ánh về cơ bản mẫu lưới và cột các lĩnh vực

GIẢI PHÁP CUỐI CÙNG

giải pháp cuối cùng là ở đây: dojo.telerik.com/uXeKa/2. Không cần thêm bất kỳ thứ gì vào chức năng Chỉnh sửa của Lưới. Chỉ cần triển khai chức năng onChange của DDL nguồn và để đặt nguồn dữ liệu của đích.

Nguồn

2016-01-28 alessalessio

Bạn có thể vui lòng cung cấp thêm một số mã không? Tôi yêu cầu nó để xác định những điều dưới đây, 1. Dropdown được hiển thị trên chế độ bình thường hoặc trên chế độ chỉnh sửa. 2. làm thế nào bạn ràng buộc nguồn dữ liệu để danh sách thả xuống. –

1. Dropdown được hiển thị trên chế độ chỉnh sửa. 2. Nguồn dữ liệu "Nguồn" là một mảng tĩnh và nó bị ràng buộc vào "SourceDDL" như được mô tả trong mã phân đoạn thứ hai. Trong khi mã phân đoạn đầu tiên là một phần của phương thức "generateColumns" được mô tả trong định nghĩa Lưới. – alessalessio

Tôi thực sự bắt đầu tin rằng nó thực sự không thể đạt được. Bởi vì Datasource thực sự bị ràng buộc với "Cột", không phải thành phần tử trong mỗi hàng đơn lẻ. – alessalessio

Vui lòng thử với đoạn mã bên dưới.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Jayesh Goyani</title> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.common.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.rtl.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.default.min.css"> 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.1111/styles/kendo.mobile.all.min.css"> 

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/angular.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/jszip.min.js"></script> 
    <script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.all.min.js"></script> 
</head> 
<body> 

    <div id="grid"> 
    </div> 
    <script> 



     var sources = []; 
     var destinations = []; 

     var products = [{ 
      ProductID: 1, 
      ProductName: "Chai", 
      SourceID: 1, 
      DestinationID: 1, 

     }, { 
      ProductID: 2, 
      ProductName: "Chang", 
      SourceID: 2, 
      DestinationID: 1, 

     }, { 
      ProductID: 3, 
      ProductName: "Aniseed Syrup", 
      SourceID: 3, 
      DestinationID: 2, 

     }, { 
      ProductID: 4, 
      ProductName: "Chef Anton's Cajun Seasoning", 
      SourceID: 4, 
      DestinationID: 2, 
     }, { 
      ProductID: 5, 
      ProductName: "Chef Anton's Gumbo Mix", 
      SourceID: 4, 
      DestinationID: 2, 
     }]; 

     $(document).ready(function() { 
      $("#grid").kendoGrid({ 
       dataSource: { 
        data: products, 
        schema: { 
         model: { 
          id: "ProductID", 
          fields: { 
           ProductName: { type: "string" } 
          } 
         } 
        }, 
        pageSize: 10 
       }, 
       sortable: true, 
       edit: onGridEdit, 
       filterable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       columns: [ 
        { field: "ProductName" }, 
        { field: "SourceID", title: "SourceID", values: sources }, 
        { field: "DestinationID", title: "DestinationID", values: destinations }, 
        { command: ["edit", "destroy"], title: "&nbsp;" } 

       ], 
       editable: "inline" 
      }); 
     }); 

     var destinationID = 0; 

     function onGridEdit(arg) { 
      destinationID = arg.model.DestinationID; 
      $.ajax({ 
       url: "http://localhost:3470/Home/GetSource", 
       type: 'GET', 
       success: function (data) { 
        var sourceDDL = $(arg.container).find("select[name^='SourceID']").data("kendoDropDownList"); 
        sourceDDL.bind("change", onChange); 
        sourceDDL.setDataSource(data); 
        sourceDDL.value(arg.model.SourceID); 
        onChange(); 
       } 
      }); 

     } 

     function onChange(arg) { 
      var sourceid = $("select[name^='SourceID']").data("kendoDropDownList").value(); 



      $.ajax({ 
       url: "http://localhost:3470/Home/GetDestination", 
       type: 'GET', 
       data: { SourceID: sourceid }, 
       success: function (data) { 
        var destinationDDL = $("select[name^='DestinationID']").data("kendoDropDownList"); 
        destinationDDL.setDataSource(data); 

        if (arg) { 
         // Please uncomment below code if you want to reset ddl value on sourceDDl value change 
         // destinationDDL.select(-1); 
        } 
        else { 
         destinationDDL.value(destinationID); 
         destinationID = 0; 
        } 
       } 
      }); 
     } 
    </script> 
</body> 
</html>

Để tham khảo: -

public class Source 
{ 
    public int value { get; set; } 
    public string text { get; set; } 
} 

public class Destination 
{ 
    public int value { get; set; } 
    public string text { get; set; } 
} 

..... 
..... 
public ActionResult GetSource() 
{ 
    List<Source> list = new List<Source>(); 

    list.Add(new Source() { value = 1, text = "cat1" }); 
    list.Add(new Source() { value = 2, text = "cat2" }); 
    list.Add(new Source() { value = 3, text = "cat3" }); 
    list.Add(new Source() { value = 4, text = "cat4" }); 
    list.Add(new Source() { value = 5, text = "cat5" }); 

    return Json(list, JsonRequestBehavior.AllowGet); 
} 

public ActionResult GetDestination(int? SourceID) 
{ 
    List<Destination> list = new List<Destination>(); 

    list.Add(new Destination() { value = 1, text = "des1_" + Convert.ToString(SourceID) }); 
    list.Add(new Destination() { value = 2, text = "des2_" }); 
    list.Add(new Destination() { value = 3, text = "des3_" }); 
    list.Add(new Destination() { value = 4, text = "des4_" }); 
    list.Add(new Destination() { value = 5, text = "des5_" }); 

    return Json(list, JsonRequestBehavior.AllowGet); 
}

Cập nhật 1: (Dựa trên soạn thảo của bạn tôi đã cập nhật tuyên bố jquery selector)

function onGridEdit(arg) { 
    var sourceDDL = $(arg.container).find("input[id^='sourcesDropDownList']").data("kendoDropDownList"); 
} 
function onChange(arg) { 
    var sourceid = $("input[id^='sourcesDropDownList']").data("kendoDropDownList").value(); 
    var destinationDDL = $("input[id^='destinationsDropDownList']").data("kendoDropDownList"); 
}

Hãy cho tôi biết nếu có quan tâm.

Nguồn

2016-02-06 19:31:39

Xin chào Jayesh, cảm ơn câu trả lời của bạn. Thật không may, $ (arg.container) .find ("chọn [name^= '']") trả về null. Nếu bạn thấy mã đầu tiên, DDL của tôi không phải là trường "Chọn". Hãy xem mã SourceDropDownEditor. – alessalessio

Sẽ rất tuyệt nếu bạn có thể cung cấp jsfilldle/kendo dogo, nơi tôi có thể tái tạo vấn đề này. –

Xin chào Jayesh, đây là Kendo Dojo: http://dojo.telerik.com/uXeKa Nó phản ánh Grid Model và Fields. Hy vọng nó sẽ giúp – alessalessio

Bạn có thể thực hiện hai trình soạn thảo (DropDownLists) cho cột nguồn và đích. Đối với trình chỉnh sửa đích, bạn có thể sử dụng thuộc tính cascadeFrom, trong đó giữ id thả xuống nguồn. Điểm đến được lọc theo các tùy chọn đã chọn trong DropDownLists nguồn. Đây là giao diện người dùng Kendo được tích hợp sẵn chức năng và bạn có thể đọc thêm biểu mẫu here.

Nguồn

2016-02-06 11:03:07

Rebind DropDownList trong KendoGrid, tùy thuộc vào giá trị được chọn trong DropDownList khác trên cùng một hàng

Trả lời

Các vấn đề liên quan