1. Home
  2. Forum
  3. React - EJ 2
  4. Minor UI Guidance Required

Minor UI Guidance Required

1. I have created a custom button called "Duplicate" which I have mounted to the my Grid's Toolbar.
Since I am trying to place a Syncfusion Materials Icon beside my custom Toolbar button, I am unable to follow the Icon Library instructions from this link: https://ej2.syncfusion.com/react/documentation/appearance/icons/?_gl=1*1ozsky4*_ga*MTg1NDczMzUwNC4xNjQzMzkwMDQy*_ga_WC4JKKPHH0*MTY0NzAyMzM4NC42My4xLjE2NDcwMjM3NDguMA..&_ga=2.126954445.1321204948.1646765094-1854733504.1643390042#available-icons
Please tell me the workaround.

2. I followed the last set of instructions called "Both built-in and custom items in toolbar" in this link: https://ej2.syncfusion.com/react/documentation/grid/tool-bar/tool-bar-items/
My issue is that when I trigger the clickHandler function which basically sends at least one API POST call, I have to manually refresh the screen. Please advise on how the manual refresh can be avoided as I am not sure how to possibly adjust the "actionBegin" and "actionComplete" functions that I have.

3. The first column in my Grid is the checkbox column, please tell me how to center the title's checkbox so that it is aligned with the rest.

4. Single-deletion works fine but the only issue with multi-deletion is that I always get an alert message saying: "No records selected for delete operation" after the operation. Please tell me how to fix it.

5. I want to style my grid but it looks like that is not possible when just experimenting with the Theme Studio (the Grid does change color(s) at all): https://ej2.syncfusion.com/themestudio/?theme=bootstrap5
Please advise if styling the grid is even possible.


5 Replies 1 reply marked as answer
PS Pavithra Subramaniyam Syncfusion Team March 14, 2022 01:11 PM UTC

Hi Rohan, 
 
Thanks for contacting Syncfusion support. 
 
Query#1: Since I am trying to place a Syncfusion Materials Icon beside my custom Toolbar button, I am unable to follow the Icon Library instructions 
 
You add the available theme icons in the custom toolbar button by adding the corresponding class to the prefixIcon property. Please refer to the below code example for more information. 
 
this.toolbarOptions = [ 
      { 
        text:  'Duplicate' , 
        prefixIcon:  'e-copy'  
      }, 
    ]; 
 
 
Query#2: how the manual refresh can be avoided as I am not sure how to possibly adjust the "actionBegin" and "actionComplete" functions. 
 
You can achieve your requirement by resetting the updated dataSource to the Grid inside the success handler of the Duplicate API call.  
 
clickHandler(args) { 
) { 
      .  .  . 
      duplicatSelectedrecords.forEach((item, i) => { 
       .  .  . 
        ajax.onSuccess = (args) => { 
          if (i === duplicatSelectedrecords.length - 1) { 
            this.setGridData(); 
          } 
        }; 
      }); 
    } 
  } 
  componentDidMount() { 
    this.setGridData(); 
  } 
  setGridData() { 
    const ajax = new Ajax( 
      'customDic3', 
      'GET' 
    ); 
    ajax.send(); 
    ajax.onSuccess = (data) => { 
      if (this.gridInstance) { 
        this.gridInstance.dataSource = JSON.parse(data); 
      } 
    }; 
  } 
 
 
Query#3: The first column in my Grid is the checkbox column, please tell me how to center the titles checkbox so that it is aligned with the rest. 
 
You can align the Checkbox column by setting the “textAlign” property as “Center” for that column. 
 
 
 <ColumnDirective type="checkbox" textAlign="Center" width="50" /> 
 
 
Query#4: Single-deletion works fine but the only issue with multi-deletion is that I always get an alert message saying: "No records selected for delete operation" after the operation. Please tell me how to fix it. 
 
In your code you have called the “deleteRecord” method for each selected row delete API call. But while calling the “deleteRecord” method without any parameter it will delete all the selected records at once and clear the selection. For next delete API call, the same method will call which causes the reported issue. So, we suggest you calling the method after all the selected records are deleted in server. Please refer to the below code example for more information. 
 
actionBegin(e) { 
    // Initially flag needs to be false in order to enter this condition 
 
    if (!this.flag) { 
      .  .  . 
      if (e.requestType == 'delete') { 
        .  .  . 
 
        // Here you can send the deleted data to your server using ajax call 
        keyNamesList?.forEach((keyName, i) => { 
          var ajax = new Ajax({ 
            url: `customDic2?keyName=${keyName}`, 
            type: 'DELETE', 
          }); 
          ajax.onSuccess = (args) => { 
            if (i === keyNamesList.length - 1) { 
              // Flag is enabled to skip this execution when grid deletes record 
              this.flag = true; 
              // The deleted data will be removed in the Grid 
              this.gridInstance?.deleteRecord(); 
            } 
          }; 
          .  .  . 
        }); 
      } 
    } 
  } 
 
 
 
Query#5: I want to style my grid but it looks like that is not possible when just experimenting with the Theme Studio (the Grid does change color(s) at all): themestudio Please advise if styling the grid is even possible. 
 
As in the below documentation Theme studio can be used for customizing the default colors of default theme. 
 
 
If you want to customize the Grid individual elements, then you can use the listed selectors in the below documentation categorized with multiple features. Please refer to the below UG links for more information. 
 
 
If that does not meet your requirement, please share more details on your styling that will be helpful for us to provide a better solution as early as possible. 
 
Regards, 
Pavithra S 
 


SD Software Dev March 21, 2022 05:30 PM UTC

Thank you for your response.

Also, I noticed that the DataGrid will show the message "No results to display" when loading the data. Is there a simple loading animation I can put because even for a brief moment, I do not want the user of my application to be confused and accidentally believe there is no data to show.

I tried going through the documentation to see if there is a built in loading animation to no avail.

Please let me know what can be done.

Regards,
Roha


PS Pavithra Subramaniyam Syncfusion Team March 22, 2022 01:01 PM UTC

Hi Rohan, 
 
Based on your query, we understood that you want to show the spinner in the Grid while the data is retrieved from the async action. If so, you can achieve your requirement by setting the grid default spinner style as below. 
 
setGridData() { 
  this.gridInstance.element.querySelector('.e-spinner-pane').classList.add('showspin'); 
  const ajax = new Ajax( 
    'customDic3', 
    'GET' 
  ); 
  ajax.send(); 
  ajax.onSuccess = (data) => { 
    if (this.gridInstance) { 
      this.gridInstance.dataSource = JSON.parse(data); 
      this.gridInstance.element.querySelector('.e-spinner-pane').classList.remove('showspin'); 
    } 
  }; 
} 
 
 
 
.showspin { 
  display: initial !important; 
} 
 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S 


SD Software Dev March 22, 2022 06:39 PM UTC

Thank you and kindly remove the url for privacy concerns.


PS Pavithra Subramaniyam Syncfusion Team March 23, 2022 04:20 PM UTC

Hi Rohan, 
 
We have removed the original URL from our code examples now. Please get back to us if you need further assistance on this. 
 
Regards, 
Pavithra S 


Marked as answer
Loader.
Up arrow icon