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

RadGrid GridTemplateColumn with RadButton ContentTemplate

1 Answer 246 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Brett
Top achievements
Rank 1
Brett asked on 09 Oct 2014, 04:49 PM
01.<telerik:RadGrid ID="RadGrid1"  runat="server">       
02.    <MasterTableView DataKeyNames="EntityID" AutoGenerateColumns="false" ShowHeader="false" ShowFooter="false">
03.        <Columns>
04.            <telerik:GridTemplateColumn UniqueName="EntitySelector">
05.                <ItemTemplate>
06.                    <div  class="item">
07.                        <label class="name"><%# ((Domain.Entities.Model)Container.DataItem).ModelName%></label>
08.                        <label class="abbr"><%# ((Domain.Entities.Model)Container.DataItem).ModelTypeName %></label>
09.                        <img class="type" src="media/<%# ((Domain.Entities.Model)Container.DataItem).ModelTypeImageURI %>" alt="<%# ((Domain.Entities.Model)Container.DataItem).ModelTypeName %>" />
10.                        <telerik:RadButton ID="btnSelectModel" runat="server" OnClick="btnSelectModel_Click" Value="<%# ((Domain.Entities.Model)Container.DataItem).EntityID %>" Text="Select Entity"></telerik:RadButton>
11.                    </div>
12.                </ItemTemplate>
13.            </telerik:GridTemplateColumn>
14.        </Columns>
15.    </MasterTableView>                           
16.</telerik:RadGrid>


This preceeding code functions, what I want is to have the content template of the RadButton contain the div [class=item] section, so that I can make the entire gridItem clickable (handled server-side).. when I attempt to do that, I get a design time error regarding Telerik.Web.UI.RibbonBarTemplateItem (Container) not containing DataItem. 

I'm really just looking for a clickable container here to wrap my content.. it doesn't have to be the RadButton

1 Answer, 1 is accepted

Sort by
0
Brett
Top achievements
Rank 1
answered on 13 Oct 2014, 06:14 PM
I ended up doing a work around, adding CssClass='btnSelectModel' to the RadButton and adding/attaching an anynomous event listener to onclick of the parent div that invokes the radbutton.  
 
var elm = document.querySelectorAll("div.item");
for (i = 0; i < elm.length; i++) {
    elm[i].addEventListener(
'click', function(e) {
        
var btnModel = e.target.parentElement.querySelectorAll('.btnSelectModel input[type="submit"]')[0] || e.target.parentElement.parentElement.querySelectorAll('.btnSelectModel 
input[type="submit"]'
)[0] || e.target.parentElement.parentElement.parentElement.querySelectorAll('.btnSelectModel 
input[type="submit"]'
)[0];
        btnModel.click();
    });
}

There are some bugs with this approach, however.  
Tags
Grid
Asked by
Brett
Top achievements
Rank 1
Answers by
Brett
Top achievements
Rank 1
Share this question
or