[Solved] How can I customise button images

[Phil]

I have a grid with a column to hold a delete button in the standard (ajax) way.
Code snippet:

commands.Delete()

  .ButtonType(GridButtonType.Image);

Out of the box the image is a cross, included in the sprite.png file.

I need the image to change, depending upon the value of another column in that row.

(Basically I'm using the button to Archive or Restore rather than physically delete a database row.
So the button has a dual purpose and i want the image to reflect the purpose - say cross icon for archive, arrow up icon for restore)

I dont mind if the solution involves hacking the sprite file.

Can anyone help please.

Phil

[Dadv]

.ClientEvents(e => e.OnRowDataBound("onRowDataBound"))

<script type="text/javascript">
    function onRowDataBound(e) {
        var del = $(e.row).find($('.t-icon.t-delete'));
        if (e.dataItem.IsArchived) {
            del.addClass("restore");
        }
        else {
            del.addClass("archive");
        }
    }
</script>  

css:
.t-icon t-delete restore
{
background-position-x : 0;
background-position-y : 0;
background-image : url("/Content/restore.png");
}
.t-icon t-delete archive
{
background-position-x : 0;
background-position-y : 0;
background-image : url("/Content/archive.png");
} 

[Phil]

Hi Dadv

It didn't work. It looks like a css selectivity issue.
Here's your code merged into mine:

Grid:

.ClientEvents(events => events                      

                        .OnRowDataBound("FormatRow")

 

Javascript:

function FormatRow(e)

    {

        if (e.dataItem != null) // null when Add PopUp is cancelled

        {

            // Archived rows to red text

            if (e.dataItem.State == 2) // 2 = Archived, 1 = Active

            {

                e.row.style["color"] = "red";

            }

            // Dynamically change delete icon

            var del = $(e.row).find($('.t-icon.t-delete'));

            if (e.dataItem.State == 2) // Archived

            {

                del.addClass("restore");

            }

            else

            {

                del.addClass("archive");

            }

        }

    }

 

CSS:

/* Telerik Grid overrides */

.t-icon t-delete restore

 {

       background-position-x : 0;

       background-position-y : 0;

       background-image : url("/Content/Images/Restore_W16_H16.gif");                 

 }

 .t-icon t-delete archive

 {

       background-position-x : 0;

       background-position-y : 0;

       background-image : url("/Content/Images/Archive_W16_H16.gif");

 }

 

I’ve attached a screen grab of the result. The function is being called correctly and does its stuff correctly.
The <span> element of each grid delete button is being modified to either:

 

<span class="t-icon t-delete archive"/>

Or

<span class="t-icon t-delete restore"/>

Depending on the value of my State flag.

However, the displayed icon is still the default Telerik sprite:

url("/Content/2012.1.214/Office2010Silver/sprite.png")

Can you spot the last piece of the puzzle?

Many thanks

Phil

[Phil]

Got it working!
I cannot work out how to make this work by swapping the css class.

However if I set the style directly it does work:

I adjusted my javascript function like so (changes highlight in yellow)

    function FormatRow(e)

    {

        if (e.dataItem != null) // null when Add PopUp is cancelled

        {

            // Archived rows to red text

            if (e.dataItem.State == 2) // 2 = Archived"

            {

                e.row.style["color"] = "red";

            }

            // Dynamically change delete icon

            var del = $(e.row).find($('.t-icon.t-delete'));

            if (e.dataItem.State == 2) // Archived

            {

                del.css('background-image', 'url("/Content/Images/Archive_W16_H16.gif")');

                del.css('background-position-x', 0);

                del.css('background-position-y', 0);

            }

            else {

                del.css('background-image', 'url("/Content/Images/Restore_W16_H16.gif")');

                del.css('background-position-x', 0);

                del.css('background-position-y', 0);

            }

        }

    }


Many thanks for your help Dadv. Telerik support is superb. Really has swung it for me to go with Telerik. My company will be purchasing once product is evolved.

Phil

[Dadv]

you're welcome but ... i'm not from Telerik ;)

My answer was wrote "as is" i didn't test it, just wrote  where to go...

[Dadv]

you could try this :

.t-icon .t-delete .restore

 {

       background-position-x : 0 !important;

       background-position-y : 0 !important;

       background-image : url("/Content/Images/Restore_W16_H16.gif" !important);                 

 }

 .t-icon .t-delete .archive

 {

       background-position-x : 0 !important;

       background-position-y : 0 !important;

       background-image : url("/Content/Images/Archive_W16_H16.gif") !important;

 }

but i think your css behavior is only here because of the declaration placement. your custom css should be declare AFTER Telerik css.

[Phil]

I'll give this a go later. On something else now. Thanks for all your help.  If you're bored I have another thread open that  no one has responded to. I'm convinced its a bug in Telerik code. See http://www.telerik.com/community/forums/aspnet-mvc/grid/oncommand-event---passing-additional-data.aspx I since realised i can use a different event ondelete but i will probably be using onCommand for something else anyway so keen to find out why is does not work. By the way, do you have a blog of your own. I like your succinct answers.

[Dadv]

No blog for me (and it should be in French if yes :) ), i like to help in some forum because often the telerik team (and other) are really busy.

For my answers, often i wrote them on the fly, it's why it's like an approach than a real solution :)

[venky]

I was trying this method to customize the t-update button but it does not work. Any idea how to make this work for update or insert-update button i.e. change the checkmark to another image.

[venky]

I solved it by adding
span.t-icon.t-update
{
image url & position
}

and
span.t-icon.t-insert
{
image url and position
}