Skin of Radcombobox and Raddatetimepicker inside radgrid edit formtemplate is not working properly

[shakil]

In my page, I have 7 radgrid with edit formtemplate.
In the edit formtemplate I used several radcontrols like radcombobox, raddatetimepicker and radtextbox.
All are funtioning properly.
But when I click on edit on radgrid,  the edit template section, radcombobox and raddatetimepicker's skin
do not work. sometimes it comes and sometimes these don't. Then I used radstylesheetmanager...although
I face similar problem...skin is not working here.

NB: If I use it without ajaxified then this design is ok...but I need to be ajaxified...like your controls.

I wanted to use ajaxcontroltoolkit datetimepicker...I could not able to use that in the radgrid edit formtemplate section...

Please suggest me what are the possible cause...need urgent.

Code snippet:

 

<Telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

 

 

<AjaxSettings>

 

 

<Telerik:AjaxSetting AjaxControlID ="dgvDevelopmentActivity">

 

 

<UpdatedControls>

 

 

<Telerik:AjaxUpdatedControl ControlID ="dgvDevelopmentActivity" LoadingPanelID ="Radajaxloadingpanel1" />

 

 

<telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

 

 

</UpdatedControls>

 

 

</Telerik:AjaxSetting>

 

 

<Telerik:AjaxSetting AjaxControlID ="dgvFunctionalStrength">

 

 

 

 

 

<UpdatedControls>

 

 

 

 

 

<Telerik:AjaxUpdatedControl ControlID ="dgvFunctionalStrength" LoadingPanelID ="Radajaxloadingpanel1" />

 

 

 

 

 

<telerik:AjaxUpdatedControl ControlID="RadWindowManager1" />

 

 

 

 

 

</UpdatedControls>

 

 

 

 

 

</Telerik:AjaxSetting>

 

 

 

 

</AjaxSettings>

 

 

</Telerik:RadAjaxManager>

 

 

<Telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">

 

 

</Telerik:RadStyleSheetManager>

 

<

 

Telerik:RadGrid ID="dgvLeadershipStrength" runat="server"

 

 

AllowMultiRowEdit="true" AllowPaging="True" AllowSorting="True"

 

 

AutoGenerateColumns="False" GridLines="None"

 

 

OnItemCommand="dgvLeadershipStrength_ItemCommand"

 

 

OnItemCreated="dgvLeadershipStrength_ItemCreated"

 

 

OnItemDataBound="dgvLeadershipStrength_ItemDataBound"

 

 

OnNeedDataSource="dgvLeadershipStrength_NeedDataSource" PageSize="7"

 

 

ShowStatusBar="true" Skin="Outlook" Width="750px">

 

 

<headercontextmenu enableautoscroll="True">

 

 

</headercontextmenu>

 

 

<mastertableview commanditemdisplay="Top" datakeynames="DetailID" dir="LTR" editmode="EditForms" >

 

 

<commanditemsettings addnewrecordtext="Leadership Strength" ShowRefreshButton ="false" />

 

 

<Columns>

 

 

<Telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderText="Edit">

 

 

<ItemStyle Width="20px" />

 

 

</Telerik:GridEditCommandColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true" ColumnEditorID="txtVanish"

 

 

DataField="DetailID" HeaderText="Vanish" UniqueName="colVanished"

 

 

Visible="false">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true"

 

 

ColumnEditorID="ddlCompetency" DataField="Competency" HeaderText="Competency"

 

 

UniqueName="colCompetency">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true"

 

 

ColumnEditorID="ddlCompetencyArea" DataField="area" HeaderText="areas"

 

 

SortExpression="area" UniqueName="colCompetencyArea">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true" ColumnEditorID="ddlLevel"

 

 

DataField="level" HeaderText="Level" SortExpression="level"

 

 

UniqueName="colLevel">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true"

 

 

ColumnEditorID="ddlIndicator" DataField="Indicator" HeaderText="Indicator"

 

 

SortExpression="Name" UniqueName="colIndicator">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridBoundColumn DataField="Evidence" HeaderText="Evidence"

 

 

SortExpression="Evidence" UniqueName="colEvidence" />

 

 

<Telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete"

 

 

HeaderText="Delete" UniqueName="DeleteColumn" />

 

 

