Kendo DropDownList가 선택 후까지 바인딩되지 않음

Question

편집 가능한 Kendo Grid가 있으며 드롭 다운 목록이 있습니다. 해당 열에서 사용해야하는 U_UserId 및 U_Name 필드가 있습니다. 이름은 분명히 표시되는 반면 ID는 바인딩에 사용되는 ID 여야합니다. 아래 예제에서 데이터 원본 URL을 제거했지만 DropDownList 데이터는 이름 및 ID 값 목록과 함께 잘 표시됩니다.

나는 잠시 동안 이것을보고 있었으므로 확실한 것이 빠져있을 수도 있습니다. this question과 동일한 문제가 있습니다. (드롭 다운을 클릭하여 해당 필드를 확장 할 때까지 드롭 다운이 해당 행에 표시되는 사용자에게 바인딩되지 않습니다.)하지만 내 모델과 입력란이 정확하다고 생각하여 이유가 확실하지 않습니다. 나는 여전히 드롭 다운을 올바르게 바인딩 할 수 없다. 여기

는 그리드 및 편집기 모두 내 JS입니다 :

$(document).ready(function() { 
    var grid = $("#grid").kendoGrid({ 
     dataSource: { 
      type: "json-ajax", 
      transport: { 
       read: { 
        url: myUrl, 
        type: "GET" 
       } 
      }, 
      batch: true, 
      pageSize: 20, 
      schema: { 
       data: "Data", 
       total: "Total", 
       model: { 
        id: "OrderId", 
        fields: { 
         O_OrderNumber: { 
          editable: false 
         },  
         O_Date: { 
          editable: false, type: "date" 
         }, 
         O_InvoiceNumber: { 
          editable: false 
         }, 
         O_Status: { 
          editable: false 
         }, 
         O_DueDate: { 
          editable: false, type: "date" 
         }, 
         U_UserId: { 
          editable: true 
         }, 
         U_Name: { 
          editable: false 
         }, 
         O_VendorId: { 
          editable: false 
         }, 
         O_TrackingNumber: { 
          editable: false 
         } 
        } 
       } 
      }, 
     }, 
     scrollable: false, 
     editable: true, 
     pageable: true, 
     columns: [ 
        { 
         field: "O_OrderNumber", 
         title: "Order #", 
         hidden: false 
        }, 
        { 
         field: "O_Date", 
         title: "Pull Date", 
         hidden: false, 
         type: "date", 
         format: "{0:MM/dd/yyyy}" 
        }, 
        { 
         field: "O_InvoiceNumber", 
         title: "Invoice #", 
         hidden: false 
        }, 
        { 
         field: "O_Status", 
         title: "Status", 
         hidden: false 
        }, 
        { 
         field: "O_DueDate", 
         title: "Due Date", 
         hidden: false, 
         type: "date", 
         format: "{0:MM/dd/yyyy}" 
        }, 
        { 
         field: "U_UserId", 
         title: "Owner", 
         hidden: false, 
         width: 130, 
         editor: ownerDropDownEditor, 
         template: "#=U_Name#" 
        }, 
        { 
         field: "O_VendorId", 
         title: "Vendor", 
         hidden: false 
        }, 
        { 
         field: "O_TrackingNumber", 
         title: "Tracking #", 
         hidden: false 
        } 
     ] 
    }).data("kendoGrid"); 
}); 

function ownerDropDownEditor(container, options) { 
    $('<input required name="' + options.field + '" />') 
     .appendTo(container) 
     .kendoDropDownList({ 
      autoBind: false, 
      dataTextField: "Name", 
      dataValueField: "UserId", 
      dataSource: { 
       type: "json", 
       transport: { 
        read: { 
         url: myOtherUrl, 
         type: "GET" 
        } 
       } 
      } 
     }); 
} 

편집 : 호기심, 나는 DataTextField 및 DataValueField 모두 UserId 일이 내 DropDownList로 변경 시도하고, 선택되었다 ID (int) 값이 Name (문자열) 대신 표시됩니다.

Answer 1

그래서 위의 편집을 조금 더 살펴보면 this Telerik post을 발견했습니다. 실제로 드롭 다운 값이 아니라 객체가 실제로 바인드하는 것처럼 소리가납니다. 값으로 바인딩 할 수 있도록 추가 할 수있는 data-value-primitive 특성이 있습니다. 에디터를 업데이트했는데 예상대로 동작하고 있습니다.

function ownerDropDownEditor(container, options) { 
    $('<input required name="' + options.field + '" data-value-primitive="true" />') 
     .appendTo(container) 
     .kendoDropDownList({ 
      autoBind: false, 
      dataTextField: "Name", 
      dataValueField: "UserId", 
      dataSource: { 
       type: "json", 
       transport: { 
        read: { 
         url: myOtherUrl, 
         type: "GET" 
        } 
       } 
      } 
     }); 
}