Rebind DropDownList in KendoGrid, a seconda del valore selezionato in altri DropDownList sulla stessa riga

Questo è un problema comune, ma non so come capirlo con i widget KendoUI e Javascript. Ho un KendoGrid la cui origine dati proviene da una chiamata AJAX a un servizio Web. I dati sono associati alle colonne. Due colonne (origine e destinazione) sono due elenchi a discesa:Rebind DropDownList in KendoGrid, a seconda del valore selezionato in altri DropDownList sulla stessa riga

Ogni colonna è definito come

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

E il SourceDropDownEditor è la seguente:

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

Lo stesso è fatto per l'elenco a discesa di destinazione.

Ora, ciò che voglio è, quando l'utente fa clic sul pulsante Modifica (la griglia è definita con In-Line Edit) e sceglie un determinato valore sorgente dal DDL di origine; l'elenco nel DDL di destinazione deve cambiare in base a questo valore.

Ho scritto una funzione per recuperare l'elenco corretto, a seconda del valore scelto nel DDL di origine. Ma ciò che NON POSSO fare, è quello di ottenere la DLL Destion di quella riga e impostare l'origine dati di conseguenza.

Maggiori dettagli come richiesto:

griglia è costruito in modo dinamico:

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

Qui dojo.telerik.com/uXeKa. Essa riflette fondamentalmente il modello di rete e campi colonna

soluzione finale

soluzione finale è qui: dojo.telerik.com/uXeKa/2. Non è necessario aggiungere nulla nella funzione Modifica della griglia. È sufficiente implementare la funzione onChange del DDL di origine e impostare l'origine dati della destinazione.

fonte

2016-01-28 alessalessio

Potrebbe fornire qualche altro codice? Ho richiesto di identificare le seguenti cose: 1. Il menu a discesa è visualizzato in modalità normale o in modalità di modifica. 2. come si collega l'origine dati alla lista a discesa. –

1. Il menu a discesa viene visualizzato in modalità modifica. 2. L'origine dati "Sorgenti" è una matrice statica ed è associata al "SourceDDL" come descritto nel secondo codice di segmento. Mentre il primo codice del segmento fa parte del metodo "generateColumns" descritto nella definizione Grid. – alessalessio

Inizio davvero a credere, che in realtà non è possibile raggiungere. Perché l'origine dati è effettivamente associata alla "colonna", non all'elemento in ogni singola riga. – alessalessio

Si prega di provare con lo snippet di codice seguente.

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

Per riferimento: -

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: (Basato sul vostro editor Ho aggiornato dichiarazione selettore jQuery)

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

Fatemi sapere se alcuna preoccupazione.

fonte

2016-02-06 19:31:39

Ciao Jayesh, grazie per la tua risposta. Sfortunatamente, $ (arg.container) .find ("select [name^= '']") restituisce null. Se vedi il primo codice, i miei DDL non sono campi "Seleziona". Guarda il codice SourceDropDownEditor per favore. – alessalessio

Sarebbe bello poter fornire jsfilldle/kendo dogo, dove posso riprodurre questo problema. –

Ciao Jayesh, ecco il Kendo Dojo: http://dojo.telerik.com/uXeKa Riflette il modello e i campi della griglia. Spero che aiuti – alessalessio

È possibile eseguire due editor (DropDownLists) per le colonne di origine e di destinazione. Per l'editor di destinazione è possibile utilizzare la proprietà cascadeFrom, di cui detiene l'ID dropdown di origine. La destinazione viene filtrata in base alle opzioni selezionate nelle DropDownList di origine. Questa è la funzionalità incorporata di Kendo ed è possibile leggere più moduli here.

fonte

2016-02-06 11:03:07

Rebind DropDownList in KendoGrid, a seconda del valore selezionato in altri DropDownList sulla stessa riga

risposta

Problemi correlati