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

GridButtonColumn Not Shown After Client-Side Binding

5 Answers 183 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Online .Net Developers
Top achievements
Rank 1
Online .Net Developers asked on 05 Feb 2009, 11:06 PM
I'm using AJAX call to dynamically add rows to my RadGrid on the Client-Side.  The data is initially loaded on the Server Side.

If there were X rows when the grid was initialized, adding the (X+1)th row, the GridButtonColumns are not rendered.

What the grid looks like before the Add

What the grid looks like Afterward

After the AJAX call adds the record to the appropriate SQL Table, I use a WebMethod in the page's Code Behind to retrieve all the data that should be in the grid.

I then bind that result to the grid (AGPermissions is the ID of the RadGrid):
        function updateGrid(result) 
        { 
            var masterTableView = GetMasterTableView("<%=AGPermissions.ClientID %>"); 
            if (result) 
            { 
                masterTableView.set_dataSource(result); 
                masterTableView.dataBind();   
                                                
                ToggleDivVisibility('ShowGridClient',true); 
               var grid = $find("<%= AGPermissions.ClientID %>"); 
               grid.repaint(); 
 

While tracing through the code, the correct data is stored within "result".

Here's the RadGrid definition:

    <telerik:RadGrid ID="AGPermissions" EnableViewState="false" runat="server" 
        AllowPaging="false" AllowSorting="false" AllowFilteringByColumn="false" GridLines="None" 
        EnableEmbeddedSkins="false" Skin="IMCGridStyle" ImagesPath="Grid"  
        OnNeedDataSource="AGPermissions_NeedDataSource"
        <ItemStyle Wrap="false" /> 
        <MasterTableView  
            AllowMultiColumnSorting="true"  
            TableLayout="Auto"  
            EnableNoRecordsTemplate="false"  
            ClientDataKeyNames="AssetGroupID,AssetGroupPermissionType" 
            AutoGenerateColumns="false" 
            ShowHeadersWhenNoRecords="false"
            <Columns> 
                    <telerik:GridBoundColumn DataField="AssetGroupID" Display="false" HeaderText="Asset Group ID" /> 
                    <telerik:GridBoundColumn DataField="AssetGroupName" HeaderText="Asset Group" /> 
                    <telerik:GridBoundColumn DataField="AssetGroupPermissionType" Display="false" HeaderText="Asset Group Permission Type" /> 
                    <telerik:GridBoundColumn DataField="AssetGroupPermissionTypeText" HeaderText="Permission Type" /> 
                    <telerik:GridButtonColumn  UniqueName="1MakeGroupMaster"  Visible="true" ButtonType="ImageButton" ImageUrl="Grid/btnMakeGM.jpg" CommandName="1MakeGroupMaster" Text="Make Group Master"></telerik:GridButtonColumn>   
                    <telerik:GridButtonColumn  UniqueName="2MakeGroupReader" ButtonType="ImageButton" ImageUrl="Grid/btnMakeGR.jpg" CommandName="2MakeGroupReader" Text="Make Group Reader"></telerik:GridButtonColumn>   
                    <telerik:GridButtonColumn  ConfirmText="Remove access to this Asset Group?" ButtonType="ImageButton" ImageUrl="Grid/btnRemove.jpg" CommandName="RemoveAccess" Text="Remove Access"></telerik:GridButtonColumn>   
            </Columns> 
            <NoRecordsTemplate> 
                <div>There are no records to display.</div> 
            </NoRecordsTemplate> 
        </MasterTableView> 
         
        <ClientSettings> 
            <ClientEvents  
                OnCommand="RadGridCommand"  
                 
                OnDataBound="TestThis"/> 
        </ClientSettings>         
        <PagerStyle AlwaysVisible="true" /> 
                                 
    </telerik:RadGrid> 
 
 

If I do a refresh of the page, the Server Side methods load and display the grid properly.  Any help on why this is happening would be appreciated.

I'm using the Q3 2008 version.

Thanks.


5 Answers, 1 is accepted

Sort by
0
Nikolay Rusev
Telerik team
answered on 06 Feb 2009, 07:37 AM
Hello,

This is expected behavior of RadGrid. If you have any GridButtonColumn, GridTemplateColumns and add item more than page size you should handle recreating of that controls.
You can listen for OnRowDataBound client-side event and recreate the markup for GridButtonColumn.

All the best,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Online .Net Developers
Top achievements
Rank 1
answered on 06 Feb 2009, 05:43 PM
Thanks for the prompt response Nikolay.  I'm starting to play with the OnRowDataBound event and have a few follow-up questions.

I attached to IE and saw that the InnerHTML of the GridButtonColumns was of the following format:

<INPUT title="Make Group Master"  
style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px"  
onclick="if(!$find('ctl00_dwp_cph_mctctl0_AGPermissions_ctl00').fireCommand('1MakeGroupMaster','1')) return false;"  
tabIndex=-1  
type=image  
alt="Make Group Master"  
src="Grid/btnMakeGM.jpg"  
name=ctl00$dwp$cph$mct$_ctl0$AGPermissions$ctl00$ctl06$ctl00> 

1.  How do I get the current row index to include in the fireCommand() call?
2. How do I build the "name" property?

Thanks.
0
Online .Net Developers
Top achievements
Rank 1
answered on 06 Feb 2009, 05:59 PM
I figured out #1.

$find("<%=AGPermissions.ClientID%>").get_masterTableView().get_dataItems().length; 

Still stumped on #2.

Thanks.
0
Online .Net Developers
Top achievements
Rank 1
answered on 06 Feb 2009, 11:05 PM
Let me add another question:

3.  If I use onclick="if(!$find('<%= AGPermissions.ClientID %>').fireCommand('1MakeGroupMaster','1')) return false;", I get the ID field of the DIV wrapper (e.g. ctl00_dwp_cph_mct__ctl0_AGPermissions), not the Table element's ID (e.g. tl00_dwp_cph_mctctl0_AGPermissions_ctl00).  It's the latter that the server-side generated buttons use.

It also looks like I can do some string manipulation on the Table ID to generate the "name" fields (Question #2).

How do I get this ID?

Thanks.
0
Nikolay Rusev
Telerik team
answered on 09 Feb 2009, 03:47 PM
Hi,

Below is sample code which demonstrates how to add extra GridClientDeleteColumn when bound more than PageSize records:
<script>             
function RowDataBound(sender, args)     
        {     
            if (args.get_item().get_owner().get_pageSize() <= args.get_item()._itemIndexHierarchical)     
            {                     
                var cell = args.get_item().get_owner().getCellByColumnUniqueName(args.get_item(), "DeleteColumn");     
                var element = document.createElement("a");     
                element = cell.appendChild(element);     
                element.onclick = "if (!$find('" + args.get_item().get_owner().get_id() + "').fireCommand('', '" + args.get_item()._itemIndexHierarchical + "')) return false;$find('" + args.get_item().get_owner().get_id() + "')._clientDelete(event); return false;";     
                element.setAttribute("href""");     
                element.innerText = "Delete";                    
            }     
                 
        }     
    </script>    
 

I  hope this helps.

All the best,
Nikolay
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
Grid
Asked by
Online .Net Developers
Top achievements
Rank 1
Answers by
Nikolay Rusev
Telerik team
Online .Net Developers
Top achievements
Rank 1
Share this question
or