</Columns>

 

 

 

<editformsettings editformtype="Template"

 

 

formstyle-backcolor="Transparent">

 

 

<editcolumn uniquename="EditCommandColumn1">

 

 

</editcolumn>

 

 

<formstyle backcolor="Transparent" />

 

 

<formtemplate>

 

 

<div style="width: 100%; height: 100%">

 

 

<table border="0" cellspacing="2" style="width: 100%; border-color: #99ccff">

 

 

<tr>

 

 

<td style="width: 10%; text-align: left; vertical-align: top;" visible="false">

 

 

<asp:Label ID="lblVanish" runat="server" CssClass="captionlbl" Visible="false"

 

 

Width="100px"><b>Vanish</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;" visible="false">

 

 

<Telerik:RadTextBox ID="txtVanish" runat="Server" AutoPostBack="True"

 

 

Text='<%# Eval("DetailID") %>' Visible="false" Width="500px">

 

 

</Telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 10%; text-align: left; vertical-align: top;">

 

 

<asp:Label ID="Competency" runat="server" CssClass="captionlbl" Width="100px"><b>Competency</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;">

 

 

<Telerik:RadComboBox ID="ddlCompetency" runat="Server" AutoPostBack="True"

 

 

OnSelectedIndexChanged="ddlCompetency_SelectedIndexChanged" Skin="Outlook"

 

 

TabIndex="1" Width="500px">

 

 

</Telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="vertical-align: top; width: 10%; text-align: left;">

 

 

<asp:Label ID="CompetencyArea" runat="server" CssClass="captionlbl"

 

 

Height="15px"><b>Area</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;">

 

 

<Telerik:RadComboBox ID="ddlCompetencyArea" runat="Server" AutoPostBack="True"

 

 

OnSelectedIndexChanged="ddlCompetencyArea_SelectedIndexChanged" Skin="Outlook"

 

 

TabIndex="2" Width="500px">

 

 

</Telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 10%; text-align: left; height: 15px;">

 

 

<asp:Label ID="lblLevel" runat="server" CssClass="captionlbl"><b>Level</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;">

 

 

<Telerik:RadComboBox ID="ddlLevel" runat="Server" AutoPostBack="True"

 

 

OnSelectedIndexChanged="ddlLevel_SelectedIndexChanged" Skin="Outlook"

 

 

TabIndex="3" Width="500px">

 

 

</Telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="vertical-align: top; width: 10%; text-align: left; height: 15px;">

 

 

<asp:Label ID="lblIndicator" runat="server" CssClass="captionlbl"><b>Indicator</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;">

 

 

<Telerik:RadComboBox ID="ddlIndicator" runat="Server" AutoPostBack="True"

 

 

Skin="Outlook" TabIndex="4" Width="500px">

 

 

</Telerik:RadComboBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="vertical-align: top; width: 10%; text-align: left; height: 15px;">

 

 

<asp:Label ID="lblEvidance" runat="server" CssClass="captionlbl"><b>Evidance</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;">

 

 

<Telerik:RadTextBox ID="txtEvidence" runat="server" AutoPostBack="true"

 

 

Skin="Outlook" Text='<%# Eval("Evidence", "{0:C}") %>' Width="500px">

 

 

</Telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr style="width: 100%">

 

 

<td colspan="2" style="height: 15px; text-align: left;">

 

 

</td>

 

 

</tr>

 

 

 

<tr>

 

 

<td align="left" colspan="2">

 

 

<asp:Button ID="btnEmpKrainsert" runat="server" CommandName='<%# (Container is Telerik.Web.UI.GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'

 

 

 

Text='<%# (Container is Telerik.Web.UI.GridEditFormInsertItem) ? "Insert" : "Update" %>'

 

 

Width="70px" Font-Bold ="true" ForeColor ="Blue" EnableTheming ="true" BorderStyle ="Solid"/>

 

 

 

<asp:Label ID="Label6" runat="server"

 

 

Text="Please Click to Perform the Operation" CssClass="captionlbl"

 

 

Style="color: #0000cc" />

 

 

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td align="left" colspan="2">

 

 

<asp:Button ID="btnEmpKraCancel" runat="server" BackColor="AliceBlue" BorderWidth="1px" CausesValidation="False" CommandName="Cancel"

 

 

