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);
Related
I want grid view header template textbox value. I write code for getting value but it return null.
<asp:Button ID="btngetLocationDate" runat="server" Text="Get Filtered Data" OnClick="getTextBoxValue"></asp:Button>
<asp:TemplateField HeaderText="Mobile Number">
<HeaderTemplate>
Mobile Number:
<asp:TextBox ID="txtMobilenumber" runat="server" ></asp:TextBox>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblmobile" runat="server" Text='<%# Eval("Mobile Phone") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
And On the code behind.cs i write that code but it returns null
protected void getTextBoxValue(object sender, EventArgs e)
{
//TableCell cell1 = TrackerGrid.HeaderRow.Cells[0];
TextBox mobilenumber = (TrackerGrid.HeaderRow.FindControl("txtMobilenumber") as TextBox) ;
string mobile = mobilenumber.Text;
How can I resolve this ? please help me!
I've just had a similar problem by trying to get textbox text from the footer row. I'm not sure if this is the best way to get around this problem but this should work if FindControl() successfully assigns the textbox.
TextBox mobilenumber = (TrackerGrid.HeaderRow.FindControl("txtMobilenumber") as TextBox);
string mobile = Request.Form[mobilenumber.UniqueID];
EDIT: As VDWWD commented, Request.Form is a bad practice. But for my particular usage I couldn't find any other way to get the data from a textbox on button click due to my unorganized postbacks.
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!
I'm trying to create a draggable list to change the order some pictures are displayed in a product page. I wan't to be able to do this in the product edit page (same place where I add the pics and their description). So, when creating I have nothing inserted on the database and since the AJAX toolkit reorderlist only works with a datasource I was specifying the list as the source of the reorderlist and calling the databind method. In the item template of the reorder list I have a textbox to edit the pic description and a img that displays the photo. I can drag the items and the list gets reordered, however when I click save I can't get the updated text on the textbox and the order property on the picture doesn't get updated. I've tried manually getting the items in the reorderlist but they're always null even though the list shows 20 items the DataItem is empty. I've enabled viewstate and didn't help either.
Here's my code:
<ajaxToolkit:ReorderList ID="rdlPhotos" runat="server" SortOrderField="PhotoOrder" AllowReorder="true" PostBackOnReorder="true" ClientIDMode="AutoID" EnableViewState="true" ViewStateMode="Enabled">
<ItemTemplate>
<div>
<%--<eva:PhotoView ID="iPV" runat="server" Photo='<%# Container.DataItem %>' />--%>
<asp:Image ID="imgPhoto" runat="server" ImageUrl='<%# string.Format("http://eva-atelier.net/sparkle{0}", Eval("Path").ToString().Substring(1)) %>' Width="150" Height="150" />
<div class="formGrid">
<label class="formLabel">Title</label>
<asp:TextBox ID="txtTitle" runat="server" Text='<%#Bind("FileTitle") %>' />
<br />
<label class="formLabel">Description</label>
<asp:TextBox ID="txtDescription" runat="server" Text='<%#Bind("FileDescription") %>' />
<br />
</div>
<p>
<asp:Button ID="btnRemove" runat="server" Text="Remover" />
</p>
</div>
</ItemTemplate>
<ReorderTemplate>
<asp:Panel ID="pnlReorder" runat="server" />
</ReorderTemplate>
<DragHandleTemplate>
<div style="width:20px;height:20px;background-color:Red"></div>
</DragHandleTemplate>
</ajaxToolkit:ReorderList>
And below the C# code:
private void AddPhotosView()
{
if (_currentProduct.Photos != null && _currentProduct.Photos.Count > 0)
{
rdlPhotos.DataSource = _currentProduct.Photos;
rdlPhotos.DataBind();
}
}
I'm new to Asp.net I come from a large WPF background, sorry if I'm making basic question :)
Thanks
For updating order of ReorderList items add your handler for it's OnItemReorder event. In this case your handler may looks like this:
protected void ReorderHandler(object sender, ReorderListItemReorderEventArgs e)
{
var movedPhoto = _currentProduct.Photos[e.OldIndex];
_currentProduct.Photos.RemoveAt(e.OldIndex);
_currentProduct.Photos.Insert(e.NewIndex, movedPhoto);
_currentProduct.Photos.Save();
}
For updating FileTitle and FileDescription of single Photo it is easy to use OnUpdateCommand event of ReorderList and a button with attribute CommandName="Update" for each Photo.
And for updating all Photos at once just iterate through rdlPhotos.Items in next manner:
protected void SaveAllHandler(object sender, EventArgs e)
{
foreach (var riItem in rdlPhotos.Items)
{
var id = ((HiddenField)riItem.FindControl("itemID")).Value;
var title = ((TextBox)riItem.FindControl("txtTitle")).Text;
var description = ((TextBox)riItem.FindControl("txtDescription")).Text;
UpdatePhoto(id, title, description);
}
}
Remember that rdlPhotos.Items here are in initial order. And for identifying which Photo should be updated add hidden field with Photo.ID-value to ReorderList's ItemTemplate like this:
<asp:HiddenField runat="server" ID="itemID" Value='<%# Eval("ID") %>' />
I have multiple radio buttons columns in my gridview, I want to select one column at a time
As i got, you want to check only one radio button in a row so just add an attribute
GroupName with same value to all radio buttons and it will work..
e.g
<asp:TemplateField HeaderText="More Than 20% Estimate" >
<ItemTemplate >
<asp:RadioButton ID="rdbGVRow8" GroupName ="Program" onclick="javascript:CheckOtherIsCheckedByGVIDMore(this);" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="10% to 20% overestimate" >
<ItemTemplate >
<asp:RadioButton ID="rdbGVRow7" GroupName ="Program" onclick="javascript:CheckOtherIsCheckedByGVIDMore(this);" runat="server" />
</ItemTemplate>
</asp:TemplateField>
.
.
.
.
where program is a value you can give your own value but remember same value to all radio buttons.
This rather lengthy tutorial is the best I've seen that solves this issue
Adding a GridView Column of Radio Buttons
http://www.asp.net/data-access/tutorials/adding-a-gridview-column-of-radio-buttons-cs
If you are using the same group name for your buttons and they still are not working:
"The reason the radio buttons are not grouped is because their rendered name attributes are different, despite having the same GroupName property setting." If you view the source it might look something like this:
<input id="ctl00_MainContent_Suppliers_ctl02_RowSelector"
name="ctl00$MainContent$Suppliers$ctl02$SuppliersGroup"
type="radio" value="RowSelector" />
<input id="ctl00_MainContent_Suppliers_ctl03_RowSelector"
name="ctl00$MainContent$Suppliers$ctl03$SuppliersGroup"
type="radio" value="RowSelector" />
The fix is to use literal controls to inject the name in.
protected void Suppliers_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
// Grab a reference to the Literal control
Literal output = (Literal)e.Row.FindControl("RadioButtonMarkup");
// Output the markup except for the "checked" attribute
output.Text = string.Format(
#"<input type="radio" name="SuppliersGroup" " +
#"id="RowSelector{0}" value="{0}" />", e.Row.RowIndex);
}
}
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.