Kendo ColorPalette nicht Wert auf Controller

Question

Ich versuche derzeit, eine kendo ColorPalette mit Inline-Bearbeitung auf meinem Gitter zu arbeiten. Ich habe es ziemlich gut verstanden, außer dass ich einige Schwierigkeiten habe, den ausgewählten Farbwert an meinen Controller zu senden.

Kendo Grid:

$("#ContactTagsGrid").kendoGrid({ 
    dataSource: new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "/Admin/Tag/GetTagsByOrg", 
       dataType: "json", 
       data: { 
        orgId: OrganizationId 
       } 
      }, 
      create: { 
       url: "/Admin/Tag/Create", 
       dataType: "json", 
       type: "POST", 
       data: function() { 
        return kendo.antiForgeryTokens(); 
       } 
      } 
     }, 
     schema: { 
      model: { 
       id: "Id", 
       fields: { 
        Id: { type: "number", nullable: true }, 
        OrgId: { type: "number" }, 
        Name: { type: "string" }, 
        Color: { type: "string", defaultValue: "#f20000", validation: { required: true } } 
       } 
      } 
     }, 
     pageSize: 20 
    }), 
    pageable: true, 
    sortable: true, 
    filterable: { 
     extra: false 
    }, 
    scrollable: false, 
    columns: [ 
      { 
       field: "Id", 
       hidden: true 
      }, 
      { 
       field: "Name" 
      }, 
      { 
       field: "Color", 
       editor: colorEditor, 
       template: function(dataItem) { 
        return "<div style='width: 25px; background-color: " + dataItem.Color + ";'>&nbsp;</div>"; 
       }, 
       width: "500px" 
      }, 
      { 
       command: [ 
        { 
         name: "Edit", 
         template: 
          "<a href='\\#' class='small btn btn-link k-grid-edit edit-text'><span class='fa fa-pencil'></span>Edit</a>", 
         text: "", 
         className: "fa fa-pencil" 
        }, 
        { 
         template: 
          "<a href='\\#' class='small btn btn-link danger delete-text k-grid-delete'><span class='fa fa-trash-o'></span>Delete</a>", 
         name: "Delete", 
         text: " Delete", 
         className: "fa fa-trash-o" 
        } 
       ], 
       width: "170px" 
      } 
     ], 
     editable: { 
      mode: "inline", 
      destroy: false // don't use the kendo destroy method since we're using bootbox 
     }, 
     // Custom save/cancel buttons 
     edit: function (e) { 
      var command = e.container.find("td:last"); 
      command.html("<a href='\\#' class='small btn btn-primary k-grid-update'>Save</a><a href='\\#' class='small btn btn-default k-grid-cancel' style='margin-left: 5px'>Cancel</a"); 
     } 
}); 

Javascript den Standardraster Inline-Editor mit den Kendo ColorPalette ersetzen:

function colorEditor(container, options) { 
    // create an input element 
    var div = $("<div></div>"); 
    var input = $("<input />"); 

    input.attr("name", "Color"); 
    // append it to the container 
    div.appendTo(container); 
    input.appendTo(div); 

    // initialize a Kendo UI ColorPicker 
    div.kendoColorPalette({ 
     palette: [ 
      "#f20000", "#c60000", "#337a00" 
     ], 
     columns: 3, 
     change: function() { 
      var color = this.value(); 
      $("input[name=Color]").val(color); 
     } 
    }); 
} 

Wenn ich auf der Save Schaltfläche klicken, die einzigen Werte, die gebucht werden meine Controller sind die Name und die OrgId.

Wenn ich ein defaultValue im Schema meines Modells wie ich in den Code oben gesetzt habe, dann wird der Standardwert für Color immer gebucht, egal ob ich eine andere Farbe auswähle oder nicht.

Wenn ich im Schema kein defaultValue festlegen, ist der Wert, der für Color gebucht wird, null.

Also im Grunde brauche ich nur Hilfe bei der Aktualisierung meines Modells, so dass es korrekt ist, wenn Sie auf dem Controller veröffentlichen. Ich kann sehen, dass der Wert meiner Eingabe <input name="Color" /> korrekt aktualisiert wird, jedes Mal, wenn ich eine neue Farbe auswähle, aber es wird nicht tatsächlich den Wert, den es enthält, posten.

nicht sicher, ob dies erforderlich ist, aber hier ist das, was mein Modell wie folgt aussieht:

public class TagCreateViewModel 
{ 
    public int OrgId { get; set; } 
    public string Name { get; set; } 
    public string Color { get; set; } 
} 

Answer 1

ich über this Frage auf SO schließlich stolperte, die ich mein Problem lösen half. Ich habe es nur angepasst, um die Kendo Color Palette stattdessen zu verwenden, und es funktioniert jetzt perfekt.

function colorEditor(container, options) { 
    $("<div type='color' data-bind='value:" + options.field + "'/>") 
     .appendTo(container) 
     .kendoColorPalette({ 
      palette: [ 
       "#f20000", "#c60000", "#337a00", "#54b010", "#9adc0d", "#28cb9b", "#0eac98", "#0ed6e8", "#14a7d1", 
       "#bc0aef", "#560ea7", "#2713bc", "#1457d1" 
      ], 
      columns: 7 
     }); 
}