Combining standsearch toolbar items with templated items

[Mark]

I can see how to use List<string> to assigned stanrd toolbar items, I can also use <EjsGrid><EjsToolBar><ToolBarItems><Template> to add custom toolbar items, but these appear on different toolbars  and looks untidy.

How can I add the standard toolbar items of Search, Edit etc. to the custom items defined using templates.

<EjsGrid @ref="@Grid" DataSource="@Messages" AllowPaging="true" AllowFiltering="true" AllowSorting="true" AllowMultiSorting="true" AllowGrouping="true" Toolbar=@Tools>

        <EjsToolbar>

            <ToolbarItems>

                <ToolbarItem Type="ItemType.Input">

                    <Template>

                        <div><strong>Start Date</strong></div>&nbsp;

                        <EjsDatePicker ID="fromDatePicker" TValue="DateTime" Width="150" @bind-Value="StartDate" Format="dd MMM yyyy">

                            <DatePickerEvents TValue="DateTime" ValueChange="DateChanged"></DatePickerEvents>

                        </EjsDatePicker>

                    </Template>

                </ToolbarItem>

                <ToolbarItem Type="ItemType.Input">

                    <Template>

                        &nbsp;&nbsp;

                        <div><strong>End Date</strong></div>&nbsp;

                        <EjsDatePicker TValue="DateTime" Width="150" @bind-Value="EndDate" Format="dd MMM yyyy">

                            <DatePickerEvents TValue="DateTime" ValueChange="DateChanged"></DatePickerEvents>

                        </EjsDatePicker>

                    </Template>

                </ToolbarItem>

                <ToolbarItem></ToolbarItem>

            </ToolbarItems>

        </EjsToolbar>

What I want to do is just add the standard Search and Edit toolbar items to this toolbar so they appear in the same toolbar.

Many thanks

[Renjith Singh Rajendran]

Hi Mark, 

Thanks for contacting Syncfusion support. 

We suggest you to add the customized toolbar items replicating our items(Edit and Search) from Grid’s default toolbar to the “ToolbarItem” of EjsToolbar. And handle their operations programmatically by using the Grid methods(StartEdit and Search). We have prepared a sample based on this scenario. Please download the sample form the link below, 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp11873655196 

 

 

    <EjsGrid @ref="GridInstance" AllowPaging="true" ShowColumnChooser="false" DataSource="@Employees" TValue="Employee" > 

        ... 

       <EjsToolbar> 

            <ToolbarItems> 

                <ChildContent> 

                    <ToolbarEvents Clicked="ToolbarClickHandler" /> 

                    ...                        

                    @*Edit Toolbar item*@ 

 

                    <ToolbarItem Type="@ItemType.Button" Text="Edit" TooltipText="Add Unit Conversion" Align="Syncfusion.EJ2.Blazor.Navigations.ItemAlign.Left"> 

                        <Template> 

                            <button class="e-tbar-btn e-tbtn-txt e-control e-btn e-lib" type="button" id="gridsdxdjohlei4g_edit" tabindex="-1" aria-label="Edit" style="width: auto;"> 

                                <span class="e-btn-icon e-edit e-icons e-icon-left"></span><span class="e-tbar-btn-text">Edit</span> 

                            </button> 

                        </Template> 

                    </ToolbarItem> 

 

                    @*Search Toolbar item*@ 

 

                    <ToolbarItem Type="ItemType.Input" Align="Syncfusion.EJ2.Blazor.Navigations.ItemAlign.Right"> 

                        <Template> 

                            @*Apply styles for EjsTextbox accordingly*@ 

                            <EjsTextBox ValueChange="SearchValueChange"></EjsTextBox> 

                            <span class="e-search-icon e-icons" /> 

                        </Template> 

                    </ToolbarItem> 

                </ChildContent> 

            </ToolbarItems> 

        </EjsToolbar> 

 

    </EjsGrid> 

@code{ 

    EjsGrid<Employee> GridInstance; 

    public bool DisableDeleteUnitConversion = true; 

    public List<Employee> Employees; 

    public void ToolbarClickHandler(ClickEventArgs args) 

    { 

        if(args.Item.Text == "Edit") 

        { 

            GridInstance.StartEdit();     //Start the edit operation on the selected row 

        } 

    } 

    public void SearchValueChange(ChangedEventArgs args) 

    { 

        GridInstance.Search(args.Value);       //programmatically search the value entered in the search text box 

    } 

    ... 

} 

 

 

And also we have other methods(DeleteRecord, EndEdit, CloseEdit, AddRecord) to perform Delete, Save/Update, Cancel, Add actions programmatically in Grid. You can add other default Grid toolbar items based on your needs. 

And while running the above sample you may face issue like “Need to click on the search textbox two times before apply focus for the search textbox ”. We have confirmed this as a defect and already logged a defect report for the same. The fix for this issue is scheduled to be rolled out in our upcoming Volume 1, 2020 release.   

  

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.   

Feedback Link : https://www.syncfusion.com/feedback/12423/toolbar-click-events-not-properly-works-while-focusing-input-elements  

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.