[HristoParticipant]

Hello alexisdcarvajaln,

This is the default behavior.
I would like to ask you how you will handle this (how you will escape from this mode)?

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello vmlaskin,

I try to create the following code snippet below based on this tutorial:
App.tsx:

import * as React from 'react';
import JqxButton from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxbuttons';
import JqxPanel from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxpanel';
import JqxWindow from 'jqwidgets-scripts/jqwidgets-react-tsx/jqxwindow';

class App extends React.PureComponent<{}, any> {
    private myWindow = React.createRef<JqxWindow>();
    private events = React.createRef<JqxPanel>();
    constructor(props: {}) {
        super(props);
        this.showWindowButtonClick = this.showWindowButtonClick.bind(this);
        this.eventWindowClose = this.eventWindowClose.bind(this);
        this.eventWindowMoved = this.eventWindowMoved.bind(this);
        this.eventWindowOpen = this.eventWindowOpen.bind(this);
    }
    public render() {
        return (
            <div>
                <JqxButton onClick={this.showWindowButtonClick} width={80}>
                    Show
                </JqxButton>
                <div style={{ marginTop: 10 }}>Events Log:</div>
                <JqxPanel ref={this.events} 
                    style={{ border: 'none' }}
                    width={450} height={250}
                />
                <JqxWindow ref={this.myWindow}
                    onClose={this.eventWindowClose}
                    onOpen={this.eventWindowOpen}
                    onMoved={this.eventWindowMoved}
                    width={270}
                    height={165}
                    maxHeight={180}
                    maxWidth={280}
                    minHeight={30}
                    minWidth={250}
                    cancelButton={'.cancel'}
                    okButton={'.ok'}
                    resizable={false}
                    isModal={true}
                    modalOpacity={0.3}
                    position={{ x: 90, y: 140 }}
                    draggable={true}
                >
                    <div>
                        <img width="14" height="14" src="./../images/help.png" alt="" />
                        Modal Window
                    </div>
                    <div>
                        <div>
                            Please click "OK", "Cancel" or the close button to close the modal window.
                            The dialog result will be displayed in the events log.
                        </div>
                        <div style={{ float: "right", marginTop: 15 }}>
                            <div>
                                <JqxButton className={'ok'} style={{ display: 'inline-block', marginRight: 10 }} width={80}>
                                    OK
                                </JqxButton>
                                <JqxButton className={'cancel'} style={{ display: 'inline-block' }} width={80}>
                                    Cancel
                                </JqxButton>
                            </div>
                        </div>
                    </div>
                </JqxWindow>
            </div>
        );
    }
    private capitaliseFirstLetter(word: string): string {
        return word.charAt(0).toUpperCase() + word.slice(1);
    };
    private displayEvent(event: any): void {
        let eventData = 'Event: ' + this.capitaliseFirstLetter(event.type);
        if (event.type === 'moved') {
            eventData += ', X: ' + event.args.x + ', Y: ' + event.args.y;
        }
        if (event.type === 'close') {
            eventData += ', Dialog result: ';
            if (event.args.dialogResult.OK) {
                eventData += 'OK';
            } else if (event.args.dialogResult.Cancel) {
                eventData += 'Cancel';
            } else {
                eventData += 'None';
            }
        }
        this.events.current!.prepend('<div style="margin-top: 5px;">' + eventData + '</div>');
    };
    // Event handling    
    private showWindowButtonClick(): void {
        this.myWindow.current!.open();
    }
    private eventWindowClose(event: any): void {
        this.displayEvent(event);
    }
    private eventWindowMoved(event: any): void {
        this.displayEvent(event);
    }
    private eventWindowOpen(event: any): void {
        this.displayEvent(event);
    }
}

export default App;

It is based on this demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello ad-lightbeam,

I tested the previously created demo and it seems to work fine with the Shift key pressed.
Please, clarify it, it will be better if you could provide us with one simple example that demonstrates your case (in the jseditor or in the jsfiddle).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello geromelouie,

I tested this example and it seems to work fine:
https://stackblitz.com/edit/github-zmlvjr?file=src/app/app.component.ts
Also, I would like to suggest you try to update with the newer version.
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello geromelouie,

Please, clarify your case.
What framework do you use?
I try it in Angular, React, Vue, and native JavaScript demos and all of them seem to work fine.
Please, provide us with more details (one simple example of your case will be better).

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello Marc,

Did you include the material theme in your project?
Because I try this tutorial and it seems to work fine (it has included this theme by default).
Please, take a look at this example:

<template>
  <JqxScheduler
    ref="myScheduler"
    :theme="'material'"
    :width="getWidth"
    :height="600"
    :source="dataAdapter"
    :date="date"
    :showLegend="true"
    :view="'weekView'"
    :appointmentDataFields="appointmentDataFields"
    :resources="resources"
    :views="views"
  />
</template>

<script>
/* eslint-disable */
import JqxScheduler from "jqwidgets-scripts/jqwidgets-vue/vue_jqxscheduler.vue";

