Trying to add custom button in grid toolbar error

[chris johansson]

I have a Grid where i'm using the standard buttons and attempting to add another button but i'm getting an error.  I'm trying to set the toolbar to this:  private List<Object> Toolbaritems = new List<Object>() { "Add", "Edit", "Delete", "Update", "Cancel", new ItemModel() { Text = "Click", TooltipText = "Click", PrefixIcon = "e-click", Id = "Click" } };

My Grid uses batch edit mode

Error: System.IndexOutOfRangeException: Index was outside the bounds of the array.

   at Syncfusion.Blazor.Grids.Internal.GridToolbar`1.<>c__DisplayClass22_0.<GetAttributes>b__2(String dItem)

   at System.Linq.Enumerable.Any[TSource](IEnumerable`1 source, Func`2 predicate)

   at Syncfusion.Blazor.Grids.Internal.GridToolbar`1.GetAttributes(Dictionary`2 DynamicDisableItems, IDictionary`2 _toolOptions, Object currentItem)

   at Syncfusion.Blazor.Grids.Internal.GridToolbar`1.<>c__DisplayClass0_0.<BuildRenderTree>b__1(RenderTreeBuilder __builder3)

   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)

   at Syncfusion.Blazor.Navigations.ToolbarItems.<BuildRenderTree>b__15_0(RenderTreeBuilder __builder2)

   at Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder.AddContent(Int32 sequence, RenderFragment fragment)

   at Microsoft.AspNetCore.Components.CascadingValue`1.Render(RenderTreeBuilder builder)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

 <SfGrid @ref="GridInstance" DataSource="@chemOrderLines" AllowPaging="false" AllowFiltering="true" AllowSorting="true" AllowMultiSorting="true" AllowResizing="true" Width="1200" AllowReordering="true" ShowColumnChooser="true" Toolbar="Toolbaritems" Height="600">

                   

                               

                                <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple" Mode="Syncfusion.Blazor.Grids.SelectionMode.Both"></GridSelectionSettings>

                                <GridEditSettings ShowConfirmDialog="false" AllowAdding="true" AllowEditing="true" AllowDeleting="true" AllowNextRowEdit="true" Mode="EditMode.Batch"></GridEditSettings>

                                <GridEvents  OnToolbarClick="ToolbarClickHandler" CellSelected="CellSelectHandler" RowSelecting="RowSelectingHandler" TValue="FDIChemicalOrderLine" OnBatchSave="OnSave" OnBatchAdd="OnAdd"></GridEvents>

                                <GridColumns>

                                    <GridColumn FilterSettings="@(new FilterSettings{ Operator = Syncfusion.Blazor.Operator.Contains })" Field=@nameof(FDIChemicalOrderLine.ID) IsPrimaryKey="true" ValidationRules="@(new ValidationRules { Required = true })" HeaderText="ID" Visible="false" TextAlign="TextAlign.Right" Type="ColumnType.Number" AutoFit="true"></GridColumn>

                                    <GridColumn FilterSettings="@(new FilterSettings{ Operator = Syncfusion.Blazor.Operator.Contains })" Field=@nameof(FDIChemicalOrderLine.SortOrder) HeaderText="Sort Order" TextAlign="TextAlign.Right" Type="ColumnType.Number" AutoFit="true"></GridColumn>

                                    <GridColumn FilterSettings="@(new FilterSettings{ Operator = Syncfusion.Blazor.Operator.Contains })" Field=@nameof(FDIChemicalOrderLine.FSBillingLocationId) HeaderText="Billing Location" AutoFit="true"> </GridColumn>

                                    <GridColumn FilterSettings="@(new FilterSettings{ Operator = Syncfusion.Blazor.Operator.Contains })" Field=@nameof(FDIChemicalOrderLine.FSDeliveryLocationId) HeaderText="Delivery Location" TextAlign="TextAlign.Right" EditType="EditType.DropDownEdit" Width="200">

                                        <EditTemplate>

                                            <SfComboBox @ref="comboboxLocationAddress" ID="FSDeliveryLocationId" TValue="string" TItem="FDILocationAddress" @bind-Value="(context as FDIChemicalOrderLine).FSDeliveryLocationId" Placeholder="e.g. 02-36-001-13W2" CssClass="e-multi-column" DataSource="@locationAddresses" AllowFiltering="true" PopupWidth="400px">

                                                <ComboBoxFieldSettings Text="locationAddress" Value="locationAddress"></ComboBoxFieldSettings>

                                                <ComboBoxTemplates TItem="FDILocationAddress">

                                                    <HeaderTemplate>

                                                        <table><tr><th class="e-text-center">Address</th></tr></table>

                                                    </HeaderTemplate>

                                                    <ItemTemplate Context="context2">

                                                        <table><tbody><tr><td class="e-text-center">@((context2 as FDILocationAddress).locationAddress)</td></tr> </tbody></table>

                                                    </ItemTemplate>

                                                </ComboBoxTemplates>

                                                <ComboBoxEvents TValue="string" TItem="FDILocationAddress" Filtering="onFilteringLocation" ValueChange="@filterLocationValueChange"></ComboBoxEvents>

                                            </SfComboBox>

                                        </EditTemplate>

                                    </GridColumn>

     </GridColumns>

                            </SfGrid>