Text="Cancel" Width="70px" Font-Bold ="true" ForeColor ="Blue" EnableTheming ="true" BorderStyle ="Solid" />

 

 

<asp:Label ID="Label7" runat="server" Text="Please Click Cancel to Perform" CssClass="captionlbl" Style="color: #0000cc"></asp:Label>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td colspan="2" style="height: 15px; text-align: left;">

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</div>

 

 

</formtemplate>

 

 

</editformsettings>

 

 

</mastertableview><clientsettings>

 

 

<clientevents onrowdblclick="RowDblClick" />

 

 

</clientsettings>

 

 

</Telerik:RadGrid>

 

<

 

Telerik:RadGrid ID="dgvDevelopmentActivity" runat="server"

 

 

AllowMultiRowEdit="true" AllowPaging="True" AllowSorting="True"

 

 

AutoGenerateColumns="False" GridLines="None"

 

 

OnItemCommand="dgvDevelopmentActivity_ItemCommand"

 

 

OnItemCreated="dgvDevelopmentActivity_ItemCreated"

 

 

OnItemDataBound="dgvDevelopmentActivity_ItemDataBound"

 

 

OnNeedDataSource="dgvDevelopmentActivity_NeedDataSource" PageSize="7"

 

 

ShowStatusBar="true" Skin="Outlook" Width="750px">

 

 

<headercontextmenu enableautoscroll="True">

 

 

</headercontextmenu>

 

 

<mastertableview commanditemdisplay="Top" datakeynames="ID" dir="LTR"

 

 

editmode="EditForms">

 

 

<commanditemsettings addnewrecordtext="Development Activity" ShowRefreshButton ="false" />

 

 

<Columns>

 

 

<Telerik:GridEditCommandColumn ButtonType="ImageButton" HeaderText="Edit">

 

 

<ItemStyle Width="20px" />

 

 

</Telerik:GridEditCommandColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true" ColumnEditorID="txtVanish"

 

 

DataField="ID" HeaderText="Vanish" UniqueName="Vanish" Visible="false">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true" ColumnEditorID="What"

 

 

DataField="What" HeaderText="What" UniqueName="What">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true" ColumnEditorID="How"

 

 

DataField="How" HeaderText="How" SortExpression="How" UniqueName="How">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridBoundColumn AutoPostBackOnFilter="true" ColumnEditorID="Whenn"

 

 

DataField="Whenn" HeaderText="When" SortExpression="Whenn" UniqueName="Whenn">

 

 

</Telerik:GridBoundColumn>

 

 

<Telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete"

 

 

HeaderText="Delete" ItemStyle-Width="20px" Text="Delete"

 

 

UniqueName="DeleteColumn">

 

 

<ItemStyle Width="20px" />

 

 

</Telerik:GridButtonColumn>

 

 

</Columns>

 

 

 

<editformsettings editformtype="Template"

 

 

formstyle-backcolor="Transparent">

 

 

<editcolumn uniquename="EditCommandColumn1">

 

 

</editcolumn>

 

 

<formstyle backcolor="Transparent" />

 

 

<formtemplate>

 

 

<div style="width: 100%; height: 100%">

 

 

<table border="0" cellspacing="2" style="width: 100%; border-color: #99ccff">

 

 

<tr>

 

 

<td style="width: 10%; text-align: left; vertical-align: top;" visible="false">

 

 

<asp:Label ID="lblVanish" runat="server" CssClass="captionlbl" Visible="false"

 

 

Width="100px"><b>Vanish</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;" visible="false">

 

 

<Telerik:RadTextBox ID="txtVanish" runat="Server" AutoPostBack="True"

 

 

Skin="Web20" Text='<%# Eval("ID") %>' Visible="false" Width="500px">

 

 

</Telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 10%; text-align: left; vertical-align: top;">

 

 

<asp:Label ID="What" runat="server" CssClass="captionlbl" Width="100px"><b>What</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;">

 

 

<Telerik:RadTextBox ID="txtWhat" runat="Server" AutoPostBack="True"

 

 

Skin="Web20" TabIndex="1" Text='<%# Eval("What")%>' Width="500px">

 

 

</Telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="vertical-align: top; width: 10%; text-align: left;">

 

 

