Subscribe to Youtube channel

Highlight gridview row in update panel without posting back in asp net


When user selects particular row of gridview then that row should be highlighted. but in asp.net you do not have mechanism to to this task automatically. For this purpose you need to write some custom code, which includes some JavaScript code. to highlight the row selected by user follow the step below


  • For this you have to write this code in your code behind file in OnRowCreated event or your can also write this code in OnRowDataBound event of grid...

 protected void ctlGridView_OnRowCreated(object sender, GridViewRowEventArgs e)
    {    
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            e.Row.Attributes.Add("onclick", "onGridViewRowSelected('" + e.Row.RowIndex.ToString() + "')");
        }            
    }



  • then add following script to your aspx page in script tag

<script language="javascript" type="text/javascript">
    var gridViewCtlId = '<%=ctlGridView.ClientID%>';
    var gridViewCtl = null;
    var curSelRow = null;
    function getGridViewControl()
    {
        if (null == gridViewCtl)
        {
            gridViewCtl = document.getElementById(gridViewCtlId);
        }
    }

    function onGridViewRowSelected(rowIdx)
    {
        var selRow = getSelectedRow(rowIdx);
        if (curSelRow != null)
        {
            curSelRow.style.backgroundColor = '#ffffff';
        }

        if (null != selRow)
        {
            curSelRow = selRow;
            curSelRow.style.backgroundColor = '#ababab';
        }
    }

    function getSelectedRow(rowIdx)
    {
        getGridViewControl();
        if (null != gridViewCtl)
        {
            return gridViewCtl.rows[rowIdx];
        }
        return null;
    }
</script>

and it will highlight the selected row..


Comments

Popular posts from this blog

Root your Gingerbread 2.3.4 android Mobile Phone

Implement Logging in CSV file using Nlog in .net core MVC application- part 2

Disable backspace key using Jquery

Devexpress Datebox date formatting in angular 6 with example

Implement Nlog in .Net core MVC application part 1

How to Import CSV File and bind csv file data to gridview in asp.net using c#

Restore the lost focus of Auto post back controls in asp.net update Panel control

Angular User Session Timeout example step by step

Clone a generic list in C# using extension method