如何调整AngularJS dx-scheduler添加事件表单的字段顺序

Hey there! Let's figure out how to rearrange those priority and type dropdowns before the description field in your dx-scheduler event form.

First off, the order property you tried adding directly to your resource config isn't a valid option there—those resource settings are for defining data binding, not form layout. To control the form field order, you need to customize the scheduler's editing form directly. Here are two solid ways to do this:

1. Define Explicit Form Item Order (Full Control) #

You can list out all form fields in your desired order using the editing.form.items configuration. This gives you complete control over every field's placement:

// Your scheduler options
options = {
  // ... other scheduler settings (like dataSource, views, etc.)
  editing: {
    allowAdding: true,
    allowEditing: true,
    form: {
      items: [
        // Built-in fields first (adjust as needed)
        { dataField: "subject", label: { text: "Subject" } },
        { dataField: "startDate", label: { text: "Start Date" } },
        { dataField: "endDate", label: { text: "End Date" } },
        // Custom priority field (before description)
        { dataField: "priorityId", label: { text: "Priority" } },
        // Custom type field (before description)
        { dataField: "typeId", label: { text: "Type" } },
        // Description field last
        { 
          dataField: "description", 
          label: { text: "Description" },
          editorType: "dxTextArea" // Keep the textarea for description
        }
      ]
    }
  },
  // Your existing resources config
  resources: [
    { 
      fieldExpr: "priorityId", 
      allowMultiple: false, 
      dataSource: priorityData, 
      label: "Priority"
    }, 
    { 
      fieldExpr: "typeId", 
      allowMultiple: false, 
      dataSource: typeData, 
      label: "Type"
    }
  ]
};

By listing fields in this order, priority and type dropdowns will appear right after start/end date fields, and before the description textarea.

2. Use customizeItem to Adjust Order (Minimal Changes) #

If you don't want to redefine all form fields, use the customizeItem callback to modify the order property of specific fields. Built-in fields have lower implicit order values by default, so adjusting this lets you rearrange fields without rewriting the whole form:

options = {
  // ... other scheduler settings
  editing: {
    allowAdding: true,
    allowEditing: true,
    form: {
      customizeItem: function(item) {
        // Set priority to come right after endDate (order 3)
        if (item.dataField === "priorityId") {
          item.order = 3;
        }
        // Set type to come after priority (order 4)
        if (item.dataField === "typeId") {
          item.order = 4;
        }
        // Push description to order 5 (after type)
        if (item.dataField === "description") {
          item.order = 5;
        }
      }
    }
  },
  // Your resources config remains the same
  resources: [
    { 
      fieldExpr: "priorityId", 
      allowMultiple: false, 
      dataSource: priorityData, 
      label: "Priority"
    }, 
    { 
      fieldExpr: "typeId", 
      allowMultiple: false, 
      dataSource: typeData, 
      label: "Type"
    }
  ]
};

Lower order values mean the field appears earlier in the form. By setting priority and type to lower order values than description, you'll get the exact layout you want with minimal code changes.

Either approach will work—just pick the one that fits your workflow better!

内容的提问来源于stack exchange，提问作者RoyBarOn