Radgrid itemcommand not firing for ButtonType="ImageButton"

[Matthew]

I have a radgrid, that's populated in exactly the same way as the one from this demo:

http://demos.telerik.com/aspnet-ajax/grid/examples/programming/draganddrop/defaultcs.aspx

So it's populated from an IList kept in session (which in turn is populated when items are dragged into my grid from another grid). The only difference being, my grid isn't populated with onneeddatasource, it's simply bound after some code beind processing of the IList on drop.

This all works fine and I can populate the grid with drag n drop.

I've got a Gridbutton:

<telerik:GridButtonColumn CommandName="Delete" Text="Delete" UniqueName="DeleteColumn"></telerik:GridButtonColumn>

On the grid at the moment, I handle the onitemcommand and/or the ondeletecommand for the user clicking this button. If the user clicks the button, this works fine, the itemcommand events fire as expected and I hit breakpoints in the code behind.

If I simply add:

ButtonType="ImageButton"

To the button to display it as an image, rather than as text, I no longer hit any itemcommand events on postback when I click the imagebutton. The button simply posts back and doesn't fire the events it should.

This is the only difference, image rather than text. I'm using Q3 2010.

[Matthew]

*Bump*

I've found other threads where people have this problem with no itemcommand firing for image buttons, but no fix...

[Matthew]

Any help Telerik?

[Mike]

I am having the same issue here as well. When I change the existing ImageButtons to normal Buttons the item commands execute like Edit, Delete, Update, Insert and Cancel, but when making them an ImageButton again, they just do nothing. Please fix this problem asap as I have many many grids that utilize image buttons as I am sure others do as well. I am working with a NestedView in case you need to know. This problem has only happened in the last update that I can see.

[Ryan]

I am also having this same issue and have been struggling with it for days. I am at the point now where I am abandoning the radgrid because I need to get this working for my client. Any help would be greatly appreciated.

[Mike]

I just tried this in my code behind and all of a sudden the image buttons are working and the nested view grids are working as they should be:

protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            RadGrid.DataBind();
        }
    }

this may help someone :)

[Matthew]

In mine I've a function called 'BindGrids' which does some processing on the ILists to be bound to the grid, then does a databind, and I call this function in the Page_Load event, but unfortunatly it still doesn't work with imagebuttons. This also gets called (after some list processing logic) on my 'RowDrop' event when dragging/dropping.

I've just tried updating to the latest version of Q3, and I've still got the issue.

[Pavel]

Hello guys,

I am not able to reproduce the problem in a simple test page with our latest release. Please find attached the sample I created for testing. Take a look at it and let me know what is needed to reproduce the undesired behavior.

Greetings,
Pavel
the Telerik team

[Matthew]

Simple to reproduce with your sample, change the page_load method to:

protected void Page_Load(object sender, EventArgs e)
{
    //RadGrid1.NeedDataSource += new GridNeedDataSourceEventHandler(RadGrid1_NeedDataSource);
    RadGrid1.ItemCommand += new GridCommandEventHandler(RadGrid1_ItemCommand);
    RadGrid1.DataSource = new Object[] { "1", "2" };
    RadGrid1.DataBind();
}

You'll see the item command event no longer fires. If you remove:

ButtonType="ImageButton"

The ItemCommand event will fire.

[Matthew]

Right, this problem also occurs if you use a GridTemplateColumn instead. Imagebuttons inside the template colum with 'CommandName' attributes arn't triggering itemcommand for the radgrid, but linkbuttons are.

However, I've found a workaround. Using the new RadButton control in Q3, inside a GridTemplateColumn. So, somthing along these lines:

<telerik:GridTemplateColumn UniqueName="MyTemplateColumn">

<ItemTemplate>   

      <telerik:RadButton ID="btnBgrImg1" CommandName="Delete" runat="server" Width="20px" Height="20px" style="vertical-align:top;" ToolTip="Remove">

   <Image ImageUrl="~/Images/Buttons/20x20/Close_icon.png" IsBackgroundImage="true" />                                             
</telerik:RadButton>   

</ItemTemplate>                        

</telerik:GridTemplateColumn>

[Pavel]

Hello Matthew,

I am attaching a test page in which both approaches work. Could you let me know if they work for you as well?

Regards,
Pavel
the Telerik team

[Chris]

I'm having the same problems.

In both of your examples you are always using

CommandName="Delete"

I create a grid from code behind

 

//up

 

bcolbtn =

new GridButtonColumn();

 

RadGrid1.MasterTableView.Columns.Add(bcolbtn);

bcolbtn.UniqueName =

"SelectColumnUp";

 

bcolbtn.CommandName =

"SelectUp";

 

bcolbtn.Text =

"Up";

 

bcolbtn.ImageUrl =

"~/images/ButtonUpArrow.png";

 

