Category Archives: BulletedList

BulletedList

[RESOLVED]Paging Bulleted List

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

Please refer to
PagingBulletedList Demonstration

Hope helpful to you.

How do I list all Users and their results?

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.

[RESOLVED]How to place a column to the rignt when the first column surround an image

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..

http://www.w3schools.com/css/

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..

[RESOLVED]Have should I use CSS so that top right column is aligned horizontally with top left column

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);
                }
            }
        }
    }

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

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

  • Tony test1:: testing Här skriver jag nu en lång mycket lång beskrivning av felet. Vi har haft dett afel flera gånger föut.
  • TonyTest1:: Reseportalen kraschar vid inloggning adfgasdfsdf testing testing ewrewr qwerqwe qweqwer qwer qwer Tony testar test test test test.
    Det var en gång en drottning som bodde på stora berget. Dett aberg var mycket högt därför får man inte ramla ned ifrån detta jätte berg. Jag provar med att lägga till en ytterligare rad så får vi se hur det ser utpoerpoiqwe wqeurire wqeuqwer qweireir
    qierqer roqwer .
  • ticket 991122:: testing
  • ticket88:: system är trögt
  • ticket99:: this is my description

Last logged pending Tickets

  • Tony test1:: testing Här skriver jag nu en lång mycket lång beskrivning av felet. Vi har haft dett afel flera gånger föut.
  • TonyTest1:: Reseportalen kraschar vid inloggning adfgasdfsdf testing testing ewrewr qwerqwe qweqwer qwer qwer Tony testar test test test test.
    Det var en gång en drottning som bodde på stora berget. Dett aberg var mycket högt därför får man inte ramla ned ifrån detta jätte berg. Jag provar med att lägga till en ytterligare rad så får vi se hur det ser utpoerpoiqwe wqeurire wqeuqwer qweireir
    qierqer roqwer .
  • ticket 991122:: testing
  • ticket88:: system är trögt
  • ticket99:: this is my description

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/

[RESOLVED]Dynamic Menu

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.

[RESOLVED]Menu Navigation with SiteMaps

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?

[RESOLVED]how to use a bulleted list in gridview

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

You can try below method

http://msdn.microsoft.com/en-us/library/aa479353.aspx

Thank You

Adding/Removing column Dynamically to grid by drag and drop

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/3188130/how-do-i-trigger-the-drop-event-with-jquery-ui-droppable-without-actually-draggi

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

[RESOLVED]Menu control

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…

[RESOLVED]Confused with Nested Templates

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.