[Solved] CommandItemTemplate

[Ban]

Hi,
Please how can I hide the CommanditemTemplate border ? I try to set the border width to 0px in CommanditemStyle and try to make it White color but all that worthless .. so is there any way to do it so my CommandItemTemplate look like it is separate from the Grid

Thank you

Ban

[Daniel]

Hello Ban,

Please try the following approach:

<style type="text/css">
    .RadGrid_SkinName .rgCommandRow table
    {
        background: #FFFFFF none !important;
        border-width: 0px !important;
    }
</style>

You should replace SkinName with the actual name of the your skin (e.g. Web20)

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.

[Ban]

Hello Daniel,
Please the way you gave me did not work !! I replace the SkinName as you told me with my Grid Skin I am using but nothing change !.
please advice me

Thanks

Ban 

[Daniel]

Hello Ban,

Please let us know which version of RadControls for ASP.NET AJAX is used in your project.

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.

[Ban]

Hi,
The RadControls version I am working on is 2008.3.1105.20

Thanks
Ban

[Daniel]

Hello Ban,

For older version (Q3 2008 and older) of RadControls use this approach:

<style type="text/css">
    .GridCommandRow_SkinName table
    {
        background: #FFFFFF none !important;
        border: none 0px !important;
    }
</style>

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.

[Ban]

Hi,
I use this way and nothing change, please what happened ! why not working !!, I try to change many thing in the style you gave me and no way, I try to put Div in the CommandItemTemplet and then I change the CSS you gave me and put Div instead of table and its work I could change the style of the Div put the div is separate from the Command item ! I control the border of the Div only not the commanditem border.
So please is there any thing you can help me with I will be grateful.

Thanks 

Ban 

[Daniel]

Hello Ban,

For your convenience I created a sample project. Please find it attached to this thread.

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.

[Ban]

Hi Daniel,
Sorry to bother you and be insistent, you are right the css you gave me work very good but it was my mistake that I did not notice what is appeared to me is the Grid border and when I make the border of my grid none every thing is going well with the style you gave me, thanks for your help and patient.
But the new thing happened is when I press Edit or New on the command item controls the border appear to me again !!
any advice please
Again Thanks for help and pationt.

Ban

[Daniel]

Hello Ban,

Thank you for your feedback.

I tried to reproduce the depicted problem but without avail. I attached a screenshot to this post. I recommend you modify my example and send it back to me via format support ticket (please, provide a reference to this forum thread). Alternatively you can let me know how to modify the code to recreate your scenario.

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.

[Ban]

Hi Daniel,
thanks for your continues cooperation, Below my Grid as is it in my project, maybe you can lead me where is the error I made in my code because I change your project you sent me and its work great so why mine not .

<

 

telerik:RadGrid ID="MeetingAgendaRadGrid"

 

 

runat="server"

 

 

GridLines="None"

 

 

Skin="Vista"

 

 

AutoGenerateColumns="False"

 

 

BorderColor="white"

 

 

DataSourceID="MeetingAgendaSqlDataSource"

 

 

AllowAutomaticDeletes="True"

 

 

AllowAutomaticInserts="True"

 

 

AllowAutomaticUpdates="True"

 

 

<HeaderContextMenu EnableTheming="True">

 

 

<CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>

 

 

</HeaderContextMenu>

 

 

<HeaderStyle BorderColor="lightgray" />

 

 

<ClientSettings

 

 

AllowKeyboardNavigation="True"

 

 

ReorderColumnsOnClient="True"

 

 

ColumnsReorderMethod="Reorder"

 

 

AllowDragToGroup="True"

 

 

AllowColumnsReorder="True" >

 

 

<Selecting AllowRowSelect="True" />

 

 

<Scrolling AllowScroll="True" UseStaticHeaders="True" />

 

 

</ClientSettings>

 

 

<HeaderContextMenu EnableTheming="True" Skin="Vista">

 

 

<CollapseAnimation Duration="600" Type="InBack" />

 

 

</HeaderContextMenu>

 

 

<MasterTableView CommandItemDisplay="Top"

 

 

Width="98%"

 

 

DataKeyNames="ID"

 

 

DataSourceID="MeetingAgendaSqlDataSource"

 

 

GroupLoadMode="Client">

 

 

<RowIndicatorColumn>

 

 

<HeaderStyle Width="20px" />

 

 

<ItemStyle BorderStyle="Solid" BorderColor="LightGray" />

 

 

</RowIndicatorColumn>

 

 

<ExpandCollapseColumn>

 

 

<HeaderStyle Width="20px" />

 

 

</ExpandCollapseColumn>

 

 

<Columns>

 

 

<telerik:GridBoundColumn

 

 

DataField="Topic"

 

 

HeaderText="Topic"

 

 

ReadOnly="True"

 

 

SortExpression="Topic"

 

 

UniqueName="Topic">

 

 

<HeaderStyle Width="350px"></HeaderStyle>

 

 

<ItemStyle Width="350px" BorderColor="LightGray"></ItemStyle>

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn

 

 

DataField="Presenter" HeaderText="Presenter" SortExpression="Presenter" UniqueName="Presenter" AllowSorting="true">

 

 

<HeaderStyle Width="185px"></HeaderStyle>

 

 

<ItemStyle Width="185px" BorderColor="LightGray"></ItemStyle>

 

 

</telerik:GridBoundColumn>

 

 

<telerik:GridBoundColumn

 

 

DataField="TimeAllotted" HeaderText="Time Allotted" SortExpression="TimeAllotted" UniqueName="TimeAllotted" >

 

 

<HeaderStyle Width="65px"></HeaderStyle>

 

 

<ItemStyle Width="65px" BorderColor="LightGray"></ItemStyle>

 

 

</telerik:GridBoundColumn>

 

 

</Columns>

 

 

<EditFormSettings EditFormType="Template" ColumnNumber="2" CaptionDataField="Name" CaptionFormatString="Edit Program Data {0}" >

 

 

<FormTemplate>

 

 

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="1px" rules="none"

 

 

style="border-collapse: collapse;background:white; border-color:LightGrey;">

 

 

<tr class="EditFormHeader">

 

 

<td colspan="2" style="font-size: small">

 

 

<b>Agenda Details</b></td></tr>

 

 

<tr><td>

 

 

<table id="Table3" cellspacing="1" cellpadding="1" width="600" border="0" class="module">

 

 

<tr><td class="FormTableCell01">

 

 

<asp:Label ID="TopicLabel" Width="100px" runat="server" CssClass="FormLabel" Text="Topic:">

 

 

</asp:Label>

 

 

</td>

 

 

<td class="FormTableCell02">

 

 

<telerik:RadTextBox

 

 

ID="TopicRadTextBox" runat="server" TabIndex="1" Width="500px" Height="16px" CssClass="custom"  
Font-Names="Verdana,Tahoma" Font-Size="12px" Skin="Office2007" EmptyMessage="--- Topic --- " Text='<%# Bind( "Topic" ) %>'>

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

<td class="FormTableCell03">

 

 

<asp:RequiredFieldValidator

 

 

ID="TopicRequiredFieldValidator"

 

 

runat="server"

 

 

ControlToValidate="TopicRadTextBox"

 

 

ErrorMessage="<Img src='../Images/SmallIcons/badOrg.PNG' />"

 

 

ToolTip="Topic is a required field"

 

 

ValidationGroup="MeetingAgenda">

 

 

</asp:RequiredFieldValidator>

 

 

</td></tr>

 

 

<tr><td class="FormTableCell01">

 

 

<asp:Label

 

 

ID="presenterLabel" runat="server" Width="100px" CssClass="FormLabel" Text="Presenter:">

 

 

</asp:Label>

 

 

</td>

 

 

<td class="FormTableCell02">

 

 

<telerik:RadTextBox

 

 

ID="PresenterRadTextBox"

 

 

runat="server" TabIndex="2" Width="500px" Height="16px" CssClass="custom" Font-Names="Tahoma,Verdana" Font-Size="12px"

 

 

Skin="Office2007" Text='<%# Bind( "Presenter" ) %>' EmptyMessage="--- Presenter --- " >

 

 

</telerik:RadTextBox>

 

 

</td>

 

 

<td class="FormTableCell03">

 

 

<asp:RequiredFieldValidator

 

 

ID="PresenterRequiredFieldValidator" runat="server"

 

 

ControlToValidate="PresenterRadTextBox" ErrorMessage="<Img src='../Images/SmallIcons/badOrg.PNG' />"

 

 

ToolTip="Presenter is a required field" ValidationGroup="MeetingAgenda">

 

 

</asp:RequiredFieldValidator>

 

 

</td></tr>

 

 

<tr><td class="FormTableCell01">

 

 

<asp:Label

 

 

ID="TimeAllottedLabel" runat="server" Width="100px" CssClass="FormLabel" Text="Time Allotted:">

 

 

</asp:Label>

 

 

</td>

 

 

<td class="FormTableCell02">

 

 

<telerik:RadNumericTextBox

 

 

ID="TimeAllottedRadNumericTextBox" runat="server" TabIndex="3" Width="500px" Height="16px" Font-Names="Verdana,Tahoma"

 

 

Font-Size="12px" CssClass="FormTextBox" Skin="Office2007" EmptyMessage="-- Time Allotted In Minutes -- " MaxValue="240"

 

 

Text='<%# Bind( "TimeAllotted" ) %>' MinValue="0" >

 

 

<NumberFormat DecimalDigits="0" />

 

 

</telerik:RadNumericTextBox>

 

 

</td>

 

 

<td class="FormTableCell03">

 

 

<asp:RequiredFieldValidator

 

 

ID="TimeAllottedRequiredFieldValidator"

 

 

runat="server" ControlToValidate="TimeAllottedRadNumericTextBox" ErrorMessage="<Img src='../Images/SmallIcons/badOrg.PNG' />"

 

 

ToolTip="TimeAllotted is a required field" ValidationGroup="MeetingAgenda"></asp:RequiredFieldValidator>

 

 

</td></tr>

 

 

</table>

 

 

</td></tr>

 

 

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

 

 

<asp:ImageButton ID="btnUpdate" runat="server" ImageUrl="~/Images/SmallIcons/Update.gif" CommandName='<%# (Container is GridEditFormInsertItem) ? "PerformInsert" : "Update" %>'/>

 

 

<asp:ImageButton ID="btnCancel" runat="server" ImageUrl="~/Images/SmallIcons/Cancel.gif" CausesValidation="False" CommandName="Cancel"/>

 

 

</td></tr>

 

 

</table>

 

 

</FormTemplate>

 

 

</EditFormSettings>

 

 

<CommandItemStyle CssClass="Agenda" />

 

 

<CommandItemTemplate >

 

 

<div id="CommandItemDiv" style="background-color:White; border:none 0 0; height:15px; padding-bottom:5px">

 

 

<asp:LinkButton ID="btnEditSelected" runat="server" CausesValidation="false" CommandName="EditSelected"

 

 

Style="vertical-align: bottom" Visible="true"><img style="border:0px;vertical-align:middle;" alt="" src="../Images/SmallIcons/EditPen.gif" /><samp style="color:Black; font-family:Tahoma">&nbsp; Edit </samp></asp:LinkButton>

 

 

&nbsp;&nbsp;

 

 

<asp:LinkButton ID="LinkButton2" runat="server" CommandName="InitInsert" Visible="true"><img style="border:0px;vertical-align:middle;" alt="" src="../Images/SmallIcons/New.gif" /><samp style="color:Black; font-family:Tahoma">&nbsp; New</samp></asp:LinkButton>

 

 

&nbsp;&nbsp;

 

 

<asp:LinkButton ID="LinkButton1" runat="server" CausesValidation="false" CommandName="DeleteSelected"

 

 

OnClientClick="javascript:return confirm('Delete all selected Agenda Items?')"><img style="border:0px;vertical-align:middle;" alt="" src="../Images/SmallIcons/Delete.gif" /><samp style="color:Black; font-family:Tahoma">&nbsp; Delete</samp></asp:LinkButton>

 

 

&nbsp;&nbsp;

 

 

<asp:LinkButton ID="LinkButton4" runat="server" CommandName="RebindGrid"><img style="border:0px;vertical-align:middle;" alt="" src="../Images/SmallIcons/Refresh.gif" /><samp style="color:Black; font-family:Tahoma">&nbsp; Refresh</samp></asp:LinkButton>

 

 

</div>

 

 

</CommandItemTemplate>

 

 

</MasterTableView>

 

 

<FilterMenu EnableTheming="True" Skin="Vista">

 

 

<CollapseAnimation Duration="200" Type="OutQuint" />

 

 

</FilterMenu>

 

 

<StatusBarSettings LoadingText="Loading Employee Data Please wait ..." ReadyText="Agenda Data" />

 

 

</telerik:RadGrid> 
...

Second,
 PLEASE PLEASE help with another urgent problem happened to me, when I run my project in IE7 its work great but when I run it in IE6 not working right I do not know what happened to it especially with the Grid ! when I try to click on Edit column in my grid the page is scrolled and I can not catch the edit button but in IE7 its okay the page or the screen stable.
So Please any suggestion on this problem.

 

[Daniel]

Hello Ban,

I created an example (and modified the CSS snippet), according to your code. Let me know whether this helps.

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.

[Ban]

Hi Daniel,
Its work and every thing is going very well, Thank you very much for your help.

Ban