Display Edit values Horizontally

[Rick]

Currently, my grid displays Edit values vertically, like this:

Country Code: [Drop Down Control]
USD Denomination: [Text Control]
etc.

We feel it would be easier on the user if we just displayed text boxes horizontally as a single record with each edit value under the current value in the grid.

Additionally, we are going to have the user enter 4 related records all at once, which is another reason why a horizontal display makes more sense.

[Iana Tsolova]

Hi Rick,

Check out the below demos and see if the approaches illustrated there are applicable for you:
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/alleditablecolumns/defaultcs.aspx
http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/multicolumneditform/defaultcs.aspx

Best wishes,
Iana Tsolova
the Telerik team

[Elliott]

I use user controls for all but the most simple applications
I assume you don't need my ADO routines
 

<telerik:RadGrid ID="rgStores" Skin="Sunset" runat="server">
<GroupingSettings CaseSensitive="false" />
<MasterTableView DataKeyNames="StoreNumber" AutoGenerateColumns="false" AllowSorting="true" AllowPaging="true" AllowFilteringByColumn="true" CommandItemDisplay="Top" EditMode="PopUp" >
<CommandItemSettings AddNewRecordText="Add A Store" />
<Columns>
    <telerik:GridBoundColumn UniqueName="StoreNumber" DataField="StoreNumber" HeaderText="StoreNumber" DataType="System.Int64" ReadOnly="true" />
    <telerik:GridBoundColumn UniqueName="PWD" DataField="PWD" HeaderText="Password" ItemStyle-Width="46" AllowFiltering="False" />
    <telerik:GridBoundColumn UniqueName="StoreName" DataField="StoreName" HeaderText="Store Name" ItemStyle-Width="280" />
    <telerik:GridBoundColumn UniqueName="ChainID" DataField="ChainID" HeaderText="ChainID" ItemStyle-Width="46" />
    <telerik:GridCheckBoxColumn UniqueName="ConsolidateFlag" DataField="ConsolidateFlag" HeaderText="Consolid" ItemStyle-Width="36" />
    <telerik:GridCheckBoxColumn UniqueName="FullServ" DataField="FullServ" HeaderText="Full Serv" ItemStyle-Width="40" />
    <telerik:GridBoundColumn UniqueName="ParentStore" DataField="ParentStore" HeaderText="Parent Store" ItemStyle-Width="46" />
    <telerik:GridCheckBoxColumn UniqueName="BFD" DataField="BFD" HeaderText="BFD" ItemStyle-Width="36" />
    <telerik:GridBoundColumn UniqueName="SortOrder" DataField="SortOrder" HeaderText="Sort Order" ItemStyle-Width="36" AllowFiltering="false" />
    <telerik:GridTemplateColumn UniqueName="SetBFD" HeaderText="Set BFD" AllowFiltering="False" >
        <ItemTemplate>
            <asp:CheckBox ID="chkSetBFD" runat="server" />
        </ItemTemplate>
    </telerik:GridTemplateColumn>
    <telerik:GridEditCommandColumn EditText="Edit" />
    <telerik:GridButtonColumn UniqueName="DeleteColumn" CommandName="Delete" Text="Delete" />
</Columns>
<EditFormSettings UserControlName="Stores.ascx" EditFormType="WebUserControl" InsertCaption="gorkomatic" >
</EditFormSettings>
</MasterTableView>
</telerik:RadGrid>

some code

Protected Sub rgStores_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles rgStores.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)
            DeleteStores(gdItem)
    End Select
End Sub

Private Sub DeleteStores(ByVal gdItem As GridDataItem)
    Dim StoreNumber As Int64
    Dim intSync As Integer
    Dim ws As CommonFunctions

    StoreNumber = CInt(gdItem.OwnerTableView.DataKeyValues(gdItem.ItemIndex)("StoreNumber"))
    ws = New CommonFunctions
    ws.DeleteStore(StoreNumber)
    intSync = IIf(chkTablet.Checked, 1, 0)
    ws.DeleteStore(StoreNumber, intSync)
    intSync = IIf(chkBFD.Checked, 2, 0)
    ws.DeleteStore(StoreNumber, intSync)
    ws = Nothing
End Sub

the user control

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Stores.ascx.vb" Inherits="StoreControl" %>
<link href="BFDWebPages.css" rel="Stylesheet" />
<table border="1" cellpadding="1" cellspacing="1" class="peachy_background" width="400px" >
<tr>
<td class="user_control_label">
    <asp:Label ID="lblAddUpdate" Text="Add Store" runat="server" />
</td>
<td>
    <asp:HiddenField ID="hdnStoreNumber" runat="server" />
