Saturday, March 9, 2013

Custom Paging in Datalist or repeater


This is a very simple custom paging technique for a developer where ha can do paging in datalist and repeater in only 5 minutes.enjoy code.....

  public void BindPhoto()
        {
            GalleryModuleController objCommentModules = new GalleryModuleController();

            List cmi;
            cmi = objCommentModules.PhotoList(0);
            if (cmi.Count > 0)
            {
                dlphotogallery.DataSource = cmi;
                dlphotogallery.DataBind();
                pds.DataSource = cmi;
                pds.AllowPaging = true;

                //to set the paging change the number 3 to your desired value

                pds.PageSize = 4;

                pds.CurrentPageIndex = CurrentPage;

                lnkbtnNext.Enabled = !pds.IsLastPage;

                lnkbtnPrevious.Enabled = !pds.IsFirstPage;

                dlphotogallery.DataSource = pds;

                dlphotogallery.DataBind();

                doPaging();
            }
        }


        protected void lnkbtnPrevious_Click(object sender, EventArgs e)
        {

            CurrentPage -= 1;
            BindPhoto();

        }

        protected void lnkbtnNext_Click(object sender, EventArgs e)
        {

            CurrentPage += 1;

            BindPhoto();

        }

        protected void dlPaging_ItemCommand(object source, DataListCommandEventArgs e)
        {

            if (e.CommandName.Equals("lnkbtnPaging"))
            {
                CurrentPage = Convert.ToInt16(e.CommandArgument.ToString());
                BindPhoto();
            }

        }

        protected void dlPaging_ItemDataBound(object sender, DataListItemEventArgs e)
        {

            LinkButton lnkbtnPage = (LinkButton)e.Item.FindControl("lnkbtnPaging");
            if (lnkbtnPage.CommandArgument.ToString() == CurrentPage.ToString())
            {
                lnkbtnPage.Enabled = false;
                lnkbtnPage.Font.Bold = true;
            }

        }

        public int CurrentPage
        {
            get
            {
                if (this.ViewState["CurrentPage"] == null)

                    return 0;

                else

                    return Convert.ToInt16(this.ViewState["CurrentPage"].ToString());

            }

            set
            {

                this.ViewState["CurrentPage"] = value;

            }

        }



        private void doPaging()
        {

            DataTable dt = new DataTable();

            dt.Columns.Add("PageIndex");

            dt.Columns.Add("PageText");

            for (int i = 0; i < pds.PageCount; i++)
            {

                DataRow dr = dt.NewRow();

                dr[0] = i;

                dr[1] = i + 1;

                dt.Rows.Add(dr);

            }

            dlPaging.DataSource = dt;

            dlPaging.DataBind();

        }

Open PopUp using jquery css and jqeury code.

This is the open popup code using jquery with appplying css .this is a very simple and attractive pop up window just applied on div.

 $(document).ready(function () {
        $('open').click(function () {
            alert('hi');
            load();
        });

        $('.close').click(function () {
            unload();

        });
    });


 function unload() {    // TO Unload the Popupbox

        $('.popup').fadeOut("slow");
        $("#container").css({ // this is just for style      
            "opacity": "1"
        });
    }

    function load() {    // To Load the Popupbox
        $('.popup').fadeIn("slow");
        $("#container").css({ // this is just for style
            "opacity": "0.3"
        });

    }


style type="text/css"
    .popup {
        display: none; /* Hide the DIV */
        position: absolute;
        _position: absolute; /* hack for internet explorer 6 */
        height: 325px;
        width: 325px;
        background: #FFFFFF;
        left: 80px;
        top: 100px;
        z-index: 100; /* Layering ( on-top of others), if you have lots of layers: I just maximized, you can change it yourself */
        margin-left: 15px;
        /* additional features, can be omitted */
        border:2px solid #ff0000;
        padding:15px;
        font-size: 15px;
        -moz-box-shadow: 0 0 5px #ff0000;
        -webkit-box-shadow: 0 0 5px #ff0000;
        box-shadow: 0 0 5px #ff0000;
     
    }
 
    #container {
        width: 100%;
        height: 100%;
    }

    a {
        cursor: pointer;
        text-decoration: none;
    }

    /* This is for the positioning of the Close Link */
    #popupBoxClose {
        font-size: 20px;
        line-height: 15px;
        right: 5px;
        top: 5px;
        position: absolute;
        color: #6fa5e2;
        font-weight: 500;
    }
   /style