Toolbar in grid disappear after dataosuce is changed

[Admir Hodžic]

I am using server side app with v18.1.46  My grid has implemented toolbar, when data source is changed grid  is going to rendering without toolbar.

In attachment there is txt sample of razor file, this recreate error.

I resent you also changing way toolbar implementing in grids.

Previously versions of Blazor componets  did not requierd GridTemplates -> ToolbarTemplate tags.

My grids was working  without GridTemplates ToolbarTemplate tags, I can swear that I was looking at documentation while I was writing.

Today my grids do not working, because lack of these tags.

There is no breaking changes info in any  release notes for this changes.

Attachment: GridToolbar_2fba2001.7z

[Admir Hodžic]

Apologies, but look like my grid does not have issue with toolbar.

Tool bar working without templaes.

I have some other problem that I can't figure out what is causing it.

Here is try to describe 

On first render grid render its self without problems.

Excel like filter working , everything working.

If I change my data-source by creating new list in code behind.

On next click on filter column console throws error

syncfusion-blazor.min.js:1 Uncaught TypeError: Cannot read property 'invokeMethodAsync' of undefined

    at r.value (syncfusion-blazor.min.js:1)

    at e.executeQuery (data-25ca01.min.js:1)

    at t.e.processDataOperation (grids-25ca01.min.js:1)

    at r.<anonymous> (grids-25ca01.min.js:1)

    at e.blazorCallback (syncfusion-blazor.min.js:1)

    at e.blazorCallback (syncfusion-blazor.min.js:1)

    at e.notify (syncfusion-blazor.min.js:1)

    at r.e.trigger (syncfusion-blazor.min.js:1)

    at t.e.getAllData (grids-25ca01.min.js:1)

    at t.e.showDialog (grids-25ca01.min.js:1)

I can't  figure what is cousin this error.

I am going to try make sample with static data (my grid now getting data from ef )

Any idea what can cause this error when data grid has changed data-source

[Vignesh Natarajan]

Hi Admir, 

 

Greetings from Syncfusion support.  

 

Query: “My grid has implemented toolbar, when data source is changed grid  is going to rendering without toolbar.” 

 

We are able to reproduce the reported issue at our end while preparing a sample using your code example. In your code example you have defined the Toolbar template wrongly inside the GridTemplates. Hence on refreshing it is not rendered properly. Kindly define the SfToolbar directly inside SfGrid tag. It will be considered as Grid Toolbar. 

 

Please find the modified code example.  

 

<SfGrid TValue="Order" @ref="gridSmjena" ID="gridSmjena" Height="100%" DataSource="@Orders" Width="100%" 

           ShowColumnChooser="true" 

           AllowResizing="true" 

           AllowReordering="true" 

           AllowPaging="true" 

           AllowSorting="true" 

           AllowFiltering="true"> 

       <SfToolbar> 

           <ToolbarItems> 

               <ToolbarItem Type="ItemType.Input"> 

                   <Template> 

                       <SfDateRangePicker @bind-StartDate="@odDatuma" Format="dd.MM.yyyy" @bind-EndDate="@doDatuma" ShowClearButton="false" FirstDayOfWeek="1" Placeholder="Odaberite period"> 

 

                       </SfDateRangePicker> 

                   </Template> 

               </ToolbarItem> 

               <ToolbarItem Type="ItemType.Button"> 

                   <Template> 

                       <SfButton IconCss="fas fa-meteor" Disabled="@disabeldRefers" @onclick="osvjeziGrid">Osvježi</SfButton> 

                   </Template> 

               </ToolbarItem> 

               <ToolbarItem Type="ItemType.Button"> 

                   <Template> 

                       <SfDropDownButton IconCss="fas fa-filter" Content="Postavke"> 

                           <DropDownButtonEvents ItemSelected="PostavkeKliknute"></DropDownButtonEvents> 

                           <DropDownButtonItems> 

                               <DropDownButtonItem Id="1" Text="Odaberi kolone za prikaz"></DropDownButtonItem> 

                               <DropDownButtonItem Id="2" Text="Raširi kolone"></DropDownButtonItem> 

                           </DropDownButtonItems> 

                       </SfDropDownButton> 

                   </Template> 

               </ToolbarItem> 

               <ToolbarItem Type="ItemType.Button"> 

                   <Template> 

                       <SfDropDownButton IconCss="oi oi-random" Content="Operacija"> 

                           <DropDownButtonEvents ItemSelected="OperacijaKliknuta"></DropDownButtonEvents> 

                       </SfDropDownButton> 

                   </Template> 

               </ToolbarItem> 

           </ToolbarItems> 

       </SfToolbar> 

       <GridPageSettings PageCount="8"></GridPageSettings>        

       <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Excel"></GridFilterSettings> 

       <GridPageSettings PageSize="8"></GridPageSettings> 

       <GridColumns> 

           <GridColumn Field=@nameof(Order.Id) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

           <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn> 

           <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type=ColumnType.Date TextAlign="TextAlign.Right" Width="130"></GridColumn> 

           <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 

       </GridColumns> 

   </SfGrid> 

 

 

Please find the modified sample from below  

 

Sample: https://www.syncfusion.com/downloads/support/forum/153728/ze/BlazorApp1-36566822  

 

Refer our UG documentation for your reference 

 

https://blazor.syncfusion.com/documentation/datagrid/tool-bar/#custom-toolbar-with-dropdown-list 

Kindly get back to us if you have further queries. 

 

Regards, 

Vignesh Natarajan