How to enhance the Drill Down feature in the GridView? - c#

I am a new ASP.NET developer and I am trying to develop a GridView with Drill-Down Feature. I am following the steps in the following post in the CodeProject but I failed and I don't know how to fix it.
In my case, I have two tables:
Course Table: CourseID, CourseName, GroupID
Group Table: GroupID GroupName
(The first attribute in each table is the primary key)
I want to show the second table in the GridView and when the user clicks on the search icon image, the information in the first table will be displayed. So HOW TO DO THAT?
My ASP.NET:
<div align="center">
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False"
DataKeyNames="CourseID" DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField HeaderText="Item Details">
<ItemTemplate>
<table>
<tr>
<td>
<img src="images/system-search-md.png" alt="click here to see details"
onclick='ToggleDisplay(<%# Eval("GroupID") %>);' style="cursor:pointer; height:15px; width:15px" />
</td>
<td<>
<p><%# Eval("CourseID") %></p>
</td>
<td>
<%# Eval("CourseName") %>
</td>
<td>
<%# Eval("CourseName") %>
</td>
</tr>
<tr>
<td colspan="4">
<div id'coldiv<%# Eval("GroupID") %>' style="display:none;">
<asp:Literal runnat="server" ID="ltrl" Text='<%# Eval("GroupName") %>'></asp:Literal>
</div>
</td>
</tr>
</table>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<script language="JavaScript">
function ToggleDisplay(id) {
var elem = document.getElementById('coldiv' + id);
if (elem) {
if (elem.style.display != 'block') {
elem.style.display = 'block';
elem.style.visibility = 'visible';
}
else {
elem.style.display = 'none';
elem.style.visibility = 'hidden';
}
}
}
</script>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
SelectCommand="SELECT dbo.groups.*, dbo.courses.*
FROM dbo.courses INNER JOIN
dbo.groups ON dbo.courses.GroupID = dbo.groups.ID"></asp:SqlDataSource>
</div>

Your approach seems reasonable. I'd make sure your ToggleDisplay function is working correctly, and you also need to fix your markup errors:
<td<> = <td>
<div id'coldiv<%# Eval("GroupID") %>' = <div id='coldiv<%# Eval("GroupID") %>'
<asp:Literal runnat="server" = <asp:Literal runat="server"

Related

Why data is not displayed on my asp.net webpage?

I am developing Canteen Management System where I am displaying menuList from Database using gridview like given below.. ( this is Menu.aspx page)
<asp:DataList ID="DataList1" runat="server" RepeatColumns="3" RepeatDirection="Horizontal" OnItemCommand="DataList1_ItemCommand">
<ItemTemplate>
<table class="nav-justified" style="height: 111px">
<tr>
<td>
<asp:Label ID="Label1" runat="server" Text='<%# Eval("menuName") %>'></asp:Label>
</td>
</tr>
<tr>
<td>
<asp:ImageButton ID="ImageButton1" runat="server" CommandName="viewDetail" CommandArgument='<%# Eval("Id") %>' ImageUrl='<%# Eval("menuImage") %>' />
</td>
</tr>
<tr>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Eval("menuPrice") %>'></asp:Label>
</td>
</tr>
</table>
</ItemTemplate>
</asp:DataList>
<br />
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:Cms_AspFormsConnectionString %>" SelectCommand="SELECT [menuName], [menuPrice], [menuImage], [Id] FROM [menuInfo]"></asp:SqlDataSource>
This is Menu.aspx.cs page
protected void DataList1_ItemCommand(object source, DataListCommandEventArgs e)
{
if ( e.CommandName == "viewDetail" )
{
Response.Redirect("MenuDetails.aspx?Id=" + e.CommandArgument.ToString());
}
}
but When i run this this it's showing nothing, ( when i go to source page it was all empty at like given below..)
<div>
<br />
</div>
Why it' showing empty? and how to resolve this?
Add DataSourceID="SqlDataSource1" to the DataList tag. Data source was not set for the control.

Repeater shows wrong column content

