Is there any way we can pass on a selected value from a paging bulleted list to populate a gridview on the same page?
In short – some sort of event handling?
Is there any way we can pass on a selected value from a paging bulleted list to populate a gridview on the same page?
In short – some sort of event handling?
Hi again,
The code below allows management to select a particular survey from the dropdown.
Once a survey is selected from the dropdown, questions and the answers to the those questions are listed below it.
Here is example of current results layout:
Survey:__________This is dropdown
Question:1:_____
Choices:______
Question 2: _____
Choices:___________
Question N:__________
Choices:_________
This works fine. Here is that code for above:
<fieldset style="margin-bottom: 20px;"> <legend style="font-weight: bold;">Survey Statistics</legend> <table style="width: 100%"> <tr> <td align="center"> <asp:Label ID="Label1" runat="server" Text="Select Survey :"></asp:Label> <asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="True" DataSourceID="SqlDataSource1" DataTextField="Title" DataValueField="SurveyID"> </asp:DropDownList></td> </tr> <tr> <td> <asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource2" Width="100%"> <ItemTemplate> <table style="width: 100%"> <tr> <td style="height: 21px"> <asp:Label ID="Label3" runat="server" Font-Bold="True" Text='<%# Eval("QuestionID") %>'></asp:Label> <strong>)</strong> <asp:Label ID="Label2" runat="server" Font-Bold="True" Text='<%# Eval("Question") %>'></asp:Label></td> </tr> <tr> <td> <asp:BulletedList ID="BulletedList1" runat="server" BulletStyle="Square"> </asp:BulletedList> </td> </tr> </table> </ItemTemplate> <HeaderTemplate> <asp:Label ID="Label4" runat="server" Font-Bold="True" Text="Here are the survey results :"></asp:Label> </HeaderTemplate> </asp:DataList></td> </tr> </table> <br /> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnectionString %>" SelectCommand="SELECT [SurveyID], [Title] FROM [Survey]"></asp:SqlDataSource> <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnectionString %>" SelectCommand="SELECT * FROM [SurveyQuestions] WHERE (([SurveyID] = @SurveyID) AND ([AnswerType] <> @AnswerType))"> <SelectParameters> <asp:ControlParameter ControlID="DropDownList1" Name="SurveyID" PropertyName="SelectedValue" Type="Int32" /> <asp:Parameter DefaultValue="T" Name="AnswerType" Type="String" /> </SelectParameters> </asp:SqlDataSource>
We would like to add to this page by listing all users of the survey and their overall scores.
The is the expected new layout:
Survey:__________This is dropdown
Question:1:_____
Choices:______
Question 2: _____
Choices:___________
Question N:__________
Choices:_________
John Doe’s score:
Total Questions:____ Total Correct:___________ With Multiple:_________ %Correct:________%
Then next user until all users and scores are listed.
The code below lists the scores correctly but doesn’t list the users.
Here is what I have: All I needed help with is to add the logic that lists scores one user after another user.
<tr> <td> <asp:DataList ID="DataList2" runat="server" DataSourceID="SqlDataSource3" Width="100%"> <ItemTemplate> <table style="width: 100%"> <tr> <td> Total Questions: <asp:Label ID="CourseNameLabel" runat="server" Text='<%# Eval("TotalQuestions") %>' ForeColor="#B22222" font-weight="bold" /> </td> <td> Total Correct: <asp:Label ID="TrainingDatesLabel" runat="server" Text='<%# Eval("TotalCorrect") %>' ForeColor="#B22222" font-weight="bold" /> </td> <td> With Multiple: <asp:Label ID="Label1" runat="server" Text='<%# Eval("TotalCorrect2") %>' ForeColor="#B22222" font-weight="bold" /> </td> <td> % Correct: <asp:Label ID="InstructorNameLabel" runat="server" Text='<%# Eval("PercentCorrect2") %>' ForeColor="#B22222" font-weight="bold" /><span style="color:#B22222">%</span> </td> </tr> </table> </ItemTemplate> </asp:DataList></td> </tr> <asp:SqlDataSource ID="SqlDataSource3" runat="server" ConnectionString="<%$ ConnectionStrings:DBConnectionString %>" SelectCommand="WITH Questions AS ( SELECT SQ.QuestionID, CorrectChoices = COUNT(NULLIF(SC.IsCorrect, 0)), ChoicesGiven = COUNT(SA.ChoiceID), CorrectChoicesGiven = COUNT(CASE WHEN SA.ChoiceID IS NOT NULL AND SC.IsCorrect = 1 THEN 1 END), ExtraChoicesGiven = CASE WHEN COUNT(SA.ChoiceID) > COUNT(NULLIF(SC.IsCorrect, 0)) THEN COUNT(SA.ChoiceID) - COUNT(NULLIF(SC.IsCorrect, 0)) ELSE 0 END FROM SurveyQuestions SQ INNER JOIN SurveyChoices SC ON SQ.QuestionId = SC.QuestionID LEFT JOIN SurveyAnswers SA ON SA.QuestionId = SC.QuestionID AND SA.ChoiceID = SC.ChoiceID WHERE SQ.SurveyID = @SurveyId GROUP BY SQ.QuestionID ), QuestionScores AS ( SELECT QuestionID, Score = CASE WHEN CorrectChoicesGiven - ExtraChoicesGiven < 0 THEN 0 ELSE CAST(CorrectChoicesGiven - ExtraChoicesGiven AS FLOAT) / CorrectChoices END, Score2 = ISNULL(CAST(CorrectChoicesGiven AS FLOAT) / NULLIF(CASE WHEN ChoicesGiven > CorrectChoices THEN ChoicesGiven ELSE CorrectChoices END, 0), 0) FROM Questions ) SELECT TotalQuestions = COUNT(*), TotalCorrect = SUM(Score), PercentCorrect = CAST(100.0 * SUM(Score) / COUNT(*) AS DECIMAL(5, 2)), TotalCorrect2 = SUM(Score2), PercentCorrect2 = CAST(100.0 * SUM(Score2) / COUNT(*) AS DECIMAL(5, 2)) FROM QuestionScores;"> <SelectParameters> <asp:ControlParameter ControlID="DropDownList1" Name="SurveyID" PropertyName="SelectedValue" Type="Int32" /> <asp:Parameter DefaultValue="T" Name="AnswerType" Type="String" /> </SelectParameters> </asp:SqlDataSource>
Thanks a lot in advance
Hi,
refer this
link
hi simflex ,
there is a demo below:
http://www.c-sharpcorner.com/UploadFile/rohatash/nested-datalist-in-Asp-Net/
hope it can help you.
In this piece of code where I have an image and some text that surround it. This work fine.
But now the code that is comment should be placed to the right and aligned horizonal with the text to the left.
I can’t make it work the code that should be placed to the right is instead placed below the code the the left.
<div style="text-align:center">
<div style="width:550px; height:100%; overflow:auto;">
<img style="float:left; height:100px; width:100px; margin:4px;" src="Images/todo.jpg" alt="" />
<div style="width:500px; margin:0 450px 0 0;">
This is our new case management system called Postit. We have been working with this new system
for several month and we can now present you with the first version that have been thoroughly tested so it
should not have any bugs. In this first version we will use windows authentication and
give you access to every page in the website. We will soon be comming with a new version of this ticket system
<br /><br />
In the unlikely that you happen to run into any kind of problem call ITsupport.
You have the telephone number/E-mail at the bottom of every page that you visit.
</div>
<%–<div style="width:160px; text-align:left; overflow:auto;" >
<b>Last logged pending Tickets</b>
<asp:BulletedList ID="blPendingTickets" runat="server">
<asp:ListItem> This is our new case management system called Postit.
</asp:ListItem>
</asp:BulletedList>
</div>–%>
</div>
</div>
//Tony
try setting the float property to your div…
And also its a good practice to put all your styles into classes so that your code is lot cleaner..
<div style="text-align:center"> <div style="width:700px; height:100%; overflow:auto;"> <div style="float:left;width:70%"> <img style="float:left; height:100px; width:100px; margin:4px;" src="Images/todo.jpg" alt="" /> <div style="width:500px; margin:0 450px 0 0;"> This is our new case management system called Postit. We have been working with this new system for several month and we can now present you with the first version that have been thoroughly tested so it should not have any bugs. In this first version we will use windows authentication and give you access to every page in the website. We will soon be comming with a new version of this ticket system <br /><br /> In the unlikely that you happen to run into any kind of problem call ITsupport. You have the telephone number/E-mail at the bottom of every page that you visit. </div> </div> <div style="float:right;width:28%"> <div style="width:160px; text-align:left; overflow:auto;" > <b>Last logged pending Tickets</b> <asp:BulletedList ID="blPendingTickets" runat="server"> <asp:ListItem> This is our new case management system called Postit. </asp:ListItem> </asp:BulletedList> </div> </div> </div> </div>
I have increased the width of the main div to 700px.. Because 550px is too small for it..
Also set the width in percentages for th eleft and right divs
I have seperated this into classes so that it makes more sense.. try this and check if it works
<div class="text-center"> <div class="divMain" > <div class="divLeft" > <img src="Images/todo.jpg" alt="" /> <div> This is our new case management system called Postit. We have been working with this new system for several month and we can now present you with the first version that have been thoroughly tested so it should not have any bugs. In this first version we will use windows authentication and give you access to every page in the website. We will soon be coming with a new version of this ticket system <br /><br /> In the unlikely that you happen to run into any kind of problem call ITsupport. You have the telephone number/E-mail at the bottom of every page that you visit. </div> </div> <div class="divRight" > <div> <b>Last logged pending Tickets</b> <asp:BulletedList ID="blPendingTickets" runat="server"> <asp:ListItem> This is our new case management system called Postit. </asp:ListItem> </asp:BulletedList> </div> </div> </div> </div> // This is the styles you need to put in the class file .text-center { text-align:center } .divMain { width:700px; height:100%; overflow:auto; } .divLeft { float:left; width:70% } .divRight { float:right; width:29% } img { float:left; height:100px; width:100px; margin:4px; } .divLeft > div { width:500px; margin:0 450px 0 0; } .divRight > div { width:160px; overflow:auto; }
Hello!
No this was not correct you might missunderstood me. The text in the column to the left shall surround the image that is located up to the left and the column to the right must be alignt horizonal with the image and the text to the left.
I might have to use position and relative ?
//Tony
Think it does not make any sense to be .. Can you explain your problem more clearly.. By using the class names in the code above.. !!
This might be of help
http://jsfiddle.net/QcNTP/ you can edit your styles here
Here you have the aspx code. I use relative position to make it look the way I want you can just try it so you can see how it should look like. Just find a small image that you can use instead of mine.
I move to classes(external style) when the program is finished but keep the inline style.
<%@ Page Title="DefaultPage" Language="C#" MasterPageFile="~/MasterPages/Layout.Master" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="TicketSystem.Default" %>
<asp:Content ID="Content1" ContentPlaceHolderID="headContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainColumnContent" runat="server">
<h1 style="text-align:center;">News</h1>
<div style="text-align:center">
<div style="width:1000px; height:100%; overflow:auto;">
<img style="float:left; height:100px; border:1px; border-color:black; border-style:solid; width:100px; margin:5px;" src="Images/todo.jpg" alt="" />
<div style="width:650px; ">
This is our new case management system called Postit. We have been working with this new system
for several month and we can now present you with the first version that have been thoroughly tested so it
should not have any bugs. In this first version we will use windows authentication and
give you access to every page in the website. We will soon be comming with a new version of this ticket system
<br /><br />
In the unlikely that you happen to run into any kind of problem call ITsupport.
You have the telephone number/E-mail at the bottom of every page that you visit.
</div>
<div style="width:280px; text-align:left; position:relative; bottom:141px; left:650px;">
<b>Last logged pending Tickets</b>
<asp:BulletedList ID="blPendingTickets" runat="server">
<asp:ListItem>
This is our new case management system called Postit. We have been working with this new system
for several month and we can now present you with the first version that have been thoroughly tested so it
should not have any bugs. In this first version we will use windows authentication and
give you access to every page in the website. We will soo
</asp:ListItem>
<asp:ListItem>
This is our new case management system called Postit. We have been working with this new system
for several month and we can now present you with the first version that have been thoroughly tested so it
should not have any bugs. In this first version we will use windows authentication and
give you access to every page in the website. We will soo
</asp:ListItem>
</asp:BulletedList>
</div>
</div>
</div>
</asp:Content>
I removed the position:relative for the div. Instead of that I have added the float:left to both the div’s . Also the div with width:650px has been moved above the image.. Check this and let me know If I understood you right..
<h1 style="text-align:center;">News</h1> <div style="text-align:center"> <div style="width:1000px; height:100%; overflow:auto;"> <div style="width:650px; float:left "> <img style="float:left; height:100px; border:1px; border-color:black; border-style:solid; width:100px; margin:5px;" src="Images/todo.jpg" alt="" /> This is our new case management system called Postit. We have been working with this new system for several month and we can now present you with the first version that have been thoroughly tested so it should not have any bugs. In this first version we will use windows authentication and give you access to every page in the website. We will soon be comming with a new version of this ticket system <br /><br /> In the unlikely that you happen to run into any kind of problem call ITsupport. You have the telephone number/E-mail at the bottom of every page that you visit. </div> <div style="width:280px; text-align:left;float:left;margin-left:5px "> <b>Last logged pending Tickets</b> <asp:BulletedList ID="blPendingTickets" runat="server"> <asp:ListItem> This is our new case management system called Postit. We have been working with this new system for several month and we can now present you with the first version that have been thoroughly tested so it should not have any bugs. In this first version we will use windows authentication and give you access to every page in the website. We will soo </asp:ListItem> <asp:ListItem> This is our new case management system called Postit. We have been working with this new system for several month and we can now present you with the first version that have been thoroughly tested so it should not have any bugs. In this first version we will use windows authentication and give you access to every page in the website. We will soo </asp:ListItem> </asp:BulletedList> </div> </div> </div>
Yes this was the layout that I wanted.
Many thanks.
Do you know a good book about CSS.
//Tony
Tojo
Do you know a good book about CSS.
To learn CSS you have lots of online tutorials if you want a quick grasp of it..
If you want to spend more time to study in detail
Eric Meyer on CSS: Mastering the Language of Web Design
The Zen of CSS Design: Visual Enlightenment for the Web
These are good books which you can start of with minimum CSS knowledge.
One more thing. Which class name would be suittabe to have on the divs according to you.
//Tony
Always make it a point to give class names which makes sense in the current context , so that if multiple developers are working on the same project it makes sense as what the css class means..
divRight and divLeft or divSummary and divticket can be used .. according to me. You can have better names if it makes good sense..
Hello!
You can see at the end how it look like when the right column is filled with many rows. If the amount of text is small it looks ok but not now.
Here is the content page that is creating this text. I use master pages.
<asp:Content ID="Content2" ContentPlaceHolderID="MainColumnContent" runat="server">
<h1 style="text-align:center;">News</h1>
<table>
<tr>
<td style="width:650px">
<img style="float:left; margin: 5px;" src="Images/todo.jpg" height="130" width="130" alt="" />
This is our new case management system called Postit. We have been working with this new system
for several month and we can now present you with the first version that have been thoroughly tested so it
should not have any bugs. In this first version we will use windows authentication and
give you access to every page in the website. We will soon be comming with a new version of this ticket system
<br /><br />
In the unlikely that you happen to run into any kind of problem call ITsupport.
You have the telephone number/E-mail at the bottom of every page that you visit.
</td>
<td style="padding-left:50px; float:right">
<b>Last logged pending Tickets</b>
<asp:BulletedList ID="blPendingTickets" runat="server" />
</td>
</tr>
</table>
</asp:Content>
Here is the code behind that is filling the bullet list with data
public partial class Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string LastloggedTickets = ConfigurationSettings.AppSettings["LastloggedTickets"];
DBHandling cEngine = new DBHandling();
DataSet ds = cEngine.GetLastTickets(LastloggedTickets);
for (int i = 0; i < ds.Tables[0].Rows.Count; i++)
{
string ticket = ds.Tables[0].Rows[i]["HeadLine"].ToString() + ":: " + ds.Tables[0].Rows[i]["Description"].ToString();
blPendingTickets.Items.Add(ticket);
}
}
}
}
In the unlikely that you happen to run into any kind of problem call ITsupport. You have the telephone number/E-mail at the bottom of every page that you visit. |
Last logged pending Tickets
|
Last logged pending Tickets
|
You need to make a "DIV container" it will combine all the content you page . And in CSS you need to set
.container { display: block; }
Then you need to set widht, padding and margin for ID="blPendingTickets.
After that your all content will be displayed as block and then you will have a nice alignment, which then will be able to work with. My advice to you is do general CSS file with which you can work.
You have my file where I use relative position. Can you just change and post the version that is working without using relative position
//Tony
Hello
If you are using position:relative, you can then use the properties like top, bottom, left, right to control the distances to other HTML elements. To get full understanding, refer to this tutorial,
http://www.barelyfitz.com/screencast/html-training/css/positioning/
Hello friends
I am creating new dynamic website… so i want to add dynamic menu
i dont know how to create pls me
Hi,
for example:
http://www.1stwebdesigner.com/css/38-jquery-and-css-drop-down-multi-level-menu-solutions/. Pick one of these or any other jQuery plugin and have your server side code dynamically generate the needed items. If you’re making use of webforms likely the listview
or bulletedlist control will be enough. For MVC you’ll need to reside to mvcsitemap or have a couple of foreach loops to generate the html needed for the scripts.
Grz, Kris.
Hello…
I read the tutorial "Providing Website Navigation with SiteMaps" (http://www.asp.net/learn/mvc/tutorial-20-vb.aspx) and I think it is an example more for Custom Helpers than a Menu implementation.
It proposes hard-code all the structure of the menu. What if I want to add classs or if I want add an special item?
For my menu I use a User Control in my Site.Master.
This is te code of the User Control:
<div id="nav">
<asp:Repeater runat="server" ID="siteMapAsBulletedList" DataSourceID="SiteMapDS">
<HeaderTemplate>
<ul>
<li class="<%# SiteMap.RootNode["class"] %>"><a href="<%# SiteMap.RootNode.Url %>" title="<%# SiteMap.RootNode.Description %>"><%# SiteMap.RootNode.Title %></a></li>
</HeaderTemplate>
<ItemTemplate>
<li class="<%# Eval("[class]") %>"><a href="<%# Eval("Url") %>" title="<%# Eval("description") %>"><%# Eval("title") %></a></li>
</ItemTemplate>
<FooterTemplate>
</ul>
</FooterTemplate>
</asp:Repeater>
<asp:SiteMapDataSource ShowStartingNode="false" ID="SiteMapDS" runat="server" />
</div>
And, at moment, it´s working. And no code behind or helpers. No compilation if some changes.
Well… As I´m not an expert, can you tell me if, in my new MVC project, it´s a good practice or I should use a custom helper.
Thanks
Hey,
In general you should avoid using runat="server" controls in MVC project. Of course they will usually work, unless you try to use features that depend on viewstate or postbacks. Still for pure rendering bases they can do, yet you really should depend on
helper extensions, in this case the helper extension methods would have to be provided by you and directly deal with html output rendering.
Maciej
+1 for not using web server controls (though we really need a mark up model for v2.0 of MVC)
and +1 for not using sitemaps for anything but demo apps
Luis Abreu
+1 for not using web server controls (though we really need a mark up model for v2.0 of MVC)
Seeing contents of RC futures assembly, seems like its coming!
The namespace Microsoft.Web.Mvc.Controls contains some basic runat server MVC friendly controls, including form input controls and THE repeater. All of those are ViewData friendly [:D]
Maciej
I’ve spotted them though I still haven’t had a good look at them…
Thanks everybody..
But Luis.. then the recomendation is:
- For the Menu use a Custom helper (as tutorial does)?
- Don’t use SiteMaps… But it’s incredible… I’m working a site for production and I use for all navigation the SiteMap.. What are the problems with it?
Thanks!
Well…
I delete the Repeater and create a new navigation.
1. Create a base controller, so all my controllers have a common Menu:
public class ApplicationController : Controller
{
#region ApplicationController
public ApplicationController ()
{
ViewData ["DataSiteMap"] = dataSiteMap () ;
}
#endregion
And I created a method (dataSiteMap) that returns a DataTable with all the info that my views need to construct the menu: name, description, url and class.
2. Put all my controllers to inherit from this base class:
public class HomeController : ApplicationController
3. I create a ViewUserControl (in the VIEWS SHARED folder) with this MVC friendly code (hehehe.. no more repeater):
Code of navigation.ascx:
<%@ Import Namespace="System.Data" %>
<div id="nav">
<ul>
<% foreach ( DataRow itemMenu in (ViewData ["DataSiteMap"] as DataTable).Rows ) { %>
<li class="<%= itemMenu["class"] %>"><a href="<%= itemMenu["url"] %>" title="<%= itemMenu["description"] %>"><%= itemMenu["name"] %></a></li>
<% } %>
<ul>
</div>
4. Finally I load the ViewUserControl in my Site.Master:
<% Html.RenderPartial ("navigation" ) ; %>
Now:
- All my pages has the same menu.
- I don´t use a Repeater with Runat Server.
- And I have a menu with a easy to change HTML render.
Well.. What do you think? A good solution?
Hi Friends,
I am using a gridview in that i want some names from database to be displayed in bulleted list
how to use a bulleted list in gridview.
iNSIDE ITEMTEMPLATE
use
<ul>
<li> <%# Eval("…") %> </li>
</ul>
Hi Sowmia,
I suggest you using the BulletedList with GridView, there have sample, please try to refer to it:
aspx code:
<html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <asp:SqlDataSource ID="employeesDataSource" Runat="server" SelectCommand= "SELECT [EmployeeID], [LastName], [FirstName] FROM [Employees] ORDER BY [LastName], [FirstName]" ConnectionString="<%$ ConnectionStrings:NWConnectionString %>"> </asp:SqlDataSource> <asp:SqlDataSource ID="territoriesDataSource" Runat="server" SelectCommand="SELECT dbo.EmployeeTerritories.EmployeeID, dbo.Territories.TerritoryDescription FROM dbo.Territories INNER JOIN dbo.EmployeeTerritories ON dbo.Territories.TerritoryID = dbo.EmployeeTerritories.TerritoryID" ConnectionString="<%$ ConnectionStrings:NWConnectionString %>"> </asp:SqlDataSource> <asp:GridView ID="employeesGridView" Runat="server" DataSourceID="employeesDataSource" AutoGenerateColumns="False" BorderWidth="1px" BackColor="White" GridLines="Horizontal" CellPadding="3" BorderStyle="None" BorderColor="#E7E7FF" OnRowDataBound="employeesGridView_RowDataBound"> <FooterStyle ForeColor="#4A3C8C" BackColor="#B5C7DE"></FooterStyle> <PagerStyle ForeColor="#4A3C8C" HorizontalAlign="Right" BackColor="#E7E7FF"></PagerStyle> <HeaderStyle ForeColor="#F7F7F7" Font-Bold="True" BackColor="#4A3C8C"></HeaderStyle> <AlternatingRowStyle BackColor="#F7F7F7"></AlternatingRowStyle> <Columns> <asp:BoundField HeaderText="LastName" DataField="LastName" SortExpression="LastName"></asp:BoundField> <asp:BoundField HeaderText="FirstName" DataField="FirstName" SortExpression="FirstName"></asp:BoundField> <asp:TemplateField HeaderText="Territories"><ItemTemplate> <asp:BulletedList ID="bltTerritories" Runat="server" DataTextField="TerritoryDescription" DataValueField="TerritoryDescription"> </asp:BulletedList> </ItemTemplate> </asp:TemplateField> </Columns> <SelectedRowStyle ForeColor="#F7F7F7" Font-Bold="True" BackColor="#738A9C"></SelectedRowStyle> <RowStyle ForeColor="#4A3C8C" BackColor="#E7E7FF"></RowStyle> </asp:GridView> </div> </form> </body> </html>
cs code:
void employeesGridView_RowDataBound(object sender, GridViewRowEventArgs e) { // For each DataRow in the GridView, // programmatically access the BulletedList, filter // the DataView based on the GridView row's // EmployeeID value and bind the filtered DataView // to the BulletedList if (e.Row.RowType == DataControlRowType.DataRow) { BulletedList bl = (BulletedList)e.Row.FindControl("bltTerritories"); territoryData.RowFilter = "EmployeeID = " + ((DataRowView) e.Row.DataItem)["EmployeeID"].ToString(); bl.DataSource = territoryData; bl.DataBind(); } } DataView territoryData; // this DataView will hold all of the Territories, loaded at Page_Load void Page_Load(object sender, EventArgs e) { // Load all of the territories into a DataView from the SqlDataSource territoryData = (DataView)territoriesDataSource.Select(DataSourceSelectArguments.Empty); }
More information please refer to:
http://msdn.microsoft.com/en-us/library/aa479353.aspx
Best Regards,
Terry Guo
Hi all,
Requirement is:On left hand side i have treeview ;when we drag and drop the treeview Node On grid it will become column in grid ..and same way when i drag and drop the grid column on tree view grid column to be deleted/Removed in c# asp.Net 3.5
Thanks,
8970458158
Requirement is:On left hand side i have treeview ;when we drag and drop the treeview Node On grid it will become column in grid ..and same way when i drag and drop the grid column on tree view grid column to be deleted/Removed in c# asp.Net 3.5
Following link is useful
http://api.jqueryui.com/draggable/
http://stackoverflow.com/questions/1805210/jquery-drag-and-drop-using-live-events
You need to study about drag drop event handling. e.g.
$("#droppable").droppable({ drop: function(event, ui) { //do stuff remove row by calling backend function or service etc. } });
can i use sql database for every reflections like adding/remove column by dnd
thanks for your reply …when iam dragging a node on grid it will become column..how can i update this into SqlDB for this requirement which grid i need to use please suggest me
Hi,
My suggestion will be do not use asp.net griview in this case. You can use plain table or any other table library like datatable.net.
thanks for your reply……I took one html table iam binding that to DataTable ..but sorting(default function) is not applying to newly added columns,Sorting and reordering columns is coming only for existing data,not for Dynamic Columns…How to make it
….Suggest me
Hi
I am actually trying to do exactly the same thing, using a jquery grid that I bound to an SQL database
I am still trying to figure out how to dynamically be able to add a column to the the grid and mirror the effect in the SQL database, so I am just wondering if you managed to find a solution for this problem?
Kind regards
hi…Thanks for Your Response,I am using Data Table 9.1;using this i achieve My goal 50%;I am able to add column dynamically and i can remove the column dynamically by drag and drop but it is working Only on existing Columns like col1,col2 etc but not for
Dynamic columns(newly added like nth Column).. i am unable to drag and drop for Dynamic Columns…If you guide me in this..I can reach my goal 100%;
Here is My Code……
<style type="text/css" title="currentStyle">
@import "../DataTabels/demo_table.css";
</style>
<script src="DataTabels/jquery.js" type="text/javascript"></script>
<script src="DataTabels/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="DataTabels/ColReorder.js"></script>
<script src="DataTabels/DragandDrop.js" type="text/javascript"></script>
<script src="Scripts/jquery.dndtable.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
debugger;
$(document).ready(function () {
$(".treeNode").draggable({ helper: ‘clone’ });
$("#droppable").droppable({
drop: function (event, ui) {
var columnName = $(ui.draggable).text();
var mytable = $("#sampleTable"),
iter = 0;
mytable.find(‘tr’).each(function () {
var trow = $(this);
if (trow.index() === 0) {
trow.append(‘<th >’ + columnName + ‘</th>’);
}
else if (trow.index() >= 1) {
trow.append(‘<td> Acer </td>’);
}
iter += 1;
});
var tableData = $("#sampleTable").dataTable();
}
});
});
$(document).ready(function () {
$("#sampleTable th").draggable();
$("#TreeviewDiv").droppable({
drop: function (event, ui) {
var tableData = $("#sampleTable").dataTable();
var aPos = tableData.fnGetPosition(this);
$.fn.removeCol = function (col) {
if (!col) { col = 1; }
$(‘tr td:nth-child(‘ + col + ‘), tr th:nth-child(‘ + col + ‘)’, this).remove();
return this;
};
$(‘#sampleTable’).removeCol(aPos);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="TreeviewDiv">
<asp:TreeView ID="TreeView1" runat="server" ImageSet="BulletedList3">
<Nodes>
<asp:TreeNode Text="AccountGeneral" Value="AccountGeneral">
<asp:TreeNode Text="AccountOwner" Value="AccountOwner"></asp:TreeNode>
<asp:TreeNode Text="CreatedBy" Value="CreatedBy"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
<NodeStyle CssClass="treeNode" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
<ParentNodeStyle Font-Bold="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px" VerticalPadding="0px" />
</asp:TreeView>
</div>
<div>
</div>
<br />
<div id="droppable">
<table id="sampleTable" class="draggable">
<thead>
<tr>
<th>
AccountType
</th>
<th>
AccountName
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
New
</td>
<td>
Name1
</td>
</tr>
<tr>
<td>
Lead
</td>
<td>
Name2
</td>
</tr>
<tr>
<td>
test
</td>
<td>
Name3
</td>
</tr>
</tbody>
</table>
</div>
</form>
</body>
</html>
hai to all…..here i am using data tables 1.9 ;My requirement is Removing column from data table using Drag and drop;but i am unable to get the column index ;kindly help me;here is my code:
<head runat="server">
<title></title>
<style type="text/css" title="currentStyle">
@import "../DataTabels/demo_table.css";
</style>
<script src="Scripts/JQuery1.9.1.js" type="text/javascript"></script>
<script src="DataTabels/jquery.dataTables.js" type="text/javascript"></script>
<script type="text/javascript" src="DataTabels/ColReorder.js"></script>
<script src="DataTabels/DragandDrop.js" type="text/javascript"></script>
<script src="Scripts/jquery.dndtable.js" type="text/javascript"></script>
<script src="DataTabels/ColVis.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css"; />
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"; type="text/javascript"></script>
<script type="text/javascript">
debugger;
$(document).ready(function () {
$(".treeNode").draggable({ helper: ‘clone’ });
$("#droppable").droppable({
drop: function (event, ui) {
var columnName = $(ui.draggable).text();
var mytable = $("#sampleTable").dataTable(),
iter = 0;
//adding dragged treeview Node as column in data table
mytable.find(‘tr’).each(function () {
var trow = $(this);
if (trow.index() === 0) {
trow.append(‘<th >’ + columnName + ‘</th>’);
}
else if (trow.index() >= 1) {
trow.append(‘<td> Acer </td>’);
}
iter += 1;
});
var oTable = $("#sampleTable").dataTable();
oTable.fnDestroy();
//displaying Data
$("#sampleTable").dataTable();
}
});
});
$(document).ready(function () {
$("#sampleTable tr ").draggable({
cursor: ‘move’,
stack: $(‘#TreeviewDiv’)
});
$("#TreeviewDiv").droppable({
drop: function (event, ui) {
var oTable = $("#sampleTable").dataTable();
//when i dropped on treeview Data Table column has to be delete.
//getting position of column
var aPos = oTable.fnGetPosition(this);
// var aPos = oTable.fnGetPosition($("thead tr").index(this));
$.fn.removeCol = function (col) {
if (!col) { col = 1; }
$(‘tr td:nth-child(‘ + col + ‘), tr th:nth-child(‘ + col + ‘)’, this).remove();
return this;
};
$(‘#sampleTable’).removeCol(aPos);
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="TreeviewDiv">
<asp:TreeView ID="TreeView1" runat="server" ImageSet="BulletedList3">
<Nodes>
<asp:TreeNode Text="AccountGeneral" Value="AccountGeneral">
<asp:TreeNode Text="AccountOwner" Value="AccountOwner"></asp:TreeNode>
<asp:TreeNode Text="CreatedBy" Value="CreatedBy"></asp:TreeNode>
</asp:TreeNode>
</Nodes>
<NodeStyle CssClass="treeNode" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black"
HorizontalPadding="5px" NodeSpacing="0px" VerticalPadding="0px" />
<ParentNodeStyle Font-Bold="True" ForeColor="#5555DD" />
<SelectedNodeStyle Font-Underline="True" HorizontalPadding="0px" VerticalPadding="0px" />
</asp:TreeView>
</div>
<div>
</div>
<br />
<div id="droppable">
<table id="sampleTable">
<thead><tr> <th>AccountType</th> <th>AccountName</th> </tr></thead>
<tbody>
<tr> <td> New</td> <td> Name1 </td> </tr> <tr> <td> Lead </td> <td> Name2 </td></tr> <tr><td>test </td><td> Name3 </td></tr>
</tbody>
</table>
</div>
</form>
</body>
Thanks in advance
Hello All,
I am fairly new to asp.net and i am working on project to convert a static website to a dynamic one.
To begin with , I am trying to create a dynamic menu. I have managed to get data from database into my menu. using this resource
http://www.codeproject.com/Tips/354696/Dynamically-populating-menu-items-from-the-databas
The menu i am working on has images for each top level menu items. And i am having hard time figuring out how to do this dynamically.
Please help!!
THaks in advance.
Abdul Wahab
Hi,
and welcome to the ASP.NET forums.
If you already know how the result should look like you can opt for a specific control. I made menus myself with the menu, repeater and bulletedlist controls in the past for example. I like the latter 2 as they give quite some flexibility.
Grz, Kris.
thanks Kris for ur reply.
Can u provide any link how to use it ,as i am not sure about it.
thanks again
AW
Hi,
dawahab
Can u provide any link how to use it ,as i am not sure about it.
Sure:
https://www.google.be/?gws_rd=cr&ei=TajXUsKuBpLV4ATrn4DoBw#q=make%20a%20menu%20in%20asp%20net%20with%20bulleted%20list. There’s plenty of articles for all the kinds of controls I mentioned before.
Grz, Kris.
Thanks Kris, will check the links…
So I am confused about creating nested templates, I need help!
OK so here is my site structed
Wrapper
Header
Container
left-column
Page_Content
Right_column
footer
(left-column, page-content, right column are inside container. Add everthing is inside wrapper)
OK so whats bugging me is that, left-column will have links like:
HTML
CSS
ASP
these will display on everypage unless I change it. So If someone clicks HTML,they will be redirected to HTML.cshtml. Now for the HTML.cshtml it will have its own template _HTML (_HTML, will be running from the MainLayout) However for the _HTML page, I do
not want the links:
HTML
CSS
ASP
I want links to do with HTML, e.g. Paragraphs etc. How can I change this, but keep the site layout same?
if you don’t undertstand me, then this should help:
http://www.w3schools.com/
When you click on HTML, watch how the links on the left change to all HTML topics, but the design is still the same.
to do that you have two options:
first, you can create a user control that accepts a value that identifies what links it should be showing. this value can be a data table that you can select from or just a service. pretty much everything that can identify your resources to show as links
in <asp:BulletedList DisplayMode="HyperLink">
two, you can create multiple user controls. each contain many links and then load the appropriate one dynamically by calling Page.LoadControl(@"myUC.ascx.cs") or Page.LoadControl(@"myUC.ascx.vb")
Lol I have done it in a much easier way. Tell me if this method is good:
I made the main template, and I put no content in the left column except
@RenderSection("left")
Then I made a new template, which runs of the main template, then in the new template I put:
@section left{
HTML
CSS
VB
}
then for the default page, I linked that to the new template I made. Then for the HTML pages, I made a new template (_HTML) made the @section left{} different and it worked! Rendered different content.
If you want to use the same layout page, but have content that might change, or not appear at all in that layout, sections is a good approach. User Controls as proposed by hj belong to web forms. They are not relevant to ASP.NET Web Pages.
Mikesdotnetting
If you want to use the same layout page, but have content that might change, or not appear at all in that layout, sections is a good approach. User Controls as proposed by hj belong to web forms. They are not relevant to ASP.NET Web Pages.
lol it’s Mike Brind! I was actually reading your book, Beginning ASP.NET with Webmatrix, until I reached a dead end, Good Book though! learnt a lot from reading the first 3-4 chapters.