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.<o:p>

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

<o:p>

<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
                    {
                    }

                }

            }
        }
    }