This is a migrated thread and some comments may be shown as answers.

Custom Popup Form

6 Answers 248 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Joe
Top achievements
Rank 2
Joe asked on 24 May 2012, 08:46 PM
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,

6 Answers, 1 is accepted

Sort by
0
Elliott
Top achievements
Rank 2
answered on 24 May 2012, 09:38 PM
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
0
Joe
Top achievements
Rank 2
answered on 25 May 2012, 04:20 AM
Great, this helps.

Another question, how do differentiate between inserting or updating a record when I use this type of form?
0
Elliott
Top achievements
Rank 2
answered on 29 May 2012, 02:03 PM
look at blnInsertEdit
on the PageBinding event there is an interface which is implemented only on an insert
0
Richard
Top achievements
Rank 1
answered on 30 May 2012, 09:33 PM
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!
0
Joe
Top achievements
Rank 2
answered on 01 Jun 2012, 03:36 AM
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).
0
Joe
Top achievements
Rank 2
answered on 01 Jun 2012, 06:19 AM
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 :(

Tags
Grid
Asked by
Joe
Top achievements
Rank 2
Answers by
Elliott
Top achievements
Rank 2
Joe
Top achievements
Rank 2
Richard
Top achievements
Rank 1
Share this question
or