Grid Invetory entry

[pradeep]

I used the same code in Data Grid ap.net to use Datagrid. I'd like the same functionality in my Blazor application as well.

Do you have any direct sample code?

sample asp.net code bellow

<div class="control-group">

<asp:GridView ID="gv" runat="server" CssClass="table table-condensed table-bordered no-margin CTRL-ALIGN" TabIndex="-1"

SkinID="gs" AutoGenerateColumns="False"

OnRowDataBound="gvFX_RowDataBound" OnRowDeleting="gvFX_RowDeleting">

<Columns>

<asp:TemplateField HeaderText="SlNo" Visible="False">

<ItemTemplate>

<asp:Label ID="lSlNo" runat="server" Text='<%# Bind("SlNo") %>' Visible="false"></asp:Label>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Type" ItemStyle-Width="9%">

<ItemTemplate>

<asp:TextBox runat="server" ReadOnly="false" ID="dType" autocomplete="off" OnTextChanged="dType_TextChanged" attr-postback="true"

attr-requestType="FxBuySell" CssClass="Type autosuggest autosuggestBG" attr-curhdnID="lType" attr-relatedID="" Text='<%# Bind("TypeText") %>'

Width="80%" onchange="javascript:changeColor(this,'EN')"></asp:TextBox>

<input type="hidden" id="lType" runat="server" class="lType" value='<%# Bind("Type") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Currency" ItemStyle-CssClass="CTRL-ALIGN" ItemStyle-Width="10%">

<ItemTemplate>

<asp:TextBox ID="tCur" runat="server" Style="z-index: 10000;" Text='<%# Bind("Currency") %>' AutoComplete="off"

attr-requestType="FXCurrencyAll" CssClass="autosuggest autosuggestBG FXCurrency autoselect" attr-relatedID=""

onBlur="javascript:changeCurrency(this, 'EN')"></asp:TextBox>

<input type="hidden" runat="server" value='<%# DataBinder.Eval(Container.DataItem,"CurCode").ToString() %>' id="hCur" />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Currency">

<ItemTemplate>

<span class="viewDetails hvr" style="cursor: pointer;">

<asp:Label ID="CurCode" CssClass="st" runat="server"><%# DataBinder.Eval(Container.DataItem,"CurCode").ToString() %></asp:Label>

</span>

<%-- <a rel='nofollow' href="#" id="aCur" tabindex="-1" runat="server"><%# DataBinder.Eval(Container.DataItem,"CurCode").ToString() %></a>--%>

<input type="hidden" id="hCr" runat="server" value='<%# Bind("Currency") %>' />

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Avg Rate" Visible="False">

<ItemTemplate>

<asp:TextBox ID="tAvgRt" runat="server" autocomplete="off" BorderStyle="None" Text='<%# Bind("AVGRATE") %>' CssClass="pRAmt"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="FCY Amount" ItemStyle-Width="15%">

<ItemTemplate>

<asp:TextBox ID="tFxAmt" runat="server" Text='<%# Bind("FxAmt") %>' AutoPostBack="True"

onkeypress=" javascript:return NumberKeywithDot(this,event)"

CssClass="right" OnTextChanged="tFX_TextChanged"

autocomplete="off" Width="90%"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Rate" ItemStyle-Width="13%">

<ItemTemplate>

<asp:TextBox ID="tRate" runat="server" AutoPostBack="True" autocomplete="off" Text='<%# Bind("Rate") %>'

onkeypress=" javascript:return NumberKeywithDot(this, event)" OnTextChanged="tRate_TextChanged" CssClass="right" Width="80%"></asp:TextBox>

<asp:HiddenField ID="tMinRate" runat="server" Visible="true" Value='<%# Bind("Min") %>'></asp:HiddenField>

<asp:HiddenField ID="tMaxRate" runat="server" Visible="true" Value='<%# Bind("Max") %>'></asp:HiddenField>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Div.Rate" ItemStyle-Width="12%">

<ItemTemplate>

<asp:TextBox ID="lDRate" runat="server" Text='<%# Bind("DRate") %>' CssClass="pRAmtReadonly right" ForeColor="Purple"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Min-Max Rate" ItemStyle-Width="12%">

<ItemTemplate>

<asp:TextBox ID="lMinMax" runat="server" Text='<%# Bind("MinMax") %>' CssClass="pRAmtReadonly" Width="80%"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="Sp Rate" Visible="False" ItemStyle-Width="10%">

<ItemTemplate>

<asp:TextBox ID="tSpRate" runat="server" Text='<%# Bind("SPRate") %>' autocomplete="off"

OnTextChanged="tSpRate_TextChanged"

AutoPostBack="True" Width="100%" CssClass="right"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField HeaderText="LCY Amount" ItemStyle-Width="15%">

<ItemTemplate>

<asp:TextBox ID="tEqAmt" runat="server" Text='<%# Bind("LocAmt") %>' AutoPostBack="True"

onkeypress=" javascript:return NumberKeywithDot(this, event)" CssClass="right"

autocomplete="off" Width="90%" OnTextChanged="tEqAmt_TextChanged"></asp:TextBox>

</ItemTemplate>

</asp:TemplateField>

<asp:TemplateField>

<ItemTemplate>

<asp:CheckBox ID="chkStatus" runat="server" AutoPostBack="false" Checked="false" Text="" />

</ItemTemplate>

</asp:TemplateField>

<asp:CommandField ShowDeleteButton="True" HeaderText="Action" ItemStyle-Width="5%"></asp:CommandField>

</Columns>

</asp:GridView>

</div>

Attachment: INVENTRY_ENTRY__a4451899.rar

[Rahul Narayanasamy]

Hi Pradeep, 

Greetings from Syncfusion. 

You want to create and render the Grid in Blazor for your shared codes. We could see that you have rendered some other controls in  grid column template and rendered command column(delete). You can achieve your requirement by using Column Template and command column in the grid. Find the below documentation links for your reference. 

Reference: 

https://blazor.syncfusion.com/documentation/datagrid/column-template  

https://blazor.syncfusion.com/documentation/datagrid/editing#command-column 

https://blazor.syncfusion.com/documentation/datagrid/columns#render-boolean-values-as-checkbox  

We have prepared a simple sample based on your requirement. Find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/forum/171614/ze/BlazorApp31366460348 

Please let us know if you have any concerns. 

Regards, 

Rahul