editable.form Object

The Kendo Form configuration for Card editing.

Example

<div id="taskBoard"></div>

<script>
  $("#taskBoard").kendoTaskBoard({
    dataOrderField: "order",
    dataSource: [
      { id: 1, order: 1, title: "Task 1", description: "Description 1", status: "backlog", category: "urgent" },
      { id: 2, order: 2, title: "Task 11", description: "Description 11", status: "backlog", category: "urgent" },
      { id: 3, order: 3, title: "Task 2", description: "Description 2", status: "doing", category: "highpriority" },
      { id: 4, order: 4, title: "Task 22", description: "Description 22", status: "doing", category: "lowpriority" },
      { id: 5, order: 5, title: "Task 3", description: "Description 3", status: "done", category: "lowpriority" }
    ],
    columns: [
      { text: "Doing", status: "doing" },
      { text: "Backlog", status: "backlog" },
      { text: "Done", status: "done" }
    ],
    resources: [{
      field: "category",
      dataSource: [
        { value: "urgent", text: "Urgent", color: "orange" },
        { value: "highpriority", text: "High Priority", color: "blue" },
        { value: "lowpriority", text: "Low Priority", color: "green" }
      ]
    }],
    editable: { 
      form: {
        buttonsTemplate: "",
        items: [{
          field: "title",
          label: "Title:"
        }, {
          field: "description",
          label: "Description:"
        }, {
          field: "category",
          label: "Category:",
          editor: "DropDownList",
          editorOptions: {
            dataTextField: "text",
            dataValueField: "value",
            dataSource: [
              { value: "urgent", text: "Urgent", color: "orange" },
              { value: "highpriority", text: "High Priority", color: "blue" },
              { value: "lowpriority", text: "Low Priority", color: "green" }
            ]
          }
        }]
      }
    },
  });
</script>