Custom Popup Form

7 posts, 0 answers
  1. Joe
    Joe avatar
    23 posts
    Member since:
    Nov 2010

    Posted 24 May 2012 Link to this post

    Is it possible to create a customer popup form for inserting and editing entries in Grid?
    I prefer the look of popup edit forms vs. the inline. But all of the demo's ive seen for using a custom form appear to only show inline editing.

    Thank you,

  2. Elliott
    Elliott avatar
    391 posts
    Member since:
    May 2010

    Posted 24 May 2012 Link to this post

    EditMode=Popup will cause a popup
    I use UserControls for the flexibility and room for long text descriptions

    <%@ Control Language="VB" AutoEventWireup="false" CodeFile="Customer.ascx.vb" Inherits="Customer" %>
    <link href="MDE2010.css" rel="Stylesheet" />
    <table border="1" cellpadding="1" cellspacing="1" class="peachy_background" width="400px" >
    <tr>
    <td>
        <asp:HiddenField ID="hdnDivisionID" runat="server" />
    </td>
    <td>
        <asp:HiddenField ID="hdnAccountNumber" runat="server" />
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">Account Number</td>
    <td>
        <telerik:RadNumericTextBox ID="rntbAccountNumber" MinValue="1" DataType="System.Int64" Text='<%# DataBinder.Eval( Container, "DataItem.AccountNumber" ) %>' CssClass="body_text_black" Width="200px" runat="server">
            <NumberFormat DecimalDigits="0" GroupSeparator="" />   
        </telerik:RadNumericTextBox>
        <asp:RequiredFieldValidator ID="rfvAccountNumber" ControlToValidate="rntbAccountNumber" ErrorMessage="#" CssClass="bold" runat="server" />
        <asp:CustomValidator ID="cvAccountNumber" ControlToValidate="rntbAccountNumber" ErrorMessage="*" OnServerValidate="cvAccountNumber_OnServerValidate" CssClass="bold" runat="server" />
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">Dealer Name</td>
    <td>
        <telerik:RadTextBox ID="rtbDealerName" Text='<%# DataBinder.Eval( Container, "DataItem.DealerName" ) %>' CssClass="body_text_black" Width="200px" runat="server">
        </telerik:RadTextBox>
        <asp:RequiredFieldValidator ID="rfvDealerName" ControlToValidate="rtbDealerName" ErrorMessage="#" CssClass="bold" runat="server" />
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">Address</td>
    <td>
        <telerik:RadTextBox ID="rtbAddress1" Text='<%# DataBinder.Eval( Container, "DataItem.Address1" ) %>' CssClass="body_text_black" Width="200px" runat="server">
        </telerik:RadTextBox>
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">City</td>
    <td>
        <telerik:RadTextBox ID="rtbCity" Text='<%# DataBinder.Eval( Container, "DataItem.City" ) %>' CssClass="body_text_black" Width="200px" runat="server">
        </telerik:RadTextBox>
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">State</td>
    <td>
        <telerik:RadComboBox ID="rcbState" AllowCustomText="true" EmptyMessage="Select One" CssClass="body_text_black" Width="200px" runat="server" />
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">ZipCode</td>
    <td>
        <telerik:RadTextBox ID="rtbZipCode" Text='<%# DataBinder.Eval( Container, "DataItem.ZipCode" ) %>' Width="200px" CssClass="body_text_black" runat="server">
        </telerik:RadTextBox>
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">Ship Whse</td>
    <td>
        <telerik:RadComboBox ID="rcbShipWhse" AppendDataBoundItems="True" CssClass="body_text_black" OnDataBinding="rcBox_OnDataBinding" Width="200px" runat="server" />
        <asp:RequiredFieldValidator ID="rfvShipWhse" ControlToValidate="rcbShipWhse" ErrorMessage="#" CssClass="bold" runat="server" />
        <asp:RangeValidator ID="rvShipWhse" ControlToValidate="rcbShipWhse" MinimumValue="001" MaximumValue="999" ErrorMessage="##" CssClass="bold" runat="server" />
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">Salesperson</td>
    <td>
        <telerik:RadComboBox ID="rcbSalesperson" AppendDataBoundItems="True" CssClass="body_text_black" OnDataBinding="rcBox_OnDataBinding" Width="200px" runat="server" />
        <asp:RequiredFieldValidator ID="rfvSalesperson" ControlToValidate="rcbSalesperson" ErrorMessage="#" CssClass="bold" runat="server" />
        <asp:RangeValidator ID="rvSalesperson" ControlToValidate="rcbSalesperson" MinimumValue="001" MaximumValue="999" ErrorMessage="##" CssClass="bold" runat="server" />   
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">Sales Terr</td>
    <td>
        <telerik:RadComboBox ID="rcbSalesTerr" AppendDataBoundItems="True" CssClass="body_text_black" OnDataBinding="rcBox_OnDataBinding" Width="200px" runat="server" />
        <asp:RequiredFieldValidator ID="rfvSalesTerr" ControlToValidate="rcbSalesTerr" ErrorMessage="#" CssClass="bold" runat="server" />
        <asp:RangeValidator ID="rvSalesTerr" ControlToValidate="rcbSalesTerr" MinimumValue="001" MaximumValue="999" ErrorMessage="##" CssClass="bold" runat="server" />
    </td>
    </tr>
    <tr>
    <td class="body_text_black_BOLD">Canada</td>
    <td>
        <asp:CheckBox ID="chkCanada" Checked="False" runat="server" />
    </td>
    </tr>
    <tr>
    <td colspan="2">
        <asp:ValidationSummary ID="vsCustomer" runat="server" />
    </td>
    </tr>
    <tr>
    <td>
        <asp:Button ID="btnCancel" Text="Cancel" CommandName="Cancel" CausesValidation="False" runat="server" />
    </td>
    <td align="right">
        <asp:Button ID="btnUpdate" Text="Update" CommandName="Update" Visible='<%# Not (TypeOf DataItem Is Telerik.Web.UI.GridInsertionObject) %>' runat="server" />
        <asp:Button ID="btnInsert" Text="Insert" CommandName="PerformInsert" Visible='<%# (TypeOf DataItem Is Telerik.Web.UI.GridInsertionObject) %>' runat="server" />
    </td>
    </tr>
    </table>
    code behind for the control
    Imports Telerik.Web.UI
    Imports System.Data
     
    Partial Class Customer
        Inherits System.Web.UI.UserControl
     
        Private blnInsertEdit As Boolean = True
        Private _dataItem As Object
        Private _validationPerformed As Nullable(Of Boolean)
        Public Property DataItem() As Object
            Get
                Return Me._dataItem
            End Get
            Set(ByVal value As Object)
                Me._dataItem = value
            End Set
        End Property
     
        Protected Sub Page_DataBinding(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.DataBinding
            Dim dItem As Object = DataItem
            Dim drView As DataRowView = Nothing
            Dim blnCanada As Boolean = False
            Dim ds As DataSet
            Dim ws As CommonFunctions
     
            ws = New CommonFunctions
            ds = ws.GetStateCodes
            rcbState.DataSource = ds
            rcbState.DataValueField = "StateCode"
            rcbState.DataTextField = "StateName"
            rcbState.DataBind()
            ds = ws.GetSalespeople
            rcbSalesperson.DataSource = ds
            rcbSalesperson.DataValueField = "SalespersonID"
            rcbSalesperson.DataTextField = "SalespersonName"
            rcbSalesperson.DataBind()
            ds = ws.GetShipWarehouses
            rcbShipWhse.DataSource = ds
            rcbShipWhse.DataValueField = "ShipWhseID"
            rcbShipWhse.DataTextField = "ShipWhseName"
            rcbShipWhse.DataBind()
            ds = ws.GetSalesTerritorities
            rcbSalesTerr.DataSource = ds
            rcbSalesTerr.DataValueField = "SalesTerrID"
            rcbSalesTerr.DataTextField = "SalesTerrName"
            rcbSalesTerr.DataBind()
            If TypeOf dItem Is DataRowView Then
                blnInsertEdit = False
                drView = DirectCast(dItem, DataRowView)
                rcbState.SelectedValue = drView.Item("StateCode")
                MightBeNull(drView, rcbSalesperson, "SalesPersonID")
                MightBeNull(drView, rcbShipWhse, "ShipWhse")
                MightBeNull(drView, rcbSalesTerr, "SalesTerr")
                blnCanada = drView.Item("CanadianFlag")
                chkCanada.Checked = blnCanada
                rntbAccountNumber.ReadOnly = True
            End If
            If TypeOf dItem Is GridInsertionObject Then
                blnInsertEdit = True
            End If
        End Sub
     
        Private Sub MightBeNull(ByVal drView As DataRowView, ByRef rcBox As RadComboBox, _
            ByVal ColumnName As String)
            Dim SelectedValue As Integer = -1
            If drView.Item(ColumnName) Is DBNull.Value Then
                rcBox.SelectedValue = 0
            Else
                rcBox.SelectedValue = drView.Item(ColumnName)
            End If
        End Sub
     
        Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpdate.Click
            Dim AccountNumber As Int64
            Dim DealerName, Address1, City, StateCode, ZipCode As String
            Dim ShipWhse, SalesPersonID, SalesTerr As Integer
            Dim CanadianFlag As Boolean
            Dim ws As CommonFunctions
     
            If Page.IsValid Then
            Else
                ValidationError.Display("Invalid fields marked with #")
                Exit Sub
            End If
            AccountNumber = rntbAccountNumber.Value
            DealerName = rtbDealerName.Text
            Address1 = rtbAddress1.Text
            City = rtbCity.Text
            StateCode = rcbState.SelectedValue
            ZipCode = rtbZipCode.Text
            ShipWhse = rcbShipWhse.SelectedValue
            SalesPersonID = rcbSalesperson.SelectedValue
            SalesTerr = rcbSalesTerr.SelectedValue
            CanadianFlag = chkCanada.Checked
            ws = New CommonFunctions
            ws.UpdateCustomer(AccountNumber, DealerName, Address1, City, _
                StateCode, ZipCode, ShipWhse, SalesPersonID, SalesTerr, CanadianFlag)
            ws = Nothing
        End Sub
     
        Protected Sub btnInsert_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnInsert.Click
            Dim AccountNumber As Int64
            Dim DealerName, Address1, City, StateCode, ZipCode As String
            Dim ShipWhse, SalesPersonID, SalesTerr As Integer
            Dim CanadianFlag As Boolean
            Dim ws As CommonFunctions
     
            If Page.IsValid Then
            Else
                ValidationError.Display("Invalid fields marked with #")
                Exit Sub
            End If
            AccountNumber = rntbAccountNumber.Value
            DealerName = rtbDealerName.Text
            Address1 = rtbAddress1.Text
            City = rtbCity.Text
            StateCode = rcbState.SelectedValue
            ZipCode = rtbZipCode.Text
            ShipWhse = rcbShipWhse.SelectedValue
            SalesPersonID = rcbSalesperson.SelectedValue
            SalesTerr = rcbSalesTerr.SelectedValue
            CanadianFlag = chkCanada.Checked
            ws = New CommonFunctions
            ws.InsertCustomer(AccountNumber, DealerName, Address1, _
                City, StateCode, ZipCode, ShipWhse, SalesPersonID, _
                SalesTerr, CanadianFlag)
            ws = Nothing
        End Sub
     
        Protected Sub cvAccountNumber_OnServerValidate(ByVal sender As Object, ByVal e As ServerValidateEventArgs)
            Dim AccountNumber As Int64 = 0
            Dim blnIsValid As Boolean
            Dim ws As CommonFunctions = Nothing
     
            If btnUpdate.Visible = True Then
                Exit Sub
            End If
            If _validationPerformed.HasValue Then
                e.IsValid = _validationPerformed
                Exit Sub
            End If
            AccountNumber = rntbAccountNumber.Value
            ws = New CommonFunctions
            blnIsValid = ws.CheckAccountNumber(AccountNumber)
            If blnInsertEdit AndAlso blnIsValid Then
                ValidationError.Display("duplicate account number")
                e.IsValid = False
            End If
            _validationPerformed = e.IsValid
        End Sub
     
        Protected Sub rcBox_OnDataBinding(ByVal sender As Object, ByVal e As EventArgs)
            Dim rcBox As RadComboBox = Nothing
            Dim rcbItem As RadComboBoxItem = Nothing
     
            rcBox = DirectCast(sender, RadComboBox)
            If rcBox.FindItemIndexByValue(0) Then
                Exit Sub
            End If
            rcbItem = New RadComboBoxItem("Select One", 0)
            rcBox.Items.Insert(0, rcbItem)
        End Sub
     
    End Class
    the main form
    <%@ Page Title="" Language="VB" AutoEventWireup="false" CodeFile="CustomerMaintenance.aspx.vb" Inherits="CustomerMaintenance" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <head id="hdHead" runat="server">
        <title>Show Badge Request Form - Customer Maintenance</title>
        <link href="MDE2010.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <telerik:RadCodeBlock ID="rcBlock" runat="server">
            <script type="text/javascript">
                function ConfirmDelete() {
                    if (confirm("Are you sure you want to delete this customer?") == true)
                        return true;
                    else
                        return false;
                }         
            </script>
        </telerik:RadCodeBlock>
        <form id="frmCustomerMaintenance" method="post" runat="server">
        <telerik:RadScriptManager ID="rsManager" runat="server" />
        <table border="0" cellpadding="2" cellspacing="2">
        <tr>
        <td> </td>
        <td align="right">
            <asp:Button ID="cmdPrint" Text="Print" runat="server" />
        </td>
        </tr>
        <tr>
        <td colspan="2">
            <telerik:RadGrid ID="gvCustomer" runat="server">
            <GroupingSettings CaseSensitive="false" />
            <MasterTableView DataKeyNames="AccountNumber" AutoGenerateColumns="false" AllowSorting="true" AllowPaging="true" AllowFilteringByColumn="true" CommandItemDisplay="Top" EditMode="PopUp" >
            <Columns>
                <telerik:GridBoundColumn UniqueName="AccountNumber" DataField="AccountNumber" HeaderText="AccountNumber" ReadOnly="true" />
                <telerik:GridBoundColumn UniqueName="DealerName" DataField="DealerName" HeaderText="Dealer Name" ItemStyle-Width="100" />
                <telerik:GridBoundColumn UniqueName="Address1" DataField="Address1" AllowFiltering="false" HeaderText="Address" ItemStyle-Width="100" />
                <telerik:GridBoundColumn UniqueName="City" DataField="City" HeaderText="City" ItemStyle-Width="100" />
                <telerik:GridBoundColumn UniqueName="State" DataField="StateCode" HeaderText="State" ItemStyle-Width="40" />
                <telerik:GridBoundColumn UniqueName="ZipCode" DataField="ZipCode" AllowFiltering="false" HeaderText="Zip" ItemStyle-Width="60" />
                <telerik:GridBoundColumn UniqueName="ShipWhse" DataField="ShipWhse" HeaderText="Ship Whse" ItemStyle-Width="60" />
                <telerik:GridBoundColumn UniqueName="SalespersonID" DataField="SalespersonID" HeaderText="Salesperson" ItemStyle-Width="40" />
                <telerik:GridBoundColumn UniqueName="SalesTerr" DataField="SalesTerr" HeaderText="Sales Terr" ItemStyle-Width="60" />
                <telerik:GridCheckBoxColumn UniqueName="CanadianFlag" DataField="CanadianFlag" HeaderText="Canada" ItemStyle-Width="40" />
                <telerik:GridEditCommandColumn EditText="Edit" />                      
                <telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName="Delete" Text="Delete" />
            </Columns>
            <EditFormSettings UserControlName="Customer.ascx" EditFormType="WebUserControl">
            </EditFormSettings>
            </MasterTableView>
            </telerik:RadGrid>
        </td>
        </tr>
        </table>
    </form>
    </body>
    </html>
    and the code behind
    Imports Telerik.Web.UI
    Imports System.Data
     
    Partial Class CustomerMaintenance
        Inherits System.Web.UI.Page
     
        Protected Sub gvCustomer_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles gvCustomer.NeedDataSource
            Dim ds As DataSet = Nothing
            Dim dt As DataTable = Nothing
            Dim ws As New CommonFunctions
     
            ds = ws.GetCustomers
            If ds.Tables.Count > 0 Then
                dt = ds.Tables(0)
            End If
            gvCustomer.DataSource = dt
            ' cache class
            ' AddToCache(ds)
        End Sub
     

    '     I removed a hierarchy fromm the grid
        'Protected Sub gvCustomer_DetailTableDataBind(ByVal source As Object, ByVal e As Telerik.Web.UI.GridDetailTableDataBindEventArgs) Handles gvCustomer.DetailTableDataBind
        '    Dim ds As DataSet = Nothing
        '    Dim dt As DataTable = Nothing
        '    Dim ws As New CommonFunctions
     '
         '   ds = ws.GetDealers
         '   If ds.Tables.Count > 0 Then
        '        dt = ds.Tables(0)
        '    End If
        '    e.DetailTableView.DataSource = dt
        'End Sub
     
        Protected Sub gvCustomer_ItemDataBound(ByVal source As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles gvCustomer.ItemDataBound
            Dim gdItem As GridDataItem = Nothing
            Dim btnDelete As LinkButton = Nothing
            Dim TableName As String = String.Empty
     
            TableName = e.Item.OwnerTableView.Name
            If TypeOf e.Item Is GridDataItem Then
                gdItem = DirectCast(e.Item, GridDataItem)
                Select Case TableName
                    Case "Customer"
                        ' hard-coded location!
                        btnDelete = DirectCast(gdItem.Cells(13).Controls(0), LinkButton)
                    Case "Dealer"
                        ' btnDelete = DirectCast(gdItem.Cells(13).Controls(0), LinkButton)
                End Select
                If btnDelete Is Nothing Then
                Else
                    btnDelete.Attributes.Add("onclick", "return ConfirmDelete();")
                End If
            End If
        End Sub
     
        Protected Sub gvCustomer_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles gvCustomer.ItemCommand
            Dim gdItem As GridDataItem = Nothing
            Dim gefItem As GridEditFormItem = Nothing
            ' Dim TableName As String = String.Empty
     
            ' TableName = e.Item.OwnerTableView.Name
            ' updates done in code-behind of user control
            Select Case e.CommandName
                Case "PerformInsert"
                    '    gdItem = DirectCast(e.Item, GridDataItem)
                    '    InsertBooth(gdItem)
                Case "Edit"
                    '    gdItem = DirectCast(e.Item, GridDataItem)
                Case "Update"
                    '    gdItem = DirectCast(e.Item, GridDataItem)
                    '    UpdateBooth(gdItem)
                Case "Delete"
                    gdItem = DirectCast(e.Item, GridDataItem)
                    DeleteCustomer(gdItem)
            End Select
        End Sub
     
        Private Sub DeleteCustomer(ByVal gdItem As GridDataItem)
            Dim AccountNumber As Int64
            Dim ws As CommonFunctions
     
            AccountNumber = CInt(gdItem.OwnerTableView.DataKeyValues(gdItem.ItemIndex)("AccountNumber"))
            ws = New CommonFunctions
            ws.DeleteCustomer(AccountNumber)
        End Sub
     
        'Protected Sub cmdPrint_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles cmdPrint.Click
        '    Response.Redirect("AllReports.aspx")
        'End Sub
    End Class

    the explicit column numbers are bad programming
    no apologies for programming in VB, though

  3. DevCraft Release
  4. Joe
    Joe avatar
    23 posts
    Member since:
    Nov 2010

    Posted 24 May 2012 Link to this post

    Great, this helps.

    Another question, how do differentiate between inserting or updating a record when I use this type of form?

  5. Elliott
    Elliott avatar
    391 posts
    Member since:
    May 2010

    Posted 29 May 2012 Link to this post

    look at blnInsertEdit
    on the PageBinding event there is an interface which is implemented only on an insert

  6. jumpstart
    jumpstart avatar
    479 posts
    Member since:
    Nov 2011

    Posted 30 May 2012 Link to this post

    Joe,

    You may also want to take a look at the Window/Edit Dialog for RadGrid online demo. I believe that this provides the solution that you seek: a customizable popup window that can be used to edit the RadGrid.

    Hope this helps!

  7. Joe
    Joe avatar
    23 posts
    Member since:
    Nov 2010

    Posted 31 May 2012 Link to this post

    Thanks for the help everyone,

    Ive been working on a usercontrol for the edit form.

    Ive figured out how to bind a textbox back to the gridcolumn. How would I do this with a radcombobox? I'm using a SQL datasource to populate the combos (ID and Test fields).

  8. Joe
    Joe avatar
    23 posts
    Member since:
    Nov 2010

    Posted 01 Jun 2012 Link to this post

    Nevermind, found that I could just add:

    SelectedValue='<%# Bind("RECORD_ID") %>'


    I didnt see it in intellisense, so I assumed it couldnt just add it :(

Back to Top
DevCraft Release