image is not displaying in templatefield from gridview sorting - asp.net

Question

I have an issues with TemplateField in grid view.
There are two TemplateField(imgFSL,imgMain) show the Image based on value from database. In pageload, the grid view shows the correct image photo. After i click one of gridview column sorting, the grid does not show the image even the url is correct. Please help me this issue. I have searched other website and tried so many ways. But no resolved it yet after clicking grid view sorting.
Here is designer page for grid view
<asp:UpdatePanel ID="upBOMList" runat="server">
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" ScrollBars="Vertical" Height="350px">
<asp:GridView ID="grdBOMList" runat="server" AutoGenerateColumns="False"
AllowSorting="true" BorderStyle="Solid"
EmptyDataText="<%$ Resources:Resource, NoBOMListMsg %> " Font-Names="Verdana"
BorderWidth="1px" CellPadding="3" CellSpacing="1" GridLines="None" Width="100%"
BackColor="White" BorderColor="#999999" DataKeyNames="PartNo" ForeColor="Black"
OnSelectedIndexChanged="grdBOMList_SelectedIndexChanged" OnRowDataBound="grdBOMList_RowDataBound"
OnPageIndexChanging="grdBOMList_PageIndexChanging"
OnSorting="grdBOMList_Sorting" ShowFooter="False" >
<AlternatingRowStyle CssClass="gridAlternatingRowStyle" />
<Columns>
<asp:BoundField ControlStyle-BorderWidth="0" DataField="ItemLocationNo" HeaderText="<%$ Resources:Resource, LocID %>"
SortExpression="ItemLocationNo">
<ControlStyle BorderWidth="0px"></ControlStyle>
<ItemStyle CssClass="gridPaddingStyle_center" />
<HeaderStyle Width="50px" CssClass="gridPaddingStyle_center"></HeaderStyle>
</asp:BoundField>
<asp:BoundField ControlStyle-BorderWidth="0" DataField="PartCategory" HeaderText="<%$ Resources:Resource, Category %>"
SortExpression="PartCategory">
<ControlStyle BorderWidth="0px"></ControlStyle>
<ItemStyle CssClass="gridPaddingStyle_center" />
<HeaderStyle CssClass="gridPaddingStyle_center" Width="150px"></HeaderStyle>
</asp:BoundField>
<asp:ButtonField DataTextField="PartNo" HeaderText="<%$ Resources:Resource, PartNo %>"
ShowHeader="True" CommandName="Select" SortExpression="PartNo">
<ItemStyle CssClass="gridPaddingStyle_center" />
<HeaderStyle CssClass="gridPaddingStyle_center" Width="80px"></HeaderStyle>
</asp:ButtonField>
<asp:BoundField ControlStyle-BorderWidth="0" DataField="Description" HeaderText="<%$ Resources:Resource, Description %>"
SortExpression="Description">
<ControlStyle BorderWidth="0px"></ControlStyle>
<ItemStyle CssClass="gridPaddingStyle_left" />
<HeaderStyle CssClass="gridPaddingStyle_center" Width="150px"></HeaderStyle>
</asp:BoundField>
<asp:BoundField ControlStyle-BorderWidth="0" DataField="VDRCode" HeaderText="<%$ Resources:Resource, VendorsPN %>"
SortExpression="VDRCode">
<ControlStyle BorderWidth="0px"></ControlStyle>
<ItemStyle CssClass="gridPaddingStyle_left" />
<HeaderStyle CssClass="gridPaddingStyle_center" Width="80px"></HeaderStyle>
</asp:BoundField>
<asp:BoundField ControlStyle-BorderWidth="0" DataField="FSL" HeaderText="FSL">
<ControlStyle BorderWidth="0px"></ControlStyle>
<HeaderStyle CssClass="gridPaddingStyle_center" Width="150px"></HeaderStyle>
</asp:BoundField>
<asp:BoundField ControlStyle-BorderWidth="0" DataField="Main" HeaderText="<%$ Resources:Resource, Main %>">
<ControlStyle BorderWidth="0px"></ControlStyle>
<HeaderStyle CssClass="gridPaddingStyle_center" Width="150px"></HeaderStyle>
</asp:BoundField>
<asp:TemplateField HeaderText="FSL" HeaderStyle-Width="5%" ItemStyle-HorizontalAlign="Center"
FooterStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Image ID="imgFSL" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="<%$ Resources:Resource, Main %>" HeaderStyle-Width="5%"
ItemStyle-HorizontalAlign="Center" FooterStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:Image ID="imgMain" runat="server" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle CssClass="gridHeaderStyle" ForeColor="#ffffff" />
<FooterStyle CssClass="gridFooterStyle" ForeColor="Black" />
<PagerStyle CssClass="gridPagerStyle" ForeColor="#ffffff" />
<RowStyle CssClass="gridRowStyle" ForeColor="Black" />
<SelectedRowStyle BackColor="#2a2a7f" Font-Bold="False" ForeColor="White" />
</asp:GridView>
</asp:Panel>
</ContentTemplate>
<Triggers>
<asp:PostBackTrigger ControlID="btnImportFile" />
<asp:PostBackTrigger ControlID="btnExportFile" />
<asp:PostBackTrigger ControlID="btnExport" />
<asp:PostBackTrigger ControlID="btnCreate" />
</Triggers>
Here is the coding porting for gridview row databound, sorting function and Create Table
public void grdBOMList_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
Subsidiary sub = new SubsidiaryFacade().GetBySubsidiaryCode(userSubsidiaryCode, userid, userEntityCode);
int redInd = (int)sub.RedIndicatorQty;
int greenInd = (int)sub.GreenIndicatorQty;
string fsl = e.Row.Cells[5].Text;
string main = e.Row.Cells[6].Text;
System.Web.UI.WebControls.Image imgFSL = (System.Web.UI.WebControls.Image)e.Row.FindControl("imgFSL");
if (fsl != string.Empty && fsl != null)
{
int quantityFSL = Convert.ToInt32(fsl);
if (quantityFSL != null)
{
if (quantityFSL <= redInd)
{
imgFSL.ImageUrl = "~/image/Circle_Red.png";
//imgFSL.ImageUrl = ResolveUrl("~/image/Circle_Red.png");
//imgFSL.ImageUrl = Page.ResolveClientUrl("~/image/Circle_Red.png");
}
else if (redInd < quantityFSL && quantityFSL < greenInd)
{
imgFSL.ImageUrl = "~/image/Circle_Orange.png";
//imgFSL.ImageUrl = ResolveUrl("~/image/Circle_Orange.png");
//imgFSL.ImageUrl = Page.ResolveClientUrl("~/image/Circle_Orange.png");
}
else if (quantityFSL >= greenInd)
{
imgFSL.ImageUrl = "~/image/Circle_Green.png";
//imgFSL.ImageUrl = ResolveUrl("~/image/Circle_Green.png");
//imgFSL.ImageUrl = Page.ResolveClientUrl("~/image/Circle_Green.png");
}
}
}
if (main != string.Empty && main != null)
{
int quantityMain = Convert.ToInt32(main);
System.Web.UI.WebControls.Image imgMain = (System.Web.UI.WebControls.Image)e.Row.FindControl("imgMain");
if (quantityMain != null)
{
if (quantityMain <= redInd)
{
imgMain.ImageUrl = "~/image/Circle_Red.png";
}
else if (redInd < quantityMain && quantityMain < greenInd)
{
imgMain.ImageUrl = "~/image/Circle_Orange.png";
}
else if (quantityMain >= greenInd)
{
imgMain.ImageUrl = "~/image/Circle_Green.png";
}
}
}
}
}
This is grid sorting
protected void grdBOMList_Sorting(object sender, GridViewSortEventArgs e)
{
string sortExpression = e.SortExpression;
string direction = string.Empty;
if (SortDirection == SortDirection.Ascending)
{
SortDirection = SortDirection.Descending;
direction = "DESC";
}
else
{
SortDirection = SortDirection.Ascending;
direction = "ASC";
}
BindBOMListGrid();
List<BOM> list = (List<BOM>)grdBOMList.DataSource;
DataTable dt = CreateDataTable_BOM();
if (list.Count > 0)
{
for (int i = 0; i < list.Count; i++)
{
BOM b = list[i];
DataRow row;
row = dt.NewRow();
row["ItemLocationNo"] = b.ItemLocationNo;
row["PartCategory"] = b.PartCategory;
row["PartNo"] = b.PartNo;
row["Description"] = b.Description;
row["VDRCode"] = b.VDRCode;
int fslvalue = Convert.ToInt32(b.FSL);
Subsidiary sub = new SubsidiaryFacade().GetBySubsidiaryCode(userSubsidiaryCode, userid, userEntityCode);
int redInd = (int)sub.RedIndicatorQty;
int greenInd = (int)sub.GreenIndicatorQty;
if (Convert.ToString(b.FSL) != string.Empty && b.FSL != null)
{
int quantityFSL = Convert.ToInt32(b.FSL);
if (quantityFSL != null)
{
if (quantityFSL <= redInd)
{
row["imgFSL"] = ResolveUrl("~/image/Circle_Red.png");
}
else if (redInd < quantityFSL && quantityFSL < greenInd)
{
row["imgFSL"] = ResolveUrl("~/image/Circle_Orange.png");
}
else if (quantityFSL >= greenInd)
{
row["imgFSL"] = ResolveUrl("~/image/Circle_Green.png");
}
}
}
dt.Rows.Add(row);
}
}
dt.DefaultView.Sort = sortExpression + " " + direction;
grdBOMList.DataSource = dt;
grdBOMList.DataBind();
ModalPopupExtender.Show();
}
This is Create data table for grid view
private DataTable CreateDataTable_BOM()
{
DataTable myDataTable = new DataTable();
DataColumn myDataColumn;
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.String");
myDataColumn.ColumnName = "ItemLocationNo";
myDataTable.Columns.Add(myDataColumn);
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.String");
myDataColumn.ColumnName = "PartCategory";
myDataTable.Columns.Add(myDataColumn);
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.String");
myDataColumn.ColumnName = "PartNo";
myDataTable.Columns.Add(myDataColumn);
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.String");
myDataColumn.ColumnName = "Description";
myDataTable.Columns.Add(myDataColumn);
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.String");
myDataColumn.ColumnName = "VDRCode";
myDataTable.Columns.Add(myDataColumn);
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.Int32");
myDataColumn.ColumnName = "FSL";
myDataTable.Columns.Add(myDataColumn);
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.String");
myDataColumn.ColumnName = "imgFSL";
myDataTable.Columns.Add(myDataColumn);
myDataColumn = new DataColumn();
myDataColumn.DataType = Type.GetType("System.Int32");
myDataColumn.ColumnName = "Main";
myDataTable.Columns.Add(myDataColumn);
return myDataTable;
}
In pageload, the grid shows the image like that(before sorting)
After clicking one of grid column sorting, the image is not showing even the url is correct
Please give me any suggestions.

Answer 1

It may be because you have not registered any trigger of gridview events.
Try by adding a postback trigger for gridview. as:
<asp:PostBackTrigger ControlID="grdBOMList" />