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

[Solved] How to Hide GridButtonColumn Button on Client Side?

2 Answers 342 Views

Grid

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

Rob asked on 04 Dec 2009, 07:40 PM

In this example, I have a RadGrid that has a:

1) GridButtonColumn - Image Button
2) GridTemplateColumn - RadTextbox

There is only 1 row in the grid. When the user types something in the textbox then tabs out, I want client side script to hide the image button for that row only. If there was more than one row, each row would be handled on a row by row interactive basis. So in the RadGrid1_PreRender() event, I hook the "onblur" event to a js function where I pass in the index of that row.

In JS, I've got the row and can check the value of the textbox, but I'm struggling getting a reference to the image button for hiding, so this is where I need the help. Once again, I want to accomplish the hiding of the image button in client side script.

Here is the code:

aspx

    
            <%@ Page Language="VB" AutoEventWireup="false" CodeFile="HideGridButtonColumnInJS.aspx.vb" Inherits="HideGridButtonColumnInJS" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                    </telerik:RadScriptManager> 
        
                    <div> 
        
                        <telerik:RadGrid ID="RadGrid1" runat="server">  
        
                            <MasterTableView> 
        
                                <Columns> 
        
                                    <telerik:GridButtonColumn UniqueName="colImg" ButtonType="ImageButton" ImageUrl="FlagYellow.gif" HeaderText="Image"></telerik:GridButtonColumn> 
        
                                    <telerik:GridTemplateColumn UniqueName="colTxt" HeaderText="Textbox">  
        
                                        <ItemTemplate> 
        
                                            <telerik:RadTextBox ID="txt" runat="server">  
        
                                            </telerik:RadTextBox> 
        
                                        </ItemTemplate> 
        
                                    </telerik:GridTemplateColumn> 
        
                                    <telerik:GridBoundColumn DataField="Field1" HeaderText="Field 1"></telerik:GridBoundColumn> 
        
                                </Columns> 
        
                            </MasterTableView> 
        
                        </telerik:RadGrid>         
        
                    </div> 
        
                    <telerik:RadCodeBlock runat="server" ID="rcb">  
        
                         <script type="text/javascript">  
        
                             function hideImage(index) {  
        
                                var grid = $find("<%= Me.RadGrid1.ClientID %>");  
        
                                var item = grid.get_masterTableView().get_dataItems()[index];  
        
                                var txt = item.findControl("txt");  
        
                                if (txt.get_value() != '') {  
        
                                    alert('Hide image button here.');  
        
                                }  
        
                            }  
        
                        </script> 
        
                    </telerik:RadCodeBlock> 
        
                </form> 
        
            </body> 
        
            </html>

    
            Imports Telerik.Web.UI  
        
            Imports System.Data  
        
            Partial Class HideGridButtonColumnInJS  
        
                Inherits System.Web.UI.Page  
        
                Protected Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource  
        
                    Dim dt As New DataTable  
        
                    Dim col As New DataColumn  
        
                    col.ColumnName = "Field1" 
        
                    dt.Columns.Add(col)  
        
                    Dim r As DataRow = dt.NewRow  
        
                    r(0) = "Data" 
        
                    dt.Rows.Add(r)  
        
                    Me.RadGrid1.DataSource = dt  
        
                End Sub 
        
                Protected Sub RadGrid1_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles RadGrid1.PreRender  
        
                    For Each item As GridDataItem In Me.RadGrid1.MasterTableView.Items  
        
                        CType(item("colTxt").Controls(1), RadTextBox).Attributes.Add("onblur", "hideImage('" & item.ItemIndex.ToString & "');")  
        
                    Next 
        
                End Sub 
        
            End Class

2 Answers, 1 is accepted

Accepted

answered on 09 Dec 2009, 03:33 PM

hideimagebutton.zip

Hi Dudeman,

Attached is a sample that demonstrates your scenario using jQuery.

Regards,
Tsvetoslav
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.