Handling Related Data in Multiple DataGrids with Code Behind and JavaScript

• Download source - 84.3 Kb

Introduction

This article gives an idea of how we can make data persistent in between postbacks in multiple DataGrids. This article also gives a good idea about using an HTML hidden field to pass data between pages using code-behind. Data which is saved in a temporary table in DB is again populated in the DataGrid.

Background

This article basically deals with DataGrids and how to play around with HTML controls in it to make data pass between pages.

Using the code

function CheckWeight(val,index)
{
    var temp;
    var wt;
    var indx;
    var currVal;
    var catindx="";    
    var a;    
    var com_index;
    com_index=index.substring(2);
    status=com_index;
    catindx=
      document.getElementById("sel_CategoryIndex").value;
    document.getElementById("checked_B").value=
      document.getElementById("checked_B").value + 
      '*' + index;
    var t=document.getElementById("checked_B").value;
    indx=document.getElementById("sel_areaIndex").value
    currVal=eval(document.getElementById(indx).value);
    wt=document.getElementById("sel_areaWeight").value
    temp=parseFloat((val * wt)*-1);
    A = document.getElementById(indx).value
    AA=document.getElementById('C' +catindx).value
    AA=Number(AA)
    //status=AA;
    B = temp
    D=Number(A-B)
    //D=(AA+D)
    if(document.getElementById(index).checked==true)
    {
        document.getElementById(indx).value=(A-B)
        document.getElementById('B'+com_index).disabled=false
        document.getElementById('B'+com_index).focus();
            
        switch(catindx)
        {
            case "1": document.getElementById("C1").value=(D);
                        break;
            case "2": document.getElementById("C2").value=(D);
                        break;
            case "3": document.getElementById("C3").value=(D);
                        break;
            case "4": document.getElementById("C4").value=(D);
                        break;
            case "5": document.getElementById("C5").value=(D);
                        break;
            case "6": document.getElementById("C6").value=(D);
                        break;
            case "7": document.getElementById("C7").value=(D);
                        break;
            case "8": document.getElementById("C8").value=(D);
                        break;
            case "9": document.getElementById("C9").value=(D);
                        break;
            
        }
    }
    else
    {        
        A = Number(A)
        AA = Number(AA)
        B = Number(B)
        C = (A + B)
        document.getElementById(indx).value=C;
        document.getElementById('B'+com_index).value="";
        document.getElementById('B'+com_index).disabled=true;
        
        E=AA-B
        switch(catindx)
        {
            case "1": document.getElementById("C1").value=E;
                break;
            case "2": document.getElementById("C2").value=E;
                a="inside c2";
                break;
            case "3": document.getElementById("C3").value=E;
                break;
            case "4": document.getElementById("C4").value=E;
                break;
            case "5": document.getElementById("C5").value=E;
                break;
            case "6": document.getElementById("C6").value=E;
                break;
            case "7": document.getElementById("C7").value=E;
                break;
            case "8": document.getElementById("C8").value=E;
                break;
            case "9": document.getElementById("C9").value=E;
                break;
                
        }
    }
    document.getElementById("currAreaVal").value=
             document.getElementById(indx).value;
    document.getElementById("txt_totalScore").value=
             document.getElementById(indx).value;
}

This JavaScript function get the values of stored breakdown values from the code-behind file through a hidden field. The stored comments and the check boxes that are checked for a particular area is stored in the table BreakDown_visited. The ID of the checkboxes are stored as a string with a delimiter "*" along with the respective comments. Then based on the row number of the Area DataGrid, the data is fetched and the ID and comments are extracted to an array, which are then used to set the values of the textboxes and to set the checkboxes' state. In the code-behind, the RegisterClientScriptBlock function emits the script for the client side:

Public Function LoadBreakDownValues(ByVal catid As Integer, _
                                    ByVal aid As Integer)
    Dim cmd As New SqlCommand
    Dim dr As SqlDataReader
    Dim c As SqlConnection
    Dim str As String
    Dim str_com As String
    Dim sbarr() As String
    Dim sbarr_com() As String
    Dim tempstr As String
    Dim sb As New StringBuilder
    Dim conStr As String = _
        ConfigurationSettings.AppSettings("conStr")
    Dim con As New SqlConnection(conStr)
    Try
        con.Open()
        With cmd
            .CommandText = "select id,comments from " & _ 
                           "Breakdown_visited where catid=" & _
                           catid & " and AreaID=" & aid
            .Connection = con
            .CommandType = CommandType.Text
        End With
        dr = cmd.ExecuteReader()
        If dr.HasRows Then
            While dr.Read
                    str = dr.GetString(0)
                    str_com = dr.GetString(1)
            End While

            sbarr = str.Split("*")
            sbarr_com = str_com.Split("*")
            sb.Append("")
            If Not IsClientScriptBlockRegistered("BK") Then
                RegisterClientScriptBlock("BK", sb.ToString)
            End If
        End If
        dr.Close()
        con.Close()
    Catch ex As Exception
        Response.Write(ex.Message)
    Finally
    End Try
End Function