I have a repeater to show an order confirmation. It is bound to a table generated with Entity Framework code first. The table contains the right information and the repeater shows all the information right except for the part where I show the totals which I paste below.
I believe that this part also works okay but quantity does not. For example if I add 5 products it will only show one, but if I put a break point and I run the code in debug mode I see that the value inserted in the Quantity table is 5 not 1, so the Quantity value on the table is inserted correctly, but the repeater reports 1.
Here is the code:
<asp:Repeater ID="rptConfirmOrder" runat="server">
<ItemTemplate>
<fieldset class = "OrderConfirmationFieldset"><legend class ="OrderDataLegend">Order Summary</legend>
<td align="left" width="60%" runat="server" id="Td25">
<asp:Label ID="lblQuantity" runat="server" Text="Quantity: " CssClass = "lblOrderConfirmation">
</asp:Label> <%# Eval("Quantity") %>
<br />
</td>
<td align="left" width="60%" runat="server" id="Td26">
<asp:Label ID="lblProductName" runat="server" Text="Product Name: " CssClass = "lblOrderConfirmation">
</asp:Label><%# Eval("ProductName" ,"{0:c}" ) %>
<br />
</td>
<td align="left" width="60%" runat="server" id="Td27">
<asp:Label ID="lblProductPrice" runat="server" Text="Product price: " CssClass = "lblOrderConfirmation">
</asp:Label> <%# Eval("ProductPrice" ,"{0:c}" ) %>
<br />
</td>
<td align="left" width="60%" runat="server" id="Td28">
<asp:Label ID="lblSubtotal" runat="server" Text="Subtotal: " CssClass = "lblOrderConfirmation">
</asp:Label> <%# Eval("Subtotal" ,"{0:c}" ) %>
<br />
</td>
<td align="left" width="60%" runat="server" id="Td29">
<asp:Label ID="lblTotal" runat="server" Text="Total: " CssClass = "lblOrderConfirmation">
</asp:Label> <%# Eval("Total" ,"{0:c}" ) %>
<br />
</td>
</ItemTemplate>
</asp:Repeater>
Can Anyone help?
Thank you in advance!
Your repeater markup doesn't look right.
have it as follows:
<asp:Repeater ID="rptConfirmOrder" runat="server" OnItemDataBound="rptConfirmOrder_ItemDataBound">
<ItemTemplate>
// stuff
</ItemTemplate>
</asp:Repeater>
And if you have it that way, and this was a paste error, then forget the value in the database/entity etc.
You can verify accurately, what value is being bound by tapping into the row data bound event as follows..
protected void rptConfirmOrder_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if (e.Item.ItemType == ListItemType.Item || e.Item.ItemType == ListItemType.AlternatingItem)
{
var dataItem = e.Item.DataItem as YOUR_ENTITY_TYPE;
Debug.Assert(5 == dataItem.Quantity);
}
}
I think you may need to add the < itemtemplate > tags in after the opening repeater and close it off before the closing repeater tag.

How to databind to a Gridview where column values should appear in sub rows within a main row?

