Как использовать Kendo UI Grid с всплывающим и встроенным режимами?

Question

Как использовать Kendo UI Grid с всплывающим и встроенным режимами?

1

Я использую Kendo Grid с настраиваемым всплывающим шаблоном.

Я хочу использовать popup и inline режимы. При добавлении новых записей сетка должна использовать popup режим и открывать свой настраиваемый шаблон; при редактировании он должен использовать inline режим.

Я упоминал об этом DEMO в этой статье блога, в которой показано, как использовать popup и inline режимы вместе, но я не могу отображать всплывающее окно с помощью своего настраиваемого шаблона.

Может ли кто-нибудь помочь мне в решении этой проблемы?

Благодарю.

Вот мой ДЕМО:

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:

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

Vasoya Ankit 02 нояб. 2017, в 12:19

Источник

Теги:

javascript

kendo-ui

kendo-grid

kendo-template

1 ответ

Ещё вопросы

Rahul Gupta · Accepted Answer · 2017-11-02T09-22-00.000Z

Я отредактировал и создал новый DEMO.

Вы можете использовать метод setOptions для Kendo для динамического изменения режима редактирования для всплывающего окна вместе с вашим custom template как setOptions ниже:

$(".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";
});