GridView Inside DataList and Client Side Operations

2011-12-28

Target UI


ASPX Page Code
---------------------
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="AirlineCancellation.aspx.vb" Inherits="WebConnectPlusAdmin.AirlineCancellation" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/TicketCancellation.js" type="text/javascript"></script>
    
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
        <table width="100%">
            <tr>
                <td>
                    <asp:Label ID="lblTransactionID" runat="server" Text="Transaction ID"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtTransactionID" runat="server" Enabled="False"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    <asp:Label ID="lblCustomerName" runat="server" Text="Customer Name"></asp:Label>
                </td>
                <td>
                    <asp:TextBox ID="txtCustomerName" runat="server" Enabled="False"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">
                    <fieldset>
                    <legend>
                        <asp:Label ID="lblOnwardJourney" runat="server" Text="Onward Journey"></asp:Label> &nbsp;<asp:TextBox 
                            ID="txtOnwardJourney" runat="server" Enabled="False"></asp:TextBox></legend>
                        <asp:DataList ID="dlOnwardJourney" runat="server" Width="75%" DataKeyField="ConnectionSegmentID" >
                        <HeaderTemplate>
                        <table style="width:100%;">
                        <tr style="background: #013b82;color: white;">
                        <td style="width:18%;" >From</td>

                        <td style="width:18%;">To</td>

                        <td style="width:18%;" align="center">Fare Basis Code</td>

                        <td style="width:18%;" align="center">PNR</td>

                        <td style="width:18%;" align="center">Fare Rule</td>

                        <td align="center" style="width:10%;"><asp:CheckBox ID="chkSelectAllOnward" runat="server" /></td>
                        </tr>
                        </table>
                        </HeaderTemplate>
                       <ItemTemplate>
                        <table style="width:100%;">
                                <tr >
                                <td style="background: #d8d8d8;width:18%;">
                                 <asp:Label ID="lblFrom" runat="server" Text='<%# Eval("DepartureAirportCode") %>' ForeColor="White"></asp:Label>
                                </td>

                                <td style="background: #d8d8d8;width:18%;">
                                <asp:Label ID="lblTo" runat="server" Text='<%# Eval("ArrivalAirportCode") %>' ForeColor="White"></asp:Label>
                                </td>

                                <td style="background: #d8d8d8;width:18%;" align="center">
                                <asp:Label ID="lblFareBasisCode" runat="server" Text="CXYZ" ForeColor="White"></asp:Label>
                                </td>

                               <td style="background: #d8d8d8;width:18%;" align="center">
                                 <asp:Label ID="lblPNR" runat="server" Text='<%# Eval("CRSPNR") %>' ForeColor="White"></asp:Label>
                                </td>

                                 <td style="background: #d8d8d8;width:28%;" align="center">
                                 <asp:LinkButton ID="lnkFareRule" runat="server" Text="RULE10" ForeColor="White"></asp:LinkButton>
                                </td>

                                <td>
                                
                                </td>
                                </tr>

                                <tr>
                                <td colspan="5">
                                <asp:GridView ID="gdvOnwardPassengers" runat="server" 
                                            AutoGenerateColumns="False"   DataKeyNames="PassengerID" Width="50%" OnRowDataBound="gdvOnwardPassengers_RowDataBound">
                                            <Columns>
                                            <asp:TemplateField HeaderText="Name">
                                            <ItemStyle HorizontalAlign="Left" />
                                            <ItemTemplate>
                                               <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                                            </ItemTemplate>
                                            </asp:TemplateField>


                                                <asp:TemplateField  HeaderText="TicketNo">
                                                
                                            <ItemTemplate>
                                            
                                               <asp:Label ID="lblTicketNumber" runat="server" Text='<%# Eval("TicketNumber") %>'></asp:Label>
                                            </ItemTemplate>

                                            </asp:TemplateField>

                                              <asp:TemplateField>
                                              
                                                <HeaderTemplate>
                                        <asp:CheckBox ID="chkCancelOnwardPaxChildHeader" runat="server"  ></asp:CheckBox>
                                </HeaderTemplate>
                                            <ItemTemplate>
                                            
                                               <asp:CheckBox ID="chkCancelOnwardPax" runat="server" ></asp:CheckBox>
                                            </ItemTemplate>
                                            </asp:TemplateField>

</Columns>
                                        </asp:GridView>
                                </td>
                                </tr>
