<
telerik:RadGrid ID="RadGrid1" runat="server" AllowAutomaticInserts="false" AllowAutomaticUpdates="false"
AllowMultiRowEdit="false" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
EnableEmbeddedSkins="false" GridLines="None" MasterTableView-EditMode="InPlace"
OnItemCommand="RadGrid1_ItemCommand" OnItemDataBound="RadGrid1_ItemDataBound"
OnNeedDataSource="RadGrid1_NeedDataSource" OnPreRender="RadGrid1_PreRender" OnUpdateCommand="RadGrid1_UpdateCommand"
PageSize="20" ShowStatusBar="True" Skin="Custom">
<MasterTableView AutoGenerateColumns="false" ClientDataKeyNames="PROPID" CommandItemDisplay="TopAndBottom" NoMasterRecordsText="No Data Available"
CommandItemStyle-HorizontalAlign="Right" DataKeyNames="PROPID" EditMode="InPlace"
ItemStyle-Height="20px" >
<Columns>
<telerik:GridTemplateColumn DataField="AppId" Display="false" HeaderText="AppId"
UniqueName="AppId">
<ItemTemplate>
<asp:Label ID="lblAppId" runat="server" Text='<%# Bind( "AppId" ) %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblAppIdEdit" runat="server" Text='<%# Bind( "AppId" ) %>'></asp:Label>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridTemplateColumn DataField="PROPID" Display="false" HeaderText="PROPID"
UniqueName="PROPID">
<ItemTemplate>
<asp:Label ID="lblPROPID" runat="server" Text='<%# Bind( "PROPID" ) %>'></asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:Label ID="lblPROPIDEdit" runat="server" Text='<%# Bind( "PROPID" ) %>'></asp:Label>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="PropertyType" HeaderText="Category" ReadOnly="true"
UniqueName="PropertyType">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="PropertyName" HeaderText="Property Name" ReadOnly="true"
UniqueName="PropertyName">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn DataField="PropertyValue" HeaderText="Property Value"
UniqueName="PropertyValue">
<ItemTemplate>
<asp:Label ID="lblPropertyValue" runat="server" Text='<%# Bind( "PropertyValue" ) %>'>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:DropDownList ID="ddlList" runat="server">
</asp:DropDownList>
<asp:TextBox ID="txtPropertyValue" runat="server" CssClass="adminUser_textInput1" Text='<%# Bind( "PropertyValue" ) %>' MaxLength='<%# Bind( "PropertyMax" ) %>' ></asp:TextBox>
<telerik:RadColorPicker ID="cpColorProperty" runat="server" ShowIcon="true" ShowEmptyColor="false" OnClientColorChange="HandleColorChange" Height="350" Width="350"></telerik:RadColorPicker>
<span id = "SpanMandatory" runat="server" style="color: Red"> *</span>
<br/>
</EditItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridBoundColumn DataField="PropertyDefaultValue" HeaderText="Default Value"
ReadOnly="true" UniqueName="PropertyDefaultValue">
</telerik:GridBoundColumn>
<telerik:GridTemplateColumn HeaderText="Property Description" UniqueName="PropertyDescription">
<ItemTemplate>
<asp:Label ID="lblPropertyDescription" runat="server" Text='<%# Bind( "PropertyDescription" ) %>'/>
</ItemTemplate>
</telerik:GridTemplateColumn>
<telerik:GridEditCommandColumn ButtonType="ImageButton" CancelImageUrl="../../Skins/Custom/Grid/Cancel.gif"
EditImageUrl="../../Skins/Custom/Grid/Edit.gif" HeaderStyle-CssClass="header_grid"
HeaderText="Action" InsertImageUrl="../../Skins/Custom/Grid/AddRecord.gif" UniqueName="EditCommandColumn"
UpdateImageUrl="../../Skins/Custom/Grid/Update.gif">
<ItemStyle CssClass="grid" Width="3%" />
</telerik:GridEditCommandColumn>
</Columns>
<PagerTemplate>
<div>
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td>
<asp:Panel ID="PagerPanel" runat="server" BorderStyle="None" BorderWidth="0">
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td width="30%">
<img alt="" src="/images/spacer.gif" width="12" /></td>
<td width="70%">
<table border="0" cellpadding="0" cellspacing="6" class="site_setting_table">
<tr>
<td height="20" width="20">
<asp:Button ID="btnChangeToFirst" runat="server" CommandArgument="First" CommandName="Page"
CssClass="data_preView_but3" Height="20" OnClientClick="changePage('first'); return false;"
ToolTip="First" Width="20" />
</td>
<td height="20" width="20">
<asp:Button ID="btnChangeToPrev" runat="server" CssClass="data_preView_but1" Height="20"
OnClientClick="changePage('prev'); return false;" ToolTip="Previous" Width="20" />
</td>
<td>
<table border="1" cellpadding="0" cellspacing="0" class="site_setting_table">
<tr>
<td class="admin_label4">
Page:
</td>
<td class="admin_label4">
<telerik:RadNumericTextBox ID="RadNumericTextBox1" runat="server" Height="19" Skin="Office2007"
Value='<%# (int)DataBinder.Eval(Container, "Paging.CurrentPageIndex") + 1 %>'
Width="25px">
<NumberFormat DecimalDigits="0" />
</telerik:RadNumericTextBox></td>
<td class="admin_label4">
of
<%
# DataBinder.Eval(Container, "Paging.PageCount")%>
<!-- Cybage- -->
<!-- Cybage- -->
</td>
</tr>
</table>
</td>
<td height="20" width="20">
<asp:Button ID="btnChangetoNext" runat="server" CommandArgument="Next" CommandName="Page"
CssClass="data_preView_but2" Height="20" OnClientClick="changePage('next'); return false;"
ToolTip="Next" Width="20" />
</td>
<td height="20" width="20">
<asp:Button ID="btnChangeToLast" runat="server" CommandArgument="Last" CommandName="Page"
CssClass="data_preView_but4" Height="20" OnClientClick="changePage('last'); return false;"
ToolTip="Last" Width="20" />
<asp:Panel ID="NumericPagerPlaceHolder" runat="server">
</asp:Panel>
</td>
<!-- Cybage- -->
<td class="admin_label4">
<table>
<tr>
<td class="admin_label4">
Records per page:
</td>
<td>
<asp:DropDownList ID="ddlpagesize" runat="server" AutoPostBack="true" CssClass="admin_list2"
OnSelectedIndexChanged="ddlpagesize_OnSelectedIndexChange">
<asp:ListItem Text="15" Value="15"></asp:ListItem>
<asp:ListItem Text="20" Value="20"></asp:ListItem>
<asp:ListItem Text="25" Value="25"></asp:ListItem>
<asp:ListItem Text="30" Value="30"></asp:ListItem>
</asp:DropDownList>
</td>
</tr>
</table>
</td>
<!-- Cybage- -->
</tr>
</table>
</td>
</tr>
</table>
</asp:Panel>
</td>
</tr>
</table>
</div>
</PagerTemplate>
<PagerStyle Mode="NumericPages" PageButtonCount="10" />
<CommandItemTemplate>
<%
--<asp:Button ID="UpdateBtn" runat="server" CausesValidation="False" CommandName="UpdateAll"
CssClass="button" Text="Update" ToolTip="Update" />--
%>
</CommandItemTemplate>
</MasterTableView>
<%
--------Cybage-04-Feb-2009----------------------------------------------------------------------------------------%>
<ClientSettings>
<ClientEvents OnGridCreated="GridCreated" OnRowClick="RowClick" OnRowDblClick="RowDblClick" />
</ClientSettings>
<%
--------Cybage-04-Feb-2009----------------------------------------------------------------------------------------%>
<EditItemStyle CssClass="EditRow_WinXP" />
</telerik:RadGrid>
I have used Color Picker in above mentioned code with Default Skin. When ever any row with Color Picker trys to edit, it distorted the UI(See Attached jif image). It is happening in all browsers. Can you please help me in this?
1 Answer, 1 is accepted
I am not quite sure what you mean by saying that the UI is distorted as you have not mentioned how you need a row in edit mode to look. I suppose you want to place the color picker control next to the textbox. The reason why the color picker is displayed on a new line, is because its outermost element is a DIV, which uses display:block by default. In order to show your controls one next to the other, you can use the float CSS property - e.g. apply "float:left". Please note, that you need to clear the float of the elements in the cell.
Sincerely yours,
Tsvetie
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.