1. Home
  2. Forum
  3. Blazor
  4. DataGrid Toolbar Items Icon

DataGrid Toolbar Items Icon

Hi,

1-I used the Toolbar in the DataGrid component. Is it possible to place the icon instead of the title of the toolbar items?


private List<object> ToolbarItems = new List<object>() { new ToolbarItem() { Type = ItemType.Input, Template = title, Align = ItemAlign.Left }, "ColumnChooser" };





2-In Pager with page size dropdown:

Is it possible for the user to enter his value in dropdown? It is not possible at the moment and the user has to select only the items in the dropdown.


3- In EnablePersistence: Is it possible to allow the user to delete all the current page datagrid settings? For example, in the Toolbar put a button to delete the settings. And the next question is whether it is possible to add content and read data to it? For example, placing a checkbox in the Datagrid  toolbar that the user can choose to save the DataGrid settings on each page. The value of this check box is stored in " Persistence" content.


Thank you


34 Replies
VN Vignesh Natarajan Syncfusion Team February 17, 2022 10:44 AM UTC

Hi Sarah,  
 
Thanks for contacting Syncfusion support.  
 
Query: “Is it possible to place the icon instead of the title of the toolbar items?” 
 
Yes, we can render the icon instead of title in toolbar item. We have provided support to open the column chooser dialog in external button.  Refer to the below UG documentation to open the column chooser on external button. 
 
 
We suggest you to render the custom toolbar item in Grid with icon and on clicking the icon open the column chooser. Refer the below documentation to render custom toolbar item in Grid toolbar 
 
 
Please get back to us if you are facing any difficulties in achieving this requirement using above suggestion.  
 
Query: “Is it possible for the user to enter his value in dropdown? It is not possible at the moment and the user has to select only the items in the dropdown.” 
 
No, we do not have support to achieve your requirement. If you want to enter values in dropdown, we request you to render the custom pager component using Pager Template feature of Grid. refer our Online demo for your reference 
 
 
Using above feature, we render custom component in Grid pager as per our requirement. 
 
Query: “ Is it possible to allow the user to delete all the current page datagrid settings? ” 
 
Yes, we suggest you to achieve your requirement using ResetPersistDataAsync() method of Grid. Refer the below API documentation for your reference 
 
 
Query: “next question is whether it is possible to add content and read data to it?” 
 
We have already documented this topic in our UG documentation to maintain and handle the Grid state manually. Refer the below documentation for your reference 
 
 
Please get back to us if you have further queries.  
 
Regards, 
Vignesh  Natarajan 


SA Sarah February 20, 2022 12:05 PM UTC

Hi Vignesh Natarajan,


1-I used the following code, but unfortunately the desired output is not suitable. I want only the icon to be visible.

new ItemModel() { TooltipText = "Settings", Id = "Click",CssClass="fa fa-cog icon" }




2- I used ResetPersistDataAsync (). After doing this,

2-1 the value in the search toolbar will not be deleted. Is it possible to access the search toolbar text to delete? From myGrid.Search (""); I used it but the problem did not go away.

2-2-The second problem is that the string that displays the filter items at the bottom of the datagrid is not removed.



3-In the following code:

<SfGrid @ref="myGrid" ... />

How can I get all column names, column widths, and column indexes using the myGrid object?


Thank you


MS Monisha Saravanan Syncfusion Team February 21, 2022 03:55 PM UTC

Hi Sarah, 

Thanks for your update. 

Query:  “ I want only the icon to be visible.” 
 
To render the icon alone we suggest you to use PrefixIcon instead of CssClass. Kindly refer the below code snippet. 

Toolbaritems.Add(new ItemModel() { TooltipText = "Expand all", Id="ExpandAll", PrefixIcon = "e-expand" }); 

Query: “I used ResetPersistDataAsync ()” 
 
Kindly share whether you have used ResetPersistData on current page only or for the entire Grid reference. Kindly share the below details to validate further. 

  1. Share whether you have used ResetPersist data with EnablePersistence/Handled grid state manually.
  2. Share us the complete Grid code snippet
  3. Share the video demo along with replication procedure.
  4. If possible share us the simple issue reproducing sample.

Above details will be very helpful for us to validate the reported query further at our end and provide solution as early as possible. 

Query: “How can I get all column names, column widths, and column indexes using the myGrid object” 
 