Please can anyone suggest a way to databind a database table to a gridview but in a specific layout where column values should appear in sub rows within a main row, like wise all rows from the database table should list down inside that Gridview.I know the normal way of databinding to a gridview Where it display row data(From Database Table) as columns, but what I want is like below
Gridview is not suitable for this type of format.
If you are okay with repeater, you can do something like this:
And here's a link to MSDN: Repeater Class.
UPDATE: If you want to post each answer selection, you can use option button and group them. You can use questionid as a part of group name and in the code get the question id. Your markup may look like below:
<asp:Repeater ID="Repeater1" runat="server">
<HeaderTemplate>
<table border="1">
<tr>
<th colspan="2"></th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td><%# DataBinder.Eval(Container.DataItem, "QuestionId") %> </td>
<td>
<table>
<tr>
<td colspan="4"><%# DataBinder.Eval(Container.DataItem, "Question") %> </td>
</tr>
<tr>
<td>
<asp:RadioButton ID="RadioButton1" runat="server" AutoPostBack="true" Text='<%# DataBinder.Eval(Container.DataItem, "Answer1") %>'
OnCheckedChanged="RadioButton1_CheckedChanged" GroupName='<%# Eval("QuestionId","Grp_{0}") %>' TextAlign="Left" />
</td>
<td><asp:RadioButton ID="RadioButton2" runat="server" AutoPostBack="true" Text='<%# DataBinder.Eval(Container.DataItem, "Answer2") %>'
OnCheckedChanged="RadioButton2_CheckedChanged" GroupName='<%# Eval("QuestionId","Grp_{0}") %>' TextAlign="Left" />
</td>
<td><asp:RadioButton ID="RadioButton3" runat="server" AutoPostBack="true" Text='<%# DataBinder.Eval(Container.DataItem, "Answer3") %>'
OnCheckedChanged="RadioButton3_CheckedChanged" GroupName='<%# Eval("QuestionId","Grp_{0}") %>' TextAlign="Left" />
</td>
<td><asp:RadioButton ID="RadioButton4" runat="server" AutoPostBack="true" Text='<%# DataBinder.Eval(Container.DataItem, "Answer4") %>'
OnCheckedChanged="RadioButton4_CheckedChanged" GroupName='<%# Eval("QuestionId","Grp_{0}") %>' TextAlign="Left" />
</td>
</tr>
</table>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
And in the code:
protected void RadioButton1_CheckedChanged(object sender, EventArgs e)
{
string grpId = ((RadioButton)sender).GroupName;
int questionId = 0;
int.TryParse(grpId.Split('_')[1].ToString(), out questionId);
//Use questionId
}

How to run SelectCommand in <asp:SqlDataSource> tag

I am making QueryString parameter ,so I have two .aspx forms. One form Default.aspx contains three fields SId, FirstName, LastName. when I submit the values, those values are saved in database.Now I want show this data on grid for particular SId on default2.aspx. Grid takes data through the SqlDataSource.SO I want to call the SqlDataSource on button click and grid should show data for particular SId on default2.aspx.
Default.aspx :
<body>
<form id="form1" runat="server">
<div>
</div>
<table cellpadding="2" cellspacing="5">
<tr>
<td>
<asp:Label ID="lblId" runat="server" Text="SId"></asp:Label>
</td>
<td>
<asp:TextBox ID="tbid" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lblname" runat="server" Text="FirstName"></asp:Label>
</td>
<td>
<asp:TextBox ID="tbfirstname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
<asp:Label ID="lbllastname" runat="server" Text="LastName"></asp:Label>
</td>
<td>
<asp:TextBox ID="tblastname" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnsubmit" runat="server" Text="Submit"
onclick="btnsubmit_Click1" Width="102px" />
</td>
</tr>
</table>
<br />
</form>
</body>
Default2.aspx :
<body>
<form id="form1" runat="server">
<div>
<table cellpadding="2" cellspacing="5">
<tr>
<td>
SId</td>
<td>
<asp:TextBox ID="tbId" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td>
</td>
<td>
<asp:Button ID="btnSearch" runat="server" Text="Search"
onclick="btnSearch_Click" />
</td>
</tr>
</table>
</div>
<br />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
AutoGenerateSelectButton="True"
DataSourceID="SqlDataSource1" EnableModelValidation="True"
onrowcommand="GridView1_RowCommand">
<Columns>
<asp:TemplateField HeaderText="SId">
<ItemTemplate>
<asp:Label ID="lblSId" runat="server" Text='<%# Bind("SId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="FirstName">
<ItemTemplate>
<asp:Label ID="lblFirstName" runat="server" Text='<%# Bind("FirstName")%>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="LastName">
<ItemTemplate>
<asp:Label ID="lblLastName" runat="server" Text='<%# Bind("LastName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<asp:SqlDataSource ID="SqlDataSource1" runat="server"
ConnectionString="<%$ ConnectionStrings:testConnectionString %>"
SelectCommand="SELECT * FROM [Student] where SId = #tbId">
<SelectParameters>
<asp:QueryStringParameter Name="SId" QueryStringField="SId" />
</SelectParameters>
</asp:SqlDataSource>
</form>
</body>
I want to call the SqlDataSource1 on button click like..
Default2.aspx.cs :
protected void btnSearch_Click(object sender, EventArgs e)
{
string SId = tbId.Text;
SqlDataSource1.DataBind();
}
You don't need the button click. The SqlDataSource executes on every post back. The search button is going to issue a post back. But you are going to need to change a few things. First you need to get your parameters right, so remove this one:
<asp:QueryStringParameter Name="SId" QueryStringField="SId" />
and put this one in its place:
<asp:ControlParameter ControlID="tbId" PropertyName="Text" Name="tbId" />
and now remove all of this code:
protected void btnSearch_Click(object sender, EventArgs e)
{
string SId = tbId.Text;
SqlDataSource1.DataBind();
}
and now the SqlDataSource is tied directly to the control value, so when the user puts in a new control value and clicks the button it will be applied and new data retrieved without any of your interaction.

