[Solved] RADGrid cell controls state after ItemCommand is fired

[Scott]

Here is my scenario:

I have a RadGrid with RADAjaxManager rights to update itself. In markup, I have some GridTemplateColumns that contain custom buttons. The rest of the columns get populated via AutoGenerateColumns="true" from the NeedsDataSource event of the grid.

I am using the ItemDataBound event of the grid to setup each GridDataItem, setting some buttons' enabled property and some images based on the grid's data. This is working great to load the grid, and it persists after sorting, paging, and filtering.

The problem that I'm running into is when I click one of the custom buttons, it will properly run through the ItemCommand event of the grid, but then the buttons' enabled state and the images that I set are wiped away. Since my code to set these things up is in the grid's ItemDataBound event and that does not fire after the ItemCommand is fired, I'd like to know what event should I be using to set enabled/image URL type properties of the grid cells?

Thanks!

-Scott

[Scott]

Correction: I'm currently using both the ItemDataBound and ItemCreated events to set up the GridDataItems.

[Princy]

Hi Scott,

I guess you have some image buttons and you want to sets its image from code behind and on ItemCommand event you are enabling or disabling buttons, please take a look at the sample code snippet. The provided information is not enough to replicate the issue, please provide your full code snippet if this doesn't help.

C#:

//Set ImageURL
protected void RadGrid1_ItemCreated(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = (GridDataItem)e.Item;
        ImageButton imagebutton1 = (ImageButton)dataItem.FindControl("imagebutton1");
        ImageButton imagebutton2 = (ImageButton)dataItem.FindControl("imagebutton2");
        imagebutton1.ImageUrl = "~/Image/image1.png";
        imagebutton2.ImageUrl = "~/Image/image2.png";
    }
}

//Change or disable button
protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = (GridDataItem)e.Item;
        ImageButton imagebutton2 = (ImageButton)dataItem.FindControl("imagebutton2");
        if (dataItem["ID"].Text == "10253")
        {
            imagebutton2.ImageUrl = "~/Image/image3.png";
            imagebutton2.Enabled = false;
        }
    }
}
//Enable button
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "AnyCommandName")
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem dataItem = (GridDataItem)e.Item;
            ImageButton imagebutton2 = (ImageButton)dataItem.FindControl("imagebutton2");
            imagebutton2.Enabled = true;
        }
    }
}

Thanks,
Princy

[Scott]

Thanks Princy. Below is a page that demonstrates the behavior of losing the images after item command is fired (I was wrong about the enabled state of the buttons... it persists). One piece of information that I should have mentioned is that I am adding the new image controls to the existing griddataitem during the item created event. Since I won't know until I fetch the grid's data what columns will exist, the columns are not defined in markup. If you could help with this scenario, I'd be grateful.

-Scott

​

Imports Telerik.Web.UI

 

Public Class _default

    Inherits System.Web.UI.Page

 

    Protected Sub rgDemo_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs)

 

        Dim dt As DataTable = GetData()

        rgDemo.DataSource = dt

 

    End Sub

 

    Protected Sub rgDemo_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)

        If TypeOf(e.Item) is GridDataItem Then

            SetUpGridDataItem(DirectCast(e.Item, GridDataItem))

        End If

    End Sub

 

    Protected Sub rgDemo_ColumnCreated(sender As Object, e As Telerik.Web.UI.GridColumnCreatedEventArgs)

        If TypeOf e.Column is GridBoundColumn Then

            Dim col As GridBoundColumn = DirectCast(e.Column, GridBoundColumn)

                     

            If col.UniqueName.Contains("Button") Then

            'Need flag but always hide this column

                col.Display = False

            End If

        End If

    End Sub

 

    Protected Sub rgDemo_ItemCommand(sender As Object, e As GridCommandEventArgs)

        Select Case e.CommandName

            Case "Submit"

                'code goes here

            Case "EditView"

                'code goes here

            Case "Undo"

                'code goes here

        End Select

    End Sub

 

    Protected Sub rgDemo_ItemCreated(sender As Object, e As Telerik.Web.UI.GridItemEventArgs)

        If TypeOf(e.Item) is GridDataItem Then

            SetUpGridDataItem(DirectCast(e.Item, GridDataItem))

        End If

    End Sub

 

    Private Function GetData() As DataTable

        Dim dt As New DataTable

 

            dt.Columns.Add("Name")

            dt.Columns.Add("Button1")

            dt.Columns.Add("Button2")

            dt.Columns.Add("Button3")

            dt.Columns.Add("Status1")

            dt.Columns.Add("Status2")

            dt.Columns.Add("Status3")

 

            dt.Rows.Add("Test Row 1", "0", "0", "0", "A", "A", "A")

            dt.Rows.Add("Test Row 2", "0", "1", "0", "A", "B", "A")

            dt.Rows.Add("Test Row 3", "1", "1", "1", "B", "B", "B")

 

        Return dt

    End Function

 

    Private Function GetColumns() As List(Of String)

        Dim oCols As New List(Of String)

 

        oCols.Add("Status1")

        oCols.Add("Status2")

        oCols.Add("Status3")

 

        Return oCols

    End Function

 

    Private Sub SetUpGridDataItem(ByRef gdi As GridDataItem)

        If gdi("Button1").Text = "0" Then

            Dim btn As RadButton = TryCast(gdi("EditView").FindControl("btnEditView"), RadButton)

            If btn isnot Nothing then btn.Enabled = False

        End If

 

        If gdi("Button2").Text = "0" Then

            Dim btn As RadButton = TryCast(gdi("Submit").FindControl("btnSubmit"), RadButton)

            If btn isnot Nothing then btn.Enabled = False

        End If

 

        If gdi("Button3").Text = "0" Then

            Dim btn As RadButton = TryCast(gdi("UndoEdits").FindControl("btnUndo"), RadButton)

            If btn isnot Nothing then btn.Enabled = False

        End If

 

        For Each col As String In GetColumns()

            Select Case gdi(col).Text

                Case "A"

                    Dim img As New Image

                    img.ImageUrl = "~/Images/GreenDot.png"

                    img.ToolTip = gdi(col).Text

                    img.ID = "img" & col

                    gdi(col).Controls.Add(img)

                    gdi(col).HorizontalAlign = HorizontalAlign.Center

                Case "B"

                    Dim img As New Image

                    img.ImageUrl = "~/Images/RedDot.png"

                    img.ToolTip = gdi(col).Text

                    img.ID = "img" & col

                    gdi(col).Controls.Add(img)

                    gdi(col).HorizontalAlign = HorizontalAlign.Center

                Case Else

                'valid status not found, do not create icon

            End Select

        Next

    End Sub

 

