Category Archives: DataList

DataList

[RESOLVED]Using Flip effect in DataList (C#) asp.net ?

Hi,

I have created a Data List in Asp.net C# and i have used a Timer and Ajax control to update the data automatically after 10 seconds.

When a data is updated for a particular value in Datalist i need to used the Flip effect for updating data.

Any ideas ?

Hi Raghu,

Are you looking for something like this in your td element:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Data List</title>
    <style type="text/css">
        .flipY {
        
        transform:rotateY(180deg);
        background-color:blue;
        }
        .flipBack {
        transform:rotateY(180deg);
        background-color:red;
        }
        #change {
        height:100px;
        width:200px;
        background-color:red;
        }
    </style>
    <script type="text/javascript">
        function initialize()
        {
            
            var t = self.setInterval(function () {
                document.getElementById('change').style.transform = "rotateY(180deg)";
                document.getElementById('change').style.backgroundColor = "blue";
            }, 5000);
            var h = self.setInterval(function () {
                document.getElementById('change').style.transform = "rotateY(360deg)";
                document.getElementById('change').style.backgroundColor = "red";
            }, 10000);
        }

    </script>
</head>
<body onload="initialize()">
    <form id="form1" runat="server">
    <div id="change">
    what in the world!
    </div>
    </form>
</body>
</html>

using transform proeprry in css3, a div element can be flipped horizontally or vertically .

Working Demo

Hope this helps.

how to display records as popular products in MVC5

Hello,

when i search in google  to display records as popular products in grid like (shopping website displays products in grid ), web grid uses to show records<– in web form we will use gridview. whcih is okay.

I want to display few information about products in front-end like follow

for example.

column1                                        column2                          column3

price of product                          price of product                  price of product

descript of product                     descript of product             descript of product  

image of descript                        image of descript                 image of descript

and etc                                        and etc                                  and etc 

if it is asp.net web form. i will use either datalist or list view for that.

So, how to achieve in  MVC5. what control i should use. i am new for mvc5. can you help how to solve this problem?

Thanks

I recommend looking at the WebGrid, which renders a table similar to the GridView in Web Forms:

Or you could just use HTML to render a list, or divs or similar:

@foreach(var item in Model){
    <div style="box">
    <h3>@item.Name</h3>
    @item.Price<br />
    @item.Description<br />
    <img src="@item.Image" />
</div>
}

Style for the div:

.box{
    display: inline-block;
    vertical-align: top;
    width: 200px;
}

Thank you for reply. the one you explained i understood. But, it will display one column. 

as you know if you use datalist , according to repeat column it will display. like follow.

<div id="divProducts">
<asp:DataList ID="dlstProducts" runat="server" RepeatColumns="3" CellSpacing="10"
RepeatDirection="Horizontal" RepeatLayout="Table">
<ItemTemplate>
<div class="item">
<span><strong><%# Eval("Name") %></span></strong><br />
<span><%# Eval("Description") %></span><br />
<span>$<%# Eval("Price")%></span>
</div>
</ItemTemplate>
</asp:DataList>

same concept if we use list view. how can i achieve this?

[RESOLVED]Setting max number of visible options in Html5 datalist.

Hi

Does anyone know how to set either the max number of visible options or the height of a Html5 datalist?

Hi eandn,

Thanks for your post.

As for your description, my understanding is that you want to set a height to <datalist> tag, but it seems that we can’t style the height of the <datalist> tag.

You could refer to the following similar issues.

Hope it will be helpful to you.

Best Regards,

Fei Han

It looks like I have to use some JQuery. Thanks for your help.

[RESOLVED]Bind Image From Physical path outside web directory to Datalist

Hi ,

I am trying to bind a image which is located outside web directory so clients do not have access to resource file to asp Image in datalist control but images are not displayed as it is located other drive phiscal location  and it is manadatory for  me to
do so please suggest me a solution on this 

please find the aspx page below

If you check out the
Image class
then the main property to look out for would be
ImageURL
. This property can use both relative as well as absolute paths.

I’m not sure because I never tried this myself; but I would imagine that you should be able to point an absolute path to the image you’re trying to use.

Create virtual directory in iis to the phiscal location, then use this virtual directory to display the image seems like the files is in your application.

Hi,

Or you could use : http://www.dotnetperls.com/ashx . This way you’ll use a link such as
/image.ashx?id=name. The handler will get the image form whatever location you want and will sent it back to the browser.

 

[RESOLVED]On link click from menu BindDataList

I have this code:

$(document).ready(function () {


        $('#Priroda').hide();

        $('#priroda_').click(function () {
            $('#Znamenitosti').hide();
            $('#Priroda').show();


        });

        $('#znamenitosti_').click(function () {
            $('#Priroda').hide();
            $('#Znamenitosti').show();
        });
    });


