Accessing CommandItemTemplate controls in grid

[Acadia]

 

 

Hello,

I have the following CommandItemTemplate (below) in my RadGrid and I am wondering how to access the buttons and checkboxes in that template.  Specifically, I want to disable/enable them when appropriate.  How do I access those controls programatically serverside?  I'll be doing this in the PageLoad() method.  VB.NET.  Thanks for the help!

 

 

<telerik:RadGrid ID="rgT" runat="server" Skin="WebBlue" AutoGenerateColumns="False"

 

 

GridLines="None" AllowFilteringByColumn="True" AllowMultiRowEdit="true" AllowMultiRowSelection="true"

 

 

OnItemDataBound="rgT_ItemDataBound" OnItemCommand="rgT_ItemCommand" Width="1093px"

 

 

Height="500px">

 

 

<MasterTableView CommandItemDisplay="Top" EditMode="InPlace">

 

 

<Columns>

 

 

</telerik:GridTemplateColumn>

 

 

<telerik:GridBoundColumn DataField="FIELD1" HeaderText="" UniqueName="FIELD1"

 

 

ReadOnly="True" Display="false">

 

 

</telerik:GridBoundColumn>

 

 

 

</Columns>
<

CommandItemTemplate>

 

 

<div id="DivUA" runat="server" style="padding-top: 5px; padding-bottom: 5px">

 

 

<table>

 

 

<tr>

 

 

<td>

 

 

<asp:Button runat="server" ID="btnUA" Text="Save" ToolTip="Save all changes you've made to the data"

 

 

Width="70px" CommandName="UpdateAll" CssClass="CommandButton" /></td>

 

 

<td style="padding-left:15px">

 

 

<asp:Button runat="server" ID="btnCGC" Text="Cancel Edits" ToolTip="Cancel all unsaved edits made to the data and reload the original data"

 

 

Width="100px" CommandName="CancelAll" CssClass="CommandButton" /></td>

 

 

<td align="right" style="padding-left:15px">

 

 

<asp:Button runat="server" ID="btnEditSelected" Text="Edit Selected" ToolTip="Place all selected grid rows into edit mode."

 

 

Width="100px" CommandName="EditSelected" CssClass="CommandButton" />

 

 

</td>

 

 

<td align="right" style="width: 120px">

 

 

<asp:CheckBox ID="cbToggleApproved" runat="server" Text="Hide Approved" CssClass="Normal"

 

 

OnCheckedChanged="hideAllApproved" AutoPostBack="True" /></td>

 

 

<td align="right" style="width: 100px">

 

 

<asp:CheckBox ID="cbApproveAll" runat="server" Text="Approve All" AutoPostBack="True"

 

 

OnCheckedChanged="approveAllCheckChanged" CssClass="Normal" /></td>

 

 

</tr>

 

 

</table>

 

 

</div>

 

 

</CommandItemTemplate>

 

[Daniel]

Hello Acadia,

In the most cases the controls in your CommandItemTemplate wouldn't be accessible on the first Load event. Better approach is to access them in the PreRender handler as shown below:

    Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
        Dim chbox As CheckBox = radGrid1.MasterTableView.GetItems(GridItemType.CommandItem)(0).FindControl("cbApproveAll")
        chbox.Enabled = False
    End Sub

Let us know if you need more information.

Regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Acadia]

This worked perfectly thanks for the quick response!

[Acadia]

I have noticed a bug after implementing this solution.  For some reason every time I hover over one of the disabled buttons in the CommandItemTemplate I get a Javascript error in a popup box that states:

Sys.ArgumentException:  Value must be a DOM element
Parameter Name:  element

This only happens when hovering over the buttons, not the checkboxes in the CommandItemTemplate.

Has anyone ever seen this behavior before?  How do you resolve this?

Thanks

[Daniel]

Hello Acadia,

