TelerikDeveloper.com

TelerikDeveloper.com

sgray128 7/20/2016 1:11:16 PM

RadWindow attached to a RadGrid as a modal popup

This is a complete working example of how to code a RadWindow that is attached to a RadGrid. Clicking on a link in the grid row will open a popup form that allows the data to be edited, clicking update will update the underlying data table and update the grid using AJAX.

We use stored procedures for data access, if you're not comfortable with that you'll want to change that.

As with all our code, this is a 'minimum needed to get it working example. The first page is in a Master Page, you'll need to provide that.



So, 4 sets of code. The aspx page for the first page:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="GridWithPopupToAddALine.aspx.vb" Inherits="TEMPLATE_GridWithPopupToAddALine" %>
 
<asp:Content ID="Content1" ContentPlaceHolderID="header" Runat="Server">
<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
 
        <script type="text/javascript">
            function ShowEditForm(locncode, rowIndex) {
                var grid = $find("<%= RadGrid1.ClientID %>");
  
                var rowControl = grid.get_masterTableView().get_dataItems()[rowIndex].get_element();
                grid.get_masterTableView().selectItem(rowControl, true);
  
                window.radopen("GridWithPopupToAddALine2.aspx?locncode=" + locncode, "UserListDialog");
                return false;
            }
            function ShowInsertForm() {
                window.radopen("GridWithPopupToAddALine2.aspx", "UserListDialog");
                return false;
            }
            function refreshGrid(arg) {
                if (!arg) {
                    $find("<%= RadAjaxPanel1.ClientID %>").ajaxRequest("Rebind");
                }
                else {
                    $find("<%= RadAjaxPanel1.ClientID %>").ajaxRequest("RebindAndNavigate");
                }
            }
            function RowDblClick(sender, eventArgs) {
                window.radopen("GridWithPopupToAddALine2.aspx?locncode=" + eventArgs.getDataKeyValue("locncode"), "UserListDialog");
            }
        </script>
    </telerik:RadCodeBlock>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 
Grid shows holds on an order <br />
Button will add a line to the grid via a popup form
    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" >
 
    <telerik:RadAjaxLoadingPanel runat="server" ID="gridLoadingPanel"></telerik:RadAjaxLoadingPanel>
 
        <telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="false" Width="600px" CssClass="grid" >
            <MasterTableView DataKeyNames="locncode"  >
                <Columns>
                    <telerik:GridTemplateColumn UniqueName="TemplateEditColumn">
                        <ItemTemplate>
                            <asp:HyperLink ID="EditLink" runat="server" Text="Edit"></asp:HyperLink>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="locncode" HeaderText="locncode" ReadOnly="true"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="locndscr" HeaderText="locndscr" ReadOnly="true"></telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="address3" HeaderText="address3" ReadOnly="true"></telerik:GridBoundColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>
 
        <telerik:RadWindowManager RenderMode="Lightweight" ID="RadWindowManager1" runat="server">
            <Windows>
                <telerik:RadWindow RenderMode="Lightweight" ID="UserListDialog" runat="server" Title="Editing record" Height="300px"
                    Width="380px" Left="150px" ReloadOnShow="true" ShowContentDuringLoad="false"
                    Modal="true">
                </telerik:RadWindow>
            </Windows>
        </telerik:RadWindowManager>
 
    </telerik:RadAjaxPanel>
 
</asp:Content>

And the associated Code Behind:

Imports Telerik.Web.UI
 
Partial Class TEMPLATE_GridWithPopupToAddALine
    Inherits InheritedPage
 
 
    Private Sub TEMPLATE_GridWithPopupToAddALine_Load(sender As Object, e As EventArgs) Handles Me.Load
 
    End Sub
    Private Sub RadGrid1_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource
        Me.RadGrid1.DataSource = DynData.SPs.FP_IV40700_SEL(appuser.database).getTable
    End Sub
 
    Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles RadGrid1.ItemCreated
        If TypeOf e.Item Is GridDataItem Then
            Dim editLink As HyperLink = DirectCast(e.Item.FindControl("EditLink"), HyperLink)
            editLink.Attributes("href") = "javascript:void(0);"
            Dim strLocactionCode As String = e.Item.OwnerTableView.DataKeyValues(e.Item.ItemIndex)("locncode")
            editLink.Attributes("onclick") = [String].Format("return ShowEditForm('{0}','{1}');", strLocactionCode, e.Item.ItemIndex)
        End If
 
    End Sub
 
    Private Sub RadGrid1_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles RadGrid1.ItemDataBound
        If TypeOf e.Item Is GridDataItem Then
            Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)
            Dim editLink As HyperLink = DirectCast(e.Item.FindControl("EditLink"), HyperLink)
 
            If dataItem("locncode").Text = "Total" Then
                editLink.Visible = False
            Else
                editLink.Visible = True
            End If
 
        End If
    End Sub
 
    Public Sub RadAjaxPanel1_AjaxRequest(sender As Object, e As AjaxRequestEventArgs) Handles RadAjaxPanel1.AjaxRequest
        If e.Argument = "Rebind" Then
            'RadGrid1.MasterTableView.SortExpressions.Clear()
            'RadGrid1.MasterTableView.GroupByExpressions.Clear()
            RadGrid1.Rebind()
        ElseIf e.Argument = "RebindAndNavigate" Then
            'RadGrid1.MasterTableView.SortExpressions.Clear()
            'RadGrid1.MasterTableView.GroupByExpressions.Clear()
            'RadGrid1.MasterTableView.CurrentPageIndex = RadGrid1.MasterTableView.PageCount - 1
            RadGrid1.Rebind()
        End If
    End Sub
