Kendo ColorPalette不向控制器發佈價值

Question

我目前正試圖讓kendo ColorPalette在我的網格上進行內聯編輯。除了我在將選定的顏色值發佈到我的控制器時遇到了一些困難之外，我幾乎全都明白了。

劍道網：

$("#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來替換默認電網在線編輯器與Kendo ColorPalette：

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

當我點擊Save按鈕，唯一的值被貼到我的控制器是Name和OrgId。

如果我在我的模型的架構設置defaultValue就像我在上面的代碼做了，那麼Color默認值總是如果我選擇不同的顏色或不貼不管。

如果我沒有在架構中設置defaultValue，則發佈的Color的值爲null。

所以基本上，我只需要幫助更新我的模型，以便在發佈到控制器時它是正確的。我可以看到，我的輸入值<input name="Color" />在每次選擇新顏色時都會正確更新，但是實際上並沒有發佈它包含的值。

不知道這是否是需要的，但這裏是我的模型是什麼樣子：

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

Answer 1

我結束了在SO，幫助我解決我的問題跨越this問題絆腳石。我只是適應它，而不是使用Kendo Color Palette，它現在完美。

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