Please try the following workaround and let me know whether it helps.

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<script type="text/javascript" language="javascript">
    var oldDomEvent = Sys.UI.DomEvent;
    Sys.UI.DomEvent = function(rawEvent) { if (rawEvent.srcElement && typeof (rawEvent.srcElement.getClientRects) == "undefined") return; var evt = new oldDomEvent(rawEvent); for (var o in evt) this[o] = evt[o]; }
    for (var o in oldDomEvent)
        Sys.UI.DomEvent[o] = oldDomEvent[o];
</script>

Note that the mentioned JavaScript should be placed right below the ScriptManager control.

Best regards,
Daniel
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.

[Mike]

I have a grid with a checkbox colum.  When the user clicks the Check All button  I want all the check boxes to be checked.  Using your methos I keep runing into an indexing error, as follows :

Exception Details: System.IndexOutOfRangeException: Index was outside the bounds of the array.

        <rad:RadGrid ID="RadGridResult" runat="server" GridLines="None"  EnableAJAX="True" Skin="WebBlue" EnableAJAXLoadingTemplate="True"
         AutoGenerateColumns="False" Height="370px" Width="950px" AllowPaging="True" AllowMultiRowSelection=true>
        
            <MasterTableView>           
                <ExpandCollapseColumn Resizable="False" Visible="False">
                    <HeaderStyle Width="20px" />
                </ExpandCollapseColumn>
                <RowIndicatorColumn Visible="False">
                    <HeaderStyle Width="20px" />
                </RowIndicatorColumn>
                <Columns>                
                         
                    <rad:GridCheckBoxColumn UniqueName="colCheckBox">
                    </rad:GridCheckBoxColumn>
                    <rad:GridButtonColumn ButtonType="ImageButton" UniqueName="colImage">
                        <ItemStyle Width="10px" />
                    </rad:GridButtonColumn>
                    <rad:GridButtonColumn CommandName="LessonID" DataTextField="LessonID" HeaderText="Lesson ID" UniqueName="column">
                    </rad:GridButtonColumn>
                    <rad:GridButtonColumn DataTextField="LearningTitle" HeaderText="Lesson Title" UniqueName="colLearningTitle"
                        CommandArgument="LearningTitle">
                    </rad:GridButtonColumn>
                    <rad:GridBoundColumn DataField="LessonDate" HeaderText="Lesson Date" UniqueName="colLessonDate">
                    </rad:GridBoundColumn>
                    <rad:GridBoundColumn DataField="Discipline" HeaderText="Discipline" UniqueName="colDiscipline">
                    </rad:GridBoundColumn>
                    <rad:GridBoundColumn DataField="Area" HeaderText="Area of Op." UniqueName="colArea">
                    </rad:GridBoundColumn>
                    <rad:GridBoundColumn DataField="Category" HeaderText="Category" UniqueName="colCategory">
                    </rad:GridBoundColumn>
                    <rad:GridBoundColumn DataField="subCategory" HeaderText="Subcategory" UniqueName="colSubCategory">
                    </rad:GridBoundColumn>
                    <rad:GridBoundColumn DataField="Field" HeaderText="Project" UniqueName="column1">
                    </rad:GridBoundColumn>
                    <rad:GridBoundColumn DataField="NIDP" HeaderText="NIDP Stage" UniqueName="column2">
                    </rad:GridBoundColumn>
                  
                </Columns>
                <AlternatingItemStyle Wrap="True" />
            </MasterTableView>
            <PagerStyle Mode=NextPrevNumericAndAdvanced/>            
        </rad:RadGrid>
        
        <asp:Label ID="lblError" runat="server" Text="" ForeColor="red"></asp:Label><br />
        <asp:Button ID="btnChkAll" runat=server Text="Check All" Tooltip="Select All Lessons" CssClass="mybutton" />
        <asp:Button ID="btnPrintResult" runat="server" Text="Print" ToolTip="Print Search Results" CssClass="mybutton" OnClientClick="checkPrint()" />
        <asp:Button ID="btnPrintLesson" OnClientClick="target='_blank';" runat="server" Text="Select" ToolTip="Print Selected Results" />
        <asp:Button ID="btnClose" runat="server" Text="Close" OnClientClick="window.close();" />

 Protected Sub btnChkAll_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles btnChkAll.Click
        'resize the grid to the maximum number of rows
        RadGridResult.MasterTableView.PageSize = hfGridRows.Value
        RadGridResult.Rebind()
        'check all the checkboxes

        Dim chbox As CheckBox = RadGridResult.MasterTableView.GetItems(GridItemType.CommandItem)(0).FindControl("colCheckBox")

        chbox.Enabled = True


    End Sub

