[Solved] Cant select row with templated content

[Jason]

Hi,

I apologise if this has been answered before, I have tried searching and cannot find an answer.

I have a radgrid with an itemtemplate within containing a table with labels etc etc...

I am able to select a row, but only outside the contents within the item template. Ie: where there are no table cells. This means in my scenario that the user can only click on the very edge of each row to select it.

I need users to be able to click anywhere within the row to select it. Any ideas?

Kind Regards

Jason Parsons(UK)

[Daniel]

Hello Jason,

Could you please post the contents of your GridTemplateColumn? In the meantime I recommend you replace the table with DIV elements.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jason]

Hi,

Thanks for the quick response, please find below my item template. The NoBorders class does nothing other than remove the borders from the table. Where there is a td cell, it is not selectable by the mouse cursor within the row. Outside the table, it works. I have not yet tried using a div, but will I still get the same problem?

<telerik:GridTemplateColumn UniqueName="TemplateColumn" ItemStyle-Width="700px">
            <ItemTemplate>
                <asp:Label  ID="Label9"
                            runat="server"
                            Text='<%# Bind("ContactId") %>'
                            Visible="false" />

                <table class="NoBorders" width="100%" border="0" cellpadding="2" cellspacing="2">
                        <tr>
                            <td width="50%">
                                <table class="NoBorders" border="0" cellpadding="2" cellspacing="2">
                                    <tr>
                                        <td>
                                            <strong>Name:</strong>
                                        </td>
                                        <td>
                                            <asp:Label  ID="Label1"
                                                        runat="server"
                                                        Text='<%# Bind("Salutation") %>' />&nbsp;

                                            <asp:Label  ID="Label2"
                                                        runat="server"
                                                        Text='<%# Bind("ForeName") %>' />&nbsp;

                                            <asp:Label  ID="Label3"
                                                        runat="server"
                                                        Text='<%# Bind("Surname") %>' />&nbsp;
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <strong>Organisation:</strong>
                                        </td>
                                        <td>
                                            <asp:Label  ID="Label7"
                                                        runat="server"
                                                        Text='<%# Bind("OrganisationId") %>' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <strong>Job Title:</strong>
                                        </td>
                                        <td>
                                            <asp:Label  ID="Label6"
                                                        runat="server"
                                                        Text='<%# Bind("JobTitle") %>' />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                            <td width="50%">
                                <table class="NoBorders" border="0" cellpadding="2" cellspacing="2">
                                    <tr>
                                        <td>
                                            <strong>Home Phone:</strong>
                                        </td>
                                        <td>
                                            <asp:Label  ID="Label4"
                                                        runat="server"
                                                        Text='<%# Bind("HomePhone") %>' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <strong>Business Phone:</strong>
                                        </td>
                                        <td>
                                            <asp:Label  ID="Label10"
                                                        runat="server"
                                                        Text='<%# Bind("BusinessPhone") %>' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <strong>Mobile:</strong>
                                        </td>
                                        <td>
                                            <asp:Label  ID="Label5"
                                                        runat="server"
                                                        Text='<%# Bind("Mobile") %>' />
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <strong>Email:</strong>
                                        </td>
                                        <td>
                                            <asp:Label  ID="Label8"
                                                        runat="server"
                                                        Text='<%# Bind("Email") %>' />
                                        </td>
                                    </tr>
                                </table>
                            </td>
                        </tr>
                    </table>
                </ItemTemplate>
            </telerik:GridTemplateColumn>

Kind Regards

Jason Parsons(UK)

[Daniel]

Hello Jason,

Thank you for the code snippet. In your scenario I'd recommend you use DIV elements to sidestep this behavior.

Let me know if you need more information.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

[Jason]

Hi,

I have implemented DIV elements within the template and this worked! The only problem is, wen clicking on the item, it seems to lose all of its css styling?

When viewing source, it all looks ok with the correct css classes and the css styles are displayed in the page above.. yet once clicked it dosnt render properly. Is this a known issue?

Many Thanks

Jason Parsons

[Daniel]

Hello Jason,

I would like to test your code locally. Could you please isolate the problem in a simple, runnable project that demonstrate the aforementioned behavior?

Regards,
Daniel
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.

[RayC]

Hi,

I have the same problem - I also have an image in my template, which seems to also block the mouse click. (And I'm sure the users will click the image first rather than the text as it tends to draw the eyes a bit).

Is it possible to select the row with an image click in the row?

Thank you for your help.

[Jason]

The solution seems to be to wrap the content in a div. Anything in a table cell becomes unselectable. This caused us some serious problems and many more hours of coding as we had a lot to display in the row and it needed to be aligned etc... but the div solution works. Have you tried this? I have to admit i havnt tried it with an image in a div (just about everything else though :))

Oh and.. in reply to the grid losing style, this occurs in IE8 only, luckily at the moment we are not supporting this so havnt looked into it further as of yet.

Jason

[Daniel]

Hello Jason,

You could set the image as a background to DIV element to allow the user to select the row through it. Another possible approach that crosses my mind is to use server-side ImageButton with CommandName="Select" although this will cause postback - this might not be suitable for your scenario.

As to the styles problem - could you please provide more information?

Best regards,
Daniel
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.

[RayC]

Thank you both for your replies. Settings the image as a background in a div fixes the problem.

Cheers.