DevXpress grid view: change GridViewCommandColumnCustomButton Image-Url - asp.net

all.
I have a DevXpress gridview, and each row contains 2 custom image buttons: edit and cancel.
In the grid is a specific column that will determine whether the image buttons get displayed or not. If the column contains a 5, then don't show the buttons. Otherwise always show the buttons.
How can I access the Image-Url property from the code behind or will it have to be through the JavaScript?
Code extract re custom button definition:
<dxwgv:GridViewCommandColumn ButtonType="Image" Caption="Edit" AllowDragDrop="False" >
<CustomButtons>
<dxwgv:GridViewCommandColumnCustomButton ID="EditButton" Text="Click to edit" Image-Url="~/Images/16x16/edit.png" Visibility="AllDataRows" Image-AlternateText="Edit" />
</CustomButtons>
</dxwgv:GridViewCommandColumn>
<dxwgv:GridViewCommandColumn ButtonType="Image" Caption="Cancel" AllowDragDrop="False">
<CustomButtons>
<dxwgv:GridViewCommandColumnCustomButton ID="CancelButton" Text="Click to cancel" Image-Url="~/Images/16x16/delete2.png" Visibility="AllDataRows" Image-AlternateText="Cancel" />
</CustomButtons>
</dxwgv:GridViewCommandColumn>
Any ideas would be appreciated. Really not have much joy with DevXpress.
Thanks!

Here is one possibility:
protected void ASPxGridView1_CustomButtonInitialize(object sender, ASPxGridViewCustomButtonEventArgs e)
{
int i = Convert.ToInt32((sender as ASPxGridView).GetMasterRowKeyValue());
if (i == 5)
e.Image.Url = "images/checkmark.gif";
else
e.Image.Url = "images/trash.gif";
}
Then of course in the ASPX file you would need to add:
oncustombuttoninitialize="ASPxGridView1_CustomButtonInitialize"

Related

Asp.net gridview edit without editbutton