</table>
                       </ItemTemplate>
                        </asp:DataList>
                    </fieldset>
                    
                        
                        
                        
                    
                </td>
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
                <td>
                    &nbsp;</td>
            </tr>
            <tr>
                <td colspan="2">
                    <fieldset>
                    <legend>
                        <asp:Label ID="lblReturnJourney" runat="server" Text="Return Journey"></asp:Label> &nbsp;<asp:TextBox 
                            ID="txtReturnJourney" runat="server" Enabled="False"></asp:TextBox></legend>
                        <asp:DataList ID="dlReturnJourney" runat="server" Width="75%" DataKeyField="ConnectionSegmentID" >
                        <HeaderTemplate>
                        <table style="width:100%;">
                        <tr style="background: #013b82;color: white;">
                        <td style="width:18%;" >From</td>

                        <td style="width:18%;">To</td>

                        <td style="width:18%;" align="center">Fare Basis Code</td>

                        <td style="width:18%;" align="center">PNR</td>

                        <td style="width:18%;" align="center">Fare Rule</td>

                        <td align="center" style="width:10%;"><asp:CheckBox ID="chkSelectAllReturn" runat="server" /></td>
                        </tr>
                        </table>
                        </HeaderTemplate>
                       <ItemTemplate>
                        <table style="width:100%;">
                                <tr >
                                <td style="background: #d8d8d8;width:18%;">
                                 <asp:Label ID="lblFrom" runat="server" Text='<%# Eval("DepartureAirportCode") %>' ForeColor="White"></asp:Label>
                                </td>

                                <td style="background: #d8d8d8;width:18%;">
                                <asp:Label ID="lblTo" runat="server" Text='<%# Eval("ArrivalAirportCode") %>' ForeColor="White"></asp:Label>
                                </td>

                                <td style="background: #d8d8d8;width:18%;" align="center">
                                <asp:Label ID="lblFareBasisCode" runat="server" Text="CXYZ" ForeColor="White"></asp:Label>
                                </td>

                               <td style="background: #d8d8d8;width:18%;" align="center">
                                 <asp:Label ID="lblPNR" runat="server" Text='<%# Eval("CRSPNR") %>' ForeColor="White"></asp:Label>
                                </td>

                                 <td style="background: #d8d8d8;width:28%;" align="center">
                                 <asp:LinkButton ID="lnkFareRule" runat="server" Text="RULE10" ForeColor="White"></asp:LinkButton>
                                </td>

                                <td>
                                
                                </td>
                                </tr>

                                <tr>
                                <td colspan="5">
                                <asp:GridView ID="gdvReturnPassengers" runat="server" 
                                            AutoGenerateColumns="False"   DataKeyNames="PassengerID" Width="50%" OnRowDataBound="gdvReturnPassengers_RowDataBound">
                                            <Columns>
                                            <asp:TemplateField HeaderText="Name">
                                            <ItemStyle HorizontalAlign="Left" />
                                            <ItemTemplate>
                                               <asp:Label ID="lblName" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
                                            </ItemTemplate>
                                            </asp:TemplateField>


                                                <asp:TemplateField  HeaderText="TicketNo">
                                                
                                            <ItemTemplate>
                                            
                                               <asp:Label ID="lblTicketNumber" runat="server" Text='<%# Eval("TicketNumber") %>'></asp:Label>
                                            </ItemTemplate>

                                            </asp:TemplateField>

                                              <asp:TemplateField>
                                              
                                                <HeaderTemplate>
                                        <asp:CheckBox ID="chkCancelReturnPaxChildHeader" runat="server"  ></asp:CheckBox>
                                </HeaderTemplate>
                                            <ItemTemplate>
                                            
                                               <asp:CheckBox ID="chkCancelReturnPax" runat="server" ></asp:CheckBox>
                                            </ItemTemplate>
                                            </asp:TemplateField>

</Columns>
                                        </asp:GridView>
                                </td>
                                </tr>
</table>
                       </ItemTemplate>
                        </asp:DataList>
                    </fieldset>
                    
                        
                        
                        
                    
                </td>
            </tr>

            <tr>
            <td align="right">
            <asp:CheckBox ID="chkCancelItinerary"  runat="server" Text="Cancel Itinerary"  />
            </td>

            <td align="right">
                <asp:Button ID="btnSave" runat="server" Text="Save" />
            </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>



