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
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: