Click here to Skip to main content
15,868,016 members
Articles / Web Development / XHTML

How to Make Datalist Items Automatically Adjustable like div using JQuery and CSS

Rate me:
Please Sign up or sign in to vote.
4.13/5 (10 votes)
13 Mar 2009CPOL2 min read 71.7K   31   9
How to make datalist items automatically adjustable like div using JQuery and CSS

Introduction

This article explains how to make the datalist items automatically adjustable like div elements in HTML using JQuery and CSS as shown in the following image:   

first.JPG

Using the Code  

In div, when you give style float:left and give a width, then the div will adjust automatically into the container whenever you remove any in between div.

When you are using datalist to display image listing and using JQuery to delete any image, then if you delete any in between image then the page will not get refreshed and the image will be deleted but it will display the empty space there as follows. You can see the empty space in the second line right most in the following image.

second.JPG

The reason behind this is that the default value for the 'RepeatLayout' property is 'Table'. It means the items are in table and tr, td layout. So it can't move automatically like div or span elements.

Now let us talk about the solution:

  1. Make the 'RepeatLayout' property of datalist 'Flow' as in the following example:
    • Example: 
      ASP.NET
      RepeatLayout="Flow"  
    • By this property, the datalist item will be converted into span elements rather than tr, td elements.
    • And also remove RepeatColumns property
    • HTML tag:  
    • ASP.NET
      <asp:DataList ID="dlPhotos" runat="server" 
      DataSourceID="sqlListing" RepeatDirection="Vertical" RepeatLayout="Flow"> 
  2. Add class to datalist for hide tags like:
    CSS
    .hidebr br
    {
    display:none; 
    }  
    • The reason to add this class is to make structure proper aligned, means each and every span is aligned to each other. If you don't add this class, then the structure will be shown like the following:

      third.JPG

    • Now the HTML tag will be like:
      ASP.NET
      <asp:DataList ID="dlPhotos" runat="server" DataSourceID="sqlListing" 
      RepeatDirection="Vertical" RepeatLayout="Flow" CssClass="hidebr">
  3. Now give any class name to an ItemStyle tag of the datalist:
    • Example:
      ASP.NET
      <ItemStyle HorizontalAlign="Center" VerticalAlign="Top" 
      	CssClass="tdContainer"/>
    • So it applies class tdContainer to all the span elements.
  4. And then write the JQuery code as follows:
  5. First, please add latest JQuery file in your page. You can download it from here OR here.

    JavaScript
    $(document).ready(function(){
    var tdImg = $("#<%=dlPhotos.ClientID%> .tdContainer");
    tdImg.attr("style",'width:150px;float:left;');
    )};     
    • So it will give width of 150px to all the span elements and also give float:left property, So now when you delete any in between image then all the span elements will align automatically.    

Do the above four steps and enjoy......:-)

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Technical Lead IndiaNIC Infotech Ltd.
India India
• 3.6 years of experience in IT industry
• 3.6 years of Experience in Web technologies including ASP.net.
• Hands-on experience in Technologies including DotNet 2003/2005 (C# & VB.net) – MVC Framework, MS SQL server 2003/2005/2008, java script, jQuery, Ajax, CSS, SVN, VSS.
• Hands on experience on working in N-Tire Architecture.
• Experience in HTML, DHTML, XML, CSS.
• A quick learner and good management, analytical and database designing skill.
• Experience in Application Servers including IIS 5.0/6.0/7.0

Comments and Discussions

 
Questionplease correct little mistyping Pin
Davide01it26-Jun-16 3:07
Davide01it26-Jun-16 3:07 
QuestionThank you You saved me hours of work Pin
Member 1132499424-Apr-15 5:19
Member 1132499424-Apr-15 5:19 
GeneralMy vote of 1 Pin
Member 862979016-Aug-12 22:41
Member 862979016-Aug-12 22:41 
General.hidebr br Pin
Martin Radu6-Jan-11 4:03
Martin Radu6-Jan-11 4:03 
Generalasp.net controls in jquery Pin
Sean Rock10-Mar-09 21:53
Sean Rock10-Mar-09 21:53 
GeneralRe: asp.net controls in jquery Pin
gstolarov11-Mar-09 18:13
gstolarov11-Mar-09 18:13 
GeneralRe: asp.net controls in jquery Pin
gstolarov11-Mar-09 18:18
gstolarov11-Mar-09 18:18 
GeneralRe: asp.net controls in jquery Pin
Prakash Hirani12-Mar-09 1:39
Prakash Hirani12-Mar-09 1:39 
GeneralRe: asp.net controls in jquery Pin
Prakash Hirani12-Mar-09 1:30
Prakash Hirani12-Mar-09 1:30 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.