bcolbtn.ButtonType =

GridButtonColumnType.ImageButton;

 

bcolbtn.ItemStyle.HorizontalAlign =

HorizontalAlign.Center;

 

bcolbtn.HeaderStyle.Width =

Unit.Pixel(30);

 

 

//down

 

bcolbtn =

new GridButtonColumn();

 

RadGrid1.MasterTableView.Columns.Add(bcolbtn);

bcolbtn.UniqueName =

"SelectColumnDown";

 

bcolbtn.CommandName =

"SelectDown";

 

bcolbtn.Text =

"Down";

 

bcolbtn.ImageUrl =

"~/images/ButtonDownArrow.png";

 

bcolbtn.ButtonType =

GridButtonColumnType.ImageButton;

 

bcolbtn.ItemStyle.HorizontalAlign =

HorizontalAlign.Center;

 

bcolbtn.HeaderStyle.Width =

Unit.Pixel(30);

 

When the button Type is not set the text is shown and the RadGrid1_ItemCommand event fires passing in the CommandName of SelectUp and SelectDown but when I make the button type ImageButton the event never fires.

[Pavel]

Hi Chris,

I tested the sample attached in my previous post with a different CommandName setting and it still works. Let me know how to alter it in order to replicate the issue.

Best wishes,
Pavel
the Telerik team

[Matthew]

I've already described in my post in this thread how to reproduce the issue:

http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-itemcommand-not-firing-for-buttontype-imagebutton.aspx#1558064

[Pavel]

Hello Matthew,

As explained previously I cannot reproduce the problem with your directions. You can use the attached sample as a reference point and let me know what I am missing.

Regards,
Pavel
the Telerik team

[Matthew]

Ok, my directions where extremely simple, but I'll take you through it...

1. Delete the page load method from your sample page.

2. Copy and paste the code that I put up in my post over the top: http://www.telerik.com/community/forums/aspnet-ajax/grid/radgrid-itemcommand-not-firing-for-buttontype-imagebutton.aspx#1558064

3. If you're copy and paste isn't working, just remove the need datasource event handler and just bind the grid to some data on page load (without any "if (!IsPostback)", exactly as per my example). This is to simulate grids that may be bound to different data on a postback, e.g. when you've got two grids and are doing drag and drop.

4. Put a breakpoint on the itemcommand event.

5. Watch it not hit that breakpoint when you click the GridButtonColumns Image button.

6. Change it to a linkbutton and watch it work.

[Pavel]

Hello Matthew,

When binding the Grid with simple data binding (using DataBind() method) it is not correct to do it on every page load, as the data will be persisted in ViewState. Only when you have operations like paging and sorting you need to assign the data source in the specific event, as illustrated in this example. In your scenario the wrong binding leads to an event validation server-side exception when the image button is pressed. This is not related to the execution of the ItemCommand event.

Regards,
Pavel
the Telerik team

[Rommel]

All you need to do is use RadAjaxManager control and set its property EnableAJAX = "false" :)

[Justin]

I have the same problem, any fix for this?  I'm using CommandName="Delete", which works for all buttons except ImageButton.  Don't see why we need to do hacky work arounds for different button types.

[Shinu]

Hi Justin,

Below is a sample code snippet that i tried which works fine at my end, can you please try and see if the issue exists. If this doesn't help please provide your code.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" AllowPaging="true"
    AllowMultiRowSelection="true" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView>
        <Columns>
            <telerik:GridButtonColumn ButtonType="ImageButton" Text="Delete" CommandName="Delete"
                UniqueName="GridButtonColumn">
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
    new { ID = 1, Name = "Name1"},
    new { ID = 2, Name = "Name2"},
    new { ID = 3, Name = "Name3"},
    new { ID = 4, Name = "Name4"},
    new { ID = 5, Name = "Name5"},
    new { ID = 6, Name = "Name6"},
    new { ID = 7, Name = "Name7"},
    new { ID = 8, Name = "Name8"},
    new { ID = 9, Name = "Name9"}
 };
    RadGrid1.DataSource = data;
}
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "Delete")
    {
        //Your Code
    }
}

Thanks,
Shinu

[Shinu]

.

[TechSavvySam]

Thanks, that fixed my issue.  I'm creating some new code from scratch and was inadvertently rebinding the grid on every post back.  This keeps the ItemCommand event from ever being called.

[TechSavvySam]

Argh!  This forum puts your reply at the bottom of the page, so you can't tell which message fixed my issue.  It was this one from Pavel:

When binding the Grid with simple data binding (using DataBind() method) it is not correct to do it on every page load, as the data will be persisted in ViewState. Only when you have operations like paging and sorting you need to assign the data source in the specific event, as illustrated in this example. In your scenario the wrong binding leads to an event validation server-side exception when the image button is pressed. This is not related to the execution of the ItemCommand event.