</td>
</tr>
<tr>
<td class="user_control_label">Store Number</td>
<td>
    <telerik:RadNumericTextBox ID="rntbStoreNumber" MinValue="1" DataType="System.Int64" Text='<%# DataBinder.Eval( Container, "DataItem.StoreNumber" ) %>' CssClass="user_control_textbox" Width="100px" runat="server">
        <NumberFormat DecimalDigits="0" GroupSeparator="" />
    </telerik:RadNumericTextBox>
    <asp:RequiredFieldValidator ID="rfvStoreNumber" ControlToValidate="rntbStoreNumber" ErrorMessage="#" CssClass="red_for_error" runat="server" />
    <asp:CustomValidator ID="cvStoreNumber" ControlToValidate="rntbStoreNumber" ErrorMessage="*" OnServerValidate="cvStoreNumber_OnServerValidate" CssClass="red_for_error" runat="server" />
</td>
</tr>
<tr>
<td class="user_control_label">Password</td>
<td class="user_control_textbox">
    <telerik:RadTextBox ID="rtbPWD" Text='<%# DataBinder.Eval( Container, "DataItem.PWD" ) %>' runat="server">
    </telerik:RadTextBox>
</td>
</tr>
<tr>
<td class="user_control_label">Store Name</td>
<td class="user_control_textbox">
    <telerik:RadTextBox ID="rtbStoreName" Text='<%# DataBinder.Eval( Container, "DataItem.StoreName" ) %>' Width="200px" runat="server">
    </telerik:RadTextBox>
</td>
</tr>
<tr>
<td class="user_control_label">ChainID</td>
<td class="user_control_textbox">
    <telerik:RadTextBox ID="rtbChainID" Text='<%# DataBinder.Eval( Container, "DataItem.ChainID" ) %>' Width="200px" runat="server">
    </telerik:RadTextBox>
</td>
</tr>
<tr>
<td class="user_control_label">Consolidated</td>
<td class="user_control_checkbox">
    <asp:CheckBox ID="chkConsolidateFlag" Checked="False" runat="server" />
</td>
</tr>
<tr>
<td class="user_control_label">Full Service</td>
<td class="user_control_checkbox">
    <asp:CheckBox ID="chkFullServ" Checked="False" runat="server" />
</td>
</tr>
<tr>
<td class="user_control_label">Parent Store</td>
<td>
    <telerik:RadNumericTextBox ID="rntbParentStore" DataType="System.Int64" Text='<%# DataBinder.Eval( Container, "DataItem.ParentStore" ) %>' CssClass="user_control_testbox" Width="100px" MinValue="0" runat="server">
        <NumberFormat DecimalDigits="0" GroupSeparator="" />
    </telerik:RadNumericTextBox>
    <asp:CustomValidator ID="cvParentStore" ControlToValidate="rntbParentStore" ErrorMessage="*" OnServerValidate="cvParentStore_OnServerValidate" CssClass="red_for_error" runat="server" />
</td>
</tr>
<tr>
<td class="user_control_label">BFD</td>
<td class="user_control_checkbox">
    <asp:CheckBox ID="chkBFD" Checked="False" runat="server" />
</td>
</tr>
<tr>
<td class="user_control_label">Sort Order</td>
<td class="user_control_checkbox">
    <telerik:RadNumericTextBox ID="rntbSortOrder" DataType="System.Int64" Text='<%# DataBinder.Eval( Container, "DataItem.SortOrder" ) %>' CssClass="user_control_testbox" Width="100px" MinValue="1" runat="server" >
        <NumberFormat DecimalDigits="0" GroupSeparator="" />
    </telerik:RadNumericTextBox>
</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>
<table>
<tr>
    <td>
        <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>
    <td>
        <asp:CheckBox ID="syncTablet" Text="Synch Tablet?" SkinID="Sunset" runat="server" />
    </td>
    <td>
        <asp:CheckBox ID="syncBFD" Text="Synch BFD?" SkinID="Sunset" runat="server" />
    </td>
</tr>
</table>
</td>
</tr>
</table>

and its code

Imports Telerik.Web.UI
Imports System.Data

