Forums Ultimate UI for ASP.NET Web Forms
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Assad
220
WebImageButton click event does not work after paging is clicked
posted

Hello everyone,

This is a strange one.  I've created created a simple web solution to try and debug this.  I'm using UltraWebGrid Infragistics 10.2 (CLR 2.0). 

I have placed a bog standard infragistics ultrawebgrid to a web page and in the Page_load, I've bound it to my custom business collection.  in the aspx page, I've added a TemplateDataField in which there is a WebImageButton which when clicked will simply update a label showing the ID of record which was clicked (NOTE: the grid and the label are inside an Ajax UpdatePanel).  I've also turned on the 'out of the box' paging behaviour on the grid.  Everything works fine at first:- if I click the WebImageButton it updates the label however as soon as I click the paging, the WebImageButton no longer becomes 'clickable'.  It is as if the WebImageButton is disabled (although the appearance is still enabled).  I replaced the WebImageButton with the standard .NET's button and this problem does happen with Microsofts standard button - in this case the button is 'clickable' even after clicking a page number.  Is this a bug with WebImageButton or do I need to do some additional steps? (My code is below):

aspx page:- 

<form id="form1" runat="server">
<ig:WebScriptManager ID="WebScriptManager1" runat="server"></ig:WebScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>

<asp:Label ID="message" runat="server" Text=""></asp:Label>

<ig:WebDataGrid ID="grid" runat="server" Height="100%" Width="100%" onitemcommand="grid_ItemCommand" AutoGenerateColumns="true">

<Columns>

<ig:TemplateDataField Key="editButtonTemplate">
<Header Text="editButtonTemplate" />
<ItemTemplate>

<igtxt:WebImageButton ID="editButton" Enabled="true" Text="Edit" runat="server" EnableViewState="true" CommandName="Edit" CommandArgument='<%# Eval("GroupId") %>'></igtxt:WebImageButton>

</ItemTemplate>
</ig:TemplateDataField>

</Columns>
<Behaviors>

<ig:Sorting></ig:Sorting>
<ig:Paging PageSize="5"></ig:Paging>

</Behaviors>

</ig:WebDataGrid>

</ContentTemplate>
</asp:UpdatePanel>
</form>

 

code behind:-

public partial class DataGridExamplePage : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

grid.DataSource = SecurityManager.GetGroups();
grid.DataBind();

}

protected void grid_ItemCommand(object sender, Infragistics.Web.UI.GridControls.HandleCommandEventArgs e)
{

if (e.CommandName == "Edit")
{

message.Text = "Selected Group ID: " + e.CommandArgument.ToString();

}

}

}

Any Help will be much appreciated.

Assad

  • 415
    Offline posted

    Ok I have found a solution to this problem. Basically its the way IG handle the javascript for the button. You need to initilise the button again due to the behaviours being lost after postback.

    // This is where the magic happens :-)
        function DataGrid_FixImageButtons(gridName) {
            var grid = $find(gridName);
            var gridId = grid.get_id();
            var buttonName = 'Button';
 
            var length = grid.get_rows().get_length();
            for (var i = 0; i < length; i++) {
                try {
                    // Get hold of the existing button.
                    var buttonClientId = gridId + "_it1_" + i.toString() + "_" + buttonName;
                    var button = ig_getWebControlById(buttonClientId);
 
                    // Copy existing props.
                    var existingProps = (button._autoSubmit == true ? "1" : "") + "," + (button._display == 'inline' ? "1" : "") + "," + (button._space == 'inline' ? "1" : "") + "," + button._space + "," + button._enter + "," + button._wMax + "," + button._hMax + "," + button._wBdr + "," + button._hBdr + "," + (button._validate == true ? "1" : "") + "," + (button._focusable == true ? "1" : "") + "," + (button._disTD == true ? "1" : "");
 
                    // We convert to JSON to get a deep copy as the button is disposed.
                    var clonedProps = Sys.Serialization.JavaScriptSerializer.deserialize(Sys.Serialization.JavaScriptSerializer.serialize(button._apps));
 
                    // Add the first item to the cloned props.
                    clonedProps.splice(0, 0, existingProps);
 
                    // Convert the existing userEvents array into the expected format for igbut_init function.
                    var userEvents = new Array();
                    var events = button._userEvents;
                    if (events) {
                        for (var j in events) {
                            var val = events[j];
 
                            switch (typeof val) {
                                case ("string"):
                                    userEvents[userEvents.length] = j;
                                    userEvents[userEvents.length] = escape(val);
                                    break;
                                default:
                                    userEvents[userEvents.length] = j;
                                    userEvents[userEvents.length] = val;
                                    break;
                            }
                        }
                    }
 
                    // Re-Init the button        
                    // 0 = Additional Prop
                    // 1 = Image
                    // 2 = Hover
                    // 3 = Focus
                    // 4 = Pressed
                    // 6 = Disabled
                    igbut_init(buttonClientId, [clonedProps[0], "pd;" + clonedProps[1].pd + ";bgi;" + clonedProps[1].bgi, "bgi;" + clonedProps[4].bgi, "bgi;" + clonedProps[2].bgi, "pd;" + clonedProps[5].pd + ";bgi;" + clonedProps[5].bgi, "bgi;" + clonedProps[6].bgi], ["c", "Button_Click"]);
                }
                catch (e) {
                    status = "Can not init button";
                }
            }
        }

    you call the function in the AJAXResponse client side event. Make sure you update the button name before trying to use.

    Download the sample project:

  • 220
    posted

    Sorry, just to correct myself: "I replaced the WebImageButton with the standard .NET's button and this problem DOES NOT happen with Microsofts standard button..."

    Thanks

    Assad