Creating a tabbed Gridview in C# - c#

I am creating a web interface which currently reads data in from an XML data file, parses it into an array of Objects, after which I bind it to the data source of a Gridview. I then use and to retrieve the data I want from the objects for each column.
However, I am at the point that I would like to have multiple tabs in this gridview, possibly controlled by different link buttons. Each tab would show a different set of columns.
What would be the best way to implement this? Do I need to have three separate GridViews in my page, and just show the one for which the user selected (based on the click to the link button), while hiding all the others? This seemed like it might be unnecessarily slow. Is it possible to do via one GridView?
Right now the entire GridView is contained in an AJAX update panel, with the code below:
<asp:Panel id="searchResultsGrid" runat="server" CssClass="searchResultsGrid">
<asp:GridView id="gridViewSearchResults" runat="server" AutoGenerateColumns="false"
AllowPaging="True" AllowSorting="True"
PageSize="25" Width="920" PagerSettings-Visible="false">
<Columns>
<asp:templatefield headertext="Test Column 1 Tab 1" HeaderStyle-HorizontalAlign="Left">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 2 Tab 1" HeaderStyle-HorizontalAlign="Left">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 3 Tab 1" HeaderStyle-HorizontalAlign="Left">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 4 Tab 1" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 5 Tab 1" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 6 Tab 1" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
<asp:templatefield headertext="Test Column 7 Tab 1" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right">
<itemtemplate>
<%# GetColumnInfo() %>
</itemtemplate>
</asp:templatefield>
</Columns>
<RowStyle CssClass="searchResultEntry borderTopGrey" />
<EmptyDataTemplate>
<p class="searchResultsEmpty">
<asp:Label ID="lblSearchResultsEmpty" runat="server" Text="No records matched the selected criteria. Please revise your criteria and try again." CssClass="searchResultsEmpty"></asp:Label>
</p>
</EmptyDataTemplate>
</asp:GridView>
</asp:Panel>
This is the code I currently have for one gridview, with the content of one tab. Based on jdk's response, how would I go about adding other TemplateFields for the second and third tabs, and then switching between displaying the different sets when a tab link button is clicked?
Thanks!

The page ViewState string can become very (unnecessarily) large when multiple GridViews are present (view its resulting HTML source code and search for "__VIEWSTATE" to see it). You can use one GridView control, like you said, and swap appropriate data into it depending on which LinkButton (a.k.a. "tab") was recently clicked.
If this is also a paginated data scenario, you can store a simple array of three integers in ViewState representing the current page number of each of the three sets of data, so you can display the most recent page of data when swapping them in and out of the one DataGrid control.
However if bandwidth is not a concern (i.e. if the page doesn't receive a lot of hits or runs on an Intranet) then don't worry as much about optimizing it.

I've done similar things before. I used template columns for the GridView. And put a Ajax control toolkit tab control in the GridView.

I would probably create a Custom Composite Control (as the tabbed-container) and add the grid-view to that. I would not bundle it into one.

Related

Is it possible to add image buttons in DataGridView?

I am now developing windows application using c#.net.
now i want to add four image buttons in datagridview cell like following picture.
Is it possible to do it? is there any control to do as the following picture.
Best Rgds,
DF
You need to add a template field as a column in your grid view. Then in the item template you can put asp image buttons. For example:
<asp:GridView runat="server" id="gdv_gridviewname" >
<Columns>
<asp:TemplateField HeaderText="Image Buttons">
<ItemTemplate>
<asp:ImageButton runat="server" ID="imgBtnSomething" ImageURL="Path to your image" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>

How to select a cell in datagrid onClick in ASP.net C#

I am importing a column in datatable to my grid. Now I want navigate to a new page on selecting a cell in grid by fetching the selected value. I have tried this by including bound field in my grid like
<asp:GridView ID="GDV_1" runat="server" EnableModelValidation="true" AutoGenerateColumns="false" OnSelectedIndexChanged="GDV_1_SelectedIndexChanged" AutoGenerateSelectButton="false" DataKeyNames="SROID">
<Columns>
<asp:BoundField DataField="SRONameinEnglish" HtmlEncode="False" DataFormatString="<a target='_blank' href='Test.aspx?code={0}>ClickHere</a>" />
</Columns>
</asp:GridView>
Doing this way my requirement is achieved but the all cells are displaying Common text Click here instead of showing data from Database.
Please give your suggestion on how to get the value from database into cell and make it clickable. I don't want to use Select button. Please find my current output.
This is my current output I want my data from DB instead of ClickHere.
You can use TemplateField
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:LinkButton runat="server" ID="lnk<%# Eval("SRONameinEnglish")%>"><%# Eval("SRONameinEnglish")%></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
and click of LinkButton put your code to navigate anywhere.
In your case you are binding boundfield with static a tag which have href attribute so your not able to change text on that boundfield from your database.To get your approach you should
use TemplateField and bind data with text attribute using eval keyword as below example.
Try it:
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" Text='<%# Eval("name") %>' />
</ItemTemplate>
</asp:TemplateField>
OR
you can also bind link with your hyperlink using NavigateUrl property of hyperlink as below example.
<asp:TemplateField HeaderText="Name">
<ItemTemplate>
<asp:HyperLink id="HyperLink2" NavigateUrl='<%#Eval("YourUrl") %>' Text='<%#Eval("name") %>' runat="server"/>
</ItemTemplate>
</asp:TemplateField>
I hope it will helpful to you.

Asp.net/c# -> Gridview Pager doesn't get updated when gridview rows are filtered (or hidden)

I have the below code where I have some conditions because of which I have to hide the row from showing to end user. "ShowRow" is a boolean value that gets set in GetUnitOfMeasure function (not copied here) based on these conditions.
There are some real conditions which is forcing me to hide. I tried to include them while building data source but I have to hide it before display.
Problem I am facing is the paging is not getting refreshed based on total rows shown at the end. For example, if I have TOTAL of 200Rows in the grid and only 2 rows needs to be shown and if these 2 rows are found in paging 3, then when page is loaded it still shows paging 1 2 3 4 and 3rd page has the valid 2 rows.
Please suggest.I have also used "onDataBound" against gridview (not copied here) but I just hide some columns here.
ASPX page
<asp:GridView ID="SearchResults" runat="Server" AutoGenerateColumns="false" EnableViewState="false"
AllowPaging="true" PageSize="50" OnDataBound ="SearchResults_DataBound" OnRowDataBound="SearchResults_RowDataBound">
<RowStyle CssClass="EvenRow" />
<AlternatingRowStyle CssClass="OddRow" />
<Columns>
<asp:TemplateField meta:resourceKey="UmSellField">
<ItemStyle CssClass="alpha" />
<HeaderStyle CssClass="alpha" />
<ItemTemplate>
<asp:Label ID="UmSellLabel" runat="server" EnableViewState="false" Text='<%# GetUnitOfMeasure(Container.DataItem,false) %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
codebehind
protected void SearchResults_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType.Equals(DataControlRowType.DataRow))
{
e.Row.Visible = showRow;
e.Row.Cells[0].Visible = showRow;
}
}

