[Solved] GridEditCommandColumn and Css problem

[Dimitrios]

On an ImageButton in the GridEditCommandColumn I cannot set the style as I want it.

The problem is that the <.editbutton:active> does not seem to be applied. That is, the background image does not change
when the button is clicked. On the debug mode the <imgbtn> (look below) does have the cssclass set correctly.

The same exactly setup works fine for an Image Button which is outside the grid.

Any help would be appreciated.


Please take a look on my code below...

The aspx...
<telerik:RadGrid ID="grdDetails" ...OnItemDataBound="grdDetails_ItemDataBound"..>
  <MasterTableView...
    <Columns>
    .
      <telerik:GridEditCommandColumn ButtonType="ImageButton"
           UniqueName="EditCommandColumn"
           EditImageUrl="Images/EditBtnTop.png"
            ItemStyle-Width="60px">
      </telerik:GridEditCommandColumn>
    </Columns>

 The StyleSheet file...
.editbutton {
  background-position: center center;
  display: block;
  width: 57px;
  height: 20px;
  background: url("Images/EditBtnTop.png");
  background-repeat: no-repeat;
}
.editbutton:active {
  background: url("Images/EditBtnBotm.png");
  background-repeat: no-repeat;
}

and the code...
 Protected Sub grdDetails_ItemDataBound(sender As Object, e As GridItemEventArgs)
    If TypeOf e.Item Is GridDataItem Then
      Dim dataItem As GridDataItem = DirectCast(e.Item, GridDataItem)
      Dim ImgBtn As ImageButton
      ImgBtn = TryCast(dataItem("EditCommandColumn").Controls(0), ImageButton)
      ImgBtn.CssClass = "editbutton"
      ImgBtn.Width = 57
      ImgBtn = TryCast(dataItem("DeleteCommandColumn").Controls(0), ImageButton)
      ImgBtn.CssClass = "deletebutton"
      ImgBtn.Width = 97
    End If
  End Sub

[Shinu]

Hi Dimitrios,

Please do the following modification in your CSS file which works fine at my end.

CSS:

.editbutton
{
    background: url(../Images/2.PNG) no-repeat !important;
    background-repeat: no-repeat !important;
}
.editbutton:active
{
    background: url(index12.jpeg) no-repeat !important;
    background-repeat: no-repeat !important;
}

Thanks,
Shinu.

[Dimitrios]

Hello Shinu,

Thanks for your quick response!

When you say it's working on your end, what do you mean? Do you see on-click that the background image changes?

Mine it doesn't.

I did exactly what you suggested on my CSS file.

Let me also remind you once more, that the same css entry is used for another button outside the grid and that one works fine.

[Dimitrios]

UPDATE

Ok, I found out the following:

(you must take another look on the code above)
The clicking of the button DOES switch between the two image files, even without the suggested correction.

