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

Dynamic RadGrid column issue

4 Answers 135 Views

Grid

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

JenMaryland asked on 31 Jul 2020, 03:07 PM

I'm trying to create a dynamic datagrid for editing and updating, which is mostly working except that when I do a postback, it adds extra "datarow" columns to the grid. This also causes an error when I go to edit, with the message, "There is no column 'column'". At first, I didn't have NeedsDataSource, which was causing the grid to vanish when there was a post back. Now, it keeps adding columns.

ASPX:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="ReferenceTables.aspx.vb" Inherits="Test.ReferenceTables" %>
<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test</title>
</head>
<body>
<form id="form1" runat="server">
<div>

<telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
</telerik:RadScriptManager>

<telerik:RadGrid ID="rgGridSearch"
runat="server"
AutoGenerateColumns="False"
ShowStatusBar="True"
Width="100%"
AllowAutomaticInserts="True"
AllowAutomaticUpdates="True"
AllowPaging="true"
PageSize="10"
Skin="WebBlue">

<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
<MasterTableView
EditMode="InPlace"
CommandItemDisplay="top"

>
<Columns>
<telerik:GridEditCommandColumn UniqueName="EditCommandColumnActivity">
<HeaderStyle Width="80px"></HeaderStyle>
<ItemStyle Width="80px"></ItemStyle>
</telerik:GridEditCommandColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>

<telerik:RadGrid
ID="rgGridTemplate"
runat="server"
DataSourceID="dsStaff"
AutoGenerateColumns="False"
ShowStatusBar="True"
Width="100%"
AllowAutomaticInserts="True"
AllowAutomaticUpdates="True"
Skin="WebBlue">

<GroupingSettings CollapseAllTooltip="Collapse all groups"></GroupingSettings>
<MasterTableView
EditMode="InPlace"
CommandItemDisplay="top"
DataKeyNames="Staff_Member_ID"
DataSourceID="dsStaff">
<Columns>
<telerik:GridEditCommandColumn UniqueName="EditCommandColumnActivity">

<HeaderStyle Width="80px"></HeaderStyle>

<ItemStyle Width="80px"></ItemStyle>

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="Staff_Member_ID" DataType="System.Int32" FilterControlAltText="Filter Staff_Member_ID column" HeaderText="Staff_Member_ID" ReadOnly="True" SortExpression="Staff_Member_ID" UniqueName="Staff_Member_ID"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Staff_Member_First_Name" FilterControlAltText="Filter Staff_Member_First_Name column" HeaderText="First Name" SortExpression="Staff_Member_First_Name" UniqueName="Staff_Member_First_Name"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Staff_Member_Last_Name" FilterControlAltText="Filter Staff_Member_Last_Name column" HeaderText="Last Name" SortExpression="Staff_Member_Last_Name" UniqueName="Staff_Member_Last_Name"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Staff_Member_Middle_Initial" FilterControlAltText="Filter Staff_Member_Middle_Initial column" HeaderText="Middle Initial" SortExpression="Staff_Member_Middle_Initial" UniqueName="Staff_Member_Middle_Initial"></telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="Staff_Member_Email_Address" FilterControlAltText="Filter Staff_Member_Email_Address column" HeaderText="Email" SortExpression="Staff_Member_Email_Address" UniqueName="Staff_Member_Email_Address"></telerik:GridBoundColumn>
<telerik:GridCheckBoxColumn DataField="Staff_Member_Active" DataType="System.Boolean" FilterControlAltText="Filter Staff_Member_Active column" HeaderText="Active" SortExpression="Staff_Member_Active" UniqueName="Staff_Member_Active"></telerik:GridCheckBoxColumn>
</Columns>
</MasterTableView>

</telerik:RadGrid>

<asp:SqlDataSource ID="dsStaff" runat="server"

ConnectionString="<%$ ConnectionStrings:TestConnectionString %>"

SelectCommand="SELECT
[Staff_Member_ID],
[Staff_Member_First_Name],
[Staff_Member_Last_Name],
[Staff_Member_Middle_Initial],
[Staff_Member_Email_Address],
[Staff_Member_Active]

FROM [buStaff_Member]"

DeleteCommand="
DELETE FROM [buStaff_Member]
WHERE [Staff_Member_ID] = @Staff_Member_ID"

InsertCommand="INSERT INTO [buStaff_Member]
([Staff_Member_First_Name],
[Staff_Member_Last_Name],
[Staff_Member_Middle_Initial],
[Staff_Member_Email_Address],
[Staff_Member_Active])

VALUES (@Staff_Member_First_Name,
@Staff_Member_Last_Name,
@Staff_Member_Middle_Initial,
@Staff_Member_Email_Address,
@Staff_Member_Active)"

UpdateCommand="UPDATE [buStaff_Member]
SET [Staff_Member_First_Name] = @Staff_Member_First_Name,
[Staff_Member_Last_Name] = @Staff_Member_Last_Name,
[Staff_Member_Middle_Initial] = @Staff_Member_Middle_Initial,
[Staff_Member_Email_Address] = @Staff_Member_Email_Address,
[Staff_Member_Active] = @Staff_Member_Active

WHERE [Staff_Member_ID] = @Staff_Member_ID">