We can use GetColumnsAsync method to get all the columns in the DataGrid. By using GetColumnIndexByFieldAsync method we can get column index. Currently there is no direct method support which can return column index and width programmatically. Instead we can get width by using GetColumnsAsync method. 

 

 

Kindly get back to us if you have further queries or if we misunderstood your query. 

Regards, 
Monisha 


SA Sarah replied to Monisha Saravanan February 23, 2022 11:09 PM UTC

Hi Monisha Saravanan,


1-To render the icon alone we suggest you to use PrefixIcon instead of CssClass. Kindly refer the below code snippet.

Excellent bug fixed.

I used the following example. Is it possible to display the dialogue exactly to the right of the data grid? It is placed on the left by default.

And is it possible to place the search toolbar on the right?

https://blazor.syncfusion.com/documentation/datagrid/column-chooser#open-column-chooser-by-external-button 


2-Kindly share whether you have used ResetPersistData on current page only or for the entire Grid reference. Kindly share the below details to validate further.

I only used EnablePersistence = "true"


We can use GetColumnsAsync method to get all the columns in the DataGrid. By using GetColumnIndexByFieldAsync method we can get column index. Currently there is no direct method support which can return column index and width programmatically. Instead we can get width by using GetColumnsAsync method.

Thank you


MS Monisha Saravanan Syncfusion Team February 24, 2022 02:15 PM UTC

Hi Sarah, 

Thanks for your update. 

Query: “Is it possible to display the dialogue exactly to the right of the data grid? It is placed on the left by default.” 
 
Yes, it is possible to display the column chooser dialog on the right side of the DataGrid. The position of the dialog can be changed by changing the dialog rendering position inside the OpenColumnChooser method. Kindly refer the below code snippet. 

 
<SfButton OnClick="Show" CssClass="e-primary" IsPrimary="true" Content="Open column chooser"></SfButton> 
 
<SfGrid @ref="DefaultGrid" DataSource="@Employees" ShowColumnChooser="true" Toolbar=@ToolbarItems> 
    <GridColumns> 
... 
    </GridColumns> 
</SfGrid> 
 
 
@code{ 
    private SfGrid<EmployeeData> DefaultGrid; 
 
    public string[] ToolbarItems = new string[] { "ColumnChooser", "Search"}; 
 
 
    public void Show() 
   { 
        this.DefaultGrid.OpenColumnChooser(700, 50); 
    } 
 
} 

 
Query: “ Is it possible to place the search toolbar on the right?” 

We would like to inform that by default the search bar will be placed on the right. If you have one or more toolbar buttons at the right it will display based on the given order. If you have performed any custom CSS on rendering toolbar Kindly share the below details for further assistance. 

  1. Share us the Grid code snippet with custom styles if any.
  2. Share us the video demonstration of the issue.
  3. If possible share us the issue reproduceable sample.

Query: “the value in the search toolbar will not be deleted” 
 
We have prepared an sample based on your query and the reported issue does not reproduced at our end. Kindly check the sample( Counter.Razor) for more information. 
 

If the reported issue still persist. Kindly get back to us with below details. 

  1. Share us the Grid code snippet.
  2. Share us the video demonstration of the issue.
  3. If possible share us the issue reproduceable sample or reproduce the issue on the above sample.
The provided information will help us to analyze the problem, and provide you a solution as early as possible. 
 
Query: “The second problem is that the string that displays the filter items at the bottom of the datagrid is not removed” 
 
We have validated and considered your query as a bug and logged the defect report “Incorrect Filtered Columns Are Shown After Clicking Reset PersistData” for the same. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming patch release which is expected to be rolled out on or before the end of March, 2022. Until then we appreciate your patience.  
  

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.   

Regards, 
Monisha 



SA Sarah February 26, 2022 12:53 PM UTC

Hi  Monisha Saravanan,


Yes, it is possible to display the column chooser dialog on the right side of the DataGrid. The position of the dialog can be changed by changing the dialog rendering position inside the OpenColumnChooser method. Kindly refer the below code snippet. 


I saw the following code in the site documents. Is there another way instead of setting numeric parameters as hard code (for example with style)?

this.DefaultGrid.OpenColumnChooser(700, 50); 


Thank you




MS Monisha Saravanan Syncfusion Team February 28, 2022 09:16 AM UTC

Hi Sarah, 

Query: “I saw the following code in the site documents. Is there another way instead of setting numeric parameters as hard code (for example with style)?” 
 