[Princy]

Hi Mike,

Try out the following code snippet in the ButtonClick event.

VB:

 Protected Sub btnChkAll_Click(ByVal sender As Object, ByVal e As EventArgs)
     For Each item As GridDataItem In RadGridResult.MasterTableView.Items
         Dim chkbx As CheckBox = DirectCast(item("colCheckBox").Controls(0), CheckBox)
         chkbx.Checked = True
     Next
 End Sub

Thanks
Princy

[Mike]

Princy

Thanks for the quick response, Princy.  Works a treat!

Mike

[Anupam]

Daniel's solution works fine only for the CommandItems at the top. How do I access the CommandItems at the bottom(in the footer) in Page_PreRender?

[Princy]

Hello Anupam,

To access any control in the command row at the bottom, when CommandItemDisplay set to TopAndBottom in the grid, you can try out the following code:

vb:

Protected Sub radGrid1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender
  Dim cntrl As Control = radGrid1.MasterTableView.GetItems(GridItemType.CommandItem)(1).FindControl("ControlID")

End Sub

-Princy.

[Augustine]

Hi , Please i will like to know how to add paging for a gridview from the code behind and the format is going to be Prev 123456 Next to 
make my Grid more user friendly as possible.
I have done it with normal ASP.NET /C# Gridview but just want to use it with RadGridview. Am using a Dataset set to bind the gridview from the code behind.

Please Help. 

[Princy]

Hello Augustine,

A better suggestion is to use PagerTemplate and customize the PagerItem. Here is one Demo which shows how it works.
Grid / Pager Template

Thanks,
Princy.

[Srujan]

Hi Princy ,

I am using GridTableView and when I use following command tableView.GetItems(GridItemType.CommandItem)[1] I am getting null exception error , where as when I use CommandItemDisplay = "top"  and use this command it works fine  tableView.GetItems(GridItemType.CommandItem)[0]  can you suggest how to proceed further .

Thanks
Srujan.N

[Princy]

Hi Srujan,

In order to show the command item, you should set CommandItemDisplay property of MasterTableView other than None. It can take four values: None, Top, Bottom, TopAndBottom corresponding to the place where it will appear.
 
If you have the value as Top or Bottom, you can access it as follows:

 GridItem cmdItem = RadGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0];

In case if you set TopAndBottom, then you can access it as follows:

  GridItem cmdItemTop = RadGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[0];//To access the CommandItems at Top
GridItem cmdItemBottom = RadGrid1.MasterTableView.GetItems(GridItemType.CommandItem)[1];//To access the CommandItems at Bottom

Thanks,
Princy

[Srujan]

Hi Princy ,

I have commandItemdisplay property set on GridTableView and it is set to bottom and when I use the below code it give me error

GridTableView tableView = (GridTableView)e.Item.OwnerTableView;
GridCommandItem item = (GridCommandItem)tableView.GetItems(GridItemType.CommandItem)[1];

Thanks
Srujan.N

[Princy]

Hi Srujan,

The Index is "0" for Top or Bottom values of CommandItemDisplay. Please try the following code snippet.

C#:

GridTableView tableView = (GridTableView)e.Item.OwnerTableView;
GridCommandItem item = (GridCommandItem)tableView.GetItems(GridItemType.CommandItem)[0];

Thanks,
Princy