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

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

[walker1234Participant]

Can you tell me where can I define beforeLoadComplete call back? Let’s say if you have to define it in this example, could you tell me via an example, where it would go?

https://stackblitz.com/edit/react-ts-y7i3rr

[walker1234Participant]

Coming back to original question of this thread.

I separated first tab related code into firstTab.tsx as shown in the editor below.I haven’t started working on secondTab.tsx yet.

https://stackblitz.com/edit/react-ts-brhqoc

Since I’ve already moved private initGrid = () => { inside a separate file firstTab.tsx, in index.tsx where should I put {firstTab.tsx} to make sure both tabs in index.tsx works fine? I mean, even if I comment out private initGrid = () => { function from index.tsx both tabs should work fine.

Please take a look and let me know if there’s anything missing. Feel free to modify. Thanks

[walker1234Participant]

Yes, the issue is happening once I click the button.

For Code formatting:

I didn’t understand what did you mean by replacing < with <. Both are same ? Maybe jQWidgets team can work on it so that it’s easy to format code in one go like other websites like Stackoverflow, Sitepoint etc.

[walker1234Participant]

I’m little bit confused with what you are saying. Could you take a look at this post of mine and let me know why specifically I’m getting an error related to jqxWindow ?

https://www.jqwidgets.com/community/topic/jqxwindwo-js-throwing-an-error-h-undefined/

[walker1234Participant]

Before that how can I even generate tabs since switch case statement is involved. I want make tab generation database driven approach.Could you give an example of it?

[walker1234Participant]

I would like to mention that nesting of the jqxWindow in the jqxTabs is incorrect it should be separated or part of the div tag of the content.

Thanks. I have few questions regarding not nesting of the jqxWindow in the jqxTabs. Please take a look at the code editor below:

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

Q1.I’ve made the changes like you said and it throws an error.

Q2. Secondly, the error would disappear if I enclose tabs and window like this:

<div> // parent container
    <JqxTabs/>
    <JqxWindow />
</div>

This was done and I ran into some issues related to jQXWindow as I explained in my other thread here. Please take a look at the thread below:

https://www.jqwidgets.com/community/topic/jqxwindwo-js-throwing-an-error-h-undefined/

[walker1234Participant]

That didn’t help. I’m still seeing yesterday’s date. Can you tell me how to fix this issue?

[walker1234Participant]

You mean, I should only make the change in the source as you suggested and keep the following part as it is?

const columns: IGridProps["columns"] = [
     

      {
        cellsformat: "d",
        datafield: "createdDate",
        text: "Created Date",
        width: 150
      },

[walker1234Participant]

Hello Histro,

My scenario is, basically when a user selects and hits on save or submit button, I want to get its value. For example, if Affogato is selected, I want to get 0, similarly, if Bicerin is selected, I want to get its value which is 2.

[walker1234Participant]

Ok. And how do I access its value in the following line of code then based on user’s selection :

<JqxDropDownList width={100} height={20} source={this.state.dropdownlistSource} selectedIndex={0} autoDropDownHeight={true}/>

Because, I can’t define ref in JqxDropdownlist. When I was not using the dropdownlist but jQXInput, I was able to retrieve its value like this by defining ref:

<JqxInput ref={this.myId} width={150} height={23} />

[walker1234Participant]

Thanks. Let’s say if I want to have an integer value corresponding to each dropdown character value in the demo you shared:

https://stackblitz.com/edit/react-ts-gsdc4g

For example if I want to fit something like below

<option value=0>Affogato</option>
<option value=1>Americano</option>
<option value=2>Bicerin</option>
<option value=3>Breve</option>

in this part of code so that when a user selects a particular value, a corresponding number gets selected.

<JqxDropDownList
                      width={100}
                      height={20}
                      source={this.state.dropdownlistSource}
                      selectedIndex={0}
                    />

Do I need to define values in dropdownlistSource which is defined inside a state ?

[walker1234Participant]

I used the first approach

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

But I didn’t use this feature in my code and it still works:

private onTabSelected = (event: any) => {
    switch (event.args.item) {
      case 0:
       // this.hideButton();
        break;
      case 1:
      //  this.showButton();
        break;
    }
  };

Could you tell me what’s the significance of using this in the example you mentioned?

Thanks

[walker1234Participant]

In your first option example (to extend the state interface and use two different rendertoolbar methods), it’s still showing Add New US Index button when I click on second tab. Could you tell me why?

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

Q2: Same is the case with your second example as well. Could you take a look at it as well?

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

Q3. Could you give an example of css for hiding other tool bar buttons except one (the tab I’m viewing).

Thanks

[Author]

Posts