Code Behind
-------------

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        Try
            VerifySessionExpiry()
            If Not IsPostBack Then
                If Request.Params("TransactionID") IsNot Nothing Then
                    txtTransactionID.Text = Request.Params("TransactionID").ToString()
                    GetItinerary()
                    If ResponseData.TransStatus = False Then
                        FillDataList()
                    End If
                End If
            End If
            chkCancelItinerary.Attributes.Add("onclick", "javascript:CheckOrUncheckAll('" + chkCancelItinerary.ClientID + "')")
        Catch ex As Exception
            ResponseData.TransRemarks = ex.Message & "-" & ex.StackTrace
            ResponseData.TransStatus = True
            ResponseData.TransCode = "1111"
            LogError(Reflection.MethodBase.GetCurrentMethod.DeclaringType.FullName, Reflection.MethodBase.GetCurrentMethod.Name, ex.Message & "-" & ex.StackTrace)
        End Try

    End Sub

 Protected Sub dlReturnJourney_ItemDataBound(sender As Object, e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlReturnJourney.ItemDataBound
        Dim gdvReturnPassengers As GridView = Nothing
        Dim dtPassengers As DataTable = Nothing
        Dim connectionSegmentID As Int16 = 0
        Try
            If e.Item.ItemType = ListItemType.Header Then
                chkSelectAllReturn = CType(e.Item.FindControl("chkSelectAllReturn"), CheckBox)
            End If

            If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

                gdvReturnPassengers = CType(e.Item.FindControl("gdvReturnPassengers"), GridView)


                dtPassengers = GetPassengers(dlReturnJourney.DataKeys(e.Item.ItemIndex))
                gdvReturnPassengers.DataSource = dtPassengers
                gdvReturnPassengers.DataBind()

                chkSelectAllReturn.Attributes.Add("onclick", "javascript:CheckOrUncheckAllGrids('" + chkSelectAllReturn.ClientID + "','" + gdvReturnPassengers.ClientID + "')")


            End If
        Catch ex As Exception
            ResponseData.TransRemarks = ex.Message & "-" & ex.StackTrace
            ResponseData.TransStatus = True
            ResponseData.TransCode = "1111"
            LogError(Reflection.MethodBase.GetCurrentMethod.DeclaringType.FullName, Reflection.MethodBase.GetCurrentMethod.Name, ex.Message & "-" & ex.StackTrace)
        End Try
    End Sub

    Protected Sub dlOnwardJourney_ItemDataBound(sender As Object, e As System.Web.UI.WebControls.DataListItemEventArgs) Handles dlOnwardJourney.ItemDataBound
        Dim gdvOnwardPassengers As GridView = Nothing
        Dim dtPassengers As DataTable = Nothing
        Dim connectionSegmentID As Int16 = 0
        Try
            If e.Item.ItemType = ListItemType.Header Then
                chkSelectAllOnward = CType(e.Item.FindControl("chkSelectAllOnward"), CheckBox)
            End If

            If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then

                gdvOnwardPassengers = CType(e.Item.FindControl("gdvOnwardPassengers"), GridView)


                dtPassengers = GetPassengers(dlOnwardJourney.DataKeys(e.Item.ItemIndex))
                gdvOnwardPassengers.DataSource = dtPassengers
                gdvOnwardPassengers.DataBind()

                chkSelectAllOnward.Attributes.Add("onclick", "javascript:CheckOrUncheckAllGrids('" + chkSelectAllOnward.ClientID + "','" + gdvOnwardPassengers.ClientID + "')")


            End If

        Catch ex As Exception
            ResponseData.TransRemarks = ex.Message & "-" & ex.StackTrace
            ResponseData.TransStatus = True
            ResponseData.TransCode = "1111"
            LogError(Reflection.MethodBase.GetCurrentMethod.DeclaringType.FullName, Reflection.MethodBase.GetCurrentMethod.Name, ex.Message & "-" & ex.StackTrace)
        End Try
    End Sub
    Protected Sub gdvOnwardPassengers_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

        Dim gdvOnwardPassengers As GridView = Nothing
        Dim chkCancelOnwardPax As CheckBox = Nothing
        Try
            gdvOnwardPassengers = CType(sender, GridView)
            If e.Row.RowType = DataControlRowType.Header Then
                chkCancelOnwardPaxChildHeader = CType(e.Row.FindControl("chkCancelOnwardPaxChildHeader"), CheckBox)
                chkCancelOnwardPaxChildHeader.Attributes.Add("onclick", "javascript:CheckOrUnCheckAllChildGridCheckBoxes('" + chkCancelOnwardPaxChildHeader.ClientID + "','" + gdvOnwardPassengers.ClientID + "')")

            ElseIf e.Row.RowType = DataControlRowType.DataRow Then
                chkCancelOnwardPax = CType(e.Row.FindControl("chkCancelOnwardPax"), CheckBox)
                chkCancelOnwardPax.Attributes.Add("onclick", "javascript:ResetAllHeaderCheckBoxes('" + chkCancelOnwardPax.ClientID + "','" + chkCancelOnwardPaxChildHeader.ClientID + "','" + chkSelectAllOnward.ClientID + "')")
            End If


        Catch ex As Exception
            ResponseData.TransRemarks = ex.Message & "-" & ex.StackTrace
            ResponseData.TransStatus = True
            ResponseData.TransCode = "1111"
            LogError(Reflection.MethodBase.GetCurrentMethod.DeclaringType.FullName, Reflection.MethodBase.GetCurrentMethod.Name, ex.Message & "-" & ex.StackTrace)
        End Try
    End Sub

    Protected Sub gdvReturnPassengers_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)

        Dim gdvReturnPassengers As GridView = Nothing
        Dim chkCancelReturnPax As CheckBox = Nothing
        Try
            gdvReturnPassengers = CType(sender, GridView)
            If e.Row.RowType = DataControlRowType.Header Then
                chkCancelReturnPaxChildHeader = CType(e.Row.FindControl("chkCancelReturnPaxChildHeader"), CheckBox)
                chkCancelReturnPaxChildHeader.Attributes.Add("onclick", "javascript:CheckOrUnCheckAllChildGridCheckBoxes('" + chkCancelReturnPaxChildHeader.ClientID + "','" + gdvReturnPassengers.ClientID + "')")
            ElseIf e.Row.RowType = DataControlRowType.DataRow Then
                chkCancelReturnPax = CType(e.Row.FindControl("chkCancelReturnPax"), CheckBox)
                chkCancelReturnPax.Attributes.Add("onclick", "javascript:ResetAllHeaderCheckBoxes('" + chkCancelReturnPax.ClientID + "','" + chkCancelReturnPaxChildHeader.ClientID + "','" + chkSelectAllReturn.ClientID + "')")

            End If


        Catch ex As Exception
            ResponseData.TransRemarks = ex.Message & "-" & ex.StackTrace
            ResponseData.TransStatus = True
            ResponseData.TransCode = "1111"
            LogError(Reflection.MethodBase.GetCurrentMethod.DeclaringType.FullName, Reflection.MethodBase.GetCurrentMethod.Name, ex.Message & "-" & ex.StackTrace)
        End Try
    End Sub



