1. Home
  2. Forum
  3. React - EJ 2
  4. Grid load data from url and show the spinner when getting the data

Grid load data from url and show the spinner when getting the data

I am using reactJS and want to get the grid data from url and show the spinner when loading.

I have a few questions in the comment and I want to know three more questions:

1: In the sample, I am using Ajax to get data and I want to know should I using Ajax or DataManager to get data?
2: How to get the data using "POST" method in the above answer?
3: How to keep the checkbox field when I pass the getting data to the grid?

const Test = () => {
  const toolbarOptions = ["Add", "Delete", "Update", "Cancel"];
  const editSettings = {
    allowEditing: true,
    allowAdding: true,
    allowDeleting: true,
    newRowPosition: "Top",
  };

  const commands = [
    { type: "Edit", buttonOption: { iconCss: " e-icons e-edit", cssClass: "e-flat" } },
    { type: "Save", buttonOption: { iconCss: "e-icons e-update", cssClass: "e-flat" } },
    { type: "Cancel", buttonOption: { iconCss: "e-icons e-cancel-icon", cssClass: "e-flat" } },
  ];

  const gridRef = React.createRef();

  const loadData = () => {
    // How to show the Load Spinner??? or where to show the spinner is better when getting the data????
    const ajax = new Ajax("https://api.myjson.com/bins/741ys", "GET", true);
    ajax.send().then();
    ajax.onSuccess = dataSt => {
        // How to Hidden the Spinner?
       // is this set the datasource method correct?????
      gridRef.current.dataSource = JSON.parse(dataSt);
    };
  };


  const actionBegin = args => {
    if (args.requestType === "save") {
      console.log("save");

    }
  };

  useEffect(() => {
    loadData();
  });

  return (
    <div>
      <section>
        <GridComponent
          // set the data default empty
          dataSource={[]}
          toolbar={toolbarOptions}
          editSettings={editSettings}
          allowSorting
          allowFiltering="true"
          ref={gridRef}
        >
          <ColumnsDirective>
            <ColumnDirective
              type="checkbox"
              allowSorting={false}
              allowFiltering={false}
              width="60"
              allowEditing={false}
            />

            <ColumnDirective
              field="name"
              width="300"
              textAlign="Left"
              headerText="Name"
            />
            <ColumnDirective
              field="description"
              width="300"
              textAlign="Left"
              headerText="Description"
            />
          ColumnsDirective>
          <Inject services={[Page, CommandColumn, Toolbar, Edit, Sort]} />
        GridComponent>
      section>
    div>
  );
};

export default Test;


5 Replies
TS Thiyagu Subramani Syncfusion Team April 1, 2020 09:50 AM UTC

Hi developer, 

Thanks for contacting Syncfusion forum. 

We have validate and addressed your quires below. 

Query 1 : How to show the Load Spinner??? or where to show the spinner is better when getting the data????. 

By default Spinner is available for grid element before getting data from ajax request. 

Query 2:  How to Hidden the Spinner? 
 
You can show and hide spinner using  showSpinner() and hideSpinner() method. 

Query 3 : is this set the datasource method correct? 
 
You can set dataSource directly to the grid reference like below code example. 
 
