1. Home
  2. Forum
  3. Blazor
  4. How to use external control in Grid Toolbar

How to use external control in Grid Toolbar

I have used grid control with batch mode  for data entry purpose.There is some difficultlies for entering data in grid which is not user friendly to fast data entry.(Enter key Tab index navigation and selecting record in grid combobox).

So I am planning to use external controls (Textbox, combobox etc) for fast data entry with enter key navigation. 

So my original question is

1.How to place external control in grid toolbar 

2. External controls position  should be   same position of grid column 

For example 

Width of External controls should be same as grid column width and left and right margin should be same as grid column.

3.Need Enter key navigation for all external controls. 

4.When I press Enter key in last external control,the new row should be added in grid( AddRowasync method).

For example, 

The added value in grid should be taken from external control model.


Hope this question is clear.


Please help its my top most urgent task ,without the help of syncfusion support team it will be difficult to complete task.


Thanks and Awaiting for prompt reply...





9 Replies
RN Rahul Narayanasamy Syncfusion Team January 17, 2022 02:03 PM UTC

Hi KINS, 

Greetings from Syncfusion. 

We are currently checking the possibility to achieve your customized requirement at our end. We will update the further details within two business days(on or before January 19, 2022). Until then we appreciate your patience. 

Regards, 
Rahul 
 


KI KINS January 17, 2022 03:45 PM UTC

Ok thanks 

Awaiting for prompt reply 


RN Rahul Narayanasamy Syncfusion Team January 19, 2022 02:37 PM UTC

Hi KINS, 

Thanks for your patience. 

Based on your requirement, we have prepared a customized sample. Here, we have achieve your requirement by using Custom Toolbar. We have created a CustomToolbar component and within this component we have rendered the external controls(SfTextBox, SfNumericTextBox, SfDropDownList). After entering the data in those controls, we have added the entered values in the Grid using AddRecordAsync method of the Grid. Find the below code snippets and sample for your reference. 

[Index.razor] 
<SfGrid @ref="Grid" DataSource="@Orders" AllowPaging="true" Height="315"> 
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 
    <SfToolbar> 
        <ToolbarItems> 
            <ToolbarItem Type="ItemType.Input"> 
                <Template> 
                    <CustomToolbar></CustomToolbar> 
                </Template> 
            </ToolbarItem> 
        </ToolbarItems> 
    </SfToolbar> 
    <GridColumns> 
        . . . 
    </GridColumns> 
</SfGrid> 
 
@code{ 
    SfGrid<Order> Grid; 
    . . . 
} 
[CustomToolbar.razor] 
@using Syncfusion.Blazor.Grids 
@using Syncfusion.Blazor.DropDowns 
@using Syncfusion.Blazor.Inputs 
@using WebApplication1.Data 
 
 
 
<table> 
    <colgroup> 
        @*we suggest you to create and set the width based on your required number of columns and based on your column size*@ 
        <col style="width: 318px" /> 
        <col style="width: 326px" /> 
        <col style="width: 327px" /> 
        <col style="width: 406px" /> 
    </colgroup> 
    <tbody> 
        <tr> 
            <td> 
                <SfNumericTextBox @ref="IdRef" @bind-Value="@IdValue" TValue="int?"></SfNumericTextBox> 
            </td> 
            <td> 
                <SfTextBox @ref="NameRef" @bind-Value="@NameValue" Placeholder='Customer Name'></SfTextBox> 
            </td> 
            <td> 
                <SfNumericTextBox @ref="FreightRef" @bind-Value="@FreightValue" TValue="double?"></SfNumericTextBox> 
            </td> 
            <td> 
                <SfDropDownList @ref="CountryRef" TValue="string" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@CountryValue" DataSource="@Country"> 
                    <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings> 
                    <DropDownListEvents TItem="Countries" TValue="string" Blur="@BlurHandler"></DropDownListEvents> 
                </SfDropDownList> 
                @*add this invisible element to for moving back to first NumericTextBox*@ 
                <div class="form-row" style="width:0px;height:0px"> 
                    <div class="form-group col-md-12"> 
                        <label class="e-float-text e-label-top">Dummy</label> 
                        <input id="dummy" style="width:0px;height:0px;opacity:0" /> 
                    </div> 
                </div> 
 
            </td> 
        </tr> 
    </tbody> 
