React Component Advisory - Syncfusion2

[Luis Auz]

I am testing the components that Syncfusion v2 offers. The official React documentation is oriented with TS and I am developing in React using JS.

I want to make custom components by applying parameters from a constant or variable (better constant). I have created the parameters using the Syncfusion component methods or using an object to be able to pass it to the components; But in neither case can I apply it. The only way is as it is in the code that I will attach.

 

You may also notice that I am commenting on the ways I wish to pass parameters and it does not allow me.

 

I am checking the operation of those components to verify the effectiveness of use.

Attachment: GridProblems_7e6ded66.zip

[Praveenkumar Gajendiran]

Hi Luis,

Thanks for contacting Syncfusion support.

Based on your query and provided information, we suspect that you want to pass the property(“editSettings”) parameters from the constant to the Grid component. For this we have prepared a react.js sample to achieve your requirement. Please refer the below sample and code example for more information. 

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

Code Example: 

const Default = () => { 

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

  const editSettings = { 

    allowDeleting: true, 

    allowEditing: true, 

    allowAdding: true 

  }; 

  return ( 

    <div className="control-pane"> 

      <div className="control-section"> 

        <GridComponent 

          dataSource={orderDetails} 

          toolbar={toolbarOptions} 

          allowPaging="true" 

          editSettings={editSettings} 

          height="400" 

        > 

          <ColumnsDirective> 

            <ColumnDirective 

              field="OrderID" 

              headerText="Order ID" 

              width="120" 

              isPrimaryKey="true" 

              textAlign="Right" 

            /> 

            <ColumnDirective 

              field="CustomerID" 

              headerText="Customer ID" 

              width="120" 

            /> 

            <ColumnDirective 

              field="Freight" 

              headerText="Freight" 

              width="120" 

              format="C2" 

              editType="numericedit" 

              textAlign="Right" 

            /> 

            <ColumnDirective 

              field="ShipCountry" 

              headerText="Ship Country" 

              editType="dropdownedit" 

              width="150" 

            /> 

          </ColumnsDirective> 

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

        </GridComponent> 

      </div> 

    </div> 

  ); 

}; 

Please get back to us if you need further assistance.

Regards,
Praveenkumar