[Gaetan]

Hi Shinu

 

Same issue with very similar code, except radgrid inside radwindow popup...

Does the radwindow and radgridview cope well together??

Thanks,

 

[quote]Shinu said:Hi Justin,

Below is a sample code snippet that i tried which works fine at my end, can you please try and see if the issue exists. If this doesn't help please provide your code.

ASPX:

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" AllowPaging="true"
    AllowMultiRowSelection="true" OnNeedDataSource="RadGrid1_NeedDataSource" OnItemCommand="RadGrid1_ItemCommand">
    <MasterTableView>
        <Columns>
            <telerik:GridButtonColumn ButtonType="ImageButton" Text="Delete" CommandName="Delete"
                UniqueName="GridButtonColumn">
            </telerik:GridButtonColumn>
        </Columns>
    </MasterTableView>
</telerik:RadGrid>

C#:

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    dynamic data = new[] {
    new { ID = 1, Name = "Name1"},
    new { ID = 2, Name = "Name2"},
    new { ID = 3, Name = "Name3"},
    new { ID = 4, Name = "Name4"},
    new { ID = 5, Name = "Name5"},
    new { ID = 6, Name = "Name6"},
    new { ID = 7, Name = "Name7"},
    new { ID = 8, Name = "Name8"},
    new { ID = 9, Name = "Name9"}
 };
    RadGrid1.DataSource = data;
}
protected void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
{
    if (e.CommandName == "Delete")
    {
        //Your Code
    }
}

Thanks,
Shinu[/quote]

[Gaetan]

actually, it's a Radgridview in a radwindow + a RadAjaxManager to dispatch events....

Does it sound too much??

 

[Angel Petrov]

Hello Gaetan,

You should not experience any problems when combining the three controls. Please share with us the problematic code so we could examine it. One we have a better view over the exact implementation we should be able to provide you with a more precise answer.

Regards,
Angel Petrov
Telerik

[Gaetan]

problem disappeared after I removed the radwindowmanager from the page.

 Thanks,

Gaetan

 

[Rajan]

I am facing a weird problem with ItemCommand. I have a radGrid which is part of a User Control. This user control is added as part of another aspx page and ItemCommand is triggered and working fine when a button from GridButtonColumn is clicked. However when this user control is added within another user control, ItemCommand is not triggered at all. This RadGrid is part of RadAjaxPanel. When RadAjaxPanel is removed, ItemCommand is triggered in all scenario. Here is how ASPX looks like

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue">
</telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">

       <telerik:RadGrid ID="radSelect" runat="server" PageSize="20" Width="100%" FooterStyle-BackColor="AliceBlue" AllowFilteringByColumn="True" AllowSorting="True"
            AllowPaging="True" AutoGenerateColumns="False" OnUpdateCommand ="radSelect_UpdateCommand"
           ResolvedRenderMode="Classic" CellSpacing="-1"  OnItemCommand="radSelect_ItemCommand"
        OnNeedDataSource="radSelect_NeedDataSource" CssClass="RadGridMasterDiv"><PagerStyle Mode="NextPrev"  AlwaysVisible="true"></PagerStyle>

        <GroupingSettings CaseSensitive="False" />
        <MasterTableView Width="100%" AllowNaturalSort="False" DataKeyNames="EMessageID,EMsgReceiverID" ClientDataKeyNames="EMessageID">
            <HeaderStyle Font-Bold="true" />
            <CommandItemSettings ShowAddNewRecordButton="False" ShowRefreshButton="False" />
            <Columns>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn ReadOnly="true" DataField="SubjectLine" AllowFiltering="true"  UniqueName="Subject" CurrentFilterFunction="Contains" AutoPostBackOnFilter="True" ShowFilterIcon="false">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn ReadOnly="true" DataField="DisplayStatus" UniqueName="Status" CurrentFilterFunction="Contains" AutoPostBackOnFilter="True" ShowFilterIcon="false">
                </telerik:GridBoundColumn>
                <telerik:GridButtonColumn UniqueName="ResendButton" CommandName="Resend">
                </telerik:GridButtonColumn>
            </Columns>
        </MasterTableView>
    </telerik:RadGrid>
    <telerik:RadToolTip ID="RadToolTip1" runat="server" OffsetY="3" Position="TopCenter"
                    ShowCallout="false" Height="20px" ShowEvent="fromcode" />
</telerik:RadAjaxPanel>

Can someone guide me on what could be the possible reason for ItemCommand not to work? I am clueless on how to debug this issue.

[Angel Petrov]

Hi,

Please check in the browser console whether a JavaScript error is raised. Additionally please verify that the container in which the control is loaded is not ajaxifyed by a RadAjaxManager.

Regards,
Angel Petrov
Telerik