[Renjith Singh Rajendran]

Hi Chris, 

Greetings from Syncfusion. 

We are able to reproduce the reported problem at our end. We have confirmed it as a bug and logged the defect report for the same “Exception throws while defining Custom toolbar items in Grid” . Thank you for taking the time to report this issue and helping us improve our product .Fix for the issue will be included in our weekly patch release which is expected to be rolled on or October 28, 2020. 

 

For your convenience, we have fixed the problem and prepared a custom patch in the mentioned version(18.3.0.42). You can resolve this problem by using the below patch. 

  

Kindly download the patch from below    

 

Patch: https://www.syncfusion.com/downloads/support/directtrac/general/ze/updatedPack-551224643-2067831744 

   

Steps to apply the patch.   

1. Download the custom patch into a folder.
2. Clear the Nuget cache.
3. Refer the custom Nuget into your application.

Kindly get back to us if you have further queries or if you are facing any difficulties in applying the above patch. 

 

Regards, 

Renjith Singh Rajendran 

[chris johansson]

Ok thanks, it seemed to work after i cleared the nuget cache.

Just wondering how do you get the Text = "Click", TooltipText = "Click", PrefixIcon = "e-click", Id = "Click" }

PrefixIcon to show up?  It doesn't show any icon just "Click"

The reason for using an additional button is that I want to "Cancel Line" cancel a specific line.  So since i'm using batch mode and if i click cancel it cancels all the changes. If i select a line and click cancel line, it will just cancel that line and not all the other changes. Not sure how this can work properly with batch mode.

[Renjith Singh Rajendran]

Hi Chris, 

Query 1 : PrefixIcon to show up?  It doesn't show any icon just "Click" 

We suggest you to ensure to add proper styles for the “e-click” class to achieve this requirement. Please refer the documentation below, 

https://blazor.syncfusion.com/documentation/datagrid/tool-bar/#built-in-and-custom-items-in-toolbar 

Please add the below styles in your application to display icon.  

<style> 

    .e-click::before { 

        content: '\e525'; 

    } 

</style> 

And also please refer the below documentation for the available icons. 

https://blazor.syncfusion.com/documentation/appearance/icons/ 

Query 2 : If i select a line and click cancel line, it will just cancel that line and not all the other changes 

Currently we don’t have inbuilt support to perform this action from our side. We have considered this requirement as a usability feature improvement and logged an improvement task “Provide support to cancel a single line batch changes in Grid” for the same. At the planning stage for every release cycle, we review all open features and identify features for implementation based on specific parameters including product vision and technological feasibility. It will be implemented in any of our upcoming releases.   

 

You can now track the current status of this feature request here.   

https://www.syncfusion.com/feedback/19069/provide-support-to-cancel-a-single-line-batch-changes-in-grid 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[chris johansson]

Thanks that would be a good feature for what we are trying to do.

Also I added the style and it doesn't show up. thats the interesting thing.

Attachment: Index_a33254d.zip

[Renjith Singh Rajendran]

Hi Chris, 

We have analyzed your shared codes. We suggest you to try by providing root path for the e-click css class in your application. Please try the below suggested code in your application. 

 

.e-grid .e-toolbar .e-toolbar-item .e-click::before { 

    content: '\e525'; 

} 

Please refer the screenshot below in which the icon is shown, 

 

Please try the above suggestion from your side, and if you still face difficulties, kindly share with us the following details for better assistance.  

1. Share the details of the Syncfusion css file you are using in your application.
2. Share the complete _Host.cshtml file.
3. Share the details of any custom css you are suing in your application.
4. Share the screenshot showing the toolbar item.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 

Renjith Singh Rajendran 

[chris johansson]

I tried that as well, didn't seem to work.

also i changed to:     https://cdn.syncfusion.com/blazor/18.3.42/styles/bootstrap4.css"  which is the latest version but not reflected in that attachment.
Attachment: Files_94926d91.zip

[Renjith Singh Rajendran]

Hi Chris, 

We suggest you to ensure to use only the icons available for the particular Syncfusion theme to display the icon in Syncfusion components. Please find the list of available icons for the corresponding themes from the link below, 

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

As the content “\e525” is not available for bootstrap4, its not displayed in Grid’s toolbar. If you change the theme from bootstrap4 to bootstrap, then the icon gets displayed fine in Grid’s toolbar. Please refer the code below, 

[_Host.cshtml] 

 

<head> 

    <meta charset="utf-8" /> 

    ... 

    <link rel='nofollow' href="https://cdn.syncfusion.com/blazor/18.3.42/styles/bootstrap.css" rel="stylesheet" /> 

</head> 

So we suggest you to ensure to use only the available icon when referring the corresponding theme in your application by referring the above documentation. Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran 

[chris johansson]

Thanks for all your help with all my questions.. this worked!

[Renjith Singh Rajendran]

Hi Chris, 

Thanks for your update. 

We are glad to hear that the reported problem has been resolved. Please get back to us if you need further assistance. 

Regards, 

Renjith R