Confirm Popup Dialog with Delete button not working as expected

[walker1234Participant]

Consider the following code sample:

https://stackblitz.com/edit/react-ts-cnxjes?file=index.tsx

For the time being, forget about the buttonclick method related error on line 210 for some time. In my actual code I don’t get such type of error and I’m able to call webservices inside buttonclick method.

Question #1:

I’m trying to show a confirm yes and no dialog when a user clicks on Delete button and for that I’ve included the jqxwindow related code as shown in line #290 of the code. It’s commented out right now but, the problem I’m facing is, as soon as I uncomment it, it shows up on the screen. How to prevent this? I only want it to get displayed when a user clicks on Delete button.

Question #2:

I was looking at the API documentation of jQXWindow here :

https://www.jqwidgets.com/react-components-documentation/documentation/jqxwindow/reactjs-window-api.htm?search=

And for the property okButton, it’s mentioned okButton={this.state.okButton} but there is nothing defined in the state. I’m referring to the following code (image pasted below):

Question #3:

Once the problem in Question #1 is fixed, I’m wondering how do I make if and else call inside button so that when a user clicks on okbutton I call my webservice, when they click cancel button, I don’t call anything and just close
the dialog :

I mean in my actual code, I have the following defined right now for Delete button:

 {
        text: "Delete ",
        buttonclick: (): void => {
          let rowIndex = this.assetsDataGrid.current.getselectedrowindex();
          let rowId = this.assetsDataGrid.current.getrowid(rowIndex);
          let rowData = this.assetsDataGrid.current.getrowdata(rowIndex); 

          //this.deleteWindow.current!.open();
          
          axios.put('api/deleteRowCall/'+rowData.id, {
            //required parameters here goes here  
           
          }).then((response) => {
            console.log('response', response)
            this.msgNotification.current!.open();

          }).catch((err) => console.log(err));
         
          this.dataGrid.current.deleterow(rowId);
        },
        cellsrenderer: (): string => {
          return "Delete";
        },
        columntype: "button",
        datafield: "Delete",
        width: 80
      },

[HristoParticipant]

Hello walker1234,

#1: You need to set the autoOpen property to false. You could get the right approach from the demos on our website.
Please, take a look at the “Popup Editing” demo:
https://www.jqwidgets.com/react/react-grid/index.htm#https://www.jqwidgets.com/react/react-grid/react-grid-popupediting.htm

#2: Again you could find the right approach for this in the jqxWindow demos section:
https://www.jqwidgets.com/react/react-window/index.htm#https://www.jqwidgets.com/react/react-window/react-window-events.htm
As more specifically look for the “Events” demo.
You should use the related buttons with classes and use these classes to a specific property:
cancelButton={'.cancel'}
Thank you for the feedback.

#3: It will be better to provide us with more details about your scenario.
If you want to have a different behavior depends on that the user clicks on the “Ok“ or “Cancel” button then the related logic should be set on the click event on the particular button.
I think you use the “Delete” button of the jqxGrid only to show this window for additional confirmation.
Then you need to show only the window when clicking there.
All additional logic will be bind to the buttons in the jqxWindow.
If the “Ok“ button is to confirm the deleting process of one row then this.dataGrid.current.deleterow method here.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

For #3, my scenario is simple. When a user clicks on a Delete button, I want to display them a modal dialog which I think I can display using the following code as mentioned in the Events demo that you shared:

<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>

So if a user clicks on Cancel button, I guess I would have to call this method:

private eventWindowClose(event: any): void {
        this.displayEvent(event);
    }

However, when a user clicks on Ok button,

Q1: which method will be called?

Q2: I am guessing, my webservice related code will go inside whatever function/method is going to get called when user clicks Ok button?

[HristoParticipant]

Hello walker1234,

You should add your logic in the displayEvent method.
Please, take a look at the “Events” demo again there is checking from which type is used to close the dialog.
I mean with an if state you could check for event.args.dialogResult.OK, event.args.dialogResult.Cancel, and event.args.dialogResult.None option.
Depends on these options you could use the relevant logic.
When it type option is OK then there you should add your logic to delete this row and update the server.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[walker1234Participant]

Understood what you said. However, I’m trying to figure out the following:

In my case, when a user clicks on Delete button, I am able to pass the rowData parameter to showWindowButtonClick function as shown in the code below:

{
        text: "Delete ",
        buttonclick: (): void => {
          let rowIndex = this.assetsDataGrid.current.getselectedrowindex();
          let rowData = this.assetsDataGrid.current.getrowdata(rowIndex); 

         this.showWindowButtonClick(rowData);
		  
          //this.dataGrid.current.deleterow(rowId);
        },
        cellsrenderer: (): string => {
          return "Delete";
        },
        columntype: "button",
        datafield: "Delete",
        width: 80
      },
	  
	  
	  
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(rowData): void {
    this.assetsPSModalWindow.current!.open();
    console.log("Inside showWindowButtonCLick for rowdataTesting");
    console.log(rowData);
  }
  private eventWindowClose(event: any): void {
      this.displayEvent(event);
  }
  private eventWindowMoved(event: any): void {
      this.displayEvent(event);
  }
  private eventWindowOpen(event: any): void {
      this.displayEvent(event);
  }

However, I am trying to figure out, how can I pass the rowData value from the buttonclick() function of Delete button to eventWindowOpen function?

Because, this.displayEvent(event); is defined inside the eventWindowOpen function and I need to have my parameter rowData inside displayEvent function in order to perform operations related to Ok button and Cancel button.

[HristoParticipant]

Hello walker1234,

It is not necessary to provide the rowData object as an argument as in the methods.
You could create it as a global variable.
Declare the private rowData variable at the beginning of the current class and after that use it as this.rowData property of the current class.
In that way, it will be available everywhere in that class.

Best Regards,
Hristo Hristov

jQWidgets team
https://www.jqwidgets.com

[Author]

Posts