<asp:Label ID="How" runat="server" CssClass="captionlbl" Height="15px"><b>How</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;">

 

 

<Telerik:RadTextBox ID="txtHow" runat="Server" AutoPostBack="True" Skin="Web20"

 

 

TabIndex="2" Text='<%# Eval("How")%>' Width="500px">

 

 

</Telerik:RadTextBox>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td style="width: 10%; text-align: left; height: 15px;">

 

 

<asp:Label ID="lblWhen" runat="server" CssClass="captionlbl"><b>When</b></asp:Label>

 

 

</td>

 

 

<td style="width: 60%; text-align: left;">

 

 

<Telerik:RadDateTimePicker ID="dtpwhen" runat="Server" AutoPostBack="True"

 

 

Skin="Outlook" TabIndex="3" Width="200px">

 

<%

-- <calendar skin="Outlook" usecolumnheadersasselectors="False"

 

userowheadersasselectors="False" viewselectortext="x">

</calendar>

<timeview cellspacing="-1">

</timeview>

<timepopupbutton hoverimageurl="" imageurl="" />

<datepopupbutton hoverimageurl="" imageurl="" tabindex="3" />

<dateinput autopostback="True" dateformat="dd MMM yyyy"

displaydateformat="dd MMM yyyy" tabindex="3">

</dateinput>--

 

%>

 

 

</Telerik:RadDateTimePicker>

 

 

</td>

 

 

</tr>

 

 

<tr style="width: 100%">

 

 

<td colspan="2" style="height: 15px; text-align: left;">

 

 

</td>

 

 

</tr>

 

 

 

<tr>

 

 

<td align="left" colspan="2">

 

 

<asp:Button ID="btnEmpKrainsert" runat="server" CommandName='<%# (Container is Telerik.Web.UI.GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'

 

 

 

Text='<%# (Container is Telerik.Web.UI.GridEditFormInsertItem) ? "Insert" : "Update" %>'

 

 

Width="70px" Font-Bold ="true" ForeColor ="Blue" EnableTheming ="true" BorderStyle ="Solid"/>

 

 

 

<asp:Label ID="Label6" runat="server"

 

 

Text="Please Click to Perform the Operation" CssClass="captionlbl"

 

 

Style="color: #0000cc" />

 

 

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td align="left" colspan="2">

 

 

<asp:Button ID="btnEmpKraCancel" runat="server" BackColor="AliceBlue" BorderWidth="1px" CausesValidation="False" CommandName="Cancel"

 

 

Text="Cancel" Width="70px" Font-Bold ="true" ForeColor ="Blue" EnableTheming ="true" BorderStyle ="Solid" />

 

 

<asp:Label ID="Label7" runat="server" Text="Please Click Cancel to Perform" CssClass="captionlbl" Style="color: #0000cc"></asp:Label>

 

 

</td>

 

 

</tr>

 

 

<tr>

 

 

<td colspan="2" style="height: 15px; text-align: left;">

 

 

</td>

 

 

</tr>

 

 

</table>

 

 

</div>

 

 

</formtemplate>

 

 

</editformsettings>

 

 

</mastertableview>

 

 

<clientsettings>

 

 

<clientevents onrowdblclick="RowDblClick" />

 

 

</clientsettings>

 

 

</Telerik:RadGrid>

 

[Iana Tsolova]

Hello shakil,

Could you please confirm that issue persists in case the cells with the problematic controls are visible by
default? Also, is the described behavior observed when multiple rows are edited?
Any additional information on the steps performed for replicating it might help us to find the source of it.

Sincerely yours,
Iana
the Telerik team

[shakil]

My master page used Jgrid, Page.ClientScript.RegisterClientScriptInclude for registry..
Most probably this Javascript and css method may overlapped. Although I could not able to detect the problem.
Hence I have to change old master page to new one.

Now it is ok.

I have a question.

Question: Can I give ajaxcontroltoolkit calendar extender or other extender in the radgrid edit formtemplate section??
                If yes? then how..Please sometimes I fall in problem so, i need to know.

BR
Shakil

 

[Kiara]

There should be no problem using Telerik date picker inside RadGrid form template edit form - I just tested it using this live demo and put Telerik date pickers to replace the BirthDate and HireDate textboxes.

Kiara