<DeleteParameters>
<asp:Parameter Name="Staff_Member_ID" Type="Int32" />
</DeleteParameters>
<InsertParameters>
<asp:Parameter Name="Staff_Member_First_Name" Type="String" />
<asp:Parameter Name="Staff_Member_Last_Name" Type="String" />
<asp:Parameter Name="Staff_Member_Middle_Initial" Type="String" />
<asp:Parameter Name="Staff_Member_Email_Address" Type="String" />
<asp:Parameter Name="Staff_Member_Active" Type="Boolean" />
</InsertParameters>
<UpdateParameters>
<asp:Parameter Name="Staff_Member_First_Name" Type="String" />
<asp:Parameter Name="Staff_Member_Last_Name" Type="String" />
<asp:Parameter Name="Staff_Member_Middle_Initial" Type="String" />
<asp:Parameter Name="Staff_Member_Email_Address" Type="String" />
<asp:Parameter Name="Staff_Member_Active" Type="Boolean" />
<asp:Parameter Name="Staff_Member_ID" Type="Int32" />
</UpdateParameters>
</asp:SqlDataSource>

</div>
</form>
</body>
</html>

========================================================================================================================

VB code

========================================================================================================================

Imports System.Data.SqlClient
Imports Telerik.Web.UI

Public Class ReferenceTables
Inherits System.Web.UI.Page

Protected Sub Page_Init(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Init

If Not IsPostBack Then
SetupGrid()
End If

End Sub

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

End Sub

Private Sub SetupGrid()

Dim Gridtype As String = Request.QueryString("type").ToString

Select Case Gridtype
Case "Staff"
SetupStaffGrid()
' To Do - Other dynamic grids.

End Select

End Sub

#Region "Initialize Edit Grid"

Private Sub SetupStaffGrid()

' The datasource will eventually be dynamic. For now, use the datasource on the form.
' Dim dsStaff As New SqlDataSource(dbData.GetConnection.ConnectionString, "SELECT Staff_Member_ID, Staff_Member_First_Name, Staff_Member_Last_Name, Staff_Member_Email_Address FROM buStaff_Member")

rgGridSearch.DataSource = dsStaff
rgGridSearch.MasterTableView.DataKeyNames = New String() {"Staff_Member_ID"}
rgGridSearch.AllowPaging = True
rgGridSearch.Skin = "WebBlue"

'Add Staff table

Dim boundColumn As New GridBoundColumn()

SetupBoundColumn(rgGridSearch, "Staff_Member_ID", "Staff ID", False, True)
SetupBoundColumn(rgGridSearch, "Staff_Member_First_Name", "First Name")
SetupBoundColumn(rgGridSearch, "Staff_Member_Last_Name", "Last Name")
SetupBoundColumn(rgGridSearch, "Staff_Member_Middle_Initial", "Middle Initial")
SetupBoundColumn(rgGridSearch, "Staff_Member_eMail_Address", "Email")
SetupBoundColumn(rgGridSearch, "Staff_Member_Active", "Active")

End Sub

Private Sub SetupBoundColumn(rg As RadGrid, DataField As String, HeaderText As String, Optional Visible As Boolean = True, Optional ReadOnlyField As Boolean = False)

Dim boundColumn As New GridBoundColumn With {
.DataField = DataField,
.HeaderText = HeaderText,
.Visible = Visible,
.ReadOnly = ReadOnlyField
}
rg.MasterTableView.Columns.Add(boundColumn)

End Sub

Private Sub rgGridSearch_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs) Handles rgGridSearch.NeedDataSource

SetupGrid()

End Sub

#End Region

End Class

4 Answers, 1 is accepted

answered on 05 Aug 2020, 10:22 AM

Hi Jen,

Telerik RadGrid works slightly differently from the asp:GridView as it is an extended and more sophisticated control. Therefore, it comes with a special event for binding data, and that is the NeedDataSource event. This event involves the DataBind() method and also prepares the Grid for the binding process. The DataBind() is also working with a very basic setup, but as soon you will start enabling more and more functionalities the Grid will start behaving oddly. Using the NeedDataSource or a SqlDataSource is the recommended way to bind data when creating the Grid programmatically.

Looking at the code you shared, I can see that columns are created in the Init event, later when the NeedDataSource event fires, the columns are being added again resulting in duplicate columns. More specifically this part of the code, where the SetupGrid() creates columns and adds them to the Grid.

  Private Sub rgGridSearch_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs) Handles rgGridSearch.NeedDataSource

    SetupGrid()

  End Sub

The data binding part must be separated from the rest of the code.

In the Init event, create the Grid and its structure. Enable properties, attach events, and more.

    Protected Sub Page_Init(sender As Object, e As EventArgs) Handles Me.Init

        '' This event for the structure and settings

        ' Create the Grid object
        ' Enable/Disable properties
        ' Attach event Listeners
        ' Create Columns
        ' Create Child tables

    End Sub

In the NeedDataSiyrce event, you will only bind data. The Grid structure should not be modified at this event.

Protected Sub RadGrid1_NeedDataSource(sender As Object, e As GridNeedDataSourceEventArgs)

    ' This Event stricly for data! To change structure use a different event, such as Page_Load, ItemCommand, ItemDataBound, ItemCreated, PreRender, etc..

    DirectCast(sender, RadGrid).DataSource = MyDataTable()
End Sub

Read more about Programmatic creation of RadGrid at Creating a RadGrid Programmatically

Kind regards,
Attila Antal
Progress Telerik

answered on 13 Aug 2020, 03:45 PM

It works now, thanks.

For anyone searching, basically this was the incorrect code;
Dim boundColumn As New GridBoundColumn With {
.DataField = DataField,
.HeaderText = HeaderText,
.SortExpression = DataField,
.Visible = Visible,
.ReadOnly = ReadOnlyField
}
rg.MasterTableView.Columns.Add(boundColumn)

Correct code (in the page load event) is:

boundColumn = New GridBoundColumn()
RadGrid1.MasterTableView.Columns.Add(boundColumn)

then setting the attributes.

RadGrid1.DataSourceID = "datasource1"

and so on. I think I was treating the columns.add like adding controls to a placeholder.