Grid CustomAdaptor and CommandColumns

[Razvan]

Hi,

Let's say I have a Grid with a CustomAdaptor set as the adaptor. I also have two GridCommandColumns (Approve and Reject).

Is it possible to handle these commands in the adaptor? I.e.: if I press on the approve command button for a specific row I would like for it to automatically call a method in the adaptor that ends up going to the server.

Kind regards,

Razvan

[Rahul Narayanasamy]

Hi Razvan, 

Greetings from Syncfusion. 

Query: Grid CustomAdaptor and CommandColumns 

We have validated your query and you want to call the CustomAdaptor update method when clicking Command button(Approve). By default, while clicking the update button of command column, it will automatically call the Update method in CustomAdaptor. Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/160598/ze/SampleCM-1213372641  

 

<SfGrid TValue="Order" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true"> 

    <SfDataManager AdaptorInstance="@typeof(CustomAdaptor)" Adaptor="Adaptors.CustomAdaptor"></SfDataManager> 

    . . . 

    <GridColumns> 

        . . . 

        <GridColumn HeaderText="Manage Records" Width="150"> 

            <GridCommandColumns> 

                <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-edit", CssClass = "e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() { IconCss = "e-icons e-delete", CssClass = "e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() { Content = "Approve", IconCss = "e-icons e-update", CssClass = "e-flat" })"></GridCommandColumn> 

                <GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { Content = "Reject", IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn> 

            </GridCommandColumns> 

        </GridColumn> 

    </GridColumns> 

</SfGrid> 

If you are still facing the problem, then could you please  share the below details. It will be helpful to validate and provide a better solution.  

• Full Grid code snippets.
• Reproduce the problem in the provided sample and revert back to us.
• Share a simple sample that explaining your problem is possible.

Regards, 

Rahul 

 

[Stefan Limpert]

Hi there,

refering to the query above, i have some additional questions.

I have a grid with a generic custom Adaptor and Gridcommandcolums.

in my understanding the standard CommandButtons like 'Save' or 'Delete' calls the methods in my custom adapter wich works actually fine.

I'd like to extend this mechanism and want to create some custom commandbuttons like Restore [for Softdeleted entries] and Add [to avoid a ToolBar].

So 'Restore' and 'Add' should also call some methods in my Generic Custom Adaptor.

How can achieve this?

[index.razor]

<SfGrid TValue="ArtikelEinheitModel" Toolbar="@(new List<string>() {"Add"})" AllowPaging="false" >
                <GridEditSettings Mode="EditMode.Normal" AllowAdding="true" AllowDeleting="true" AllowEditing="true"></GridEditSettings>
                <GridEvents OnActionBegin="OnActionBeginEinheit" TValue="ArtikelEinheitModel"></GridEvents>
                <SfDataManager Adaptor="Adaptors.CustomAdaptor">
                    <CustomAdaptorComponent T="ArtikelEinheitModel" DataService="@ArtikelEinheitService"></CustomAdaptorComponent>
                </SfDataManager>
                <GridColumns>
                    <GridColumn Field=@nameof(ArtikelEinheitModel.Id) HeaderText="Id" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{ Required=true, Number=true})" TextAlign="TextAlign.Right" Width="40"></GridColumn>
                    <GridForeignColumn Field=@nameof(ArtikelEinheitModel.EinheitId) HeaderText="Einheit" ForeignKeyField="Id" ForeignKeyValue="Beschreibung" ForeignDataSource="@Einheiten" Width="150"></GridForeignColumn>
                    <GridColumn Field=@nameof(ArtikelEinheitModel.IsStandard) HeaderText="Standard" EditType="EditType.BooleanEdit" DisplayAsCheckBox="true"  TextAlign="TextAlign.Right" Width="40"></GridColumn>
                    <GridColumn HeaderText="Daten bearbeiten" Width="150">
                    <GridCommandColumns>
                        <GridCommandColumn Type="CommandButtonType.None" ButtonOption="@(new CommandButtonOptions() {Content="Restore",IconCss="e-icons e-person", CssClass="e-flat" })"></GridCommandColumn>
                        <GridCommandColumn Type="CommandButtonType.Edit" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-edit", CssClass="e-flat" })"></GridCommandColumn>
                        <GridCommandColumn Type="CommandButtonType.Delete" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-delete", CssClass="e-flat" })"></GridCommandColumn>
                        <GridCommandColumn Type="CommandButtonType.Save" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-save", CssClass="e-flat" })"></GridCommandColumn>
                        <GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() {IconCss="e-icons e-cancel-icon", CssClass="e-flat" })"></GridCommandColumn>
                    </GridCommandColumns>
                    </GridColumn>
                </GridColumns>
            </SfGrid>

[CustomAdaptor.razor]
@typeparam T where T : class, IDataModel, new()
@inherits DataAdaptor


<CascadingValue Value="@this">
    @ChildContent
</CascadingValue>


@code {
    [Parameter]
    [JsonIgnore]
    public RenderFragment ChildContent { get; set; }

    [Parameter]
    public List<T> Details { get; set; }
    [Parameter] public IGenericService<T> DataService { get; set; }
    [Parameter] public ApiSettingsDetails ReadUrlApi { get; set; }
    [Parameter] public Func<T,bool> DemoFilter { get; set; }

    // Performs data Read operation
    public override object Read(DataManagerRequest dm, string key = null)
    {
      //you know this code
    }
    public override async Task<object> ReadAsync(DataManagerRequest dm, string key = null)
    {

       var data = await DataService.GetListAsync(ReadUrlApi);
        IEnumerable<T> DataSource = (IEnumerable<T>)data;
        if (dm.Search != null && dm.Search.Count > 0)
        //you know also this code
        return dm.RequiresCounts ? new DataResult() { Result = DataSource, Count = count } : (object)DataSource;
    }
}

Regards

Stefan

[Rahul Narayanasamy]

Hi Stefan,

Thanks for the update.

You want to render the Add and Restore button as a custom command button instead of rendering in the toolbar. You can render the custom command buttons like below. While clicking the Add button you can call the AddRecordAsync method to render the add form. Also, we have implemented a custom (CustomRestoreMethod) a method in the CustomAdaptor component file(CustomAdaptor As a component). While clicking on the Restore button we have called the custom adaptor custom method. You can handle your custom operation from that method. Find the below code snippets and sample for your reference.

 

<SfGrid @ref="Grid" TValue="Order" ID="Grid" AllowSorting="true" AllowFiltering="true" AllowPaging="true">

    <SfDataManager Adaptor="Adaptors.CustomAdaptor">

        <CustomAdaptorComponent @ref="CustomAdpt"></CustomAdaptorComponent>

    </SfDataManager>

    <GridPageSettings PageSize="4"></GridPageSettings>

    <GridEvents CommandClicked="OnCommandClicked" TValue="Order"></GridEvents>

    <GridEditSettings AllowEditing="true" AllowDeleting="true" AllowAdding="true" Mode="@EditMode.Normal"></GridEditSettings>

    <GridColumns>

        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" IsPrimaryKey="true" TextAlign="@TextAlign.Center" Width="140"></GridColumn>

        <. . .

        <GridColumn HeaderText="Manage Records" Width="150">

            <GridCommandColumns>

                .. .

                <GridCommandColumn Type="CommandButtonType.Cancel" ButtonOption="@(new CommandButtonOptions() { Content = "Reject", IconCss = "e-icons e-cancel-icon", CssClass = "e-flat" })"></GridCommandColumn>

                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { Content = "Restore", CssClass = "e-flat" })"></GridCommandColumn>

                <GridCommandColumn ButtonOption="@(new CommandButtonOptions() { Content = "Add", CssClass = "e-flat" })"></GridCommandColumn>

            </GridCommandColumns>

        </GridColumn>

    </GridColumns>

</SfGrid>

 

@code{

    SfGrid<Order> Grid;

    CustomAdaptorComponent CustomAdpt;

    . ..

    public async Task OnCommandClicked(CommandClickEventArgs<Order> args)

    {

        if(args.CommandColumn.ButtonOption.Content == "Restore")

        {

            //if need you can pass any data and handle

            await CustomAdpt.CustomRestoreMethod();

        }

        if (args.CommandColumn.ButtonOption.Content == "Add")

        {

            await Grid.AddRecordAsync();

        }

    }

}

[CustomAdaptorComponent.razor]

 

<CascadingValue Value="@this">

    @ChildContent

</CascadingValue>

 

@code {

    [Parameter]

    [JsonIgnore]

    public RenderFragment ChildContent { get; set; }

 

    // Performs data Read operation

    . ..

 

    public async Task CustomRestoreMethod()

    {

        //here you can perform your operation

    }

}

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

Please let us know if you have any concerns.

Regards,

Rahul

[Stefan Limpert]

Thanks Rahul for your fast and expert help. It works.

just for my understanding:

in the example above i also use

<GridEvents CommandClicked="OnCommandClicked" OnActionBegin="OnActionBeginDoIt" TValue="Order"></GridEvents>

and i noticed that the "add" Button are firing this event after OnCommandClicked, but the "Restore" Button did'nt.

i think it's the Grid.AddRecordAsync();

So my question is: Is it possible to call the OnAction Events manually? in this case in the OnCommandClicked event?

Regards

Stefan

[Rahul Narayanasamy]

Hi Stefan,

Thanks for the update.

The OnActionBegin event is fired while clicking the Add command button is because we have called the default Grid operation(Add operation) by calling the AddRecordAsync method. But while clicking the other button(Restore), we have just called the custom method in the CustomAdaptor component. So in this case, the OnActionBegin event will not trigger because we have not called any default operation of the Grid. The Grid OnActionBegin event will be triggered while performing the default Grid operations. Also, it is not possible to manually trigger the Grid events externally.

Please let us know if you have any concerns.

Regards,

Rahul

[Stefan Limpert]

Hi Rahul,

thanks for the clarification, it helps me to understand the way it works better.

Regards

Stefan

[Rahul Narayanasamy]

Hi Stefan,

Thanks for the update.

Please get back to us if you need further assistance.

Regards,

Rahul