Rebind DropDownList in KendoGrid, abhängig von Wert in anderen DropDownList in der gleichen Zeile ausgewählt

Dies ist ein häufiges Problem, aber ich weiß nicht, wie man es mit KendoUI Widgets und Javascript herausfinden. Ich habe ein KendoGrid, dessen Datenquelle von einem AJAX-Aufruf an einen Webservice kommt. Daten sind an die Spalten gebunden. Zwei Spalten (Quelle und Ziel) sind zwei Dropdown-Listen:Rebind DropDownList in KendoGrid, abhängig von Wert in anderen DropDownList in der gleichen Zeile ausgewählt

Jede Spalte ist definiert als

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

Und der SourceDropDownEditor ist wie folgt:

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

Die gleiche ist für die Destination Dropdown-Liste getan.

Nun, was ich will ist, wenn der Benutzer auf die Schaltfläche Bearbeiten klickt (Raster ist mit In-Line-Bearbeitung definiert) und wählen Sie einen bestimmten Quellwert aus der Quelle DDL; Die Liste in der Ziel-DDL muss sich entsprechend diesem Wert ändern.

Ich schrieb eine Funktion zum Abrufen der richtigen Liste, abhängig von dem Wert in der Quelle DDL gewählt. Aber was ich NICHT tun kann, ist die DESTION DLL dieser Zeile zu bekommen und die Datenquelle entsprechend einzustellen.

Details wie gewünscht:

Grid dynamisch erstellt wird:

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

Hier dojo.telerik.com/uXeKa. Es spiegelt im Grunde die Rastervorlage und die Spaltenfelder

ENDLÖSUNG

Endlösung hier: dojo.telerik.com/uXeKa/2. Muss nichts in die Edit Funktion des Grid hinzufügen. Sie müssen nur onChange Funktion der Source-DDL implementieren und die Datenquelle des Ziels festlegen.

Quelle

2016-01-28 alessalessio

Könnten Sie bitte etwas mehr Code zur Verfügung stellen? Ich habe es benötigt, um die folgenden Dinge zu identifizieren, 1. Dropdown wird im normalen Modus oder im Bearbeitungsmodus angezeigt. 2. Wie binden Sie die Datenquelle an die Dropdown-Liste? –

1. Dropdown wird im Bearbeitungsmodus angezeigt. 2. Die Datenquelle "Sources" ist ein statisches Array und wird wie im zweiten Segmentcode beschrieben in das "SourceDDL" eingebunden. Der erste Segmentcode ist Teil der Methode "generateColumns", die in der Grid-Definition beschrieben wird. – alessalessio

Ich beginne wirklich zu glauben, dass es tatsächlich nicht möglich ist, zu erreichen. Da die Datenquelle tatsächlich an die "Spalte" gebunden ist, nicht an das Element in jeder einzelnen Zeile. – alessalessio

Bitte versuchen Sie es mit dem folgenden Codeausschnitt.

<!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>

Zum Vergleich: -

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

Update 1: (Basierend auf Ihren Editor I jQuery-Selektor-Anweisung aktualisiert haben)

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

mich, wenn irgendein Interesse wissen lassen.

Quelle

2016-02-06 19:31:39

Hallo Jayesh, danke für deine Antwort. Leider gibt $ (arg.container) .find ("select [name^= '']") null zurück. Wenn Sie den ersten Code sehen, sind meine DDL nicht "Select" -Felder. Schauen Sie sich bitte den SourceDropDownEditor-Code an. – alessalessio

Es wäre schön, wenn Sie jsfilldle/kendo dogo zur Verfügung stellen könnten, wo ich dieses Problem reproduzieren kann. –

Hallo Jayesh, hier ist das Kendo Dojo: http://dojo.telerik.com/uXeKa Es spiegelt das Grid-Modell und Felder. Hoffe, es hilft – alessalessio

Sie könnten zwei Editoren (DropDownLists) für Quell- und Zielspalten ausführen. Für den Zieleditor können Sie die Eigenschaft cascadeFrom verwenden, von der die Quell-Dropdown-ID enthalten ist. Das Ziel wird entsprechend den ausgewählten Optionen in den DropDownLists der Quelle gefiltert. Dies ist Kendo UI eingebaute Funktionalität und Sie können mehr Formular here lesen.

Quelle

2016-02-06 11:03:07

Rebind DropDownList in KendoGrid, abhängig von Wert in anderen DropDownList in der gleichen Zeile ausgewählt

Antwort

Verwandte Themen