mimic commanditem in commanditemtemplate

[Morten]

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?

[Dimo]

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

[Roger Barnes]

<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>

[Vasssek]

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

[Eyup]

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

[Brian]

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>

[Brian]

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

 

Thanks

[Peter Milchev]

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:

• https://docs.telerik.com/devtools/aspnet-ajax/knowledge-base/common-determine-mixed-render-mode 

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:

• https://demos.telerik.com/aspnet-ajax/pushbutton/functionality/embedded-icons/defaultcs.aspx 

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