Gridview Commandfield imageurl

[AG]

I have a asp.net 2.0 gridview control with select, edit, delete buttons
enabled and set to image button type to display my images.
Is there any way to access the selectedimageurl property at run time so I
can supply a different image for the selected row?
I am assuming that I would do it in the RowDataBound event.
Or do I need to use a separate template column?

TIA

 

[Walter Wang [MSFT]]

Hi,

By default, the CommandField doesn't provide direct way to change the
selected row's SelectImageUrl. For such requirement, I recommend you to use
a TemplateField to create the select image manually:

<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgSelect" runat="server"
ImageUrl="~/Unselected.bmp" CommandName="Select" />
</ItemTemplate>
</asp:TemplateField>

We need to handle the GridView's two events: SelectedIndexChanging and
SelectedIndexChanged:

protected void GridView1_SelectedIndexChanged(object sender, EventArgs
e)
{
SetSelectRowImage(GridView1.SelectedRow, true);
}
protected void GridView1_SelectedIndexChanging(object sender,
GridViewSelectEventArgs e)
{
SetSelectRowImage(GridView1.SelectedRow, false);
}

The function SetSelectRowImage() is used to change the image of the row
(NOTE: you need to change the cell index according to your field's position:

private void SetSelectRowImage(GridViewRow row, bool bSelect)
{
if (row != null)
{
ImageButton ib = row.Cells[0].FindControl("imgSelect") as
ImageButton;
if (bSelect)
{
ib.ImageUrl = "~/Selected.bmp";
}
else
{
ib.ImageUrl = "~/Unselected.bmp";
}
}
}

I hope this answers your question, please let me know whether or not you
need further information. Thanks.

Sincerely,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications. If you are using Outlook Express, please make sure you clear the
check box "Tools/Options/Read: Get 300 headers at a time" to see your reply
promptly.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[AG]

Thanks Walter,

That worked well when only using the select button.
I also added template columns for edit and delete.
When edit is clicked I make the edit row the selected row also and in that
case need to reset the image also. Plus when the page is initially loaded, I
select the first row.

To cover all bases I moved the line
SetSelectRowImage(GridView1.SelectedRow, true);
to the gridview's PreRender event.
Seems to work fine.
Do you forsee any problem with that?

--

AG
Email: discuss at adhdata dot com

Hi,

By default, the CommandField doesn't provide direct way to change the
selected row's SelectImageUrl. For such requirement, I recommend you to
use
a TemplateField to create the select image manually:

<asp:TemplateField>
<ItemTemplate>
<asp:ImageButton ID="imgSelect" runat="server"
ImageUrl="~/Unselected.bmp" CommandName="Select" />
</ItemTemplate>
</asp:TemplateField>

We need to handle the GridView's two events: SelectedIndexChanging and
SelectedIndexChanged:

protected void GridView1_SelectedIndexChanged(object sender, EventArgs
e)
{
SetSelectRowImage(GridView1.SelectedRow, true);
}
protected void GridView1_SelectedIndexChanging(object sender,
GridViewSelectEventArgs e)
{
SetSelectRowImage(GridView1.SelectedRow, false);
}

The function SetSelectRowImage() is used to change the image of the row
(NOTE: you need to change the cell index according to your field's
position:

private void SetSelectRowImage(GridViewRow row, bool bSelect)
{
if (row != null)
{
ImageButton ib = row.Cells[0].FindControl("imgSelect") as
ImageButton;
if (bSelect)
{
ib.ImageUrl = "~/Selected.bmp";
}
else
{
ib.ImageUrl = "~/Unselected.bmp";
}
}
}

I hope this answers your question, please let me know whether or not you
need further information. Thanks.

Sincerely,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/subscriptions/managednewsgroups/default.aspx#notif
ications. If you are using Outlook Express, please make sure you clear the
check box "Tools/Options/Read: Get 300 headers at a time" to see your
reply
promptly.

Note: The MSDN Managed Newsgroup support offering is for non-urgent issues
where an initial response from the community or a Microsoft Support
Engineer within 1 business day is acceptable. Please note that each follow
up response may take approximately 2 business days as the support
professional working with you may need further investigation to reach the
most efficient resolution. The offering is not appropriate for situations
that require urgent, real-time or phone-based interactions or complex
project analysis and dump analysis issues. Issues of this nature are best
handled working with a dedicated Microsoft Support Engineer by contacting
Microsoft Customer Support Services (CSS) at
http://msdn.microsoft.com/subscriptions/support/default.aspx.
==================================================

This posting is provided "AS IS" with no warranties, and confers no
rights.

 

[Walter Wang [MSFT]]

Hi AG,

From your description, I understand that:

1) You want the first row is selected when the page is initially loaded:

protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
if (GridView1.Rows.Count > 0)
{
GridView1.SelectedIndex = 0;
}
}
}

You also made following changes:

protected void GridView1_SelectedIndexChanged(object sender, EventArgs
e)
{
}
protected void GridView1_PreRender(object sender, EventArgs e)
{
SetSelectRowImage(GridView1.SelectedRow, true);
}


2) You want the editing row also the selected row.

protected void GridView1_RowEditing(object sender,
GridViewEditEventArgs e)
{
GridView1.SelectedIndex = e.NewEditIndex;
}

If my above understanding is correct, then I think this will do the job.
Please feel free to let me know if this doesn't work in other situations.

Regards,
Walter Wang ([email protected], remove 'online.')
Microsoft Online Community Support

==================================================
When responding to posts, please "Reply to Group" via your newsreader so
that others may learn and benefit from your issue.
==================================================

This posting is provided "AS IS" with no warranties, and confers no rights.

 

[AG]

That does it, thanks Walter.