End Class

The aspx for the popup form:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="GridWithPopupToAddALine2.aspx.vb" Inherits="TEMPLATE_GridWithPopupToAddALine2" %>
 
<!DOCTYPE html>
 
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <script type="text/javascript">
            function CloseAndRebind(args)
            {
                GetRadWindow().BrowserWindow.refreshGrid(args);
                GetRadWindow().close();
            }
  
            function GetRadWindow()
            {
                var oWindow = null;
                if (window.radWindow) oWindow = window.radWindow; //Will work in Moz in all cases, including clasic dialog
                else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow; //IE (and Moz as well)
  
                return oWindow;
            }
  
            function CancelEdit()
            {
                GetRadWindow().close();
            }
        </script>
  
        <asp:ScriptManager ID="ScriptManager2" runat="server" />
  
        <telerik:RadFormDecorator RenderMode="Lightweight" ID="RadFormDecorator1" runat="server" Skin="Vista" DecoratedControls="All" />
        <br />
        <br />
        <asp:DetailsView ID="DetailsView1" DataKeyNames="locncode,locndscr,address3" runat="server" AutoGenerateRows="False"
            GridLines="None" Height="50px" Width="100%"
            BorderWidth="0" CellPadding="0" CellSpacing="7">
            <Fields>
                <asp:BoundField DataField="locncode" HeaderText="locncode" ReadOnly="true"  />
                <asp:BoundField DataField="locndscr" HeaderText="locndscr"  ReadOnly="true" />
                <asp:TemplateField HeaderText="address3" >
                    <EditItemTemplate>
                        <telerik:RadTextBox ID="txtAddress3" runat="server" Value='<%#Eval("address3") %>'></telerik:RadTextBox>
                    </EditItemTemplate>
                </asp:TemplateField>
                <asp:CommandField ShowEditButton="True" ButtonType="Button" />
                <asp:CommandField ShowInsertButton="True" ButtonType="Button" />
            </Fields>
        </asp:DetailsView>
 
    </div>
    </form>
</body>
</html>

and it's code behind:

Imports System.Data
Imports Telerik.Web.UI
 
Partial Class TEMPLATE_GridWithPopupToAddALine2
    Inherits InheritedPage
    Dim mstrLocationCode As String
    Dim mstrAddress3 As String
    Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init
 
        DetailsView1.DefaultMode = DetailsViewMode.Edit
 
    End Sub
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Me.Page.Title = "Editing record"
        mstrLocationCode = Request("locncode")
 
        If Not IsPostBack Then
            Me.DetailsView1.DataSource = DynData.SPs.FP_IV40700_SEL_byID(mstrLocationCode, AppUser.Database).getTable
            Me.DetailsView1.DataBind()
        End If
    End Sub
    Protected Sub DetailsView1_ItemCommand(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DetailsViewCommandEventArgs) Handles DetailsView1.ItemCommand
        Select Case e.CommandName
            Case "Update"
                ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", True)
            Case "Cancel"
                ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CancelEdit();", True)
        End Select
 
    End Sub
 
 
    Protected Sub DetailsView1_ItemUpdating(sender As Object, e As System.Web.UI.WebControls.DetailsViewUpdateEventArgs) Handles DetailsView1.ItemUpdating
 
        Dim strAddress3 As String = CType(Me.DetailsView1.FindControl("txtAddress3"), RadTextBox).Text
 
        Dim keyList As IOrderedDictionary = Me.DetailsView1.DataKey.Values
        Dim strLocationCode As String = keyList(0)
 
 
        Dim oIV40700 As New DynData.IV40700(strLocationCode, AppUser.Database)
        oIV40700.ADDRESS3 = strAddress3
        oIV40700.save(AppUser.Database)
        ClientScript.RegisterStartupScript(Page.GetType(), "mykey", "CloseAndRebind();", True)
 
 
    End Sub
 
End Class