Toggle option in React Grid

[developer]

Hi, I am using the toggle in the grid have a few questions.

1. How to make the toggle edit only in "Edit Mode", because the toggle can edit in every time, but I want to set it can edit only in the "Edit Mode".

2. After saving new or edit the data, the toggle does not change the result

3. How to show the "Label" in toggle? because I am using  "onLabel" but it doesn't show full text in the grid. I want to keep show the "Active" and "InActive" label in the toggle on the grid.

Here is the sample code provided: https://stackblitz.com/edit/react-mqpxyg?file=index.js

Thank you.

[Manivel Sellamuthu]

Hi Customer, 

Greetings from Syncfusion support. 

Query: 1. How to make the toggle edit only in "Edit Mode", because the toggle can edit in every time, but I want to set it can edit only in the "Edit Mode". 

You can achieve this requirement by using disable property of the  toggle(switch). Please refer the below code example and sample for more information. 

Query: 2. After saving new or edit the data, the toggle does not change the result. 

 

To edited data reflect on the Grid, the editTemplate should have the corresponding field name as it’s  id. Please refer the below code example and sample for more information. 

import { render } from "react-dom"; 

import React, { useState, useEffect } from "react"; 

import './style.css'; 

import { SwitchComponent } from "@syncfusion/ej2-react-buttons"; 

import { 

  GridComponent, 

  ColumnsDirective, 

  ColumnDirective, 

  Inject, 

  Page, 

  Edit, 

  Toolbar, 

  Resize 

} from "@syncfusion/ej2-react-grids"; 

import { orderDataSource } from "./data"; 

import { SampleBase } from "./sample-base"; 

import { PropertyPane } from "./property-pane"; 

import { DropDownListComponent } from "@syncfusion/ej2-react-dropdowns"; 

 

const App = () => { 

  const gridRef = React.createRef(); 

 const gridData = [  

    {    OrderID: 10248, CustomerID: 'VINET',toggle: !0 }, 

    {    OrderID: 10249, CustomerID: 'TOMSP',toggle: !1 }, 

    {    OrderID: 10250, CustomerID: 'HANAR',toggle: !1 }, 

    {    OrderID: 10251, CustomerID: 'VICTE',toggle: !0 }]; 

  const pageSettings = { pageCount: 5 }; 

  const selectionSettings = { mode: "Both" }; 

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

  const editSettings = { 

    allowEditing: true, 

    allowAdding: true, 

    allowDeleting: true, 

    newRowPosition: "Top" 

  }; 

 

  const actionBegin = args => { 

    if (args.requestType === "save") { 

    } 

  }; 

 

  const editToggleStyle = args => { 

// setting field name as id to changes reflect on the Grid 

  return <SwitchComponent id='toggle' onLabel="Active" offLabel="Inactive" checked={args.toggle} />; 

}; 

 

  const toggleStyle = args => { 

     

  return ( 

// rendering the column template as non-editable using disabled property 

   <SwitchComponent disabled={true} checked={args.toggle} /> 

    ); 

}; 

 

  return ( 

    <div className="control-pane"> 

      <div className="control-section"> 

        <div className="col-md-9"> 

            <div> 

              <GridComponent 

                dataSource={gridData} 

                ref={gridRef} 

                toolbar={toolbarOptions} 

                allowPaging={true} 

                editSettings={editSettings} 

                actionBegin={actionBegin.bind(this)} 

                selectionSettings={selectionSettings} 

              > 

                <ColumnsDirective> 

                  <ColumnDirective 

                    headerText="check" 

                    type="checkbox" 

                    width="60" 

                  /> 

 

                  <ColumnDirective 

                    field="toggle" 

                    headerText="Active" 

                    width="200" 

                    textAlign="Right" 

                    template={toggleStyle.bind(this)} 

                     editTemplate={editToggleStyle.bind(this)} 

                  /> 

 

                  <ColumnDirective 

                    field="OrderID" 

                    headerText="Order ID" 

                    width="140" 

                    textAlign="Right" 

                    isPrimaryKey={true} 

                  /> 

                  <ColumnDirective 

                    field="CustomerID" 

                    headerText="Customer Name" 

                  /> 

 

                </ColumnsDirective> 

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

              </GridComponent> 

            </div> 

        </div> 

      </div> 

    </div> 

  ); 

}; 

 

render(<App />, document.getElementById("sample")); 

 

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

3. How to show the "Label" in toggle? because I am using  "onLabel" but it doesn't show full text in the grid. I want to keep show the "Active" and "InActive" label in the toggle on the grid. 

In EJ2 Switch component we do not have support for long custom text which is documented in the below link. 

https://ej2.syncfusion.com/documentation/switch/getting-started/?no-cache=1#set-text-on-switch 

Please let us know if you need any further assistance. 

Regards, 

Manivel