Changing order of fields in edit dialog

[EdenGrafixParticipant]

Is there a way to change the order of the fields in the edit dialog window?

[HristoParticipant]

Hello EdenGrafix,

Could you clarify it?
I will suppose that you mention the dialog of the jqxScheduler.
You could look at this demo below which demonstrates how to edit the dialog:
https://www.jqwidgets.com/angular/angular-scheduler/angular-scheduler-editdialog.htm?material
Also, it is possible to disable the default dialog and to create one new from scratches.
For this purpose, you could use the jqxWindow with arranged there all controls that you need and as you wish.
The cellClick event will be useful here and when everything is ready just add the new appointment with the addAppointment method.
More details you could find in the API Documentation page:
https://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxscheduler/jquery-scheduler-api.htm?search=scheduler
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[EdenGrafixParticipant]

thanks will take a look at these

[EdenGrafixParticipant]

I want to change the subject field in the editDialog to a jqxInput and update the source attribute.
So I can take advantage of auto complete.

I’m using renderer2 to display none for the subject field and then trying to dynamically create a jqxInput

  editDialogCreate = (dialog, fields, editAppointment) => {
    if (fields) {
      this.renderer.setStyle(fields.subject[0], 'display', 'none');
      const newClField = this.renderer.createElement('input');
      this.renderer.setAttribute(newClField, 'id', 'newClField');
      this.renderer.appendChild(this.renderer.nextSibling(fields.subjectLabel[0]), newClField);
      const clientField =  jqwidgets.createInstance('#newClField', 'jqxInput', {
        width: 50,
        height: 25,
        source: ['foo', 'bar', 'baz']
    });
    }
  }

but I get error
ERROR TypeError: b(...)[e] is not a function

[HristoParticipant]

Hello EdenGrafix,

Did you import the jqxInputComponent (or jqxInputModule) in the app.module.ts file?
If this does not help I would mention something else.
I would like to suggest to you for this purpose to use the Dynamic Injection approach.
Please, take a look at this tutorial:
https://www.jqwidgets.com/angular-components-documentation/documentation/angular-dynamic-components/index.htm?search=

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[EdenGrafixParticipant]

I’m afraid it’s still not working

I’ve added via createInstance:

  editDialogCreate = (dialog, fields, editAppointment) => {
    if (fields) {
        this.renderer.setStyle(fields.subject[0], 'display', 'none');
        const newClField = this.renderer.createElement('input');
        this.renderer.setAttribute(newClField, 'id', 'newClField');
        this.renderer.appendChild(this.renderer.nextSibling(fields.subjectLabel[0]), newClField);
        const clientField =  jqwidgets.createInstance('#newClField', 'jqxInput', {
          placeHolder: 'Enter a Client',
          width: 200,
          height: 25,
          source: this.countries
        });
      }
  }

And by dynamic injection:

  editDialogOpen = (dialog, fields, editAppointment) => {
    if (fields) {
      const result = this.jqxDomService.loadComponent(jqxInputComponent, this.renderer.nextSibling(fields.subjectLabel[0]));
      const s = result.componentRef.instance as jqxInputComponent;
      setTimeout(() => {
      s.widgetObject.source = this.countries;
      console.log(s.widgetObject.source);
    });
  }

on both occasions I can see that the countries array is added to the source, however I get no autocomplete

[HristoParticipant]

Hello EdenGrafix,

Could you provide us with one simplified example (in stackblitz) that demonstrates your case?
Also, is there any error message?
I would like to mention that if this does not work then you could try the other approach.
You could create a custom dialog with jqxWindow.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[EdenGrafixParticipant]

There are no error messages
Please see: stackblitz
As I said, as I’m doing it now, I can see the array added to the source of the of the input, but get no auto complete.
(Check the console)
Also, there are two versions one using jqxDomService.loadComponent and one using jqwidgets.createInstance

[EdenGrafixParticipant]

Hello
Is anyone available to look at my issue?

[HristoParticipant]

Hello EdenGrafix,

I would like to suggest you try the other approach.
You could create your custom jqxWindow with all fields as you wish.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[EdenGrafixParticipant]

To build a editDialog window from scratch is far too time consuming; building the functionality for recurrence alone would take some time,
as I would have to build the recurrence pattern from scratch?? and that’s what these components are supposed to save, is time?

I have an example https://stackblitz.com/edit/angular-ivy-bdtwnn?file=src%2Fapp%2Fapp.component.ts
where I set the source of an input on ngAfterViewInit using jqwidgets.createInstance

This works fine and I get auto completion.
Once I put it in an editDialogCreate function it doesn’t work

Can someone please tell me why that is?

[MartinParticipant]

Hello EdenGrafix,

You need to set the z-index of the input popup to a larger value.
I have updated your Example.

Best Regards,
Martin Yotov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts