This is a migrated thread and some comments may be shown as answers.

mimic commanditem in commanditemtemplate

7 Answers 70 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Morten
Top achievements
Rank 1
Veteran
Morten asked on 20 Aug 2010, 07:00 PM
I generally use the standard commanditem. However, when I use the commanditemtemplate I'd like it to look like the standard skinned commanditem (buttons, links, etc.).

How do I best go about this?

7 Answers, 1 is accepted

Sort by
0
Accepted
Dimo
Telerik team
answered on 23 Aug 2010, 01:15 PM
Hi Morten,

The easiest way is to use the same HTML code (or similar one) as the one that is used internally by RadGrid. Please inspect the command item HTML output and take what you need from there. The internal HTML output of the command item is wrapped by a table cell with a rgCommandCell CSS class. All the HTML code that you have to review is wrapped inside a <table> :

<table border="0" style="width: 100%;" class="rgCommandTable">
......
</table>


By default, the command row uses the so called sprite buttons:

http://www.telerik.com/help/aspnet-ajax/css-sprites.html

Here is how to mimic such a button inside the RadGrid CommandItemTemplate:

<asp:Button CssClass="rgAdd" Text=" " />

The CSS class and the single-spaced Text property matter the most.


Kind regards,
Dimo
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
0
Roger Barnes
Top achievements
Rank 1
answered on 16 Dec 2010, 08:44 PM
<CommandItemTemplate>
<table border="0" style="width: 100%;" class="rgCommandTable">
<tr>
    <td align="left">
    <asp:Button CommandName="InitInsert" runat="server" ID="btnAddNewRecord" Text=" " 
                title="Add new record" CssClass="rgAdd" />
    <asp:LinkButton ID="lnkbAddNewRecord" CommandName="InitInsert" runat="server">
            Add
new Record</asp:LinkButton>
    </td>
    <td>Your Custom Commands Here</td>
    <td align="right">                                    
    <asp:Button CommandName="RebindGrid" runat="server" ID="btnRefresh" Text=" "
            title="Refresh" CssClass="rgRefresh" />
    <asp:LinkButton ID="lnkbRefresh" CommandName="RebindGrid" runat="server">Refresh</asp:LinkButton>
     </td>
  </tr>
</table>
</CommandItemTemplate>
0
Vasssek
Top achievements
Rank 1
answered on 28 Aug 2016, 06:36 PM

Hello,

 

I know this is 6years old topic, but what If I want to use commanditemtemplate and RadGrid render mode is set to Auto or Lightweight ? Then all command buttons are without css images.

Please help.

Best regards

Vasssek

0
Eyup
Telerik team
answered on 01 Sep 2016, 05:36 AM
Hi Vasssek,

Generally, you can use the auto-generated CommandItem and add your additional controls during the ItemCreated event handler. Could you elaborate on your specific requirement and send us sample videos or screenshots demonstrating the desired appearance?

Regards,
Eyup
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Brian
Top achievements
Rank 1
Veteran
answered on 26 Feb 2021, 01:38 PM

I am having the same issue. very odd. if the RadGrid is rendered as "Auto" or "Lightweight" the images do not appear in the asp buttons. if i change the RadGrid to "Classic" they show the color icons. I looked at the mark-up and it seems to use the same CssClass="rgRefresh"  for either of the three RenderModes.

I attached images, I am trying to get the CommandItemTemplate to look like notemp-auto-OK.jpg, but i get temp-auto-BAD.jpg

Code for CommandItemTemplate

                                        <CommandItemTemplate>
                                            <telerik:RadPageLayout runat="server" GridType="Fluid" ShowGrid="false">
                                                <telerik:LayoutRow CssClass="LayoutRowStandard">
                                                    <Columns>
                                                        <telerik:LayoutColumn Span="1">
                                                            
                                                        </telerik:LayoutColumn>
                                                        <telerik:LayoutColumn Span="1">
                                                            
                                                        </telerik:LayoutColumn>
                                                        <telerik:LayoutColumn Span="1">
                                                            
                                                        </telerik:LayoutColumn>
                                                        <telerik:LayoutColumn Span="1">
                                                            
                                                        </telerik:LayoutColumn>
                                                        <telerik:LayoutColumn Span="1">
                                                            
                                                        </telerik:LayoutColumn>
                                                        <%--putting back in Telerik default buttons--%>
                                                        <telerik:LayoutColumn Span="7">
                                                            <div style="float:right;">
                                                                <asp:Button ID="btnRefresh" runat="server" CommandName="Rebind" CssClass="rgRefresh" Text="Refresh" />
                                                                <asp:Button ID="ExportToExcelButton" runat="server" CommandName="ExportToExcel" CssClass="rgExpXLS"/>
                                                                <asp:Button ID="ExportToCsvButton" runat="server" CommandName="ExportToCsv" CssClass="rgExpCSV" />
                                                            </div>                                                            
                                                        </telerik:LayoutColumn>
                                                    </Columns>
                                                </telerik:LayoutRow>
                                            </telerik:RadPageLayout>
                                        </CommandItemTemplate>
0
Brian
Top achievements
Rank 1
Veteran
answered on 04 Mar 2021, 07:21 PM

Hi Telerik, can you address this issue? Give me some type of a work around would be great.

 

Thanks

0
Peter Milchev
Telerik team
answered on 09 Mar 2021, 11:46 AM

Hello Brian,

The main difference between the Classic and Lightweight render modes are the use of font-icons instead of background images and the different generated HTML in some cases, so, the styles for Classic and Lightweight render mode might differ.

With that said, having the same type of control loaded on the page in two different render modes will lead to a Mixed render mode issue:

On the other hand, the font-icons require internal elements that would contain the icon itself, which is not possible with the asp:button. To fix that, you can use the RadButton or any of the lightweight alternatives of the Button, such as the PushButton for example:

I hope that brings more clarity to the situation and why the observed appearance is expected with that setup.

Give the PushButton a try and share your new setup if you still experience issues.

Regards,
Peter Milchev
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
Grid
Asked by
Morten
Top achievements
Rank 1
Veteran
Answers by
Dimo
Telerik team
Roger Barnes
Top achievements
Rank 1
Vasssek
Top achievements
Rank 1
Eyup
Telerik team
Brian
Top achievements
Rank 1
Veteran
Peter Milchev
Telerik team
Share this question
or