The problem is that the default Telerik image seats on top (if I don't specify one myself)

So, the question now becomes as follows:
How can I eliminate the default Image for the ImageButton type?

[Shinu]

Hi Dimitrios,

The CSS will override if you are setting the style as "!important". Please make sure that you have set !important for CSS style. This !important ignores the subsequent rules and any usual specificity issues and it will apply this rule.  Defining a rule with the !important attribute discards the normal concerns as regards the 'later' rule overriding the 'earlier' ones.

Hope this will help you.
Thanks,
Shinu.

[Dimitrios]

Good morning Shinu,

I have <!important> in the CSS file, But I still see the default Telerik image on top of mine!!
As I said earlier, I can see the switching of the images on clicking, but the default image is always on top!

Here is the css:

-----------------
.editbutton {
  background-position: center center !important;
  display: block !important;
  width: 57px !important;
  height: 20px !important;
  background: url(Images/EditBtnTop.png) !important;
  background-repeat: no-repeat !important;
}

.editbutton:active {
  background: url(Images/EditBtnBotm.png) !important;
  background-repeat: no-repeat !important;
-----------------

I even tried the entry below for the EditImageUrl in the aspx file, but the system does not accept an empty string there...

<telerik:GridEditCommandColumn ButtonType="ImageButton"
                  UniqueName="EditCommandColumn"
                  ItemStyle-Width="60px" EditImageUrl="">
                </telerik:GridEditCommandColumn>

Thanks for your time

[Shinu]

Hi Dimitrios,

You can try the following code snippet to change the Image of edit button in editmode.

ASPX:

<telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" EditImageUrl="Image/EditImage1.jpg">
</telerik:GridEditCommandColumn>

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
//Check if the Grid is in editmode
 if (e.Item is GridEditableItem && e.Item.IsInEditMode && !e.Item.OwnerTableView.IsItemInserted)
 {
  GridEditableItem editItem = (GridEditableItem)e.Item;
 //Access the EditButton and change ImageUrl
  ImageButton imbEdit = (ImageButton)editItem["EditCommandColumn"].Controls[0];
  imbEdit.ImageUrl = "Image/EditImage2.jpg";
 }
}

Thanks,
Shinu

[Dimitrios]

Hello Shinu,

I do appreciate your time you are taking to help me on this.

Please check the top message (my initial request).

You are missing the point here !

My problem IS NOT changing the image of the button in the code.

In the ItemDataBound event of the grid, I am changing (or setting) the css class of the button. The css code changes the Image of the button when the user clicks on it. So, there are two images which are alternating.

The actual alternating of the two images works fine.

The problem is the alternating works "under" the telerik default image for that button. Even if I change that image (as you did on your last message) the new image will still be on top!

Check the screen I sent you. The two buttons have these gray images (the pensil and the part of the X) which are the telerik default ones. The color images which are shown on the back, are my images. When the user clicks on the buttons, the gray images stay as they are and my images on the back change (what I call "alternating")

I want these gray default images to disappear!

Thanks again...

[Shinu]

Hi Dimitrios,

I understand your issue, using CSS to add the image button is causing the previous image to be still shown. In the above code I have pasted, such an issue wont happen. When you are adding the Image using CSS you are having such an issue. If you want you cant hide that image, but the edit functionality will not work. If its according to your code to hide the overlaying image you can use:

CSS:

.RadGrid input[type="image"]
 {
   display: none;
 }

But the Edit functionality is not working at my end when doing so. So I suggest to use the method shown in my previous post. Rather than adding from CSS, add the Image from ASPX and change it on EditMode from code behind.

Thanks,
Shinu

[Dimitrios]

Hello again,

I am using CSS not to change the image.

I am using CSS to alternate the image on click.

Remember this code from above??

-----------------
.editbutton {
  background-position: center center !important;
  display: block !important;
  width: 57px !important;
  height: 20px !important;
  background: url(Images/EditBtnTop.png) !important;
  background-repeat: no-repeat !important;
}

.editbutton:active {
  background: url(Images/EditBtnBotm.png) !important;
  background-repeat: no-repeat !important;
-----------------

Notice that here are 2 images here. EditBtnTop.png and EditBtnBotm.png.

The second one should come up (momentarily) when the user clicks the button.

What you are saying, that the editing functionality depends on the existence of the image on the button really ...kills me!

I think Telerik does not really takes too seriously the CSS mechanism.

If an image MUST be there for the editing to work, Telerik code should also check the CSS, not only the aspx and the code behind!

Anyway, based on what you are saying there is no solution for what I am trying to do... (or is there?)

Thanks again for trying so hard to help.

[Shinu]

Hi Dimitrios,

I apologize for giving you wrong code. As a work around please try the below JavaScript code snippet which works fine at my end.  Please ignore my above posted codes.

JavaScript:

function pageLoad() {
    var list = document.getElementsByTagName('input');
    for (var i = 0; i < list.length; i++) {
        if (list[i].type == 'image') {
            list[i].src = '';
            list[i].alt = '';
        }
    }
}

Thanks,
Shinu.

[Dimitrios]

Hello Shinu,

there is no object like this: document.getElementsByTagName('input');

You mean something like this?

    function pageLoad()
    {
      var grid = $find("<%=grdDetails.ClientID%>");
      if (grid)
      {
        var MasterTable = grid.get_masterTableView();
        var Columns = MasterTable.get_columns();
        for (var i = 0; i < Columns.length; i++)
        {
          if (Columns[i].type == 'image' && Columns[i].get_uniqueName() == 'EditCommandColumn')
          {
            Columns[i].src = '';
            Columns[i].alt = '';
          }
        }
      }
    }



...but still the default image is on top of mine.

[Shinu]

Hi Dimitrios,

Please have a look into the sample code snippet which works fine at my end and also take a look into the attached screenshot.

ASPX:

<telerik:RadGrid ID="grdDetails" runat="server" OnItemDataBound="grdDetails_ItemDataBound"
            DataSourceID="sqldsDetails">
            <MasterTableView>
                <Columns>
                    <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn" ItemStyle-Width="60px" EditImageUrl="">
                    </telerik:GridEditCommandColumn>
                </Columns>
            </MasterTableView>
        </telerik:RadGrid>

C#:

protected void grdDetails_ItemDataBound(object sender, GridItemEventArgs e)
{
    if (e.Item is GridDataItem)
    {
        GridDataItem dataItem = (GridDataItem)e.Item;
        ImageButton ImgBtn = default(ImageButton);
        ImgBtn = dataItem["EditCommandColumn"].Controls[0] as ImageButton;
        ImgBtn.CssClass = "editbutton";
    }
}

JavaScript:

function pageLoad() {
    var list = document.getElementsByTagName('input');
    for (var i = 0; i < list.length; i++) {
        if (list[i].type == 'image') {
            list[i].src = '';
            list[i].alt = '';
        }
    }
}

CSS:

.editbutton
{
    background-position: center center;
    display: block;
    background: url(../Images/edit.png) no-repeat;
    background-repeat: no-repeat;
    width: 57px;
    height: 20px;
}
.editbutton:active
{
    background: url(EditActive.jpg) no-repeat;
    background-repeat: no-repeat;
}

Thanks,
Shinu.

[Dimitrios]

Hi Shinu,

We are getting close!!

For a minute, I got confused because the VS2012 was giving me an error on the
EditImageUrl="" entry. It seemed that the attribute required a value. But the website works...

The only problem now is that I get a text "submit" on all these buttons (on top of the image).

How I get rid of that? (I tried EditText="" but I think that this attribute is not active when the type is ImageButton)

Thanks again man...

[Angel Petrov]

Hello Dimitrios,

Actually the experienced behavior is strange as I do not see the submit text being explicitly set. Using the code that Shinu provided I have assembled a test website but was not able to observe the issue. Could you please examine the attachment and tell us what differs in your case? If you can modify it in such a manner so that the problem can be observed we should be able to provide a precise answer on how to resolve it.

Regards,
Angel Petrov
Telerik

 

 

[Dimitrios]

Hello Shinu and Angel,

If I put (in CSS):

.deletebutton {
  background-position: center center !important;
  display: block !important;
  width: 50px !important;
  height: 20px !important;
  background: url("Images/DeleteBtn_smallTop.png") !important;
  background-repeat: no-repeat !important;
}

Then the "submit" text is shown on top of my image!!  (my image has a width of 18px)

If I change that to:

  width: 20px !important;

then that text is gone and only the image is shown (as I want)

So, for this size of image there is no actual problem, but as you can imagine, If I ever need to use a wider image the text will be shown again.

Now, as far as your demo you sent me, it works exactly as mine.
If I run it as you sent me, the "submit" text is shown on top of your image.
If I change the width from 57px (in your <style> section) to 27px, the text disappears!

Thank you very much both of you for your time taken...

[Angel Petrov]

Hi Dimitrios,

As I mentioned in my previous post the behavior is rather strange as it does not become clear where the submit text is set and where it comes from. I have applied the CSS rules from your last post but was not able to observe the described behavior as you can see from this video(attached is the modified version that I have tested).

Since you mention that you were able to reproduce the problem with the sample that I provided could you please tell us what version of the controls was being used when performing the tests. Additionally can you also elaborate more on the browser and browser version?

Regards,
Angel Petrov
Telerik

 

 

[Dimitrios]

Hello again,

Here are some ideas that maybe can help you.

1. The "submit" text is a default behavior of an ImageButton when EditImageUrl="".
(The system does not know that the image will be set in CSS).

2. The javascript code, where it sets the element src/alt to empty, causes that behavior.
 
Chrome browser
Version 35.0.1916.153 m

Telerik
2014.2.618.45


Again, thanks for your time.

[Dimitrios]

UPDATE

I found out that if I put
list[i].alt = ' '; (a space between the quotes)
in the javascript you gave me, then the "submit" text is gone!

Regards,

[Angel Petrov]

Hi Dimitrios,

I am still not able to reproduce the problematic behavior using the project previously provided as you can see from this video. Probably there is something specific in the setup that I am not able to simulate locally. Since you mentioned that you have found a workaround to the problem I recommend integrating it in the application thus avoiding the unwanted behavior.

Regards,
Angel Petrov
Telerik

 

 

[Dimitrios]

Hello Angel,

Yes, I have fount a workaround, but as I told you previously, if I use a longer Image button with a length enough to contain the unwanted text (submit), it will show up!

Are there any other information from my environment which might help you to reproduce that behavior?

Thanks

[Angel Petrov]

Hi Dimitrios,

Please try setting the font-size to 0px and test whether this resolves the problem.

CSS:

.editbutton {
            background-position: center center !important;
            display: block !important;
            width: 50px !important;
            height: 20px !important;
            font-size:0px !important;
            background: url(Images/edit.png) no-repeat;
            background-repeat: no-repeat !important;
        }

Additionally please provide us with a video that demonstrates the problem. When creating the video please inspect the rendered HTML using the browser developer tool and check where the submit text occurs in the markup.

Regards,
Angel Petrov
Telerik