Binding a certain value on a control in a ListView's Insert template

I have a list view with a label that shows "Step #x", another label with the instructions, and then 2 linkbuttons for editing or deleting. At the footer of the ListView is another button "Add New Step" which opens up an empty TextBox and two buttons to save and cancel. I would also like it to increment the label, but I can seem to find the control in the code behind to change it's text. How do I do this?
Here's the asp markup:
<asp:ListView ID="lvSteps" runat="server" DataSourceID="ldsProcessStep" DataKeyNames="ID" InsertItemPosition="None">
<LayoutTemplate>
<div><asp:PlaceHolder ID="itemPlaceholder" runat="server" /></div>
<asp:Button ID="btnAddNewStep" runat="server" Text="Add New Step" OnClick="btnAddNewStep_Click" />
</LayoutTemplate>
<ItemTemplate>
<table width="100%">
<tr>
<td>
<asp:label runat="server" Text='<%# Eval( "StepNumber", "Step #{0}" ) %>' Width="75px" style="font-size:medium; font-weight:bold;" />
</td>
<td>
<div style="text-align:left; width:350px;">
<asp:label runat="server" Text='<% #( Eval("Instruction") ) %>' style="font-size:85%;" />
</div>
</td>
<td>
<div style="width:50px;">
<div><asp:LinkButton Text="Edit" runat="server" CommandName="Edit" style="font-size:75%;" /></div>
<div style="margin-top:5px;"><asp:LinkButton Text="Delete" runat="server" style="font-size:75%;" OnClientClick='<%# CreateConfirmation( Eval("StepNumber") ) %>' /></div>
</div>
</td>
</tr>
</table>
<hr style="width:90%; margin-left:20px;" />
</ItemTemplate>
<InsertItemTemplate>
<table width="100%">
<tr>
<td>
<asp:Label ID="lblNewStepNumber" runat="server" Width="75px" Text="????" style="font-size:medium; font-weight:bold;" />
</td>
<td>
<div style="text-align:left; width:350px;">
<asp:TextBox ID="txtInstruction" runat="server" TextMode="MultiLine" Rows="3" Width="100%" Text='<%# Bind("Instruction") %>' style="font-size:85%;" />
</div>
</td>
<td>
<div style="width:50px;">
<div><asp:LinkButton ID="btnInsert" Text="Save" runat="server" CommandName="Insert" style="font-size:75%;" /></div>
<div style="margin-top:5px;"><asp:LinkButton ID="lnkCancelInsert" Text="Cancel" runat="server" CommandName="Cancel" OnClick="btnCancelInsert_Click" style="font-size:75%;" /></div>
</div>
</td>
</tr>
</table>
</InsertItemTemplate>
</asp:ListView>
And some attempted code:
public void btnAddNewStep_Click( object sender, EventArgs e )
{
lvSteps.InsertItemPosition = InsertItemPosition.LastItem;
lvSteps.FindControl( "btnAddNewStep" ).Visible = false;
//Cannot find control
//lvSteps.FindControl( "lblNewStepNumber" ).Text = "doesn't work"
//Label lbl = (Label)lvSteps.FindControl( "lblNewStepNumber" );
//lbl.Text = "Doesn't work"'
}
I believe lvSteps has a reference to InsertItem (as in lv.InsertItem.FindControl("")), which you can use to find controls in the insert template. For lvSteps.FindControl finds controls created in the layout template. I think ItemDataBound or ItemCreated may also fire for the insert item, but I'm not 100% sure about that.
Property definition is available here: http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.listview.insertitemtemplate.aspx
HTH.

Categories