Buttons with images

[Jon]

Hi All,

Is there any way to display an image on a button that is styled by the formdecorator?  Essentially I'd like to do something similar to what is done with the buttons on this page (Post, reply etc).   My normal currently text only buttons (currently styled as Web20) would look much better having an image to the left of the text.

Regards,

Jon

[Martin]

Hello Jon,

You may use the <button /> tag in order to add icons to your skinned buttons:

<button><img /></button>

Of course this may need some additional CSS tweaks to the image, for example most probably you will have to add the following CSS rule:

button img
{
    height: 16px;
    width: 16px;
    line-height: 16px;
    display: inline-block.
}

Please, let me know if you need assistance with this.

All the best,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jon]

Hi Martin,

Thanks for that.  I was hoping to have this on a asp:button tag as shown on the first line in the example below.  In the top example I end up with the < of the IMG tag being rendered as &lt; which is obviously correct but causes the rest of the line to be rendered as text so I see "img src='..." instead of the image.  The solution that you suggested kind of works (and as you suggest I need more css) but as it's not a server tag I'd need extra JS to trigger post backs etc.

<asp:Button ID="uxGetDateButton" runat="server" CausesValidation="True" CommandName="GetDates" Text="<img src='../Images/Icons/disk-16.gif' width='16' height='16' />Get Dates"  />


<button><img src="../Images/Icons/disk-16.gif" width="16" height="16" />Save</button>

Is there anyway that the switch from < to &lt;  in the Text="<..." can be avoided - I appreciate that this is more of a general asp.net question than something particular to telerik.  I'm sure that a lot of other users would appreciate this kind of thing.

Would be a great extra bit of functionality for your controls. ;)

Regards,

Jon

[Martin]

Hi Jon,

As you know, <asp:button /> renders <input type="submit" /> on the client, and the controls of <input /> family cannot parse HTML tags set in their value attrbute - this is why the framework escapes the tag brackets with entities or just shows up the brackets without parsing them and no client or server code or hack will make them display an image. This is why I said that you should use the <button /> tag instead - it is meant to work the way you need it. Also - the <button /> tag implements three types, as the <input /> buttons do - submit, reset and button, so you will be able to use the submit functionality, because basically there is no difference between <button type="submit" /> and <input type="submit" /> on the client.

I cannot offer you neither a solution for this, nor try to implement your suggestion in RadFormDecorator, because this is just the way browsers work - HTML offers a great number of different controls and each one comes with its own functionality and purpose, and they should be used accordingly.

Greetings,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jon]

Hi Martin,

Thanks for that explaination - thats pretty much what I'd found from hunting on the web.  Very shortsighted of MS not to include a <asp:imageAndTextButton> in their design seeing as they have the ImageButton And Button controls.

I'm trying to avoid having to retrofit all pages with extra code - hence hoping to be able to do some simple have with the existing buttons.

So far as the enhancement to the Telerik controls I did really mean having a basic ImageAndTextButton control that would give this functionality while styling the buttons in the same fashion as FormDecorator rather than adding this as an extension to the form decorator control - which I appreciate would be very difficult.

Regards,

Jon

[Martin]

Hi Jon,

<asp:ImageButton /> inputs <input type="image" src="SomeImage.gif" />, and the value of that particular element is not visible on the client, because the main purpose of the input type image is to submit the x and y coordinates mouse click over the image, i.e. it's purpose is for the implementation of serverside image maps, and I suppose that's why there is no such server tag as <asp:ImageAndButtontext>, however the <button /> tag is the ideal element for button and text images.

Regards,
Martin Ivanov
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Jon]

Hi Martin,

Further to my question in the other post in this forum relating to the width of buttons I have an issue with this method regarding the AJAX calls.

When using a server side button it's very easy to have a loading panel appear over certain page elements and then have those elements refreshed once the AJAX call is complete.  I would do the following as part of the Ajaxmanager:

                <telerik:AjaxSetting AjaxControlID="uxAssignOperatives">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="uxRadGrid" LoadingPanelID="uxLoadingPanel" />
                        <telerik:AjaxUpdatedControl ControlID="uxOperativeRadGrid" LoadingPanelID="uxLoadingPanel" />
                    </UpdatedControls>
                </telerik:AjaxSetting>

However now I am using a button as below, how do I get the loading panel to appear (on both grids as above) and have the grids refreshed from the server side?

<button ID="test" onclick="InitiateAsyncRequest('AssignOperativesButton')" ><img src="../Images/Icons/disk-16.gif" /> Assign Operatives</button>

<script type="text/javascript">
function InitiateAsyncRequest(arguments) {
   var ajaxManager = $find("<%= uxRadAjaxManager.ClientID %>");
   ajaxManager.ajaxRequest(arguments);
}
</script>

Thanks in advance for you help,

Regards,

Jon

[Jon]

I've just solved my own problem - I was being stupid.  Problem was that I hadn't pointed the AjaxManager as one of the page controls that needed updating.

Would appreciate some guidance on the other issue with button padding though (http://www.telerik.com/community/forums/aspnet-ajax/form-decorator/rendering-of-buttons-in-beta-of-q2.aspx)

Regards,

Jon