Partial Class StoreControl
    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 blnConsolidateFlag, blnFullServ, blnBFD As Boolean
        blnConsolidateFlag = False
        blnFullServ = False
        blnBFD = False

        If TypeOf dItem Is DataRowView Then
            blnInsertEdit = False
            drView = DirectCast(dItem, DataRowView)
            blnConsolidateFlag = drView.Item("ConsolidateFlag")
            chkConsolidateFlag.Checked = blnConsolidateFlag
            blnFullServ = drView.Item("FullServ")
            chkFullServ.Checked = blnFullServ
            blnBFD = drView.Item("BFD")
            chkBFD.Checked = blnBFD
            rntbStoreNumber.ReadOnly = True
        End If
        If TypeOf dItem Is GridInsertionObject Then
            rntbParentStore.Text = "0"
            rtbChainID.Text = String.Empty
            blnInsertEdit = True
        Else
            lblAddUpdate.Text = lblAddUpdate.Text.Replace("Add", "Update")
        End If
    End Sub

    Protected Sub btnUpdate_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnUpdate.Click
        Dim StoreNumber, ParentStore, SortOrder As Int64
        Dim StoreName, PWD, ChainID As String
        Dim ConsolidateFlag, FullServ, BFD As Boolean
        Dim ws As CommonFunctions

        If Page.IsValid Then
        Else
            ValidationError.Display("Invalid fields marked with #")
            Exit Sub
        End If
        StoreNumber = rntbStoreNumber.Value
        StoreName = rtbStoreName.Text
        PWD = rtbPWD.Text
        ChainID = rtbChainID.Text
        ConsolidateFlag = chkConsolidateFlag.Checked
        FullServ = chkFullServ.Checked
        ParentStore = rntbParentStore.Value
        BFD = chkBFD.Checked
        If rntbSortOrder.DbValue Is Nothing Then
            SortOrder = 0
        Else
            SortOrder = rntbSortOrder.Value
        End If

        ws = New CommonFunctions
        ws.UpdateStore(StoreNumber, StoreName, PWD, ChainID, ConsolidateFlag, _
            FullServ, ParentStore, BFD, SortOrder)
        If syncTablet.Checked Then
            ws.SyncStore(StoreNumber, StoreName, ChainID, ConsolidateFlag, FullServ, ParentStore)
        End If
        If syncBFD.Checked Then
            ws.SynctoBFD(StoreNumber, StoreName, PWD, ChainID, ConsolidateFlag, _
            FullServ, ParentStore, BFD)
        End If
        ws = Nothing
    End Sub

    Protected Sub btnInsert_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnInsert.Click
        Dim StoreNumber, ParentStore, SortOrder As Int64
        Dim StoreName, PWD, ChainID As String
        Dim ConsolidateFlag, FullServ, BFD As Boolean
        Dim ws As CommonFunctions

        If Page.IsValid Then
        Else
            ValidationError.Display("Invalid fields marked with #")
            Exit Sub
        End If
        StoreNumber = rntbStoreNumber.Value
        StoreName = rtbStoreName.Text
        PWD = rtbPWD.Text
        ChainID = rtbChainID.Text
        ConsolidateFlag = chkConsolidateFlag.Checked
        FullServ = chkFullServ.Checked
        If rntbParentStore.Text = String.Empty Then
            rntbParentStore.Value = 0
        End If
        ParentStore = rntbParentStore.Value
        BFD = chkBFD.Checked
        If rntbSortOrder.Text = String.Empty Then
            SortOrder = StoreNumber
        Else
            SortOrder = rntbSortOrder.Value
        End If
        ws = New CommonFunctions
        ws.InsertStore(StoreNumber, StoreName, PWD, ChainID, ConsolidateFlag, _
            FullServ, ParentStore, BFD, SortOrder)
        If syncTablet.Checked Then
            ws.SyncStore(StoreNumber, StoreName, ChainID, ConsolidateFlag, FullServ, ParentStore)
        End If
        If syncBFD.Checked Then
            ws.SynctoBFD(StoreNumber, StoreName, PWD, ChainID, ConsolidateFlag, _
            FullServ, ParentStore, BFD)
        End If
        ws = Nothing
    End Sub

    Protected Sub cvStoreNumber_OnServerValidate(ByVal sender As Object, ByVal e As ServerValidateEventArgs)
        Dim StoreNumber 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
        StoreNumber = rntbStoreNumber.Value
        ws = New CommonFunctions
        blnIsValid = ws.CheckStoreNumber(StoreNumber)
        If blnInsertEdit AndAlso blnIsValid Then
            ValidationError.Display("duplicate store number")
            e.IsValid = False
        End If
        _validationPerformed = e.IsValid
    End Sub

    Protected Sub cvParentStore_OnServerValidate(ByVal sender As Object, ByVal e As ServerValidateEventArgs)
        Dim ParentStore As Int64 = 0
        Dim blnIsValid As Boolean
        Dim ws As CommonFunctions = Nothing

        If _validationPerformed.HasValue Then
            e.IsValid = _validationPerformed
            Exit Sub
        End If
        If rntbParentStore.Text Is Nothing Then
            rntbParentStore.Value = 0
        End If
        ParentStore = rntbParentStore.Value
        If ParentStore = 0 Then
            blnIsValid = True
        Else
            ws = New CommonFunctions
            blnIsValid = ws.CheckParentStore(ParentStore)
        End If
        If blnIsValid Then
        Else
            ValidationError.Display("invalid parent store")
            e.IsValid = False
        End If
        _validationPerformed = e.IsValid
    End Sub

End Class

hope that helps