Yes, we can use CSS to position the column chooser dialog. Also we would like to inform that when we use OpenColumnChooser method without any parameters it will open column chooser by right on default. Also we can use below CSS to position the dialog. Kindly refer the attached code snippet and sample for your reference. 

<SfButton @onclick ="Show" CssClass="e-primary" IsPrimary="true" Content="Open column chooser"></SfButton> 
 
<SfGrid @ref="DefaultGrid" DataSource="@Employees" ShowColumnChooser="true" Toolbar=@ToolbarItems> 
    <GridColumns> 
... 
    </GridColumns> 
</SfGrid> 
<style> 
     
    .e-grid .e-popup.e-ccdlg.e-popup-open.e-dialog { 
        left : 700px !important; 
        top : 50px !important; 
    } 
 
 
</style> 
@code{ 
    private SfGrid<EmployeeData> DefaultGrid; 
 
    public string[] ToolbarItems = new string[] { "ColumnChooser" }; 
 
    public void Show() 
    { 
        
            this.DefaultGrid.OpenColumnChooser(); 
         
    } 
 
} 

Kindly get back to us if you have further queries. 

Regards, 
Monisha 


SA Sarah March 6, 2022 02:51 PM UTC

Hi Monisha Saravanan,


Your guidance was excellent and the bug was fixed. In the past we talked about saving user settings. I want to save some user settings manually. For this reason I save some DataGrid settings (column width, column order) in the database. I do not know where to apply these settings. There is no problem in the following link because it did not use AdapterInstance. But I used AdapterInstance and had a problem.

https://www.syncfusion.com/forums/146129/programatically-create-change-columns-on-the-fly


My code:

public class GridCustomAdaptor : DataAdaptor

{

public GridCustomAdaptor() {}

public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null) {

...

Read data from the server & return

}

}

-------------------------------------------------------------------------------------

AllowSorting="true" AllowFiltering="true" AllowResizing="true" AllowSelection="true" AllowReordering="true"

Width="100%"

AllowSorting="true"

HeaderTextAlign="TextAlign.Center" Type="ColumnType.String"

FilterSettings="@(new FilterSettings { Operator = Operator.Contains })">

.....


----------------------------------------------------------------------------------------------

protected async override Task OnInitializedAsync()

{

ReadUserSettings()

 }


MS Monisha Saravanan Syncfusion Team March 7, 2022 01:21 PM UTC

Hi Sarah, 

Thanks for the update. 

From your query we suspect that you are persisting Grid externally and try to assigned the persisted data back to the datasource. For persisting column order we can use Enable Persistence and based on the ID it will refresh the Grid data. If this is not your exact scenario or if you want to persist the data externally / manually then kindly share us some more details about the query to validate further at our end. 

Kindly get back to us if we misunderstood your query or if you have further queries. 

Regards, 
Monisha 


SA Sarah replied to Monisha Saravanan March 7, 2022 09:12 PM UTC

Hi Monisha Saravanan ,

I've used the Persistence feature in the DataGrid in the past and got excited about it. And these are the things I wanted but there are extras. I do not need. For example, when we enable Persistence and the user uses the Column Filter or uses Search in the toolbar, these are also saved and also the sort of columns are saved, and when the user sees the current page in the future, these items are filtered and searched. And sorting is applied. The existence of these is considered as a problem.


Thank you


MS Monisha Saravanan Syncfusion Team March 8, 2022 02:53 PM UTC

Hi Sarah, 

Thanks for your update. 

We would like to inform you that, enabling the EnablePersistence property will persist all the possible state of DataGrid. It is the default behavior. So we suggest you to handle Grid state manually by using our inbuilt methods GetPersistData and SetPersistData to get a current grid state and use the state to set in Grid. 

By using GetPersistData we can fetch the grid state and store this persisted settings in a string variable. Now we can use the persisted settings in the string variable and apply to Grid by using SetPersistData. You can also customize the string variable to have only your preferred settings before storing it. So that it will persist according to the changes made on persisted settings. 
 
We have documented this topic, kindly refer the below documentation for more details. 

Kindly try the above suggestion from your side and get back to us if need further assistance. 

Regards, 
Monisha 


SA Sarah replied to Monisha Saravanan March 9, 2022 05:04 PM UTC

Hi Monisha Saravanan,


