I would like to use a TextBoxor Label (item) inside of a Gridview. When field is clicked, I would like to display list of records that contain:
- Item Name
- Description
- Price
- Image
- Add Button
It sounds to me like you are talking about having a "filter" option for your GridView.
If I'm reading your post correctly, you would like to be able to enter text into the TextBox and then filter the data within the GridView to show matching records. Below is some pseudo code that will hopefully help get you started...
FRONT END CODE
<asp:TextBox id="myBox" runat="server" OnTextChange="myBox_OnTextChange"></asp:TextBox>
<asp:GridView id="myGrid" runat="server">
//COLUMN 1
//COLUMN 2
//IMAGE TO ADD
</asp:GridView>
CODE BEHIND
//THIS CODE IS NOT CORRECT EXAMPLE ONLY TO GET YOU STARTED
protected void myBox_OnTextChange(EventArgs e)
{
if(!String.isNullorEmpty(this.myBox.Text))
{
//MyFunction will filter your datasource with the text box data and
//return a DataSet or DataTable or etc.....
this.myGrid.DataSource = MyFunction(myBox.Text);
this.myGrid.DataBind();
}
}
Related
I have 2 aspx pages.. (view.aspx,edit.aspx).
under view.aspx I have grid which displays the following fields.
class,photo,photocaption,Edit which consists of class name, image of the class and a caption for the photo and a link button for edit which traverses to edit.aspx...
under edit.aspx, I have a table consisting of
Class(a drop down box),
Photo(text box with BROWSE button),
photocaption(Textbox).
when i click on the edit in view.aspx, I must get the entered values in the view.aspx grid by default in edit.aspx table..
Please help me to finish my Task...
Assuming your view.aspx page has a TextBox control for the class name called txtClassName, you can add a query string to your edit.aspx like this:
<asp:LinkButton ID="EditLink" runat="server" Text="Edit" PostBackUrl='<%# "edit.aspx?classname=" + txtClassName.Text %>' />
This creates the url in this format:
edit.aspx?classname=class1
Then, in the Page_Load event of your edit.aspx page, you can retrieve the selected class name like this:
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string className = Request.QueryString["classname"];
// code to output the class details
// for example, if you want to add the class name to a dropdownlist:
DropDown1.Items.Add(className);
}
}
I have written a method that retrieves data from the database and returns a datatable comprising of three columns.
This datatable I am binding to a gridview control after hiding the ID field.
DataTable dt = _qbObj.getAllTags();
dvTags.DataSource = dt;
BoundField bfName = new BoundField();
bfName.DataField = dt.Columns["Name"].ToString();
bfName.HeaderText = "Name";
BoundField bfId = new BoundField();
bfId.DataField = dt.Columns["ID"].ToString();
bfId.Visible = false;
BoundField bfDesc = new BoundField();
bfDesc.DataField = dt.Columns["Description"].ToString();
bfDesc.HeaderText = "Description";
dvTags.Columns.Add(bfId);
dvTags.Columns.Add(bfName);
dvTags.Columns.Add(bfDesc);
dvTags.DataBind();
To this gridview control, I want to add an edit button, which should pop-up a jquery modal dialog box where I can enter the updated details.
I realize that I can go with a , but the problem is that I need to pop that modal dialog box without refreshing the page, and the doesn't exactly have great support for scripting.
So inside my gridview I inserted this, an Item Template.
<asp:GridView ID="dvTags" runat="server" CssClass="labs-grid-view"
AutoGenerateColumns="False" >
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Button ID="btnEdit" runat="server" Text="Edit" OnClick="dvTagEdit" CommandName="UpdateRecord"
CommandArgument='<%# Eval("ID") %>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Now after I am done editing the gridview doesn't update automatically, and hence I have a dedicated refresh grid button which deletes the existing "dynamically inserted columns" using this code :-
int noOfRows = dvTags.Columns.Count;
if (noOfRows > 1)
{
dvTags.Columns.RemoveAt(noOfRows - 1);
dvTags.Columns.RemoveAt(noOfRows - 2);
dvTags.Columns.RemoveAt(noOfRows - 3);
// THERE ARE A TOTAL OF **THREE** COLUMNS
}
But the problem is that after refreshing the page a couple of times, my button inside the ItemTemplate disappears and in the html is replaced with an " "
Please help me find the error. I'm thinking there is a better and easier way to achieve this. If so I'm open to them.
Thanks for reading,
Abijeet.
A few things to consider:
First, can you post your code behind for your ItemCommand event, which is rendering the modal popup and which is performing the update? It could be that your refresh after edit is not processing properly.
Second, instead of doing your databinding "inline" on your GridView, consider using the RowDataBound event within the Gridview. You can detect which row is being generated (header, data, footer) and you can properly create your edit button in there. Better yet, you can access your button from within this method and simply set the CommandArgument to your Id.
Third, when using the asp button in your GridView, it will trigger the "ItemCommand" event when clicked, which will cause a postback.
I'd recommend having a simple link in your template column, or something that you can use to trigger a jQuery modal, and you can setup a static naming convention for your items that will properly retrieve the data to put into your modal popup for editing. Then from there you should be able to process your update as normal.
I hope something in here helps.
I have a set of categories that a user can choose from.
Each category has a different set of properties that a user may want to filter on.
The items in each category are displayed in a grid view. Each category has its own web page for the grid view.
When the grid view is displayed I would like a side bar to display properties that pertain to the category. The user should be able to select a property to filter. And filter by min/max values on the property.
I'm trying to determine what controls should go in the sidebar and also how to dynamically populate the set of controls (assuming each one is a distinct property filter).
For example looking at Amazon books the sidebar has a dynamically generated list of filters that pertains to the category of books.
Other nice features would be:
Change the list of properties so that only properties/filters that will produce a result will be displayed.
Have each property/filter show the number of results that will be displayed if selected.
I don't really know how you're going to load the gridview, but this is how I was able to do something similar.
Let's say you're getting your data to the GridView via SQL query:
select property1, property2, property3, ...., from categoryA
Whatever is on the side view should factor into your SQL query somehow, each of them with auto post back.
<asp:TextBox runat="server" AutoPostBack="true" ID="Property1" />
So when it posts back to the server, in your page load method:
protected void Page_Load(object sender, EventArgs e)
{
if(IsPostBack)
{
UpdateCategoryQuery();
}
}
And on your UpdateCategoryQuery() method:
private void UpdateCategoryQuery()
{
if(Property1.Text != "")
{
string sql = "where property1 = '" + Property1.Text + "'";
}
//... and go on down the list.
}
Finally, you will want to read this query and bind the data to the GridView using .DataSource and .DataBind();
It's an extremely simple example, but I didn't really know exactly what you were looking for, so I hope this helps you along.
Edit: The query here can get fairly complicated depending on how many properties you have to filter the data, so you may have to spend some time building it out to make sure it runs correctly.
I'm new to ASP.NET so I'm stuck finding the controls to accomplish
this.
There aren't any controls out of the box, that accomplish this. You have to build your own.
This might not the way you envision, but hopefully is an idea that you can extrapolate:
Since you know the type of objects you are binding to the gridview, create a dropdown box with the list of properties the user can filter on. Next to the drop down, put a min and a max text field so that the user can type in whatever value he needs in those fields. Something like this:
<asp:dropdownlist id="properties" runat="server">
<ListItem Text="Color" Value="Color" />
<ListItem Text="Size" Value="Size"/>
<ListItem Text="Price" Value="Price"/>
</asp:dropdownlist>
<asp:Textbox id="min" runat="server" />
<asp:Textbox id="max" runat="server" />
<asp:Button id="btnFilter" Click="Filter" Text="Filter" />
protected void Filter(object sender, EventArgs e)
{
string minVal = min.Text;
string maxVal = max.Text;
string filterProperty = properties.SelectedValue;
//Now filter your data using the property name and the min and max values
//you can use Linq to do this quickly.
//If binding to a DataTable, use DataTable.Select method and rebind again
}
In a web application I am binding the data to a GridView. In the GridView some of data is repeating. I want to not display the data again and again.
For example Empid is displaying more than one time in the same column. I want to not display the empid again in that column.
You can implement the OnDataBinding event for the specific column you are using. I never use AutoGenerateColumns so having fine control of each cell is pretty simple to implement.
Eg:
// Create global in your .cs file
string _currentEmpID = string.Empty;
Define your column like:
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Literal ID="ltEmpID" runat="server"
OnDataBinding="ltEmpID_DataBinding" />
</ItemTemplate>
</asp:TemplateField>
<!-- Your other columns... -->
</Columns>
Then just implement your DataBinding event:
protected void ltEmpID_DataBinding(object sender, System.EventArgs e)
{
Literal lt = (Literal)(sender);
string empID = Eval("EmpID").ToString();
if (!empID.Equals(_currentEmpID))
{
lt.Text = empID;
_currentEmpID = empID;
}
else
{
lt.Text = string.Empty;
}
}
The RowDataBound forces you to search for controls and if changes are required in the future you have the possibility of breaking other things being modified within the event. Because of this, I prefer to use the control's DataBinding event whenever possible as it localizes functionality to only the control and gives you the flexability to swap out controls and functionality easily without the worry off affecting other things.
If you group your data by the columns you don't want to repeat before binding it to your datasource you can bind an event to RowDataBound and check if the current value equals the previous and then hide the cell.
Check this for an example.
Just add the property AutoGenerateColumns in the gridview and assign it the value of false.
AutoGenerateColumns="false"
I have a grid view which is used to show the Product details. Another thing is there is a table viz. ProductMaster. The data in the gridview is coming from this table. Now what I want is, at first time when page is loaded, only first column should be filled,which contains dropdown list containing product names. All other rows should be empty. Now when user select the Item from the dropdown list, at that time other columns should get filled repectively and other empty row should appear below filled row. Whenever the page is loaded there will be just one empty row(First column dropdown list will be filled with products)
How can I achieve this task??????
Check this article out: http://geekswithblogs.net/dotNETvinz/archive/2009/06/04/adding-dynamic-rows-in-gridview-with-textboxes.aspx
Add DropDownList inside TemplateColumn and in OnRowDataBound event fill it with the product names and instead of Click event of Button as explained in mentioned article you have to handle SelectedIndexChanged event of DropDownList, get the reference on row which contains this DropDownList and fill other columns of this row.
aspx:
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:DropDownList ID="cmbProduct" runat="server" OnSelectedIndexChanged="cmbProduct_Changed" AutoPostBack="true" >
</asp:DropDownList>
</ItemTemplate>
...
</Columns>
code behind:
protected void cmbProduct_Changed(object sender, EventArgs e)
{
DropDownList cmbProduct = (DropDownList)sender;
GridViewRow parentRow = (GridViewRow)cmbProduct.NamingContainer;
string selectedProdId = cmbProduct.SelectedValue;
/* Fetch product details & bind other columns/controls with product details */
Label lbl = (Label)parentRow.FindControl("lblProductName");
lbl.Text = "....";
/* Call AddNewRowToGrid explaied in article*/
AddNewRowToGrid();
}