Click here to Skip to main content
15,867,308 members
Articles / Web Development / ASP.NET

ASP.NET Repeater with jQuery Dialog Popup

29 May 2015CPOL4 min read 58.8K   608   12   26
This blog will take you through the steps to create an ASP.NET Repeater and show the details of a particular row on jQuery Dialog popup.
ASP.NET Repeater with jQuery Dialog Popup

ASP.NET Repeater with jQuery Dialog Popup

Introduction

This blog will take you through the steps to create a ASP.NET Repeater and show the details of a particular row on jQuery Dialog popup.

Background

I was quite a bit into the Repeater control, when I wrote ASP.NET Repeater with jQuery Slider. It is a very useful control to repeat items with well formatted HTML designs. While going through forums, I found members asking questions on opening a popup from the Repeater Row and show details inside that. So, I thought of implementing this with jQuery UI Dialog. Later, I will come up with other techniques to do this task.

Let’s Start !!!

Step 1: Add ASP.NET Repeater Control on aspx Page

We will show the following details for some demo Employees on Repeater.

  1. Employee Id
  2. Name
  3. Location

Let’s see how the design will look like. I will explain different parts of the ASP.NET Repeater.

HeaderTemplate

So, inside the HeaderTemplate, I have defined the table and the header rows with Column Names.

XML
<HeaderTemplate>
    <table id="tblEmployeeDetails" 
         style="border: 1px solid; margin-left: auto; margin-right: auto;">
        <tr>
            <th>
                Employee Id
            </th>
            <th>
                Name
            </th>
            <th>
                Location
            </th>
            <th>
                Pop
            </th>
        </tr>
</HeaderTemplate>

ItemTemplate

Then in ItemTemplate, the data rows are defined with proper Label Tags to hold the column values inside table data (td). The labels are getting values by Eval expressions.

For instance - Text='<%# Eval("EmployeeId") %>' binds the EmployeeId to the Label's Text..
XML
<ItemTemplate>
    <tr>
        <td bgcolor="#CCFFCC">
            <asp:Label runat="server" ID="lblEmployeeId" 
            Text='<%# Eval("EmployeeId") %>' />
        </td>
        <td bgcolor="#CCFFCC">
            <asp:Label runat="server" ID="lblName" 
            Text='<%# Eval("Name") %>' />
        </td>
        <td bgcolor="#CCFFCC">
            <asp:Label runat="server" ID="lblLocation" 
            Text='<%# Eval("Location") %>' />
        </td>
        <td bgcolor="#CCFFCC">
            <asp:ImageButton ID="imbShowDetails" class="imgButton" Height="50" 
                             runat="server" ImageUrl="images/popup.png" />
        </td>
    </tr>
</ItemTemplate>

AlternatingItemTemplate

AlternatingItemTemplate is used so that alternate rows can be displayed differently. The same columns are copied but don’t have bgcolor added to them.

XML
<AlternatingItemTemplate>
    <tr>
        <td>
            <asp:Label runat="server" ID="lblEmployeeId" 
            Text='<%# Eval("EmployeeId") %>' />
        </td>
        <td>
            <asp:Label runat="server" ID="lblName" 
            Text='<%# Eval("Name") %>' />
        </td>
        <td>
            <asp:Label runat="server" ID="lblLocation" 
            Text='<%# Eval("Location") %>' />
        </td>
        <td bgcolor="#CCFFCC">
            <asp:ImageButton ID="imbShowDetails" class="imgButton" Height="50" 
                             runat="server" ImageUrl="images/popup.png" />
        </td>
    </tr>
</AlternatingItemTemplate>

FooterTemplate

Last, but not the least, inside FooterTemplate, we will close the table.

XML
<FooterTemplate>
    </table>
</FooterTemplate>

For the whole code, download the project from the link given at the top of this blog post.

Step 2: Bind Repeater from Code Behind

Pretty simple. Inside BindEmployees(), we are just creating a DataTable with required columns and adding some demo records.

C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindEmployees();
    }
}

private void BindEmployees()
{
    // Create DataTable and add Columns.
    DataTable dtEmployees = new DataTable();
    dtEmployees.Columns.Add("Name", typeof(string));
    dtEmployees.Columns.Add("EmployeeId", typeof(int));
    dtEmployees.Columns.Add("Location", typeof(string));

    // Add demo Rows.
    dtEmployees.Rows.Add("Nirmal Hota", 1, "Bhubaneswar");
    dtEmployees.Rows.Add("Debasis Behera", 2, "Bengaluru");
    dtEmployees.Rows.Add("Sujeet Singh", 3, "New Delhi");
    dtEmployees.Rows.Add("Ashutosh Sahu", 4, "Mangalore");
    dtEmployees.Rows.Add("Kabi Sahoo", 5, "Gurgaon");

    // Bind the Repeater.
    rptEmployees.DataSource = dtEmployees;
    rptEmployees.DataBind();
}

Step 3: Design the Dialog Popup Div

We will design a very simple table to show the details of a particular row on ImageButton Click Event. Below is the HTML of the popup div.

XML
<div id="popupdiv" style="display: none">
    <table>
        <tbody>
            <tr>
                <td>
                    <label class="label">
                        Employee Id:</label>
                </td>
                <td>
                    <label id="lblEmpId">
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="label">
                        Name:</label>
                </td>
                <td>
                    <label id="lblEmpName">
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="label">
                    Location:</label>
                </td>
                <td>
                    <label id="lblEmpLocation">
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

NOTE: The highlighted labels will be populated with the row values when you click the popup image. We will explore more about this in the next step.

Step 4 : Define ImageButton Click Event for the Dialog

Prerequisites

Going further, we will be adding jQuery codes. So, we need jQuery reference. As we will deal with jQuery Dialog, we also need jQueryUI reference. Below are the references we need to add to our page.

XML
<link type="text/css" rel="stylesheet" 
href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" 
src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script type="text/javascript" 
src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

Now we are ready for the click event of ImageButton. Let’s start writing.

Define Click Event for all ImageButtons

First of all, we need to attach click events for all the ImageButtons rendered on Repeater rows. To do that, we will select all the ImageButtons having a common class .imgButton inside the Employees Table that is tblEmployeeDetails. So, the selector will be…

JavaScript
$('#tblEmployeeDetails .imgButton')

This will select all the ImageButtons inside the Employees table.
Now, attach click event to it as given below:

JavaScript
$('#tblEmployeeDetails .imgButton').click(function () {
    // We will write all logic here.
});

Get the Current Row where Image is Clicked

See the picture below which shows the rendered HTML for the Repeater.

Repeater HTML Rendered on Browser

Repeater HTML Rendered on Browser

So, let’s get the parent “tr” of the ImageButton first so that later we can access all the values inside it as shown above. To get the parent tr, we will use .parents with selector “tr”. See the code below:

JavaScript
$('#tblEmployeeDetails .imgButton').click(function () {
    // Get the Current Row.
    var currentRow = $(this).parents("tr");
});

Find the Row Values

Now this is very easy. We just need to find the values by the id of labels. I have use .find with proper selector. The selector is formed with the help of Attribute Contains Selector [name*=”value”]. That is because:

JavaScript
$('#tblEmployeeDetails .imgButton').click(function () {
    // Get the Current Row and its values.
    var currentRow = $(this).parents("tr");
    var empId = currentRow.find("span[id*='lblEmployeeId']").text();
    var empName = currentRow.find("span[id*='lblName']").text();
    var empLocation = currentRow.find("span[id*='lblLocation']").text();
});

Open the Dialog

Just need to call jQuery dialog Event for the div popupdiv.

JavaScript
// ImageButton Click Event.
$('#tblEmployeeDetails .imgButton').click(function () {
    // Get the Current Row and its values.
    var currentRow = $(this).parents("tr");
    var empId = currentRow.find("span[id*='lblEmployeeId']").text();
    var empName = currentRow.find("span[id*='lblName']").text();
    var empLocation = currentRow.find("span[id*='lblLocation']").text();

    // Populate labels inside the dailog.
    $("#lblEmpId").text(empId);
    $("#lblEmpName").text(empName);
    $("#lblEmpLocation").text(empLocation);

    // Open the dialog.
    $("#popupdiv").dialog({
        title: "Details of <em>" + empName + "</em>",
        width: 430,
        height: 240,
        modal: true,
        buttons: {
        Close: function () {
                $(this).dialog('close');
            }
        }
    });

    return false;
});

Notes

  1. Line 16: Here to make the empName italics, I have assigned em tags. But HTML tags are not supported in dialog title. To support that, I have added one prototype as given below, which will just assign the title text to the title html.
    JavaScript
    // Prototype to assign HTML to the dialog title bar.
    $.widget('ui.dialog', jQuery.extend({}, jQuery.ui.dialog.prototype, {
        _title: function (titleBar) {
            titleBar.html(this.options.title || ' ');
    	}
    }));
  2. Line 27: We are returning false, otherwise page will post back and the modal will play hide and seek. :)

Conclusion

Uff !!! So much code. Let me know, if you liked the blog or not. Should you have any questions or need any help, please feel free to add a comment below or contact me. I will reply and together, we will resolve issues.

Don’t forget to share this post with your friends and colleagues. You just need to click share buttons displayed below.

Happy coding !!! :)


Image 3 Image 4

This article was originally posted at http://taditdash.wordpress.com?p=611

License

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


Proud Indian | Author | TEDx Speaker | Microsoft MVP | CodeProject MVP | Speaker | DZone Most Valuable Blogger| jsfiddler

My Website

taditdash.com

Programming Community Profiles

jsfiddle | Stack Overflow

Social Profiles

Facebook | Twitter | LinkedIn

Awards


  1. DZone Most Valuable Blogger
  2. Microsoft MVP 2014, 2015, 2016, 2017, 2018
  3. Code Project MVP 2014, 2015, 2016
  4. Star Achiever of the Month December 2013
  5. Mindfire Techno Idea Contest 2013 Winner
  6. Star of the Month July 2013

Comments and Discussions

 
AnswerRe: My Vote Of 5 Pin
Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)31-May-15 23:31
protectorTadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)31-May-15 23:31 

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.