I checked your answer and deleted the elements I did not need, but it gave an error. Then I added the element without children and it made an error again. The next thing is that in PageSizes the value that the user has selected in the combo box and I do not know where Json is to save (I just want to save the selected value of the user again in Json).


var jsString = await myGrid.GetPersistData();

var o = (Newtonsoft.Json.Linq.JObject)JsonConvert.DeserializeObject(jsString);


o.Property("filterSettings")?.Remove();

o.Property("searchSettings")?.Remove();

o.Property("sortSettings")?.Remove();

o.Property("groupSettings")?.Remove();

o.Property("pageSettings")?.Remove();


o.Add(new JProperty("filterSettings"));

o.Add(new JProperty("searchSettings"));

o.Add(new JProperty("sortSettings"));

o.Add(new JProperty("groupSettings"));

o.Add(new JProperty("pageSettings"));


await myGrid.SetPersistDataAsync(o.ToString()); =>Error


Thank you


MS Monisha Saravanan Syncfusion Team March 10, 2022 01:25 PM UTC

Hi Sarah, 

Thanks for the update. 

We have analyzed your query and instead of removing the persist properties settings we suggest you to assign new Grid settings after deserialization. Kindly check the attached code snippet for your reference. 

_state1: After Deserialization we have assigned the new grid settings. We can disable all the settings by using the same steps. 

_state2: We suspect that you need to maintain only the page size. We can store the required property in a local variable and we can assigned it after removing all other properties by using new Grid settings. 

public async void Save() 
    { 
        _state = await Grid.GetPersistData(); 
        dynamic PersistProp = JsonSerializer.Deserialize<Dictionary<string, object>>(_state.ToString()); 
 
        dynamic _state1 = JsonSerializer.Deserialize<GridSearchSettings>(PersistProp["searchSettings"].ToString()); 
        _state1 = new GridSearchSettings(); 
        PersistProp["searchSettings"] = JsonSerializer.Serialize(_state1).ToString();  
 
 
        dynamic _state2 = JsonSerializer.Deserialize<GridPageSettings>(PersistProp["pageSettings"].ToString()); 
        int page = _state2.PageSize; 
        _state2 = new GridPageSettings(); 
        _state2.PageSize = page; 
        PersistProp["pageSettings"] = JsonSerializer.Serialize(_state2).ToString();  
 
 
        _state = JsonSerializer.Serialize(PersistProp); 
        Service.setGridState(_state); 
    } 

Kindly get back to us if you have further queries. 

Regards, 
Monisha 


SA Sarah March 13, 2022 12:06 PM UTC

Hi Monisha Saravanan,


How to save settings for DataGrid columns (IsVisible, order, width)?


Thank you


MS Monisha Saravanan Syncfusion Team March 15, 2022 09:01 AM UTC

Hi Sarah, 
  
Greetings from Syncfusion. 
  
Query: “How to save settings for DataGrid columns (IsVisible, order, width)?”  
  
We have analyzed your query and we suspect that you need to save the Grid columns settings. We have prepared an sample based on your requirement to save only Grid columns settings. Kindly check the attached sample for your reference. 
  
  
If we misunderstood your query or if you have further query then kindly get back to us with more information regarding your query. 
  
Regards 
Monisha 


SA Sarah March 16, 2022 03:55 PM UTC

Hi Monisha Saravanan,


Thanks for your source. I made a small change to your source and set EnablePersistence = "true" for the DataGrid so that I do not save the settings in the database. When we click the clear button, it removes the DataGrid  sort filters and grouping, and this is exactly what I want. That is, the settings are saved automatically, but the user can delete the settings. But when I want to always delete the settings and call ClearFilterSortGroupSettings () in OnInitializedAsync (), it does not work properly.


