how to create reuseable Grid and TreeGrid component?

[kapil jain]

how to create reusable grid and TreeGrid components having full features of CRUD Operations? I did not find anywhere the related link.

[Pavithra Subramaniyam]

Hi kapil jain,

Greetings from Syncfusion.

To make the Syncfusion React Grid reusable, you can follow these steps:

Create a Wrapper Component: Create a wrapper component that encapsulates the Syncfusion React Grid and exposes the necessary props for customization. This wrapper component can include features like data binding, sorting, filtering, paging, CRUD, etc. Here's an example:

const MyGrid = ({ props }) => {

  const toolbarOptions = ['Add', 'Edit', 'Delete', 'Update', 'Cancel'];

  const editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true};

  return (

    <GridComponent dataSource={props.data} columns={props.columns} toolbar={toolbarOptions} editSettings={editSettings}

    >

      <Inject services={[Toolbar, Edit]} />

    </GridComponent>

  );

};

 

In the above example, the MyGrid component accepts a data and columns prop, which represents the data and the columns to be displayed in the grid. You can customize the columns and their properties as per your requirements.

You can now use the MyGrid component in any part of your application where you need to display a grid. Simply pass the appropriate data and columns as a prop to the component. Here's an example of usage:

function Default() {

  const orderColumn = [

    { field: 'OrderID', isPrimaryKey: true, width: 100 },

    { field: 'CustomerID', width: 150 },

    { field: 'ShipCountry', width: 150 },

  ];

  const employeeColumn = [

    { field: 'EmployeeID', isPrimaryKey: true, width: 100 },

    { field: 'FirstName', width: 150 },

    { field: 'LastName', width: 150 },

  ];

  return (

    <div className="control-pane">

      <h4>Order Grid</h4>

      <MyGrid props={{ data: orderDetails, columns: orderColumn }} />

      <h4>Employee Grid</h4>

      <MyGrid props={{ data: employeeData, columns: employeeColumn }} />

    </div>

  );

}

export default Default;

 

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

In the above example, the App component renders the MyGrid component and passes the data and column array as the prop.

By creating a wrapper component, you can reuse the Syncfusion React Grid in different parts of your application by simply passing different data or customizing the grid's configuration through props.

Remember to refer to the official Syncfusion documentation for more details and advanced features of the Syncfusion React Grid component:

https://ej2.syncfusion.com/react/documentation/grid/

Regards,

Pavithra S

[kapil jain]

Hi  Pavithra,
Thanks for your reply.
how can we perform the operation in the hierarchy grid where mode: batch to edit and update? I did not find any resources or documents related to CRUD Operation in the Hierarchy grid with child and sub-child grid using React js.

I have shared my code and JSON.

this is my token: 184192 created.

[Pavithra Subramaniyam]

kapil jain,

You can perform the editing in the child Grid by enabling the “editSettings.allowEditing” property and adding a primary key column like the parent Grid. Please refer to the below code example and the sample link below for more information.

const editSettings = { allowEditing: true, mode: 'Batch'};

const childGrid = {

  dataSource: orderDatas,

  queryString: 'EmployeeID',

  editSettings: editSettings,

  toolbar: toolbarOptions,

  columns: [

    {

      field: 'OrderID', isPrimaryKey: true, width: 120,

    },

    .  .  .

  ],

};

 

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