End Class

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="default.aspx.vb" Inherits="demo_gridreset._default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <telerik:RadScriptManager ID="ScriptManager1" runat="server" >
        </telerik:RadScriptManager>

        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1" >
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <updatedcontrols>
                        <telerik:AjaxUpdatedControl ControlID="rgDemo" />
                    </updatedcontrols>
                </telerik:AjaxSetting>

                <telerik:AjaxSetting AjaxControlID="rgDemo">
                    <updatedcontrols>
                        <telerik:AjaxUpdatedControl ControlID="rgDemo" />
                    </updatedcontrols>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="200px" Width="200px" >
        </telerik:RadAjaxLoadingPanel>

        <div>
            <telerik:RadGrid ID="rgDemo" runat="server" Width="100%" AutoGenerateColumns="true" AllowPaging="true"
                AllowSorting="True" AllowFilteringByColumn="false"
                OnItemCreated="rgDemo_ItemCreated"  ViewStateMode="Enabled" OnItemCommand="rgDemo_ItemCommand"
                OnNeedDataSource="rgDemo_NeedDataSource" OnItemDataBound="rgDemo_ItemDataBound" OnColumnCreated="rgDemo_ColumnCreated"  >
                <GroupingSettings CaseSensitive="false" />
                <PagerStyle AlwaysVisible="true" />
                <MasterTableView CommandItemDisplay="None" HierarchyLoadMode="Client" GroupLoadMode="Server" >
                    <Columns>
                        <telerik:GridTemplateColumn  UniqueName="EditView" HeaderText="" HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowFiltering="false" >
                            <ItemTemplate>
                                <telerik:RadButton ID="btnEditView" runat="server" CommandName="EditView" Text="Edit" ><Icon PrimaryIconCssClass="rbEdit" /></telerik:RadButton>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <Columns>
                        <telerik:GridTemplateColumn  UniqueName="Submit" HeaderText="" HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowFiltering="false" >
                            <ItemTemplate>
                                <telerik:RadButton ID="btnSubmit" runat="server" CommandName="Submit" Text="Submit" ><Icon PrimaryIconCssClass="rbUpload" /></telerik:RadButton>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                    <Columns>
                        <telerik:GridTemplateColumn  UniqueName="UndoEdits" HeaderText="" HeaderStyle-Width="50px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center" AllowFiltering="false" >
                            <ItemTemplate>
                                <telerik:RadButton ID="btnUndo" runat="server" CommandName="Undo" Text="Undo Edits" ><Icon PrimaryIconCssClass="rbCancel" /></telerik:RadButton>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </div>
    </form>
</body>
</html>

[Konstantin Dikov]

Hello Scott,

The behavior that you are observing is rather expected, since the data for each item will not be available in the ItemCreated event handler, so the images will not be applied at that time. Furthermore, the ItemDataBound event will be fired only when the grid is currently binding, but when a custom command is fired, that will not force the grid to rebind, so the event will not fire and you will not be able to add the images.

The easiest solution for your requirement is to handle the server-side OnPreRender event of the grid, traverse through each data item and call the SetUpGridDataItem() method there:

Protected Sub rgDemo_PreRender(sender As Object, e As EventArgs)
    For Each item As GridDataItem In rgDemo.Items
        SetUpGridDataItem(item)
    Next
End Sub

Another possible approach would be to keep you current logic and call the grid's Rebind() method when a custom command is fired:

Protected Sub rgDemo_ItemCommand(sender As Object, e As GridCommandEventArgs)
    Select Case e.CommandName
        Case "Submit"
            rgDemo.Rebind()
        Case "EditView"
            rgDemo.Rebind()
        Case "Undo"
            rgDemo.Rebind()
    End Select
End Sub

Hope that helps.



Regards,
Konstantin Dikov
Telerik

 

 

[Scott]

Konstantin,

Using the PreRender event worked perfectly! Thanks so much!

-Scott