Custom Popup Form

[Joe]

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,

[Elliott]

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">
<html xmlns="http://www.w3.org/1999/xhtml" >
<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

[Joe]

Great, this helps.

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

[Elliott]

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

[Richard]

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!

[Joe]

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).

[Joe]

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 :(