Showing posts with label repeater. Show all posts
Showing posts with label repeater. Show all posts

Friday, December 26, 2014

Get all checkbox checked in gridview/repeater/datalist

Following is the simplest way to get checked checkbox in a grid:

<asp:GridView runat="server" ID="grd" AutoGenerateColumns="false">
  <EmptyDataTemplate>
    No data found
  </EmptyDataTemplate>
  <Columns>
    <asp:TemplateField HeaderStyle-Width="4%">
      <HeaderTemplate>
        <input type="checkbox" id="cbUserAll" title="Select/Unselect All" onclick="SelectAllCB('ckbUser', this);" />
      </HeaderTemplate>
      <ItemTemplate>
        <input type="checkbox" id='ckbUser<%#Eval("Id")%>' name="ckbUser" value='<%#Eval("Id")%>' />
      </ItemTemplate>
In CS page:
  string str = Convert.ToString(Request.Form["ckbuser"]);

This will get all selected checkbox values comma separated.

Posted by at No comments:
Labels: , , , ,

Monday, December 22, 2014

Bind repeater using jQuery/Ajax.


Problem:

Some time we face situation where we need to display data in repeater and also provide paging to that repeater. Today I am going to demonstrate how can we bind repeater to a data source and update repeater using jQuery.


Solution:

Following are the main steps to achieve this:

  1. Create a page.
  2. Include jQuery.
  3. Take a repeater on aspx page.
  4. Put that repeater in a div (or any other element). We will use this div to add records
  5. Bind data to repeater on page load.
  6. Create pager for repeater.
  7. Call javascript function on click of pager items.
  8. Make a jquery hit to server with required parameters.
  9. Bind response to repeater container.

Following is the page and javascript code:


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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title>[Nitin Dhiman] Bind repeater using jQuery</title>
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  <script type="text/javascript">
    function getdata(pageNo) {
      $.ajax({
        type: "POST",
        url: "jQueryRepeater.aspx/GetData",
        data: "{pageNo: " + pageNo + "}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (response) {
          var xmlDoc = $.parseXML(response.d);
          var xml = $(xmlDoc);
          var row = "";
          var images = xml.find("Table1");
          $("#dvResult tbody").html("");
          images.each(function () {
            var image = $(this);
            row = " " + image.find("Id").text() + "
" + image.find("Name").text() + "" + image.find("Age").text() + "" + image.find("Email").text() + "";
            $("#dvResult tbody").append(row);
          });
        },
        failure: function (response) {
          alert("fail");
        },
        error: function (response) {
          alert(response);
        }
      });
    }

  </script>
  <style type="text/css">
    body
    {
      font-family: Trebuchet MS;
    }

    #pager span
    {
      float: left;
      cursor: pointer;
      padding: 2px;
      margin: 2px;
      border: 1px solid #f00;
    }
  </style>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <table>
        <tr>
          <td>
            <div id="dvResult">
              <asp:Repeater ID="rpResult" runat="server">
                <HeaderTemplate>
                  <table>
                    <thead>
                      <th>Id</th>
                      <th>Name</th>
                      <th>Age</th>
                      <th>Email</th>
                    </thead>
                    <tbody>
                </HeaderTemplate>
                <ItemTemplate>
                  <tr>
                    <td><%#Eval("Id")%></td>
                    <td><%#Eval("Name")%></td>
                    <td><%#Eval("Age")%></td>
                    <td><%#Eval("Email")%></td>
                  </tr>
                </ItemTemplate>
                <FooterTemplate>
                  </tbody>
              </table>
                </FooterTemplate>
              </asp:Repeater>
            </div>
            <div id="pager">
              <span onclick="javascript:getdata(1);">1</span>
              <span onclick="javascript:getdata(2);">2</span>
              <span onclick="javascript:getdata(3);">3</span>
              <span onclick="javascript:getdata(4);">4</span>
              <span onclick="javascript:getdata(5);">5</span>
              <span onclick="javascript:getdata(6);">6</span>
            </div>
          </td>
        </tr>
      </table>
    </div>
  </form>
</body>
</html>



jQueryRepeater.aspx.cs
using System;
using System.Data;
using System.Web.Services;

public partial class jQueryRepeater : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        BindData(1, 5);

    }
    void BindData(int PageNo, int PageSize)
    {
        int StrtIndx = (PageNo - 1) * PageSize;
        int EndIndx = (PageNo) * PageSize;
        DataTable dt = GetDataTable();
        DataTable dt2 = dt.Select("Id> " + StrtIndx + " AND Id <= " + EndIndx + "").CopyToDataTable();
        rpResult.DataSource = dt2;
        rpResult.DataBind();
    }

    static DataTable GetDataTable()
    {
        DataTable dt = new DataTable();
        DataColumn dc1 = new DataColumn("Id", typeof(Int32));
        dt.Columns.Add(dc1);
        DataColumn dc2 = new DataColumn("Name");
        dt.Columns.Add(dc2);
        DataColumn dc3 = new DataColumn("Age");
        dt.Columns.Add(dc3);
        DataColumn dc4 = new DataColumn("Email");
        dt.Columns.Add(dc4);
        DataRow dr;

        dr = dt.NewRow(); dr["Id"] = 1; dr["Name"] = "Nitin"; dr["Age"] = "23"; dr["Email"] = "nitin@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 2; dr["Name"] = "Rahul"; dr["Age"] = "24"; dr["Email"] = "rahul@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 3; dr["Name"] = "Sanjay"; dr["Age"] = "31"; dr["Email"] = "sanjay@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 4; dr["Name"] = "inay"; dr["Age"] = "34"; dr["Email"] = "inay@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 5; dr["Name"] = "Vinit"; dr["Age"] = "21"; dr["Email"] = "vinit@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 6; dr["Name"] = "Vijay"; dr["Age"] = "23"; dr["Email"] = "vijay@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 7; dr["Name"] = "Roop"; dr["Age"] = "26"; dr["Email"] = "roop@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 8; dr["Name"] = "Bikram"; dr["Age"] = "27"; dr["Email"] = "bikram@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 9; dr["Name"] = "Karan"; dr["Age"] = "32"; dr["Email"] = "karan@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 10; dr["Name"] = "Ajay"; dr["Age"] = "40"; dr["Email"] = "ajay@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 11; dr["Name"] = "Babita"; dr["Age"] = "37"; dr["Email"] = "babita@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 12; dr["Name"] = "Chaman"; dr["Age"] = "29"; dr["Email"] = "chaman@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 13; dr["Name"] = "Diwan"; dr["Age"] = "26"; dr["Email"] = "diwan@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 14; dr["Name"] = "Esha"; dr["Age"] = "28"; dr["Email"] = "esha@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 15; dr["Name"] = "Fred"; dr["Age"] = "25"; dr["Email"] = "fred@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 16; dr["Name"] = "Geeta"; dr["Age"] = "31"; dr["Email"] = "geeta@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 17; dr["Name"] = "Himmat"; dr["Age"] = "32"; dr["Email"] = "himmat@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 18; dr["Name"] = "Ivan"; dr["Age"] = "36"; dr["Email"] = "ivan@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 19; dr["Name"] = "Jacob"; dr["Age"] = "23"; dr["Email"] = "jacob@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 20; dr["Name"] = "Kamal"; dr["Age"] = "28"; dr["Email"] = "kamal@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 21; dr["Name"] = "Lalit"; dr["Age"] = "30"; dr["Email"] = "lalit@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 22; dr["Name"] = "Mohit"; dr["Age"] = "27"; dr["Email"] = "mohit@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 23; dr["Name"] = "Naveen"; dr["Age"] = "31"; dr["Email"] = "naveen@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 24; dr["Name"] = "Opender"; dr["Age"] = "27"; dr["Email"] = "opender@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 25; dr["Name"] = "Pushpa"; dr["Age"] = "25"; dr["Email"] = "pushpa@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 26; dr["Name"] = "Rohit"; dr["Age"] = "22"; dr["Email"] = "rohit@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 27; dr["Name"] = "Sumit"; dr["Age"] = "33"; dr["Email"] = "sumit@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 28; dr["Name"] = "Tejinder"; dr["Age"] = "27"; dr["Email"] = "tejinder@gmail.com"; dt.Rows.Add(dr);
        dr = dt.NewRow(); dr["Id"] = 29; dr["Name"] = "Umesh"; dr["Age"] = "22"; dr["Email"] = "umesh@gmail.com"; dt.Rows.Add(dr);

        return dt;
    }

    [WebMethod]
    public static object GetData(int pageNo)
    {
        int PageSize = 5;
        int StrtIndx = (pageNo - 1) * PageSize;
        int EndIndx = (pageNo) * PageSize;
        DataTable dt = GetDataTable();
        DataTable dt2 = dt.Select("Id> " + StrtIndx + " AND Id <= " + EndIndx + "").CopyToDataTable();
        DataSet ds = new DataSet("results");
        ds.Tables.Add(dt2);
        return ds.GetXml();
    }

}
Posted by at No comments:
Labels: , , , , , , , ,
Subscribe to: Posts (Atom)