Controls in EditItemTemplate

[Ryan Emptage]

Hi

Can you have more than one control in the EditItemTemplate?

For example, I want a RadTextBox and RadColorPicker in the EditItemTemplate.

[Ryan Emptage]

Sorry, I forgotten to mention that I'm using in-line edit mode as well.

[Princy]

Hello Ryan,

It is possible to add more than one control in the ItemTemplate of your TemplateColumn as shown below:
aspx:

<telerik:GridTemplateColumn UniqueName="TemplateColumn1">
     <EditItemTemplate>
           <telerik:RadTextBox ID="RadTextBox2" runat="server">
           </telerik:RadTextBox>
           <telerik:RadColorPicker ID="RadColorPicker1"   runat="server" Preset="Standard">
           </telerik:RadColorPicker>
    </EditItemTemplate>
</telerik:GridTemplateColumn>

-Princy.

[Ryan Emptage]

Ok thanks Princy.

So I wrote the following code:

<EditItemTemplate>
<telerik:RadTextBox ID="radTxtCssValue" runat="server" Text='<%# Bind("CssValue") %>' Font-Names="Verdana" Font-Size="Small"></telerik:RadTextBox>
<telerik:RadColorPicker ID="radColorPicker" runat="server" Preset="Default" ShowIcon="true" ></telerik:RadColorPicker>
</EditItemTemplate>

But I can't get the color picker icon to appear next to the textbox.
It always appears below the textbox.
Also the color picker seems to be outside the RadGrid.
As shown here

Any ideas?
Thanks.

[Shinu]

Hi Ryan,

Try setting a suitable width the for the GridTemplateColumn. And also use a try adding the controls to the EditItemTemplate as shown below.

ASPX:

<telerik:GridTemplateColumn UniqueName="TempCol"  ItemStyle-Width="200px" HeaderStyle-Width="200px"   HeaderText="TempCol" >

<EditItemTemplate>

<table>

<tr>

<td> <telerik:RadTextBox ID="radTxtCssValue" runat="server"  Font-Names="Verdana" Font-Size="Small"></telerik:RadTextBox> </td>

<td>

<telerik:RadColorPicker ID="radColorPicker" runat="server" Preset="Default" ShowIcon="true" ></telerik:RadColorPicker> </td>

</tr>

</table>

</EditItemTemplate>

</telerik:GridTemplateColumn>

Thanks
Shinu

[Ryan Emptage]

Hi Shinu

Thanks - its nearly there.
The color picker now appears next to the textbox - Great!
But the color picker still appears to be outside the RadGrid.
If I scroll then the rows move up/down but the color picker stays in the same position.

[Sebastian]

Hello Ryan,

Can you check whether setting position: relative; for the grid data div alleviates the abnormality? I suspect that you encountered an IE issues (which does not appear under Gecko-based browsers) when an element with relative positioning (RadColorPicker) is placed inside a wrapper without relative position (RadGrid data div).

How to reference the grid data div when scrolling is enabled for the control you can see from the code snippets in this help topic (scrollArea).
 
Best regards,
Sebastian
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.

[Ryan Emptage]

Hi Sebastian

Yes, that worked!

function GridCreated (sender, args)
{
    var divArea = sender.GridDataDiv;
    divArea.style.position = "relative";
}

Thank you.