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

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

Disable backspace key using Jquery

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

Implement Nlog in .Net core MVC application part 1

Angular User Session Timeout example step by step

Devexpress Datebox date formatting in angular 6 with example

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

Add Comma automatically while entering amounts in textbox using Javascript