CODEWITHSUNDEEP
angularjsdevextreme
RoyBarOn
RoyBarOn

Reputation: 987

How to customise event adding with dx-scheduler/angularjs

I'm using dx-scheduler and i want to tweak the add event form. In This Example i've added 2 drop downs, priority and type, i wonder how can i change their position to be before the description, like in the picture.

enter image description here

Here is how i've added the resources :

*I wonder if their maybe an option to define to order

  resources: [{
            fieldExpr: "priorityId",
            allowMultiple: false,
            dataSource: priorityData,
            label: "Priority",
             //order:3,
        }, {
            fieldExpr: "typeId",
            allowMultiple: false,
            dataSource: typeData,
            label: "Type",
            //order:4,
        }]

And here is the markup

 <div dx-scheduler="options", dx-item-alias="data">
            <div data-options="dxTemplate:{name:'dateCellTemplate'}">

            </div>            
        </div>

Upvotes: 0

Views: 847

Answers (1)

Wasef Anabtawi
Wasef Anabtawi

Reputation: 1021

The only way to do it is to do a custom template for your form (example from documentation) , by overriding the form options items implementing onAppointmentFormOpening function, below is an example, I tried to reorder the items to match your needs.

working link

$scope.options = {
    timeZone: "America/Los_Angeles",
    height: 600,
    dataSource: [],
    showAllDayPanel: false,
    views: ["month"],
    currentView: "month",
    currentDate: new Date(2021, 4, 25),
    startDayHour: 7,
    endDayHour: 23,
    resources: [{
        fieldExpr: "priorityId",
        allowMultiple: false,
        dataSource: priorityData,
        label: "Priority"
    }, {
        fieldExpr: "typeId",
        allowMultiple: false,
        dataSource: typeData,
        label: "Type"
    }],
    onAppointmentFormOpening: function(data) {
        var form = data.form;
      
      var items = form.option("items");
      var updatedItems = [];
      var descriptionItem = {};
      for (var i in items) {
        var itemGroup = items[i];
        if(itemGroup.name === "mainGroup") {

          for (var j in itemGroup.items) {
          var innerItem = itemGroup.items[j];
          
              if(innerItem.dataField !="description") {
                updatedItems.push(innerItem);
              }
              else {
                descriptionItem = innerItem;
              }
          }
          updatedItems.push(descriptionItem);
          itemGroup.items = updatedItems;
        }
      }
      
       form.option("items",items);
       console.log(form.option("items"));
         
    }
};

Upvotes: 3

Related Questions