<SfButton @onclick=" ClearFilterSortGroupSettings ">Clear</SfButton>


 public async void ClearFilterSortGroupSettings()

    {

         _state = await Grid.GetPersistData();

        dynamic PersistProp = JsonSerializer.Deserialize<Dictionary<string, object>>(_state.ToString());

        dynamic columnData = JsonSerializer.Deserialize<List<GridColumn>>(PersistProp["columns"].ToString());

        dynamic _state1 = JsonSerializer.Deserialize<GridSearchSettings>(PersistProp["searchSettings"].ToString());

        _state1 = new GridSearchSettings();

        PersistProp["searchSettings"] = JsonSerializer.Serialize(_state1).ToString();

        dynamic _state2 = JsonSerializer.Deserialize<GridPageSettings>(PersistProp["pageSettings"].ToString());

        _state2 = new GridPageSettings();

        PersistProp["pageSettings"] = JsonSerializer.Serialize(_state2).ToString();

        dynamic _state3 = JsonSerializer.Deserialize<GridFilterSettings>(PersistProp["filterSettings"].ToString());

        _state3 = new GridFilterSettings();

        PersistProp["filterSettings"] = JsonSerializer.Serialize(_state3).ToString();

        dynamic _state4 = JsonSerializer.Deserialize<GridSortSettings>(PersistProp["sortSettings"].ToString());

        _state4 = new GridSortSettings();

        PersistProp["sortSettings"] = JsonSerializer.Serialize(_state4).ToString();

        dynamic _state5 = JsonSerializer.Deserialize<GridGroupSettings>(PersistProp["groupSettings"].ToString());

        _state5 = new GridGroupSettings();

        PersistProp["groupSettings"] = JsonSerializer.Serialize(_state5).ToString();

        _state = JsonSerializer.Serialize(PersistProp);

        //Service.setGridState(_state);

        Grid.SetPersistDataAsync(_state);

    }


Thank you


MS Monisha Saravanan Syncfusion Team March 17, 2022 01:11 PM UTC

Hi Sarah, 

Thanks for the update. 

We have analyzed your query and we suggest you to call ClearFilterSortGroupSettings on OnDatabound event instead of oninitialized. Kindly check the attached code snippet for your reference. 

 
<SfButton @onclick=" ClearFilterSortGroupSettings ">Clear</SfButton> 
<SfButton @onclick=" Reset ">Reset</SfButton> 
 
<SfGrid ID="Grid8" @ref="Grid" DataSource="@Orders" Height="315" AllowReordering="true" AllowGrouping="true" EnablePersistence="true" AllowPaging="true" AllowFiltering="true"  AllowSorting="true"> 
    <GridEvents OnDataBound=DataBound TValue="Order"></GridEvents> 
    <GridColumns> 
        ... 
   </GridColumns> 
</SfGrid> 
 
@code { 
 
    public bool flag = true; 
    public void DataBound() 
    { 
        if (flag) 
        { 
            ClearFilterSortGroupSettings(); 
            flag = false; 
} 
 
    } 
 
} 

Kindly get back to us if you need further assistance. 

Regards, 
Monisha 


SA Sarah replied to Monisha Saravanan March 18, 2022 09:57 AM UTC

Hi  Monisha Saravanan,


Thank you for your guidance. The bug was fixed. I am using CustomAdaptor and in this class I am reading data from the API server in the ReadAsync method. 

When the page loads, ReadAsync is called first (with column filter information, search, grouping, and sorting), and data is read from the server. 

In the next step, DataBound is called and we remove the search, filter and grouping information.

  In the next step , ReadAsync is called again in the CustomAdaptor class and the information is read from the server.


Thank you


MS Monisha Saravanan Syncfusion Team March 21, 2022 01:37 PM UTC

Hi Sarah, 

Thanks for the update. 

We are glad to hear that your query has been resolved. We would like to inform that ReadAsync method will be triggered for every changes in the DataGrid (component refreshes). It is the default behavior of the Grid. Here we have changed the Grid persisted settings externally, so ReadAsync method is triggered. Kindly get back to us if you need further assistance. 

Regards, 
Monisha 


MS Monisha Saravanan Syncfusion Team April 19, 2022 04:52 AM UTC

Hi Sarah,


Query: “The second problem is that the string that displays the filter items at the bottom of the datagrid is not removed” 


We are glad to announce that, we have included fix for the “Incorrect Filtered Columns Are Shown After Clicking Reset PersistData” in our release(20.1.0.48).  So please upgrade to our latest version of Syncfusion NuGet package to resolve the reported issue. Please find the Nuget package for latest fixes and features from below.


Nuget : https://www.nuget.org/packages/Syncfusion.Blazor.Grid


We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 

   

Regards,            

Monisha


BD Boot Dat April 29, 2022 12:53 PM UTC

Hi  Monisha Saravanan


Can you provide a link where i can access icon list of Toolbaritems PrefixIcon ?


MS Monisha Saravanan Syncfusion Team May 2, 2022 02:38 PM UTC

