Resources and Grouping

[Stephan Schrade]

Hi support,

I'm using your very powerful schedule element happily.

But now I have additional feature requests.

If I leave the group property empty, I can edit all my resource groups (I have three) in the edit dialog.

But I want to group the schedule by two resource groups (out of the three) I can only edit these two resources.

Is there a way to group the schedule by two resource groups, but still have the third one editable?

Regards,

Stephan

[Satheesh Kumar Balasubramanian]

Hi Stephan,

You can achieve your requirement by adding custom additional fields to the default editor window. Please refer to the below sample for how to add custom fields to the default editor window.

https://ej2.syncfusion.com/demos/#/material/schedule/editor-custom-field.html

Regards,

Satheesh

[Stephan Schrade]

Hi support,

thank you very much for your suggestion.

Is it correct (if I'm using remote data) that there will be as many requests to the backend as values are set in the resources?

For example:

I have two resource groups. In groupA I do set two values (multiple = true) and in groupB I do set one value (from the drop downs). Then the scheduler sends two requests to the backend with groupAid=2, groupBid=1 and groupAid=5 and groupBid=1

Regards,

Stephan

[Stephan Schrade]

Hi support,

I'm using now the editor template because this is easier for me to create the dialog from scratch.

This is described here:

https://ej2.syncfusion.com/demos/#/material/schedule/editor-template.html

But here I do have the problem, that when I use MultiSelect Dropdowns (instead of the normal DropDownList as in your example), the request contains multiple objects (like described above).

I can't set the group parameter "allowGroupEdit" because I don't want to have any resource columns in the schedule table.

What can I do?

Regards,

Stephan

[Satheesh Kumar Balasubramanian]

Hi Stephan,

Before proceeding further with your requirement, we need some more details to validate further. So, kindly share the following details.

• Can you please share more details about your requirements clearly like expected images?
• Could you please share more details like images (or) video about the issues you are facing when integrating the editor template?

Regards,

Satheesh

[Stephan Schrade]

Hi support,

here is the screenshot, the request and the relevant code snippets.

When I save the editor, the expected request is sent, but there are two objects included.

I only expect one object within the request, because there is only one event to be created.

Regards,

Stephan

Attachment: scheduler_code_settings_4722ed19.zip

[Satheesh Kumar Balasubramanian]

Hi Stephan,

We suspect that you have used allowMultiple as true in both resources. If you use allowMultiple as true in the resources, you will receive two objects with two unique IDs as shown in the below image. But, your shared images have the same ID for both objects. We suspect that the above ID issue is related to the customizations done on your end. Please check the code snippets on your end. 

https://stackblitz.com/edit/6wl9g8-szl3qv?file=index.ts,datasource.ts,index.html

In Our Sample:

If you still face any issues, please share the below details to validate further at our end.

• Whether we have missed anything in the prepared sample?

• Share all the code snippets related to the schedule

• Replicate the issue in the shared sample

• Share issue replicating sample if possible

Regards,

Satheesh

[Stephan Schrade]

Hi,

many thanks for your reply.

Perhaps I have to explain my environment better:

I'm using the editor template with two self created MultipleSelect Dropdowns.

Rather than receiving 4 objects in the update request (if I select 2 options in every multiselect), 

I expected to have only one object with the values of the selected items in an array. 

Which will be the case if I would use the multi select dropdown in a "normal" form.

The settings of the resource array (allowMultiple true/false) is not relevant in this case, because I don't rely on the resources.

Regards,

Stephan

[Swathi Ravi]

Hi Stephan,

To meet your requirement, remove the resources from the Scheduler as they were not grouped into it. Instead, provide the datasource for the multiselect dropdowns directly in the popupOpen event. Assign the respective fields with values in the appointments. Now, you will have only one appointment rendered in the Schedule. By opening that appointment, you can view the values selected in the multiselect. Please refer to the shared sample below.

Sample: https://stackblitz.com/edit/schedule-editor-template-using-multiselect?file=index.ts,datasource.ts,index.html

[index.html]

<script id="EventEditorTemplate" type="text/x-template">

      <table class="custom-event-editor" width="100%" cellpadding="5">

            <tbody>

                <tr>

                    <td class="e-textlabel">Betreff</td>

                    <td colspan="4">

                        <input id="Subject" class="e-field e-input" type="text" value="" name="Subject" style="width: 100%" />

                    </td>

                </tr>

                <td class="e-textlabel">Ort</td>

                <td colspan="4">

                    <input id="Location" class="e-field e-input" type="text" value="" name="Location" style="width: 100%" />

                </td>

            </tr>

                <tr>

                <td class="e-textlabel">Absender</td>

                    <td colspan="4">

                        <input id="StartTime" class="e-field" type="text" name="StartTime" />

                    </td>

                </tr>

                <tr>

                    <td class="e-textlabel">To</td>

                    <td colspan="4">

                        <input id="EndTime" class="e-field" type="text" name="EndTime" />

                    </td>

                </tr>

                <tr>

                    <td class="e-textlabel">Event-Typ</td>

                    <td colspan="4">

                        <input type="text" id="catergory-input-id1" name="category-1" class="e-field" style="width: 100%" />

                    </td>

                </tr>

                <tr>

                    <td class="e-textlabel">Altersklassen</td>

                    <td colspan="4">

                        <input type="text" id="catergory-input-id13" name="category-13" class="e-field" style="width: 100%" />

                    </td>

                </tr>

            </tbody>

        </table>

      </script>

[index.js]

let scheduleObj: Schedule = new Schedule({

  editorTemplate: '#EventEditorTemplate',

  popupOpen: (args: PopupOpenEventArgs) => {

    debugger;

    if (args.type === 'Editor') {

      let statusElement: HTMLInputElement = args.element.querySelector('#catergory-input-id1');

      if (!statusElement.classList.contains('e-multiselect')) {

        let multiSelectObject: MultiSelect = new MultiSelect({

          placeholder: 'Select a Status',

          fields: { text: 'text', value: 'id' },

          dataSource: [

            { text: 'Ferien', id: 2, color: '#ec407a' },

            { text: 'Lehrgang', id: 4, color: '#5978bfff' },

            { text: 'Regatta', id: 5, color: '#ff4560ff' },

            { text: 'Allgemeines', id: 6, color: '#767e8fff' },

          ],

          value: <string[]>((args.data.Category instanceof Array) ? args.data.Category : [args.data.Category])

        });

        multiSelectObject.appendTo(statusElement);

      }

      statusElement.setAttribute("name", "Category");

 

      let statusElement1: HTMLInputElement = args.element.querySelector('#catergory-input-id13');

      if (!statusElement1.classList.contains('e-multiselect')) {

        let multiSelectObject: MultiSelect = new MultiSelect({

          placeholder: 'Select a Status',

          fields: { text: 'text', value: 'id' },

          dataSource: [

            { text: 'Ju 11', id: 1, color: 'red' },

            { text: 'Ju 12', id: 2, color: 'blue' },

            { text: 'Ju 13', id: 3, color: 'yellow' },

            { text: 'Ju 14', id: 4, color: 'green' },

          ],

          value: <string[]>((args.data.Altersklassen instanceof Array) ? args.data.Altersklassen : [args.data.Altersklassen])

        });

        multiSelectObject.appendTo(statusElement1);

      }

      statusElement1.setAttribute("name", "Altersklassen");

    }

  },

  eventSettings: { dataSource: eventData },

});

[datasource.ts]

export let eventData: Object[] = [

  {

    Id: 1,

    Subject: 'Surgery - Andrew',

    EventType: 'Confirmed',

    StartTime: new Date(2018, 1, 12, 9, 0),

    EndTime: new Date(2018, 1, 12, 10, 0),

    Category: 2,

    Altersklassen: [2, 3],

  },

  {

    Id: 2,

    Subject: 'Consulting - John',

    EventType: 'Confirmed',

    StartTime: new Date(2018, 1, 12, 10, 0),

    EndTime: new Date(2018, 1, 12, 11, 30),

    Category: 4,

    Altersklassen: 1,

  }

];

Output:

Regards,

Swathi Ravi 

[Stephan Schrade]

So the "trick" is, not to use the resources property.

Thanks very much.

Regards,

Stephan

[Satheesh Kumar Balasubramanian]

Hi Stephan,

You are most welcome.

Regards,

Satheesh

[Stephan Schrade]

Sorry, but I have issues with this solution.

First (this could be solved):

I could not get this running with 

 value: <string[]>((args.data.Altersklassen instanceof Array) ? args.data.Altersklassen : [args.data.Altersklassen])

because I'm using vanilla js.

But even with

 value: ((args.data.Altersklassen instanceof Array) ? args.data.Altersklassen : [args.data.Altersklassen])

and also

 value:  [args.data.Altersklassen]

it did not work. So I came up to use

value: statusElement.value.split(",").map(Number)

which works very well

Second:

The MultiSelect shows only "2 selected" if I open the editor.

I know that this comes from the element not being rendered because it was not visible at creation.

But I don't know which event to use and how I get access to the elements inside the popup.

What can I do?

Regards,

Stephan

[Satheesh Kumar Balasubramanian]

Hi Stephan,

First (this could be solved):

which works very well

We are happy to hear that you have found a solution.

Second:

The MultiSelect shows only "2 selected" if I open the editor.

We suspect that you want to show both the MultiSelect items in the UI instead of 2 selected. You can use the mode property value as Box to achieve your requirement. If we misunderstood your requirement, can you please share more details about your requirement clearly like real-time use case scenario, image, or video explaining the requirement?

https://stackblitz.com/edit/schedule-editor-template-using-multiselect-ejr6c8?file=index.ts,datasource.ts,index.html

https://ej2.syncfusion.com/documentation/api/multi-select/#mode

index.ts:

  popupOpen: (args: PopupOpenEventArgs) => {

    if (args.type === 'Editor') {

      let startElement: HTMLInputElement = args.element.querySelector(

        '#StartTime'

      ) as HTMLInputElement;

      if (!startElement.classList.contains('e-datetimepicker')) {

        new DateTimePicker(

          { value: new Date(startElement.value) || new Date() },

          startElement

        );

      }

      let endElement: HTMLInputElement = args.element.querySelector(

        '#EndTime'

      ) as HTMLInputElement;

      if (!endElement.classList.contains('e-datetimepicker')) {

        new DateTimePicker(

          { value: new Date(endElement.value) || new Date() },

          endElement

        );

      }

      let statusElement: HTMLInputElement = args.element.querySelector(

        '#catergory-input-id1'

      );

      if (!statusElement.classList.contains('e-multiselect')) {

        debugger;

        let multiSelectObject: MultiSelect = new MultiSelect({

          placeholder: 'Select a Status',

          fields: { text: 'text', value: 'id' },

          dataSource: [

            { text: 'Ferien', id: 2, color: '#ec407a' },

            { text: 'Lehrgang', id: 4, color: '#5978bfff' },

            { text: 'Regatta', id: 5, color: '#ff4560ff' },

            { text: 'Allgemeines', id: 6, color: '#767e8fff' },

          ],

          value: <string[]>(

            (args.data.Category instanceof Array

              ? args.data.Category

              : [args.data.Category])

          ),

        });

        multiSelectObject.appendTo(statusElement);

      }

      statusElement.setAttribute('name', 'Category');

      let statusElement1: HTMLInputElement = args.element.querySelector(

        '#catergory-input-id13'

      );

      if (!statusElement1.classList.contains('e-multiselect')) {

        let multiSelectObject: MultiSelect = new MultiSelect({

          placeholder: 'Select a Status',

          fields: { text: 'text', value: 'id' },

          mode: 'Box',

          dataSource: [

            { text: 'Ju 11', id: 1, color: 'red' },

            { text: 'Ju 12', id: 2, color: 'blue' },

            { text: 'Ju 13', id: 3, color: 'yellow' },

            { text: 'Ju 14', id: 4, color: 'green' },

          ],

          value: <string[]>(

            (args.data.Altersklassen instanceof Array

              ? args.data.Altersklassen

              : [args.data.Altersklassen])

          ),

        });

        multiSelectObject.appendTo(statusElement1);

      }

      statusElement1.setAttribute('name', 'Altersklassen');

    }

  },

Regards,

Satheesh

[Stephan Schrade]

Hi support,

many thanks for your answer.

mode: "Box" works, the chips are now visible.

But I want to use the feature showSelectAll: true, because I want to have the possibility to select all entries.

And with mode: "Checkbox" I get the text "2 selected" again.

Is there no way to have to possibility of selecting all entries and to see the selected items rather than "2 selected"?

Regards,

Stephan

[Satheesh Kumar Balasubramanian]

Hi Stephan,

You can render the MultiSelect component in the dialog open event to resolve the reported issue as shown in the below code snippets.

https://stackblitz.com/edit/schedule-editor-template-using-multiselect-9uh5ce?file=index.ts,datasource.ts,package.json

index.ts:

let scheduleObj: Schedule = new Schedule({

  width: '100%',

  height: '550px',

  selectedDate: new Date(2018, 1, 11),

  views: ['Day', 'Week', 'WorkWeek', 'Month'],

  showQuickInfo: false,

  editorTemplate: '#EventEditorTemplate',

  popupOpen: (args: PopupOpenEventArgs) => {

    if (args.type === 'Editor') {

      let dialogObj = (args.element as any).ej2_instances[0];

      dialogObj.open = (e) => {

        let startElement: HTMLInputElement = args.element.querySelector(

          '#StartTime'

        ) as HTMLInputElement;

        if (!startElement.classList.contains('e-datetimepicker')) {

          new DateTimePicker(

            { value: new Date(startElement.value) || new Date() },

            startElement

          );

        }

        let endElement: HTMLInputElement = args.element.querySelector(

          '#EndTime'

        ) as HTMLInputElement;

        if (!endElement.classList.contains('e-datetimepicker')) {

          new DateTimePicker(

            { value: new Date(endElement.value) || new Date() },

            endElement

          );

        }

        let statusElement: HTMLInputElement = args.element.querySelector(

          '#catergory-input-id1'

        );

        if (!statusElement.classList.contains('e-multiselect')) {

          let multiSelectObject: MultiSelect = new MultiSelect({

            placeholder: 'Select a Status',

            fields: { text: 'text', value: 'id' },

            mode: 'CheckBox',

            showSelectAll: true,

            dataSource: [

              { text: 'Ferien', id: 2, color: '#ec407a' },

              { text: 'Lehrgang', id: 4, color: '#5978bfff' },

              { text: 'Regatta', id: 5, color: '#ff4560ff' },

              { text: 'Allgemeines', id: 6, color: '#767e8fff' },

            ],

            value: <string[]>(

              (args.data.Category instanceof Array

                ? args.data.Category

                : [args.data.Category])

            ),

          });

          multiSelectObject.appendTo(statusElement);

        }

        statusElement.setAttribute('name', 'Category');

        let statusElement1: HTMLInputElement = args.element.querySelector(

          '#catergory-input-id13'

        );

        if (!statusElement1.classList.contains('e-multiselect')) {

          let multiSelectObject: MultiSelect = new MultiSelect({

            placeholder: 'Select a Status',

            fields: { text: 'text', value: 'id' },

            mode: 'CheckBox',

            showSelectAll: true,

            dataSource: [

              { text: 'Ju 11', id: 1, color: 'red' },

              { text: 'Ju 12', id: 2, color: 'blue' },

              { text: 'Ju 13', id: 3, color: 'yellow' },

              { text: 'Ju 14', id: 4, color: 'green' },

            ],

            value: <string[]>(

              (args.data.Altersklassen instanceof Array

                ? args.data.Altersklassen

                : [args.data.Altersklassen])

            ),

          });

          multiSelectObject.appendTo(statusElement1);

        }

        statusElement1.setAttribute('name', 'Altersklassen');

      };

    }

  },

  eventSettings: { dataSource: eventData },

  actionComplete: (args: ActionEventArgs) => {

    console.log(args.data);

  },

});

scheduleObj.appendTo('#Schedule');

Regards,

Satheesh

[Stephan Schrade]

Hi support,

Thanks for your reply.

I'm afraid but this is exactly how I have already implemented that.

Here is my code:

function editorPopUp(args) {

    console.log(args);

    if (args.type === 'QuickInfo') {

        if (args.data.Id === undefined) {

            args.cancel = true;

        }

    }

    if (args.type === 'Editor') {

        var statusElement = args.element.querySelector("#category_1");

if (!statusElement.classList.contains("e-dropdownlist")) {

var dropDownObject = new ej.dropdowns.DropDownList({

value: parseInt(statusElement.value, 10),

placeholder: "Select a status",

dataSource: eventResources[0].dataSource,

fields: { text: "caption", value: "id"}

});

dropDownObject.appendTo(statusElement);

statusElement.setAttribute("name", "category_1");

}

var statusElement = args.element.querySelector("#category_13");

if (!statusElement.classList.contains("e-multiselect")) {

var dropDownObject = new ej.dropdowns.MultiSelect({

value: statusElement.value.split(",").map(Number),

mode: "CheckBox",

showSelectAll: true,

placeholder: "Select a status",

dataSource: eventResources[1].dataSource,

fields: { text: "caption", value: "id"}

});

dropDownObject.appendTo(statusElement);

statusElement.setAttribute("name", "category_13");

}

        var startElement = args.element.querySelector('#StartTime');

        if (!startElement.classList.contains('e-datepicker')) {

            new ej.calendars.DatePicker({ value: new Date(startElement.value) || new Date() }, startElement);

        }

        var endElement = args.element.querySelector('#EndTime');

        if (!endElement.classList.contains('e-datepicker')) {

            new ej.calendars.DatePicker({ value: new Date(endElement.value) || new Date() }, endElement);

        }

    }

}

Regards,

Stephan

[Satheesh Kumar Balasubramanian]

Hi Stephan,

In your shared code snippets, you have not rendered MultiSelect component inside the dialog open event. You have to render your MultiSelect component inside the dialog open event as shown in the below code snippets to resolve the reported issue

index.ts:

let scheduleObj: Schedule = new Schedule({

  width: '100%',

  height: '550px',

  selectedDate: new Date(2018, 1, 11),

  popupOpen: (args: PopupOpenEventArgs) => {

    if (args.type === 'Editor') {

      let dialogObj = (args.element as any).ej2_instances[0];

      dialogObj.open = (e) => {

.......................

var statusElement = args.element.querySelector("#category_13");

if (!statusElement.classList.contains("e-multiselect")) {

var dropDownObject = new ej.dropdowns.MultiSelect({

value: statusElement.value.split(",").map(Number),

mode: "CheckBox",

showSelectAll: true,

placeholder: "Select a status",

dataSource: eventResources[1].dataSource,

fields: { text: "caption", value: "id"}

});

dropDownObject.appendTo(statusElement);

statusElement.setAttribute("name", "category_13");

................................

};

    }

  },

});

scheduleObj.appendTo('#Schedule');

Regards,

Satheesh

[Stephan Schrade]

Hi support,

many thanks for your reply.

This works perfect.

But I still have another problem.

If I create a new event, the resource settings are prefilled with the first item.

How can I override this? For my purpose it would be enough to empty the preset.

Regards,

Stephan

[Satheesh Kumar Balasubramanian]

Hi Stephan,

When we create a new event the resource settings are prefilled with empty only in our sample.

https://stackblitz.com/edit/schedule-editor-template-using-multiselect-in59de?file=index.ts,datasource.ts,package.json

If you still face any issues, please share the below details to validate further at our end.

• Whether we have missed anything in the prepared sample?

• Replicate the issue in the shared sample

• Share issue replicating sample if possible

Regards,

Satheesh

[Stephan Schrade]

Hi support,

thank you for your example.

The preset takes place as soon as I populate the resource property.

You can see this in your own demo at

https://ej2.syncfusion.com/javascript/demos/#/material/schedule/resource.html

I would like to have this preset to be empty.

Regards,

Stephan

[Venkateshwaran Saravanakumar]

Hi Stephan,

Since we have suggested not to use the resources property to achieve your requirement, it might not preset the value as we have mentioned in the previous response. It displays only when opening the appointment. However, if you need to use resources as in the demo you have shared, it displays the value since we have handled it to display like that on the source end. If you need to display it as empty, you can check whether args.data contains the Id value(since the popup opens on clicking the event and contains Id) before setting the value to the multiselect component if it is present, display the value as the resource name otherwise, make it an empty string.

Regards,

Venkatesh

[Stephan Schrade]

Hi support,

many thanks for your reply.

I thought I could manipulate the args.data values to remove the preset values.

But this did not work for me.

So I added some code where the value of the items are set.

This works now perfectly.

Thanks for your support!

Regards,

Stephan

[Satheesh Kumar Balasubramanian]

Hi Stephan,

We are happy to hear that you have found a solution.

Regards,

Satheesh