</script>
 <div class="meni">
    <nav>
    <ul>
    <li class="active"><a href="#">Info</a></li>
    <li><a href="#" id="znamenitosti_">Znamenitosti</a></li>
    <li><a href="#" id="priroda_">Priroda</a></li>
    <li><a href="#" id="nokenzivot_">Noken Zivot</a></li>
     </ul>
        </nav>
        </div>

where I have few categories in the menu. When i click on specific category, i want to show the (div) tag for that specific category within the same .aspx page, and the other (div) tags for the other categories should be hidden. This is the (div) tag for the category “Priroda”:

<div class="Priroda" id="Priroda">
         <asp:DataList ID="DataList1" runat="server" RepeatColumns="7" CellPadding="3">
  <ItemTemplate>
<div class="boxButton">
<ul class="Gallery">
<li><a id="A1"  href='<%# Eval("ime","~/Sliki/Ohrid/Priroda/{0}") %>' title='<%# "Од "+ Eval("userid")+ ", на " +  Eval("datum")+ ", " +  Eval("opis")%>'  rel="FaceBox[gallery1]" runat="server" >
 <asp:Image ID="Image1"  ImageUrl='<%# Bind("ime", "~/Sliki/Ohrid/Priroda/{0}") %>' runat="server" Width="140" Height="140" AlternateText='<%# Bind("imeslika") %>' />
 </a></li></ul></div>
 </ItemTemplate>
 </asp:DataList>
    </div>

For binding the DataList i used this code in .cs file:

protected void BindDataList1()
{
    String strConnString = System.Configuration.ConfigurationManager
        .ConnectionStrings["makbazaConnectionString"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    con.Open();
    //Query to get ImagesName and Description from database
    SqlCommand command = new SqlCommand("SELECT ime, imeslika, kategorija, datum, opis, slikapateka, userid FROM Ohrid WHERE kategorija='Priroda'", con);
    SqlDataAdapter da = new SqlDataAdapter(command);
    DataTable dt = new DataTable();
    da.Fill(dt);
    dlImages.DataSource = dt;
    dlImages.DataBind();
    con.Close();
}

Now i don’t know how to call BindDataList1(); to show me data when i click on that category. I have different BindDataLists for each category. Can you tell me how to call specific BindDataList for the category that is selected from the menu? For example
when i click on link Priroda show me the (div) tag Priroda and BindDalaList1();, when i click on link Znamenitosti show me the (div) tag Znamenitosti and BindDalaList2();

Hi ,

try this 

<ul> <li><a href="Default2.aspx?ID=2" id="znamenitosti_">Znamenitosti</a></li></ul>

and then 

  protected void BindDataList1()
    {
        String strConnString = System.Configuration.ConfigurationManager
            .ConnectionStrings["makbazaConnectionString"].ConnectionString;
        SqlConnection con = new SqlConnection(strConnString);
        con.Open();
        //Query to get ImagesName and Description from database
        if (Request.QueryString["ID"] != null)
        {
            SqlCommand command = new SqlCommand("SELECT ime, imeslika, kategorija, datum, opis, slikapateka, userid FROM Ohrid WHERE kategorija=" + Request.QueryString["ID"].ToString(), con);
        }
        else
        {
            SqlCommand command = new SqlCommand("SELECT ime, imeslika, kategorija, datum, opis, slikapateka, userid FROM Ohrid WHERE kategorija='Priroda'", con);
        }
            SqlDataAdapter da = new SqlDataAdapter(command);
        DataTable dt = new DataTable();
        da.Fill(dt);
        dlImages.DataSource = dt;
        dlImages.DataBind();
        con.Close();
    }

call finction 

BindDataList1()
on pageload within !ispostback

[RESOLVED]repeater in repeater

hi

i have a table in database,and each record of the table hase a type.

i want to display the fields of table,and group them by type field.

i have 2repeater.1 for type field,and 1 for all of another fields.

i want to have nested repeater,1 row for type,and the field of that type below

how can i do it?

 

TABLE1

YEAR     
SEMESTER

2001      1st

2001      2ND

2002      1st

2003      1st

2003      2nd

2. the semester should be grouped/show under the year like the sample below:

2001

     1st

     2nd

2002

     1st

2003

             1st

            2nd

i want this,please tell methe html codes and codebehind.

i want to do with c#

try this

<ul id="nav">
<asp:Repeater ID="dltMenuBar" runat="server"
onitemdatabound="dltMenuBar_ItemDataBound" >
<ItemTemplate>
<li><%#Eval("year") %>
<ul style="padding-top:8px;">
<asp:Repeater ID="dltMenuItems" runat="server">
<ItemTemplate>
<li><%#Eval("semister") %></li>
</ItemTemplate>
</asp:Repeater>
</ul>
</li>
</ItemTemplate>
</asp:Repeater>
</ul>

protected void dltMenuBar_ItemDataBound(object sender, RepeaterItemEventArgs e)
{
if ((e.Item.ItemType == ListItemType.Item) || (e.Item.ItemType == ListItemType.AlternatingItem))
{
DataRowView drv = e.Item.DataItem as DataRowView;
Repeater innerDataList = e.Item.FindControl("dltMenuItems") as Repeater;
innerDataList.DataSource = drv.CreateChildView("yearsList");
innerDataList.DataBind();
}
}
public void getData()
{
SqlConnection myConnection = new SqlConnection("uid=sa;pwd=123;database=northwind");
SqlCommand myCommand = new SqlCommand("SELECT year FROM Table_1 where year IN ( SELECT year from Table_1 ) SELECT semister,year FROM Table_1 ", myConnection);

SqlDataAdapter ad = new SqlDataAdapter(myCommand);
DataSet ds = new DataSet();
ad.Fill(ds);
// Attach the relationship to the dataSet
ds.Relations.Add(new DataRelation("yearsList", ds.Tables[0].Columns["year"],
ds.Tables[1].Columns["year"]));
dltMenuBar.DataSource = ds.Tables[0];
dltMenuBar.DataBind();
}

Jquery problem on website

Hello All,

I am working on a website..I have used many jQuery at different pages of the website..All the jQuery are working fine when I update them. But when I check the website aftyer 24 hours, All jquery becomes inactive.."I have used the free jQuery and link of
the page, where the Jquery is placed is inserted in the project".." No atchual code is present in the site"..is this the cause of my jquery getting inactive again and again?

Please suggest some solution..Thanks!

Naveen Jain

Here is the code of one page as example:

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" src="js/featuredimagezoomer.js">

/***********************************************
* Featured Image Zoomer (w/ adjustable power)- By Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more
***********************************************/

</script>

<script type="text/javascript">

jQuery(document).ready(function($){

var m=    ("#<%= DataList1.ClientID %> img").src;

    $("#<%= DataList1.ClientID %> img").addimagezoom({
        zoomrange: [4, 8],
        magnifiersize: [300,300],
        magnifierpos: ‘right’,
        cursorshade: true,
        largeimage:m  //<– No comma after last option!
    })
    

})

</script>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

Hi Naveen,

In most browsers, you can check the console for script errors. There’s a script error here (on
http://connellybros.co.nz/product.aspx?tb=images):

var dsm = jquery.noConflict(true);

This should be:

var dsm = jQuery.noConflict(true);

Start there and see if you get any other errors after that.

Regards,

Ax 

I have chnage that in the code but still have same problem…

Dispart datalist

Hi,
I have a table whit multi records in a filed that dispart whit Enter ,
for example:
q<br>w<br>e<br>r<br>tr<br>y<br>u<br>u<br>i<br>o<br>
In datalist I want dispart each word,
and set new navigateurl for each,
for example:
Eval("key1", "public/archive.aspx?key1={0}") for q: this return: q in addressbar
how i do?
I use wizard for connect to datalist.
please help me.

Hi,

You can create a custom function in codebehind to handle the multiple lines contents and then bind to gridview or other control.

And please refer the similar thread

http://stackoverflow.com/questions/911569/custom-gridview-bind-using-non-static-function

http://www.codeproject.com/Articles/38669/Using-Formatting-Functions-with-GridView-Template

Hope it can help you

no one to help me?

Hi guys, I'm having a problem with my amateur web-site need help ??

I’m having a problem, I can’t fix the Danish language, my site doesn’t recognize the danish fonts so I don’t know what exactly am I supposed to do ? Any idea could that be fixed by css ? or is there anything else I should do ?  Here is the example of css
at the beginning so probably there is a mistake or there is a way it could be fixed from css: 

/* Getting the new tags to behave */
article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, meter, nav, output, progress, section, source, video{ display: block; }
mark, rp, rt, ruby, summary, time{ display: inline }

/* Global properties ======================================================== */
body {
background:#212121;
font-family:Helvetica, Verdana,Geneva,Arial,sans-serif;
font-size:100%;
line-height:1.0625em;
color:#989999;
}
html { min-width:980px;}
html, body { height:100%;}

Please do not hesitate to contact mem thank you for your help.

Regards,

Rizvan Bajrami

xanii

font-family:Helvetica, Verdana,Geneva,Arial,sans-serif;

Did you remove this font setting and see how it is behaving with Danish language?