Hi Dat,


Greetings from Syncfusion support.


Query: “Can you provide a link where i can access icon list of Toolbaritems PrefixIcon ?”


We have checked your query and you can find the icon list from the below mentioned UG location and make use of the icons by using CSS class. Kindly check the below documentation for additional information.


UG: https://blazor.syncfusion.com/documentation/appearance/icons#icons-list


Kindly get back to us if you have further queries.


Regards,

Monisha


SA Sarah March 27, 2023 04:55 AM UTC

Hi,

My Source code:


<GridEvents  OnDataBound="OnDataGridDataBound" ....></GridEvents>


public async Task OnDataGridDataBound()

{

if (flagDataBound)

{

await DataGridSetting.ResetGridSetting(myGrid);

flagDataBound = false;

}

}


==========================

public static class DataGridSetting

{

public static async Task ResetGridSetting(SfGrid myGrid)

{

try

{

string _state = await myGrid.GetPersistDataAsync();

dynamic PersistProp = System.Text.Json.JsonSerializer.Deserialize>(_state.ToString());

dynamic columnData = System.Text.Json.JsonSerializer.Deserialize>(PersistProp["columns"].ToString()); /*persist column settings*/

//------------------------------------------------------------------------------------------------------------

dynamic _state1 = System.Text.Json.JsonSerializer.Deserialize(PersistProp["searchSettings"].ToString());

_state1 = new GridSearchSettings();

PersistProp["searchSettings"] = System.Text.Json.JsonSerializer.Serialize(_state1).ToString();

//------------------------------------------------------------------------------------------------------------

int intPageSize;

dynamic _state2 = System.Text.Json.JsonSerializer.Deserialize(PersistProp["pageSettings"].ToString());


intPageSize = _state2.PageSize;


_state2 = new GridPageSettings();


_state2.PageSize = intPageSize;


PersistProp["pageSettings"] = System.Text.Json.JsonSerializer.Serialize(_state2).ToString();



dynamic _state3 = System.Text.Json.JsonSerializer.Deserialize(PersistProp["filterSettings"].ToString());

_state3 = new GridFilterSettings();

PersistProp["filterSettings"] = System.Text.Json.JsonSerializer.Serialize(_state3).ToString();



dynamic _state4 = System.Text.Json.JsonSerializer.Deserialize(PersistProp["sortSettings"].ToString());

_state4 = new GridSortSettings();

PersistProp["sortSettings"] = System.Text.Json.JsonSerializer.Serialize(_state4).ToString();


dynamic _state5 = System.Text.Json.JsonSerializer.Deserialize(PersistProp["groupSettings"].ToString());

_state5 = new GridGroupSettings();

PersistProp["groupSettings"] = System.Text.Json.JsonSerializer.Serialize(_state5).ToString();


_state = System.Text.Json.JsonSerializer.Serialize(PersistProp);


await myGrid.SetPersistDataAsync(_state);

}

catch (Exception ex)

{

string st = ex.Message;

}

}

}


=============================================

1-I used the above code and it worked correctly. I upgraded the .NET version from 6 to 7. I upgraded the syncfusion version to 21.1.35. Unfortunately, the code no longer works properly and the Datagrid remains in loading and the data is not displayed.


2-To use syncfusion components, we must add the following items:



By changing the version of syncfusion components, won't the content of these files change and it is not necessary to download these files again on the client side?


PS Prathap Senthil Syncfusion Team March 27, 2023 12:13 PM UTC

Hi Sarah,


Before proceeding with the reporting issue, we require some additional clarification from your end. Please share the below details to proceed further at our end.

  1. Please specify whether you are using local or remote data. If you are using remote data, which adaptor have you used?
  2. Share with us if you are using the Blazor server or the Blazor WASM app.
  3. Share with us the video demonstration of the issue with the replication procedure
  4. Share with us a grid code snippet with the model class.
  5. If possible, share with us a simple, reproducible issue.

Above-requested details will be very helpful in validating the reported query at our end and providing a solution as early as possible.

Regards,
Prathap S


SA Sarah March 28, 2023 07:28 AM UTC

Hi,


I have attached the source. Data is loaded in this source, but the page hangs.


https://easyupload.io/0xpdcs


MS Monisha Saravanan Syncfusion Team March 29, 2023 10:39 AM UTC


Hi Sarah,


