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

자바 스크립트는 Kendo ColorPalette와 기본 그리드 인라인 편집기 대체 : 나는 Save 버튼을 클릭하면

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

유일한 값에 게시됩니다 내 컨트롤러는 Name 및 OrgId입니다. 나는 다른 색상을 선택하거나 선택하지 않을 경우 나는 위의 코드에서처럼

내가 내 모델의 스키마에 defaultValue을 설정하면 다음 Color의 기본 값은 상관없이 게시 항상있다.

내가 스키마에 defaultValue을 설정하지 않은 경우는, 다음 Color을 위해 게시 된 값은 null입니다.

기본적으로 제어기에 게시 할 때 내 모델을 업데이트하는 데 도움이 필요합니다. 내 입력 <input name="Color" />의 값이 새 색상을 선택할 때마다 올바르게 업데이트되지만 실제로는 포함 된 값을 게시하지 않는 것을 볼 수 있습니다. 나는 내 문제를 해결 도움이 SO에 this 질문을 통해 걸림돌 결국

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

Answer 1

:

확실하지 않음이 여기에 필요하지만 경우처럼 내 모델이 모습입니다. 방금 대신 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 
     }); 
}