I have regular asp.net gridview,and i want to enable editmode in each row,and also without editbutton (like excel grid).
Edited data i want to save to my database by clicking "Post" button outside the grid(one button for whole grid).
How can i reach it?
To achieve this, you are going to have to use ItemTemplates for each column with textboxes in them as the control..
ASP
<asp:TemplateField HeaderText="Heading Title" SortExpression="Heading Title">
<ItemTemplate>
<asp:TextBox ID="tbTextbox" runat="server" Width="65px" Text='<%# Bind("ColumnNameYouWantToView") %>'></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
After this is set up properly, you will want the post button. You can either put it in the grid or outside the grid. I use both, but here is the one inside the grid as a footer.
ASP
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnView" runat="server" Text="View" OnClick="btnView_Click" Width="40px" />
</ItemTemplate>
<FooterTemplate>
<asp:Button ValidationGroup="UPDATE" ID="btnUpdate" OnClick="btnUpdate_Click" runat="server" Text="Update" Width="50px"></asp:Button>
</FooterTemplate>
<FooterStyle HorizontalAlign="Center" VerticalAlign="Middle" Width="50px" />
</asp:TemplateField>
So far, what I have found that works best is using a foreach statement in your button click. The biggest flaw with this idea is that it will update every single row. It works, but if you only change a single row at a time, it will update all of them. I have my pager set to 10, so 10 rows are always updated (unless you are just searching for a single record and update it, the only that single record is updated).
Code Behind C#
protected void btnUpdate_Click(object sender, EventArgs e)
{
SqlConnection conn = new SqlConnection(ConfigurationManager.ConnectionStrings["databaseConnection"].ConnectionString);
conn.Open();
//finds the controls within the gridview and updates them
foreach (GridViewRow gvr in gvGridViewName.Rows)
{
string ID = (gvr.FindControl("lblId") as Label).Text.Trim();//finds the control in the gridview
string anotherControl = ((TextBox)gvr.FindControl("tbTextBox")).Text.Trim();//finds the textbox in the gridview
//Your update or insert statements
}
This is how I do it. You can also look into Real World Grids but I haven't had much luck with this as I would always get an error if a textbox was empty. This however, is suppose to be "smart" enough to just update the rows that have been changed, but again, I didn't have much luck of doing it this way. Hope this helps!

Redirect to specific page when a gridview buttonfield is clicked

I have two fields in my gridview. One is a field with a date range and one of them is a buttonfield. I want to make it so that when a button is clicked, it will redirect them to a specific page with a formatted string similar to how it's done when a hyperlinkfield is clicked as such:
DataNavigateUrlFormatString="ProductInfo.aspx?ProductID={0}"
However, I don't want to use the other field's value(the date range). I want to use the primary key of the record which is "SundayOfWeek". The user wants a button rather than a hyperlink. Is there a way I can do the same thing with a button?
Try using this type of column instead of a ButtonField:
<Columns>
<asp:HyperLinkField
DataTextField="ProductName"
HeaderText="Product Name"
SortExpression="ProductName"
DataNavigateUrlFields="ProductID"
DataNavigateUrlFormatString="ProductInfo.aspx?ProductID={0}" />
</Columns>
Sure, one of many ways is this:
<columns>
<asp:templatefield headertext="Button">
<itemtemplate>
<asp:Button id="btnRedirect"
Text= "Click me"
CommandArgument='<%#Eval("SundayOfWeek")%>'
OnClick="DoRedirect"
runat="server"/>
</itemtemplate>
</asp:templatefield>
</columns>
protected void DoRedirect(object sender, EventArgs e)
{
Button theButton = sender as Button;
Response.Redirect("Newpage.aspx?ID="+theButton.CommandArgument);
}
If you don't want to use the date-range field, you should use another column as DataNavigateUrlField:
DataNavigateUrlField="KeyField"
DataTextField="DateField"
DataNavigateUrlFormatString="ProductInfo.aspx?ProductID={0}"
If you don't want to use a HyperLinkColumn, you should use a TemplateField and add a Button:
<asp:TemplateColumn>
<input type="button" onclick="location.href='ProductInfo.aspx?ProductID=<%#Eval("KeyField")%>'" value='<%#Eval("DateField")%>'' />
</asp:TemplateColumn>

How to display an image in a new window

I have a follow-on question to How to display an image based on SelectedValue in a GridView?
What I would really like to do is have a ViewImage button on my GridView control so that when that is clicked, the image is displayed on a new page in a new browser window. How would I do that? I'm thinking perhaps do I need to create a
<asp:ButtonField>
How do I handle the click and how do I get the image to diplay on a new form in a new web browser window?
Thanks very much for looking.
You can use TemplateColumn, in that TemplateColumn you can define a button where you put javascript function to open new window.
Example:
<asp:TemplateField>
<ItemTemplate>
<input type="button" onclick="javascript:ShowImageInNewPage('PageToShowImage.aspx?tradeId=<%# Eval("TradeId") %>');" />
</ItemTemplate>
</asp:TemplateField>
The "ShowImageInNewPage" function is a custom function you declare to popup/open new window with the selected image url.
In PageToShowImage.aspx, declare an img tag:
<asp:Image ID="imgBlah" runat="server" />
In code behind of PageToShowImage.aspx:
protected void Page_Load(object sender, EventArgs e)
{
// this is querystring from GridView page
if(Request.QueryString["tradeId"] != null)
{
imgBlah.Src = "GetImage.aspx?entityId=" + tradeId + "&entityType=T";
}
else
{
imgBlah.Src = "~/images/no-image.jpg"; // set no image
}
}
HTH
I'm hoping that you're dealing with browser supported image formats. Assuming you are, you don't need a ButtonField. One approach would be to use an <asp:HyperLink> in a TemplateColumn, as Arief suggested.
<asp:TemplateField>
<ItemTemplate>
<asp:HyperLink ID="hyperLink1" runat="server" NavigatUrl="UrlToYourViewImagePage" Text="View Image" />
</ItemTemplate>
</asp:TemplateField>
If you want the image to open in a new window, build a window.open call for each HyperLink's NavigateUrl.

Accessing TextArea Inside GridView with JQuery BlockUI

This is driving me nuts!
I am trying to access a TextArea inside the GridView control. The TextArea is popped up when a button on a gridview is clicked. For some reason the textarea.value always contains " ".
<asp:GridView ID="gvCategories" runat="server" AutoGenerateColumns="false"
onrowcommand="gvCategories_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<input type="button" value="add comment" onclick="showCommentBox()" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<div id="commentBox" style="display:none">
<input type="button" value="move comment input box" onclick="moveComment()" />
<textarea id="txtComment" rows="10" cols="30">
</textarea>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
function moveComment() {
alert(document.getElementById("txtComment").value);
}
I have added this code on the server side but the TextBox always returns " "
protected void gvCategories_RowCommand(object sender, GridViewCommandEventArgs e)
{
var row = (GridViewRow) (e.CommandSource as LinkButton).NamingContainer;
var description = (row.FindControl("txtDescription") as TextBox).Text;
lblComment.Text = description;
}
#Azam - This is related to your other post which I answered. The gridview is generating the commentBox DIV along with all its child elements multiple times with the same set of IDs.
I ran a test on this and found that each call to document.getElementById("txtComment") returns the next matching element in the DOM with that Id until it cycles through the entire collection of matching elements, going back to the first one and then it does it all over again.
This is the reason why you get a blank when trying to access the value of the textarea or textbox for that matter.
You need to modify your call to showComment() so that it stores a reference to the element in the given row, then when you call moveComment(), it will work on the same element and not just the next element in the DOM with the same ID.
try textarea.innerHTML
looking at your code that would be:
alert(document.getElementById("txtComment").innerHTML);

ASP.NET GridView CommandField Update/Cancel does not wrap

My question is on the ASP.NET GridView control. I am using a CommandField in the Columns tag as seen below.
<asp:CommandField ShowEditButton="True" HeaderStyle-Width="40px" UpdateText="Save" ButtonType="Link" HeaderStyle-Wrap="true" ItemStyle-Wrap="true" ItemStyle-Width="40px"/>
What renders is the shown in the following image (after I click on the Edit button).
As you can see I am trying to have the Cancel link show up a new line and my question is how do you do what? If I change the ButtonType="Link" to ButtonType="Button", I get it rendering correctly as shown below.
alt text http://i38.tinypic.com/2pqopxi.jpg
I've tried Google already and maybe I'm not searching on the right tags but I couldn't see this one addressed before.
If you use a template field it will give you complete control over the look of your page, but it requires that you use the CommandName and possible CommandArgument properties, and also using the GridView's OnRowCommand.
The aspx page:
<asp:GridView id="gvGrid" runat="server" OnRowCommand="gvGrid_Command">
<Columns>
<asp:TemplateField>
<ItemTemplate>
Some Stuff random content
<br />
<asp:LinkButton id="lbDoIt" runat="server" CommandName="Cancel" CommandArgument="SomeIdentifierIfNecessary" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
The code behind:
protected void gvGrid_Command(object sender, GridViewCommandEventArgs e)
{
if(e.CommandName=="Cancel")
{
// Do your cancel stuff here.
}
}
Don't use a command field, use a TemplateField and put your command button in that with a line break (br) before it like you want.

Resources