</table> 
 
 
 
@code { 
    SfNumericTextBox<int?> IdRef; 
    SfTextBox NameRef; 
    SfNumericTextBox<double?> FreightRef; 
    SfDropDownList<string, Countries> CountryRef; 
    int? IdValue { get; set; } 
    string NameValue { get; set; } = ""; 
    double? FreightValue { get; set; } = 0; 
    public string CountryValue; 
 
    [CascadingParameter] 
    public SfGrid<Order> Grid { get; set; } 
 
 
    . . . 
    private async Task BlurHandler(Object args) 
    { 
        await Grid.AddRecordAsync(new Order() { OrderID = IdValue, CustomerID = NameValue, Freight = FreightValue, ShipCountry = CountryValue }, 0); 
        IdValue = 0; 
        NameValue = ""; 
        FreightValue = 0; 
        CountryValue = ""; 
        StateHasChanged(); 
        await IdRef.FocusAsync();    //for focusing first numeric textbox (OrderID) 
    } 
} 
 



Please let us know if you have any concerns. 

Regards, 
Rahul 


KI KINS January 20, 2022 03:32 AM UTC

Thanks for support 

Regarding column width

It should be auto based on screen resolution .




KI KINS January 21, 2022 04:07 AM UTC

Please check below screencast for you reference. and also I need "enter key navigation " for focusing next control


https://www.screencast.com/t/E7bTe0lcX




RN Rahul Narayanasamy Syncfusion Team January 21, 2022 03:45 PM UTC

Hi KINS, 

Thanks for the update. 

Query: I need "enter key navigation " for focusing next control 

You want to navigate to next control in toolbar using Enter key. Here, we have modified the sample based on your requirement using onkeydown event and ValueChange event of the dropdown. Find the below code snippets and sample for your reference. 

 
<div> 
    <table> 
        . . . 
        <tbody> 
            <tr> 
                <td> 
                    <SfNumericTextBox @ref="IdRef" @bind-Value="@IdValue" @onkeydown="IdDownHandler" TValue="int?"></SfNumericTextBox> 
                </td> 
                <td> 
                    <SfTextBox @ref="NameRef" @bind-Value="@NameValue" @onkeydown="NameDownHandler" Placeholder='Customer Name'></SfTextBox> 
                </td> 
                <td> 
                    <SfNumericTextBox @ref="FreightRef" @bind-Value="@FreightValue" @onkeydown="FreightDownHandler" TValue="double?"></SfNumericTextBox> 
                </td> 
                <td> 
                    <SfDropDownList @ref="CountryRef" TValue="string" Placeholder="e.g. Australia" TItem="Countries" @bind-Value="@CountryValue" DataSource="@Country"> 
                        <DropDownListFieldSettings Value="Name"></DropDownListFieldSettings> 
                        <DropDownListEvents TItem="Countries" TValue="string" ValueChange="@ValueChangeHandler" Blur="@BlurHandler"></DropDownListEvents> 
                    </SfDropDownList> 
                    . . . 
 
                </td> 
            </tr> 
        </tbody> 
    </table> 
 
</div> 
 
 
@code { 
    SfNumericTextBox<int?> IdRef; 
    SfTextBox NameRef; 
    SfNumericTextBox<double?> FreightRef; 
    SfDropDownList<string, Countries> CountryRef; 
    int? IdValue { get; set; } 
    . ..  
    private async Task BlurHandler(Object args) 
    { 
        if(IdValue != 0 && IdValue != null){ 
            await Grid.AddRecordAsync(new Order() { OrderID = IdValue, CustomerID = NameValue, Freight = FreightValue, ShipCountry = CountryValue }, 0); 
            IdValue = 0; 
            NameValue = ""; 
            FreightValue = 0; 
            CountryValue = ""; 
        } 
    } 
    private async Task IdDownHandler(KeyboardEventArgs args) 
    { 
        if(args.Key == "Enter") 
        { 
            await NameRef.FocusAsync(); 
        } 
    } 
    private async Task NameDownHandler(KeyboardEventArgs args) 
    { 
        if (args.Key == "Enter") 
        { 
            await FreightRef.FocusAsync(); 
        } 
    } 
    private async Task FreightDownHandler(KeyboardEventArgs args) 
    { 
        if(args.Key == "Enter") 
        { 
            await CountryRef.FocusAsync(); 
        } 
    } 
    . . . 
    private async Task ValueChangeHandler(ChangeEventArgs<string, Countries> args) 
    { 
        await IdRef.FocusAsync();     //for focusing first numeric textbox (OrderID) 
    } 
} 



Query: regarding screen resolution requirement case 

We understood that you are facing some problem while changing the screen resolution in your system. But we could not able to find the exact problem currently you are facing at your end since the last portion of the video was not visible properly.  

So we are quite unclear about your requirement from the shared video demonstration. We have checked the problem by doing the same steps. But we could not find any difference while changing the screen resolution by doing the steps. Find the below video for your reference. 


So we need more details regarding this requirement. Could you please share the below details/ more details which will be helpful to validate and provide a better solution. 

  • Video demonstration which clearly shows your problem.
  • Share the exact problem currently you are facing.
  • Whether did you want the Grid to be responsive based on the browser resolution?
  • Share your exact requirement in detail.

Regards, 
Rahul 
 


KI KINS January 21, 2022 04:53 PM UTC

For screen resolution, I will check and get back to you

For enter key navigation inside the toolbar, Can I use below code ???

Please advise 

window.onFocus = (id) => { 
    var currInput = document.activeElement; 
    if (currInput.tagName.toLowerCase() == "input") { 
        var inputs = document.getElementsByTagName("input"); 
        var currInput = document.activeElement; 
        for (var i = 0; i < inputs.length; i++) { 
            var disabled = inputs[i + 1].hasAttribute("disabled"); 
            var readOnly = inputs[i + 1].hasAttribute("readonly"); 
            if (inputs[i] == currInput) { 
                i = (disabled || readOnly) ? (i + 1) : i; 
                var next = inputs[i + 1]; 
                if (next && next.focus) { 
                    next.focus(); 
                } 
                break; 
            } 
        } 
    } 
} 

KI KINS January 22, 2022 04:53 AM UTC

for screen resolution,please check below screen cast

https://www.screencast.com/t/T3IdYuKwjG



RN Rahul Narayanasamy Syncfusion Team January 24, 2022 01:54 PM UTC

Hi KINS, 

Sorry for the inconvenience. 

Previously we have provided solution as a workaround to achieve your requirement, since we do not have direct support. But we would like to inform you that mentioned requirement seems to be complex when combining this solution with other built in supported features like Column Resizing, Column Reorder etc. Because we will not able to align the rendered controls in toolbar with the Grid column width while changing the screen resolution / different browser resolution. Or while changing the column order/width.  

We have rendered maintained Grid component and toolbar as separately as a different table, it will be tedious or impossible to align the rendered controls in toolbar along with the GridColumns width. So it is not feasible to achieve this requirement with current architecture. 

Based on your case, you want display the blank add new row at the top of the grid content during grid initialization itself to add a new record easily like the below solution. Find the below documentation and demo link for your reference. 

https://help.syncfusion.com/js/grid/editing#render-with-blank-row-for-easy-add-new – add new row form will be displayed in Grid all the times.  

Could you please let us know whether you want to achieve this requirement at your end? Based on your confirmation we will check and update the further details. 

Regards, 
Rahul 


Loader.
Up arrow icon