export default {
  components: {
    JqxScheduler,
  },
  data: function() {
    return {
      getWidth: 650,
      date: new jqx.date(2016, 11, 23),
      appointmentDataFields: {
        from: "start",
        to: "end",
        id: "id",
        description: "description",
        location: "location",
        subject: "subject",
        resourceId: "calendar",
      },
      resources: {
        colorScheme: "scheme05",
        dataField: "calendar",
        source: new jqx.dataAdapter(this.source),
      },
      views: ["dayView", "weekView", "monthView"],
    };
  },
  beforeCreate: function() {
    const generateAppointments = function() {
      const appointments = new Array();
      const appointment1 = {
        id: "id1",
        description: "George brings projector for presentations.",
        location: "",
        subject: "Quarterly Project Review Meeting",
        calendar: "Room 1",
        start: new Date(2016, 10, 23, 9, 0, 0),
        end: new Date(2016, 10, 23, 16, 0, 0),
      };
      const appointment2 = {
        id: "id2",
        description: "",
        location: "",
        subject: "IT Group Mtg.",
        calendar: "Room 2",
        start: new Date(2016, 10, 24, 10, 0, 0),
        end: new Date(2016, 10, 24, 15, 0, 0),
      };
      const appointment3 = {
        id: "id3",
        description: "",
        location: "",
        subject: "Course Social Media",
        calendar: "Room 3",
        start: new Date(2016, 10, 27, 11, 0, 0),
        end: new Date(2016, 10, 27, 13, 0, 0),
      };
      const appointment4 = {
        id: "id4",
        description: "",
        location: "",
        subject: "New Projects Planning",
        calendar: "Room 2",
        start: new Date(2016, 10, 23, 16, 0, 0),
        end: new Date(2016, 10, 23, 18, 0, 0),
      };
      const appointment5 = {
        id: "id5",
        description: "",
        location: "",
        subject: "Interview with James",
        calendar: "Room 1",
        start: new Date(2016, 10, 25, 15, 0, 0),
        end: new Date(2016, 10, 25, 17, 0, 0),
      };
      const appointment6 = {
        id: "id6",
        description: "",
        location: "",
        subject: "Interview with Nancy",
        calendar: "Room 4",
        start: new Date(2016, 10, 26, 14, 0, 0),
        end: new Date(2016, 10, 26, 16, 0, 0),
      };
      appointments.push(appointment1);
      appointments.push(appointment2);
      appointments.push(appointment3);
      appointments.push(appointment4);
      appointments.push(appointment5);
      appointments.push(appointment6);
      return appointments;
    };
    this.source = {
      dataType: "array",
      dataFields: [
        { name: "id", type: "string" },
        { name: "description", type: "string" },
        { name: "location", type: "string" },
        { name: "subject", type: "string" },
        { name: "calendar", type: "string" },
        { name: "start", type: "date" },
        { name: "end", type: "date" },
      ],
      id: "id",
      localData: generateAppointments(),
    };
    this.dataAdapter = new jqx.dataAdapter(this.source);
  },
  mounted: function() {
    this.$refs.myScheduler.ensureAppointmentVisible("id1");
  }
};
</script>

<style src="./assets/styles/jqwidgets/jqx.base.css"></style>
<style src="./assets/styles/jqwidgets/jqx.material-green.css"></style>
<style src="./assets/styles/jqwidgets/jqx.material.css"></style>

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello robin,

I saw that you know our demo with the Submit option.
Unfortunately, I would like to mention that we do not have experience with Python.
But I will try to help you.
You could try to specify in the second parameter the reference to your file where you handle the query.
Please, provide us with more details, is there any error message in the console or something related to our library.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello Sandy,

Please, clarify your case.
What do you want to achieve?
If you want to change the style of the whole row which is edited then you could try this demo:
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/editrowsrendering.htm?light
I hope this will help.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello rr_187,

In this case, I would like to suggest you the option to use another library (developed by us) – Smart HTML Elements.
Which works with the Vue 3.
Please, take a look at this demo.
Also, please, let me know if you have any other questions.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello rr_187,

I would like to mention that the jQWidgets work with the Vue 2.
Please, let me know if you have any other questions.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello ksheer,

You should update with the newer version of the jQWidgets.
As I mentioned in the previous post this is a new feature that is available from v12.0.1.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello alinungurean,

You could set the width and the height properties in percentages.
Also, I would like to suggest you look at this demo.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello rr_187,

The styles folder is added in the following \my-app\src\assets\styles path.
Also, I would like to mention that I use this tutorial as a base.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello ksheer,

Please, clarify it.
I tested it and it seems to work fine.
Which version do you use?
Also, you could check the console, is there any error message?
This is a new feature you need to update to jQWidgets v12.0.1 Release.
I look forward to hearing from you.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[HristoParticipant]

Hello rr_187,

Please, try to include the styles folder in the assets folder.
You could find it in the node_modules folder in the node_modules\jqwidgets-scripts\jqwidgets path.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts