Proper way to update changes made on data grid editing (Blazor)

[ZachMtech]

I am using Smart UI for the first time, and I want to update the Qty variable for a row with my database through my API when a value is changed in the data grid.

 

In the data grid events documentation I see that there is the OnEndEdit (method?) I am not sure how to call or use this feature. Ideally, I would like after editing a row. A function UpdateQtyOnHand(int x) to be called. That could take the datasource[x]  value then makes the API call to update it in the database.

To test how the OnEndEdit function work I tried this but nothing gets written to the console when I make a change.

public async Task OnEndEdit(Event ev)
{

GridFilterEventDetail filterEventDetail = ev["Detail"];
Console.WriteLine(filterEventDetail.Data[0].datafield.QtyOnHand);
}

So what is the best way to go about making an API call when an item gets changed?

[ZachMtech]

Full code here

@page "/InventoryGrid"
@inject ICommonRepository CommonRepo

<style>
    body,<br />
    html,<br />
    app {<br />
        height: 100%;<br />
    }</p>
<p>    app {<br />
        overflow: auto;<br />
    }</p>
<p>    .content {<br />
        height: calc(100% - 70px);<br />
    }<br />
    /* This is the CSS used in the demo */<br />
    smart-grid {<br />
        width: 100%;<br />
    }<br />
</style>

The filtering feature is enabled by using the <strong>filtering</strong> property. If the <strong>enabled</strong> sub-property is set to <strong>true</strong>,
the column's filtering menu is enabled. Filter Menu displays Inputs, Numeric Inputs or Date Pickers depending on the column's type. The column's <strong>allowFilter</strong>
determines whether a column is filterable. The Grid has options to customize the visibility of filter icons, filter column background, custom filter icons, enabled/disable filter menu animations.

@if (dataRecords == null)
{

}
else
{

&nbsp;

<button>Change filter</button>

}

@code {
public bool HideGrid = false;
string balanceTemplate = "#balanceTemplate";
GridAppearance appearance = new GridAppearance()
{
AlternationCount = 2,
ShowColumnFilterButton = true,
AutoShowColumnFilterButton = false
};
GridSorting sorting = new GridSorting()
{
Enabled = true,
Mode = GridSortingMode.One
};
GridFiltering filtering = new GridFiltering()
{
Enabled = true,
Filter = new string[][]
{

}
};

GridEditing editing = new GridEditing()
{
Enabled = true,
Mode = GridEditingMode.Row,
Action = GridEditingAction.DoubleClick,
Dialog = new Dialog() { Enabled = true },
CommandColumn = new GridEditingCommandColumn()
{
Visible = true,
Position = Position.Far
}

};
private List dataRecords;
protected override async Task OnInitializedAsync()
{
base.OnInitialized();
dataRecords = await CommonRepo.GetAllItemBins();
}
public async Task ChangeFilter()
{
filtering.Filter = new string[][]
{
new string[] { "Item", "contains 50_Bail" },

};
}
public async Task OnEndEdit(Event ev)
{

GridFilterEventDetail filterEventDetail = ev["Detail"];
Console.WriteLine(filterEventDetail.Data[0].datafield.QtyOnHand);
}
}

&nbsp;
<div style="width: 100%; height: 100%;">
<div>
<div style="padding-left: 4px; color: green;">{{value::}}</div>
</div>
<div>
<div style="padding-left: 4px; color: orange;">{{value::}}</div>
</div>
<div>
<div style="padding-left: 4px; color: red;">{{value::}}</div>
</div>
<div>
<div style="padding-left: 4px; color: red;">{{value::}}</div>
</div>
</div>

[admin]

Hi and thanks for trying our Blazor DataGrid,

I prepared a sample which shows how to use the Editing events.

@page "/grid-editing-events"

@using Smart.Blazor.Demos.Data
@using System.Text.Json;
@using System.Text.Json.Serialization;
@inject RandomDataService dataService

<style>
    body,
    html,
    app {
        height: 100%;
    }

    app {
        overflow: auto;
    }

    .content {
        height: calc(100% - 70px);
    }

    /* This is the CSS used in the demo */
    @@media only screen and (max-width: 700px) {
        smart-grid {
            width: 100%;
        }
    }
</style>
<Example Name="Grid">
    <h1>Grid Cells Editing Events</h1>
    <p>
        Click on any cell to begin edit its value. To confirm the changes, press 'Enter' or click on another cell or outside the Grid. To cancel the changes, press 'Escape'.
    </p>

    @if (dataRecords == null)
    {
        <p><em>Loading...</em></p>
    }
    else
    {
        <Grid @ref="grid" OnBeginEdit="BeginEditHandler" OnEndEdit="EndEditHandler" DataSource="dataRecords" Editing="@editing">
            <Columns>
                <Column DataField="FirstName" Label="First Name"></Column>
                <Column DataField="LastName" Label="Last Name"></Column>
                <Column DataField="ProductName" Label="Product"></Column>
                <Column DataField="Expired" Label="Expired" DataType="boolean" Template="@checkBoxEditor" Editor="@checkBoxEditor"></Column>
                <Column DataField="Quantity" Label="Quantity" DataType="number" Editor="@numberInputEditor" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right"></Column>
                <Column DataField="Price" Label="Unit Price" DataType="number" Editor="@numberInputEditor" Align="HorizontalAlignment.Right" CellsAlign="HorizontalAlignment.Right" CellsFormat="c2"></Column>
            </Columns>
        </Grid>
    }
</Example>

@code {
    private string checkBoxEditor = "checkBox";
    private string numberInputEditor = "numberInput";
    Grid grid;

    GridEditing editing = new GridEditing()
    {
        Enabled = true,
        Mode = GridEditingMode.Cell
    };

    private List<DataRecord> dataRecords;

    async void EndEditHandler(Event args)
    {
        GridEndEditEventDetail detail = args["Detail"] as GridEndEditEventDetail;

        long rowId = detail.Row;
        string dataField = detail.Column;
        object value = await grid.GetCellValue(rowId, dataField);

        Console.WriteLine(value);
    }

    void BeginEditHandler(Event args)
    {
        GridBeginEditEventDetail detail = args["Detail"] as GridBeginEditEventDetail;
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        dataRecords = dataService.GenerateData(1000);
    }
}

Hope this helps.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[ZachMtech]

It did!

So now I have the method That after an edit will be called.
The Grid’s Data Source is a List<ItemBins> dataSource

When I use the debugger I see that the GetRowData() will return a System.Text.Json.JsonElement
Is there a built in feature grab these Rows as “ItemBins”?
Or do I need to convert from JSON back into the object class?

[admin]

Hi,

At present there is currently no such built in method in our blazor datagrid, but we will consider adding it for the upcoming versions. It will be helpful feature.

Best regards,
Peter Stoev

Smart UI Team
https://www.htmlelements.com/

[Author]

Posts