Hello
I have a RadGrid ("rgPart") with Insert, Edit and Delete implemented on it and fully functional.
I have been trying to move those commands to modals independent from the radgrid, so far I have been able to implement modals for Insert and Delete, but Im having problems with showing the information of the radgrid into de Edit modal textboxes.
Anyone can help me with that?
RadGrid Code:
<asp:ImageButton ID="btnInsertar" runat="server" OnClick="btnInsertar_Click" CommandName="InitInsert" ImageUrl="~/images/add.png" />
<asp:UpdatePanel ID="upPart" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<telerik:RadGrid ID="rgPart" runat="server" GroupingSettings-CaseSensitive="false" AllowPaging="True" RenderMode="Lightweight"
AllowSorting="true" AllowFilteringByColumn="True" PageSize="10 " OnNeedDataSource="rgPart_NeedDataSource" OnItemCommand="ItemCommand" OnItemDataBound="rgPart_ItemDataBound"
CssClass="RadGrid_Silk" EnableHeaderContextMenu="true" GridLines="Horizontal" Width="100%" AllowAutomaticDeletes="True" AllowAutomaticInserts="False" AllowAutomaticUpdates="False">
<HeaderContextMenu Enabled="false"></HeaderContextMenu>
<MasterTableView AutoGenerateColumns="false" DataKeyNames="IdPartNumber" ItemStyle-HorizontalAlign="Center" AlternatingItemStyle-HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" CommandItemDisplay="Top" NoMasterRecordsText="<%$ Resources:Language, lbl_tablaVacia %>">
<CommandItemSettings AddNewRecordImageUrl="~/images/add.png" AddNewRecordText="" RefreshText="<%$ Resources:Language, lbl_actualizar %>"/>
<Columns>
<telerik:GridBoundColumn DataField="IdPartNumber" HeaderText="ID" ReadOnly="true" Display="false" AutoPostBackOnFilter="true" CurrentFilterFunction="contains" ShowFilterIcon="false" FilterControlWidth="100%" HeaderStyle-HorizontalAlign="Center" ></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Part" HeaderText="<%$ Resources:Language, lbl_rg_part %>" Display="true" AutoPostBackOnFilter="true" CurrentFilterFunction="contains" ShowFilterIcon="false" FilterControlWidth="100%" HeaderStyle-HorizontalAlign="Center"></telerik:GridBoundColumn>
<telerik:GridEditCommandColumn UniqueName="EditColumn" CancelText="Cancel" UpdateText="Update" InsertText="Insert" EditText="Edit" EditFormColumnIndex="3" ButtonType="ImageButton" EditImageUrl="~/images/edit.png">
</telerik:GridEditCommandColumn>
<telerik:GridTemplateColumn DataField="" HeaderText="" HeaderStyle-Width="3%" AllowFiltering="false">
<ItemTemplate>
<asp:ImageButton ID="imgEditar" runat="server" CausesValidation="False" CommandArgument='<%# Eval("IdPartNumber") %>' CommandName="Editar" ImageUrl="~/images/edit.png" ItemStyle-Wrap="True"
OnClientClick="btnEditar_Click"/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="3%" />
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="" HeaderText="" HeaderStyle-Width="3%" AllowFiltering="false">
<ItemTemplate>
<asp:ImageButton ID="imgEliminar" runat="server" CausesValidation="False" CommandArgument='<%# Eval("IdPartNumber") %>' CommandName="Delete" ImageUrl="~/images/delete.png" Width="30px" Height="30px" ItemStyle-Wrap="True" ToolTip="<%$ Resources:Language, tt_eliminar %>"
OnClientClick="javascript:if(!confirm('Eliminar/Delete')){return false;}"/>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" Width="3%" />
</telerik:GridTemplateColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</ContentTemplate>
</asp:UpdatePanel>
Modal Insert Code
<div class="modal fade" id="mdlPartInsert" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body text-center">
<div class="row">
<asp:Label for="txtIdpn" CssClass="col-12 text-left lbl_form" ID="Label1" runat="server" Text="<%$ Resources:Language, lbl_rg_part%>" ForeColor="Black"></asp:Label>
<div class="col-12 text-left">
<asp:TextBox ID="txtIdpn" runat="server" CssClass="form-control form-control-sm"></asp:TextBox>
</div>
</div>
<div class="row">
<asp:Label for="txtPn" CssClass="col-12 text-left lbl_form" ID="Label3" runat="server" Text="<%$ Resources:Language, lbl_rg_pn %>" ForeColor="Black"></asp:Label>
<div class="col-12 text-left">
<asp:TextBox ID="txtPn" runat="server" CssClass="form-control form-control-sm"></asp:TextBox>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnAutorizar" CssClass="btn btn-info btn-sm" runat="server" Text="<%$ Resources:Language, btn_Autorizar %>" OnClick="btnAutorizar_OnClick" />
<asp:Button ID="btnCancelar" CssClass="btn btn-danger btn-sm" runat="server" Text="<%$ Resources:Language, btn_Cancelar %>" OnClick="btnCancelar_OnClick" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Modal Edit Code
<div class="modal fade" id="mdlPartEdit" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<asp:UpdatePanel ID="UpdatePanel2" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-body text-center">
<div class="row">
<asp:Label for="editIdpn" CssClass="col-12 text-left lbl_form" ID="Label7" runat="server" Text="<%$ Resources:Language, lbl_rg_part%>" ForeColor="Black"></asp:Label>
<div class="col-12 text-left">
<asp:TextBox ID="editIdpn" runat="server" CssClass="form-control form-control-sm"></asp:TextBox>
</div>
</div>
<div class="row">
<asp:Label for="editPn" CssClass="col-12 text-left lbl_form" ID="Label8" runat="server" Text="<%$ Resources:Language, lbl_rg_pn %>" ForeColor="Black"></asp:Label>
<div class="col-12 text-left">
<asp:TextBox ID="editPn" runat="server" CssClass="form-control form-control-sm"></asp:TextBox>
</div>
</div>
<div class="modal-footer">
<asp:Button ID="btnMdlEditar" CssClass="btn btn-info btn-sm" runat="server" Text="<%$ Resources:Language, btn_Autorizar %>" OnClick="btnMdlEditar_OnClick"/>
<asp:Button ID="btnCancelarEditar" CssClass="btn btn-danger btn-sm" runat="server" Text="<%$ Resources:Language, btn_Cancelar %>" OnClick="btnCancelar_OnClick" />
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Modal Delete Code
<div class="modal fade" id="mdlPartDelete" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<asp:UpdatePanel ID="UpdatePanel3" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<div class="modal-content">
<div class="modal-header">
</div>
<div class="modal-footer">
<asp:Button ID="btnMdlDelete" CssClass="btn btn-info btn-sm" runat="server" Text="<%$ Resources:Language, btn_Autorizar %>" OnClick="btnMdlDelete_Click" CommandName="MdlDelete" CommandArgument='<%# Eval("IdIdPartNumber") %>'/>
<asp:Button ID="btnCancelarDelete" CssClass="btn btn-danger btn-sm" runat="server" Text="<%$ Resources:Language, btn_Cancelar %>" OnClick="btnMdlDelete_Click" CommandName="MdlDelCancel"/>
</div>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
Behind code
protected void rgPart_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
try
{
this.rgPart.DataSource = CDatos.SP_PeticionesAlmacen.SP_ObtenerPartNumbers();
this.upPart.Update();
}
catch (Exception ex) { this.ShowMessage("Err. load grid rgPart." + ex.Message, "danger"); }
}
protected void btnCancelar_OnClick(object sender, EventArgs e)
{
this.CloseModal("mdlPartInsert");
this.CloseModal("mdlPartEdit");
}
protected void ItemCommand(object source, GridCommandEventArgs e)
{
try
{
int IdPartNumber;
int.TryParse(e.CommandArgument.ToString(), out IdPartNumber);
if (e.CommandName.Equals("Delete"))
{
this.OpenModal("mdlPartDelete");
txtId.Text = IdPartNumber.ToString();
}
if (e.CommandName.Equals("InitInsert"))
{
this.OpenModal("mdlPartInsert");
}
else if (e.CommandName.Equals("Update"))
{
int.TryParse(((GridEditFormItem)e.Item).GetDataKeyValue("IdPartNumber").ToString(), out IdPartNumber);
this.rgNotas_ItemUpdated(IdPartNumber, (GridEditFormItem)e.Item);
}
else if (e.CommandName.Equals("Editar"))
{
this.OpenModal("mdlPartEdit");
txtId.Text = IdPartNumber.ToString();
int.TryParse(((GridEditFormItem)e.Item).GetDataKeyValue("IdPartNumber").ToString(), out IdPartNumber);
}
else if (e.CommandName.Equals("MdlDelete"))
{
this.eliminaPart(IdPartNumber);
}
}
catch (Exception ex) { this.ShowMessage("Err. grid rgPart." + ex.Message, "danger"); }
}
protected void btnInsertar_Click(object sender, EventArgs e)
{
this.OpenModal("mdlPartInsert");
}
protected void btnAutorizar_OnClick(object sender, EventArgs e)
{
var part = txtPart.Text;
try
{
var id = CDatos.DHerramientas.InsertPart(txtpart.Text);
this.upDatos.Update();
this.ShowMessage(Resources.Language.mess_insert, "success");
}
catch (Exception ex){this.ShowMessage(ex.Message, "danger"); }
this.CloseModal("mdlPartInsert");
}
protected void btnEliminar_Click(object sender, ImageClickEventArgs e)
{
this.OpenModal("mdlPartDelete");
}
protected void btnMdlDelete_Click(object sender, EventArgs e)
{
Button btn = (Button)sender;
switch (btn.CommandName)
{
case "MdlDelete":
eliminaPart(int.Parse(txtId.Text));
break;
case "MdlDelCancel":
this.CloseModal("mdlPartDelete");
break;
}
}
private void eliminaPart(int IdPartNumber)
{
try
{
Boolean eliminar = CDatos.DHerramientas.DeletePart(IdPartNumber);
rgPart.Rebind();
this.upDatos.Update();
this.ShowMessage(Resources.Language.mess_delete, "success");
}
catch (Exception ex) { this.ShowMessage(ex.Message, "danger"); }
this.CloseModal("mdlPartDelete");
}
private void rgPart_ItemUpdated(int IdPartNumber, GridEditFormItem editar)
{
var part = ((TextBox)editar["Part"].Controls[0]).Text;
try
{
var id = CDatos.DPartNumbers.UpdatePartNumbers(IdPartNumber, part);
this.upDatos.Update();
this.ShowMessage(Resources.Language.mess_update, "success");
}
catch (Exception ex) { this.ShowMessage(ex.Message, "danger"); }
}
Modal Edit method is not implemented yet, just the Edit method from the Grid, what I need to do is to get the data from the grid into the textbox of the modal
1 Answer, 1 is accepted
Hi,
Server Bind() expressions such as DataBinder.Eval("SomeField") or just "Eval("SomeField")" and also "Bind("SomeField")", will not work, if the control using the expression is not inside a Binding container like a Template.
Although the controls are in an UpdatePanel's content template, the Data is not bound to it, but to RadGrid. With that said, these controls must be in a Template in RadGrid in order to evaluate any expression and fetch the affected values accordingly.
In your case, however, you will need to extract the values of the current DataItem that you want to edit and pass it to the Custom Modals you have.
Here are a few articles that will provide you with information on accessing items, cells, values, capture commands, and more. Once you get familiar with them, you'll understand how to implement the scenario you have described.
- Client-Side Programming
- Accessing Values and Controls
- ItemCommand Server-Event
- OnCommand - Client-Event
- Grid - Manual CRUD Operations
- Grid - Window Editing
- Grid - Edit Form Types
- Grid - Form Template Edit Form
Kind regards,
Attila Antal
Progress Telerik