Kendo UI Grid를 팝업 및 인라인 모드에서 사용하는 방법은 무엇입니까?

Question

사용자 정의 팝업 템플리트가있는 검도 그리드를 사용하고 있습니다.

popup 및 inline 모드를 함께 사용하고 싶습니다. 새 레코드를 추가 할 때 그리드는 popup 모드를 사용하고 사용자 정의 템플릿을 열어야합니다. 편집 할 때는 inline 모드를 사용해야합니다.

는 내가 함께 popup 및 inline 모드를 사용하는 방법을 보여줍니다있는 this blog article에 this DEMO 언급,하지만 난 내 사용자 지정 템플릿 팝업을 렌더링 할 수없는 생각했다.

누구든지이 문제를 해결할 수 있습니까?

감사합니다. 여기

는 my DEMO입니다 :

HTML :

<h3>How to use Kendo-ui Grid use popup with custom template while adding and Inline while editing records</h3> 
<div id="grid"></div> 
<script id="popup-editor" type="text/x-kendo-template"> 
    <h3>Edit Person</h3> 
    <p> 
    <label>Name:<input name="name" /></label> 
    </p> 
    <p> 
    <label>Age: <input data-role="numerictextbox" name="age" /></label> 
    </p> 
</script> 

JS : 나는 당신의 편집이 새로운 DEMO을 만든

var ds = { 
    data: createRandomData(20), 
    pageSize: 4, 
    schema: { 
     model: { 
      fields: { 
       Id: { type: 'number' }, 
       FirstName: { type: 'string' }, 
       LastName: { type: 'string' }, 
       City: { type: 'string' } 
      } 
     } 
    } 
}; 

var grid = $("#grid").kendoGrid({ 
    dataSource: ds, 
    toolbar: [ { text : "Add new record", name: "create", iconClass: "k-icon k-add"} ], 
    // editable: "inline", 
    editable: { 
     mode: "popup", 
     template: kendo.template($("#popup-editor").html()) 
    }, 
    pageable: true, 
    columns: [ 
     { field: "FirstName", width: 100, title: "First Name" }, 
     { field: "LastName", width: 100, title: "Last Name" }, 
     { field: "City", width: 100 }, 
     { command: [ "edit" ]} 
    ] 
}).data("kendoGrid"); 

Answer 1

.

$(".k-grid-popup", grid.element).on("click", function() { 
    // change grid editable mode to popup and set the popup editing template 
    grid.setOptions({ 
     editable: { 
      mode: "popup", 
      template: kendo.template($("#popup-editor").html()) 
     } 
    }); 

    grid.addRow(); 
    grid.options.editable = "inline"; 
}); 

: 당신은 당신의 custom template 아래 같은과 함께 팝업 동적으로 편집 모드를 변경하는 검도 그리드의 setOptions 방법 을 사용할 수 있습니다