-->

Wednesday, April 9, 2014

DropdownList with image in ASP.NET

DropdownList with image in ASP.NET

Dropdownlist : We have already discuss about DropdownList, today we will learn how to take text item with image in DropdownList. There are following steps to design Dropdownlist with image.
Step-1 : Import JQuery file from desired resources, resource is

http://code.jquery.com/jquery-1.8.2.js
Step-2 : Attach jQuery link with <script> tag in Head section. Now your code look like


<head id="Head1" runat="server">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
</head>

Step-3 : Download another JQuery file from mentioned resources, also attach with <script> tag in head section. Resource is
http://dl.dropboxusercontent.com/u/40036711/Scripts/jquery.ddslick.min.js

Step-4 : Create JQuery function, also bind DropDownlist with Text, description and Images.
Like
    $(function () {
        var dropdownlist = [
{
    text: "mango",
    value: 1,
    description: "summer fruit",
    imageSrc: "image001.jpg"
}
Similarly again. insert multiple item into the list.

Step-5 : Now call ddslick ( ) method , which is contain DropdownList parameters, such as Data, imagePosition, width etc in same scripting function.

 $('#drop').ddslick({
            data: dropdownlist,
            width: 200,
            imagePosition: "right"
            
        });

Step-6 : End your Jquery function
Step-7 : Take a <div> tag with drop id.

Now your code is 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default6.aspx.cs" Inherits="Default6" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>DropdownList with image</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="jquery.ddslick.min.js"  type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        var dropdownlist = [
{
    text: "mango",
    value: 1,
    description: "summer fruit",
    imageSrc: "image001.jpg"
},
{
    text: "Apple",
    value: 2,
    description: "summer as well as winter fruit",
    imageSrc: "image002.jpg"
}

];
        $('#drop').ddslick({
            data: dropdownlist,
            width: 200,
            imagePosition: "right"
            
        });
    });
</script>
</head>
<body>
<form id="form1">
<div>
<div id="drop"></div>
</div>
</form>
</body>
</html>
Dropdownlist with image icon

Read other related articles

Also read other articles

© Copyright 2013 Computer Programming | All Right Reserved