We could see that in your shared sample the scripts is not rendered properly. So the Grid is not laded initially. To resolve the reported issue we suggest you to refer the scripts externally. Kindly check the below release notes and attached sample for your reference.


In our latest version the Built-in JavaScript isolation feature has been marked as deprecated in 2022 Vol1 release, since loading scripts externally provides better performance over JavaScript isolation approach. 


Release notes: https://blazor.syncfusion.com/documentation/release-notes/21.1.35?type=all#breaking-changes


Please get back to us if you face further issues.


Regards,

Monisha



Attachment: Dynamicrtlwitchsample_368fa50c.zip

SA Sarah replied to Monisha Saravanan March 29, 2023 11:04 AM UTC

Hi  Monisha Saravanan,


I thank you for reviewing the source code with Daft. There is a problem that my website is running on the local network that some systems do not have access to the Internet. Regarding the lack of access to the Internet, what is your suggestion?


MS Monisha Saravanan Syncfusion Team April 4, 2023 01:25 PM UTC


Hi Sarah,


We suggest you use our script & CSS references from static web assets or using CRG. Please refer to the below UG links.

https://blazor.syncfusion.com/documentation/common/adding-script-references#refer-script-from-static-web-assets

https://blazor.syncfusion.com/documentation/common/custom-resource-generator


Using static web assets:

 

    <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" />

    <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>

</head>

 


Please let us know if you have any concerns.


SA Sarah April 10, 2023 12:05 AM UTC

Hi  Monisha Saravanan,


I used the method you said, but I did not get the result. I attached the project. It is locked when loading the form.


https://easyupload.io/b0qjqh


MS Monisha Saravanan Syncfusion Team April 10, 2023 01:59 PM UTC


Hi Sarah,


The reported issue is due to the following highlighted line. We have modified the shared sample at our end. Kindly comment out the below highlighted line and check the reported issue at your end. Please check the modified sample and code snippet for additional reference.


 

    public async Task OnDataGridDataBound()

    {

        if (flagDataBound)

        {

            //await DataGridSetting<Order>.ResetGridSetting(myGrid); // Issue occurs due to the following code

            flagDataBound = false;

        }

    }


Please let us know if you have any concerns.


Regards,

Monisha


SA Sarah April 11, 2023 03:09 AM UTC

Hi Monisha Saravanan,

The problem is exactly here and I knew it. This source used to work correctly in the past, but after updating the Syncfusion version, this bug appeared.

(This is a problem that I have raised in previous posts and you provided a solution and the problem was not solved.)



MS Monisha Saravanan Syncfusion Team April 12, 2023 10:15 AM UTC


Hi Sarah,


We could see that the reported issue is due to the DataBound method is calling repeatedly. So we suggest you to set flag variable as false before accessing the ResetGridSetting method. Kindly check the attached sample and code snippet for your reference.



 

<SfGrid @ref="myGrid" DataSource="@Orders" AllowPaging="true" AllowResizing="true" AllowReordering="true">

   

    <GridEvents OnToolbarClick="ToolbarClickHandler" RowSelected="RowSelected" RowDeselected="RowDeSelected" OnDataBound="OnDataGridDataBound" RowSelecting="RowSelectingHandler" ContextMenuOpen="ContextMenuOpened" ContextMenuItemClicked="ContextMenuItemClickedHandler" TValue="Order"></GridEvents>

    <GridPageSettings PageSize="5"></GridPageSettings>

   <GridColumns>

     ...

  </GridColumns>

</SfGrid>

 

@code{

 

    public bool flagDataBound = true;

    public static SfGrid<Order> myGrid = new SfGrid<Order>();

 

    public async Task OnDataGridDataBound()

    {

        if (flagDataBound)

        {

            flagDataBound = false; // Ensure to set the boolen value as false before calling the method.

            await DataGridSetting<Order>.ResetGridSetting(myGrid);

           

        }

    }

}


Please let us know if you have any concerns.


Regards,

Monisha


Attachment: Dynamicrtlwitchsample2_43ab3ee0.zip

SA Sarah April 13, 2023 01:17 AM UTC

Hi Monisha Saravanan,


The problem was solved.  Thank you for your follow up.



MS Monisha Saravanan Syncfusion Team April 13, 2023 03:41 AM UTC

Hi Sarah,


Welcome. Kindly get back to us if you face any difficulties. As always we will be happy to assist you.


Loader.
Up arrow icon