Javascript Code
-----------------

function CheckOrUnCheckAllChildGridCheckBoxes(chkGridViewHeader, childGridView) {
    try {

        //get reference of GridView control

        var chkHeader = document.getElementById(chkGridViewHeader);
        var gridview = document.getElementById(childGridView);
       

        

        //variable to contain the cell of the gridview
        var cell;

        if (gridview.rows.length > 0) {
            //loop starts from 1. rows[0] points to the header.
            for (i = 1; i < gridview.rows.length; i++) {
                //get the reference of first column
                cell = gridview.rows[i].cells[2];

                //loop according to the number of childNodes in the cell
                for (j = 0; j < cell.childNodes.length; j++) {
                    //if childNode type is CheckBox                 
                    if (cell.childNodes[j].type == "checkbox") {
                        //assign the status of the Select All checkbox to the cell checkbox within the gridview
                        cell.childNodes[j].checked = chkHeader.checked;
                    }
                }



            }
        }

    }
    catch (err) {

    }

}


function CheckOrUncheckAllGrids(chkSectorHeader, lastChildGridView) 
{

    var chkHeader = document.getElementById(chkSectorHeader);
    var childGridView = document.getElementById(lastChildGridView);
    

   

    var childGridViewID = childGridView.id;
    var id = childGridViewID.split("_");
    var gridViewIdCommonNamePart = id[0] + "_" + id[1];
    var noOfChildrenGridViews = parseInt(id[2]);

    for (gridViewCounter = 0; gridViewCounter <= noOfChildrenGridViews; gridViewCounter++) {
        var gridview = document.getElementById(gridViewIdCommonNamePart + "_" + gridViewCounter);


        //variable to contain the cell of the gridview
        var cell;

        if (gridview.rows.length > 0) {
            //loop starts from 1. rows[0] points to the header.
            for (i = 0; i < gridview.rows.length; i++) {
                //get the reference of first column
                cell = gridview.rows[i].cells[2];

                //loop according to the number of childNodes in the cell
                for (j = 0; j < cell.childNodes.length; j++) {
                    //if childNode type is CheckBox                 
                    if (cell.childNodes[j].type == "checkbox") {
                        //assign the status of the Select All checkbox to the cell checkbox within the gridview
                        cell.childNodes[j].checked = chkHeader.checked;
                    }
                }
            }
        }

    }
}


function CheckOrUncheckAll(chkHeader) {
    var chkCancelItinerary = document.getElementById(chkHeader);
    var frm = document.forms[0];

    for (i = 0; i < frm.elements.length; i++) {
        if (frm.elements[i].type == "checkbox") {
            frm.elements[i].checked = chkCancelItinerary.checked;
        }
    }
}



0 comments: