Userful GridView ASP.NET

• Download CodeSnips - 2.49 KB

Introduction

I tried to summrize the common feature which we generally want in asp.net GridView.

1. Fixed hedder and scrollbar – using jQuery
2. Check Uncheck all rows - using jQuery
3. Sorting direction imgae indicator - just by code behind no CSS no Script
4. Filter GridView row at client side - javascript

Using the code

This is just a code snips so it will not run at you end you need to include this codes to your project and probably need to make necessarily changes.

You need to include the jquery-1.4.4.min.js and ScrollableGridPlugin.js" in you prject. (I am uploding that with this article)

1. Fixed hedder and scrollbar – using jQuery

Script:

<script src="../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
    <script src="../Scripts/ScrollableGridPlugin.js" type="text/javascript"></script>
    <script language="javascript" type="text/javascript">

       // Check/ Uncheck all
        $(window).bind('load', function () {
            var headerChk = $(".chkHeader input");
            var itemChk = $(".chkItem input");
            headerChk.bind("click", function () {
                itemChk.each(function () { this.checked = headerChk[0].checked; })
            }
                   );
            itemChk.bind("click", function () { if ($(this).checked == false) headerChk[0].checked = false; });
        });


        // Fixing the hear for Scroll
       $(document).ready(function () {
            //Invoke Scrollable function.
            $('#<%=SearchResult.ClientID %>').Scrollable({
                ScrollHeight: 600,        
            });
        });


         //GV runtime filter
        function filter (term, GvId,SearchOn)
        {
            var SearchOn ='#'+SearchOn;
            var cellNr = $(SearchOn).find('input:checked').val();
            //alert(term);
            var suche = term.value.toLowerCase();
            var table = document.getElementById(GvId);
            var ele;
            for (var r = 0; r < table.rows.length; r++)
            {
                ele = table.rows[r].cells[cellNr].innerHTML.replace(/<[^>]+>/g,"");
                if (ele.toLowerCase().indexOf(suche)>=0 )
                    table.rows[r].style.display = '';
                else table.rows[r].style.display = 'none';
            }

         }

    </script>          
Code Behind: 
protected void Page_Load(object sender, EventArgs e)
    {

        try
        {
            if (!IsPostBack)
            {
                ViewState[FixInfo.SortColum] = " ";
                ViewState[FixInfo.SortDirection] = " ";
                GetPendingAds();

                //for GV runtime filter
                SearchTxt.Attributes.Add("onkeyup", "filter(this,'" + SearchResult.ClientID + "','" 
                    + SearchOn.ClientID + "')");

            }
        }
        catch (Exception ex)
        {
            LocalHelper.ShowError(ex.Message);
        }

    }

    protected void SearchResult_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.Header)
        {
            foreach (TableCell tc in e.Row.Cells)
            {
                if (ViewState[FixInfo.SortDirection].ToString().Length > 2)
                {
                    try
                    {
                        LinkButton lnkBtn = (LinkButton)tc.Controls[0];

                        if (lnkBtn != null)
                            if (ViewState[FixInfo.SortColum].ToString().Equals(lnkBtn.CommandArgument, StringComparison.InvariantCultureIgnoreCase))
                            {
                                System.Web.UI.WebControls.Image img = new System.Web.UI.WebControls.Image();

                                img.ImageUrl = "~/Images/" + ViewState[FixInfo.SortDirection].ToString() + ".gif";
                                tc.Controls.Add(img);
                            }
                    }
                    catch
                    {
                    }

                }

            }
        }
    }