const loadData = () => { 
    const ajax = new Ajax({ 
      type: "GET", 
      url: "https://api.myjson.com/bins/741ys", 
      contentType: "application/json; charset=utf-8", 
    }); 
    ajax.send().then(); 
    ajax.onSuccess = result => { 
      this.grid.dataSource = JSON.parse(result); 
      this.grid.hideSpinner();   // hide the spinner  
    }; 
 
useEffect(() => { 
    loadData(); 
  }); 
 
<GridComponent 
        ref={r => (this.grid = r)} 
        dataSource={[]} 
        allowPaging={true} 
        pageSettings={{ pageSize: 6 }} 
        editSettings={editOptions} 
        toolbar={toolbarOptions} 
      > 
      . 
      . 
      . 
</ GridComponent> 
 
 
Query 4:  In the sample, I am using Ajax to get data and I want to know should I using Ajax or DataManager to get data?  

You can use both ajax or DataManager to get data. 

By default we explained our DataManager adaptors in below documentation link. Please refer it. 


Query 5 : How to get the data using "POST" method in the above answer? 
 
HTTP POST method is used to send data to a server to create or update a resource, the HTTP GET method is used to request data from a specified resource and should have no other effect. 

For example :  

// send request to server side method.   
const ajax = new Ajax({ 
      type: "POST", 
      url: ". . . . . ",    // server side method url. 
       contentType: "application/json; charset=utf-8", 
     }); 
     ajax.send().then(); 
     ajax.onSuccess = result => { 
       this.grid.dataSource = JSON.parse(result); 
    }; 

Query 6 : How to keep the checkbox field when I pass the getting data to the grid? 
 
By default we an option to render boolean values as checkbox in columns, you need to set displayAsCheckBox property as true. For your case no need to render column type as checkbox and in edit mode using editType as booleanedit to maintain checkbox as edit state. 
 
Example code: 
 
<ColumnDirective field='Verified' headerText='Verified' displayAsCheckBox={true} editType='booleanedit' 
width='150'/> 
 
 
We have prepared sample as per your requirement. Please refer it. 
 
 
Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S. 


DE developer April 1, 2020 10:02 AM UTC

Thank you so much for your clearly reply.

About question 5, can you provide a sample of how to using ajax "POST" the method with data?
For example, if I want to send the data: Username: hello, Password: 123456



// where and how can I set the data (Username and Password) in this example? 
const ajax = new Ajax({ 
      type: "POST", 
      url: ". . . . . ",    // server side method url. 
       contentType: "application/json; charset=utf-8", 
     }); 
     ajax.send().then(); 
     ajax.onSuccess = result => { 
       this.grid.dataSource = JSON.parse(result); 
    }; 

TS Thiyagu Subramani Syncfusion Team April 2, 2020 10:56 AM UTC

Hi developer, 

Thanks for your update. 

We have prepared a sample based on your requirement. Here we have sent Username and Password to server side after a submit button click. 

Please refer to the below code, screenshot and sample link. 

 
[FetchEmployee.tsx] 
 
return (<div className='control-section'> 
            <button onClick={this.handleClick}>Submit</button> 
            . . . .  
        </div>) 
public handleClick(args: any) { 
        const ajax = new Ajax({ 
            type: "POST", 
            url: "/Home/PersonnelList", 
            contentType: "application/json; charset=utf-8", 
        }); 
        var data = JSON.stringify({ Username: 'hello', Password: 123456 }); 
        ajax.send(data).then(); 
        ajax.onSuccess = result => { 
            console.log(JSON.parse(result)); 
        };  
    } 

[HomeController.cs] 

 


Please get back to us, if you need any further assistance. 

Regards, 
Thiyagu S. 


TT Tor Thorbergsen January 9, 2023 01:28 PM UTC

Hi, just tried out the sample you have prepared on  https://stackblitz.com/edit/ej2-react-grids-dialog-template-modified-hj41qm?file=index.tsx 


But it does not work. You have used 'this' in a functional component, like 

      this.grid.dataSource = JSON.parse(result);
      this.grid.hideSpinner();


Also, for some reason you have commented out the showSpinner function.


Making a grid show some loding indicator when loading large async data is important so I really think you should fix this example.



PS Pavithra Subramaniyam Syncfusion Team January 10, 2023 04:07 AM UTC

Tor,


Based on your requirement we have modified the shared sample in which we have dynamically set the Grid dataSource with an Ajax request. Please refer to the below sample link for more information.


https://stackblitz.com/edit/ej2-react-grids-dialog-template-modified-jdogax?file=index.tsx


Loader.
Up arrow icon