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

RADGrid cell controls state after ItemCommand is fired

5 Answers 253 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Scott
Top achievements
Rank 1
Scott asked on 16 May 2014, 08:00 PM
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

5 Answers, 1 is accepted

Sort by
0
Scott
Top achievements
Rank 1
answered on 16 May 2014, 08:26 PM
Correction: I'm currently using both the ItemDataBound and ItemCreated events to set up the GridDataItems.
0
Princy
Top achievements
Rank 2
answered on 17 May 2014, 06:42 AM
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
0
Scott
Top achievements
Rank 1
answered on 19 May 2014, 05:29 PM
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>
 
<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>
0
Accepted
Konstantin Dikov
Telerik team
answered on 21 May 2014, 10:14 AM
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
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Scott
Top achievements
Rank 1
answered on 21 May 2014, 03:06 PM
Konstantin,

Using the PreRender event worked perfectly! Thanks so much!

-Scott
Tags
Grid
Asked by
Scott
Top achievements
Rank 1
Answers by
Scott
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Konstantin Dikov
Telerik team
Share this question
or