How to render a button to open popup with further details

[Fady Zaki]

Hi Team,

How do you render a button in a row that opens a popup showing further details?

What we are trying to achieve is; each grid row could have one or more errors. The error is an array that looks like:

[

 {

  "errorWeight": "this is the error weight from 20 to 1",

  "errorTitle": "the new error titles sent to us from Barbara",

  "errorDescription": "the error description",

  "errorLink": "the error link in the help page",

 },

 { ...another error }

]

So the button title should only show the highest weighted error title (+1 if there is another error) and when clicked it shows a popup that looks like:

Error 1 title

Error 1 description Help Link

Error 2 title

Error 2 description Help Link

Is this achievable in the SyncFusion grid or has it been discussed before?

Thank you for your help in advance.

[Pavithra Subramaniyam]

Hi Fady Zaki,

Thanks for contacting Syncfusion support.

You can achieve your requirement by using the “Custom Command Column” option in which you can render a button in each row. While clicking the button “commandClick” event will be triggered with the corresponding row details. So, inside this event you can show a popup using the row data. The button text can be set based on the row details inside the “rowDatabound” event.  Please refer to the below code example, documentation, and sample link for more information.

In the below code, we have set the corresponding row ID as the Command button text inside the “rowDatabound” event and opened a popup with row details inside the “commandClick” event when the button is clicked. Similarly, you can set the error details as per your requirements.

export class CommandColumnEdit extends SampleBase {

  commands = [

    {

      buttonOption: {

        content: 'Details', cssClass: 'e-info',

      },

    },

  ];

 

  commandClick(args) {

    alert(JSON.stringify(args.rowData));

  }

  rowDataBound(args) {

    args.row.querySelector('button').innerText = args.data['OrderID'];

  }

  render() {

    return (

      <div className="control-pane">

          <GridComponent id="gridcomp" dataSource={data}

            commandClick={this.commandClick} rowDataBound={this.rowDataBound}

          >

            <ColumnsDirective>

              .  .  .

              <ColumnDirective headerText="Manage Records" width="160" commands={this.commands}

              ></ColumnDirective>

            </ColumnsDirective>

            <Inject services={[Page, CommandColumn]} />

          </GridComponent>

      </div>

    );

  }

}

 

Documentation : https://ej2.syncfusion.com/react/documentation/grid/editing/command-column-editing/#custom-command-column

                               https://ej2.syncfusion.com/react/documentation/api/grid/#rowdatabound

Sample               : https://stackblitz.com/edit/react-coyp3a?file=index.js

Please get back to us if you need further assistance on this.

Regard,

Pavithra S

If this post is helpful, please consider Accepting it as the solution so that other members can locate it more quickly.