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

4 posts, 0 answers
  1. shakil
    shakil avatar
    2 posts
    Member since:
    Jun 2010

    Posted 27 Jul 2010 Link to this post

    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>

     


  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 30 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. shakil
    shakil avatar
    2 posts
    Member since:
    Jun 2010

    Posted 01 Aug 2010 Link to this post

    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

     

  5. Kiara
    Kiara avatar
    309 posts
    Member since:
    Jul 2006

    Posted 05 Aug 2010 Link to this post

    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
Back to Top