C# ASP.NET List View

I am trying to create a view with multiple product listing in it. An example is below of how the product listing should look like. I am not sure if I should use a table and create a new table for each new product or what. I am not a very good ASP.NET developer and I am not sure how to approach this.
Basically if I have 10 results I need to display 10 of these in a list and each button and image is different based on each product result.
The source of data is from another class that was built and runs through a foreach for each product. Any guidance on this would be helpful. I just think I need to be pointed in the right direction because I tried it with a table and it wasn't working out to well.
Using GridView
<asp:GridView runat="server" ID="myGrid"
OnRowCommand="MyGrid_RowCommand">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<img src='<%# Eval("SmallImageUrl") %>' />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<div>Title: <%# Eval("Title") %> </div>
<div>Weight: <%# Eval("Weight") %> </div>
<asp:Button runat="server" ID="GetOfferButton" CommandArgument='<%# Eval("OfferID") %>'></asp:Button>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
Assuming you have a collection of Products e.g. List, or DataTable of Product etc., and your collection has these fields
class Product
{
//property Title
//property SmallImageUrl
//property Weight
}
You can have
myGrid.DataSource = <Replace with List of Products collection>;
myGrid.DataBind();
Maybe you can try using asp.net table and just add rows with the images dynamically once you iterate your results..check out the control here:
http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.table.aspx
and here you have an example to add rows dynamically:
http://msdn.microsoft.com/en-us/library/7bewx260%28v=vs.100%29.aspx
in each row you can put the controls that you want...

how to add a link button in the grid view by visual studio?

I want to add a link button in grid view that will navigate to the next form in the website. but i want to know how to insert that button into the grid view column? please help me..
You can add Link buttons in the Item template of a gridview.
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="Link" runat="server" PostBackUrl="MyNextPage.aspx">Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<Columns>
<asp:TemplateField>
<HeaderTemplate>
// TEXT FOR COLUMN NAME
</HeaderTemplate>
<ItemTemplate>
// ADD LINK BUTTON HERE.
</ItemTemplate>
</asp:TemplateField>
</Columns>
Add this inside grid view.
try this
<asp:GridView ID="GridView1" runat="server">
<Columns>
<asp:ButtonField ButtonType="Link" HeaderText="LinkButton"/>
</Columns>
</asp:GridView>
Make Sure your GridViews datasource is bound. Set Auto-Generate Columns to false.
Open GridViewTask , add new column with Hyperlink Field proper name and path . You are done.

Categories