hi dharmendr sir,
when i click on viewdetail then model with gridview is shown but when i click on x button to close model and populate the chart again then its not closed but chart is shown beside the model. i tried everyn thing but in vein plzz help me sir. here is console error
Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') at HTMLDocument.<anonymous> ()
3
Close button clicked dynamically
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="ganttchart.aspx.cs" Inherits="FlightOperationsSystem.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<style>
.top{
max-height: 1000px; /* Limit height to 400px */
overflow-y: auto; /* Enable vertical scrolling */
overflow-x: auto; /* Enable horizontal scrolling */
border: 1px solid #ccc; /* Optional border for clarity */
width: 100%;
justify-content: center;
}
/* Center the container */
#registration-form-container {
display: flex;
justify-content: center;
align-items:center;
height: 18vh; /* Full viewport height */
background-color: #f8fafc; /* Light background */
margin-top:10px;
}
/* Styling for the form container */
.report-container {
padding-top:10px;
padding-bottom: 20px;
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 10px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
font-family: 'Sofia Sans Condensed', sans-serif;
width: 75%;
padding-left:35px;
padding-right:-5px;
justify-content: center;
align-items:center;
}
/* Align inputs in a row */
.row {
display: flex;
align-items: center;
justify-content: space-between;
gap: -2px !important; /* Space between elements */
flex-wrap: wrap; /* Wrap elements if screen is small */
padding-top:-20px;
margin-right:-95px; }
/* Input group styling */
.input-group {
flex:1;
min-width:200px;
}
/* Label styling */
.label {
margin-bottom: 5px;
font-weight: bold;
color: black;
font-family: 'Sofia Sans Condensed', sans-serif;
}
/* Input styling */
.input {
width: 240px; /* Adjust width */
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px !important;
font-family: 'Sofia Sans Condensed', sans-serif;
width:450px;
}
/* Button styling */
.btn {
font-weight: bold;
cursor: pointer;
font-family: 'Sofia Sans Condensed', sans-serif;
background-color: #ffa726;
color: white;
border: none;
font-weight: bold;
padding: 12px 20px;
width:180px;
border-radius: 10px !important;
font-size: 16px;
max-width: 200px;
margin-top: 31px;
height:45px;
}
/* Button hover effect */
.btn:hover {
background-color:#ffa726;
}
/* Details link styling */
.view-details {
text-align: right;
/* margin-bottom: 5px;*/
color: #002058;
padding-right: 50px;
padding-top:10px;
}
.view-details a {
color: #002058;
text-decoration: none;
}
.view-details a:hover {
text-decoration: underline;
}
/* Modal container styling */
.modal {
position: fixed !important;
width: 100% !important;
height: 100%;
overflow: auto !important;
background-color: rgba(0, 0, 0, 0.4) !important;
z-index: 1000; /* Ensure modal is on top */
display: none; /* Hidden by default */
padding-top: 50px !important;
}
/* Modal content styling */
.modal-content {
background-color: #ffffff;
margin: 5% 17%;
padding: 20px;
border: 1px solid #ddd;
border-radius: 10px; /* Rounded edges */
width: 70%;
font-family: 'Sofia Sans Condensed', sans-serif;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
/* Close button styling */
.close {
color: #888;
float:right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* GridView styling */
/* Modal-specific button styling */
.modal-submit-btn {
background-color: #ffa726;
color: white;
font-weight: bold;
padding: 12px 20px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
float: right;
margin-top: 20px;
}
.modal-submit-btn:hover {
background-color: #ff9800; /* Slightly darker hover */
}
.gridview {
width: 100%;
border-collapse: collapse;
table-layout: auto;
font-family: Roboto;
text-underline-position: from-font;
text-decoration-skip-ink: none;
font-family: Roboto;
border: none;
margin-top: -10px;
}
/* Header styling */
.gridview th {
background-color: #3989BA;
/* Blue background */
color: white; /* White text */
text-align: left;
border: none;
white-space: nowrap;
font-family: Roboto;
font-size: 18px;
font-weight: 500;
line-height: 21.09px;
text-underline-position: from-font;
text-decoration-skip-ink: none;
height: 50px;
padding-top:10px;
}
.gridview .id-column {
font-family: Roboto;
font-size: 14px;
font-weight: 400;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #666666;
}
/* Style for Name column */
.gridview .name-column {
color: #3079AA; /* Set text color */
font-weight: bold; /* Optional: Make it bold */
font-family: Roboto;
text-underline-position: from-font;
text-decoration-skip-ink: none;
font-family: Roboto;
font-size: 14px;
font-weight: 400;
line-height: 16.41px;
text-underline-position: from-font;
text-decoration-skip-ink: none;
}
.custom-gridview .pa-column {
font-family: Roboto;
font-size: 14px;
font-weight: 700;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #002058;
}
.custom-gridview .role-column {
font-family: Roboto;
font-size: 14px;
font-weight: 400;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #666666;
}
.custom-gridview .dept-column {
font-family: Roboto;
font-size: 14px;
font-weight: 400;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #000000;
}
.custom-gridview .station-column {
font-family: Roboto;
font-size: 14px;
font-weight: 400;
text-underline-position: from-font;
text-decoration-skip-ink: none;
color: #000000;
}
/* Row styling */
.gridview tr {
background-color: white;
transition: background-color 0.2s ease-in-out;
font-family: Roboto;
height: 36px;
font-family: Roboto;
font-size: 14px;
font-weight: 400;
line-height: 16.41px;
text-align: left;
text-underline-position: from-font;
text-decoration-skip-ink: none;
border-bottom: 1px solid #DBDBDB;
}
/* Alternating row colors */
.gridview tr:nth-child(even) {
background-color: #F9F9F9;
}
/* Row hover effect */
.gridview tr:hover {
background-color: #f1f5fd; /* Light blue on hover */
}
.gridview th:nth-child(1),
.gridview td:nth-child(1) {
padding-left: 20px;
}
/*.gridview th:nth-child(2),
.gridview td:nth-child(2) {
width: 5%;
}
.gridview th:nth-child(3),
.gridview td:nth-child(3) {
width: 10%;
}
*/
/* Cell styling */
.gridview td {
padding: 1px;
text-align: left;
border: none;
font-family: Roboto;
}
/* Checkbox */
.gridview td input[type="checkbox"] {
transform: scale(1.2); /* Larger size */
font-family: Roboto;
}
.gridview tr input[type="checkbox"] {
transform: scale(1.2); /* Larger size */
}
/* Buttons */
.gridview .btn {
border: none;
padding: 0;
font-size: 16px;
cursor: pointer;
font-family: Roboto;
}
.gridview .btn-link {
text-decoration: none;
padding: 5px;
font-family: Roboto;
}
.gridview .btn-link:hover {
opacity: 0.7;
}
/* Action icons */
.gridview .text-danger {
color: #666666;
font-family: Roboto;
}
.gridview .text-warning {
color: #f39c12; /* Yellow for edit */
font-family: Roboto;
}
.sentence {
display: flex;
align-items: center;
margin-top: 10px;
}
.sentence .label {
flex:1;
margin-right: 5px;
}
.bottom{
margin-top:30px;
margin-left:-40px;
}
.scrollable-gridview {
/* Use full container width */
}
#departmentChartsContainer {
/* white-space: nowrap;*/
margin-left:100px;
font-family: 'Sofia Sans Condensed', sans-serif;
overflow-x: hidden;
overflow-y: hidden;
width:100%;
}
/*#departmentChartsContainer > div {position:absolute !important; }*/
</style>
<%-- <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js"></script>--%>
<%-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.min.js"></script>--%>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;700&display=swap" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
google.charts.load("current", { packages: ["timeline"] });
function parseTimeString(timeStr) {
var parts = timeStr.split(':');
var hours = parseInt(parts[0], 10);
var minutes = parseInt(parts[1], 10);
return { hours: hours, minutes: minutes };
}
function drawChart(data, chartDivId) {
var container = document.getElementById(chartDivId);
var chart = new google.visualization.Timeline(container);
var dataTable = new google.visualization.DataTable();
dataTable.addColumn({ type: 'string', id: 'Role' });
dataTable.addColumn({ type: 'string', id: 'Name' });
dataTable.addColumn({ type: 'date', id: 'Start' });
dataTable.addColumn({ type: 'date', id: 'End' });
for (var departmentName in data) {
if (data.hasOwnProperty(departmentName)) {
data[departmentName].forEach(function (event) {
var startTime = parseTimeString(event[2]);
var endTime = parseTimeString(event[3]);
var start = new Date(2000, 0, 1, startTime.hours, startTime.minutes);
var end = new Date(2000, 0, 1, endTime.hours, endTime.minutes);
if (endTime.hours < startTime.hours || (endTime.hours === startTime.hours && endTime.minutes < startTime.minutes)) {
end.setDate(end.getDate() + 1); // Add a day if end time is earlier than start time
}
dataTable.addRows([[departmentName, event[1], start, end]]);
});
}
}
var options = {
timeline: {
groupByRowLabel: false,
colorByRowLabel: true,
rowLabelStyle: { fontName: 'Sofia Sans Condensed', fontSize: 10, color: '#000000', bold: true },
barLabelStyle: { fontSize: 10, bold: true, fontName: 'Sofia Sans Condensed', color: '#000000' },
avoidOverlappingGridLines: true,
},
alternatingRowStyle: false,
backgroundColor: '#ffd',
height: 2000,
width:1500
};
chart.draw(dataTable, options);
}
$(document).ready(function () {
$(document).on("click", ".close", function () {
console.log("Close button clicked dynamically"); // Debugging
$("#gridModal").css("display", "none");
$('#departmentChartsContainer').show();
PopulateChart();
});
// Modal handling
$(".view-detail").click(function () {
$("#gridModal").css("display", "block");
$('#departmentChartsContainer').hide();
});
//$(".close").click(function () {
// console.log("Close button clicked"); // Debugging
// $("#gridModal").css("display", "block"); // Hide the modal
// $('#departmentChartsContainer').show(); // Show the chart container
// PopulateChart(); // Re-render the chart
//});
});
function PopulateChart() {
//var flightNo = $("#flightNo").val();
//var flightDate = $("#flightDate").val();
//var flightType = $("#flightType").val();
var flightNo = document.getElementById('<%= flightNo.ClientID %>').value;
var flightDate = document.getElementById('<%= flightDate.ClientID %>').value;
var flightType = document.getElementById('<%= flightType.ClientID %>').value;
//drawChart({ }, "departmentChartsContainer"); // Draw an empty chart initially
$.ajax({
type: "POST",
url: "ganttchart.aspx/GetChartData",
data: JSON.stringify({ flightNo: flightNo, flightDate: flightDate, flightType: flightType }),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
drawChart(response.d, "departmentChartsContainer");
$('body').css('overflow', 'hidden'); // Hide scroll bars
// Show the sentence
$('.sentence').show();
},
complete: function () {
$('body').css('overflow', 'hidden'); // Revert back to original state
},
error: function (response) {
alert(response.responseText);
}
});
}
</script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server" >
<div class="top">
<div id="registration-form-container">
<div class="report-container">
<div class="view-details">
<%--<a href="details.aspx">View Detail</a>--%>
<asp:LinkButton ID="lnkSearch" runat="server" class="view-detail" OnClick="lnkSearch_Click">View Detail</asp:LinkButton>
</div>
<div class="row">
<div class="input-group">
<asp:Label ID="Label1" runat="server" Text="Flight No" CssClass="label"></asp:Label>
<asp:TextBox ID="flightNo" runat="server" CssClass="input" placeholder =" PA-111"></asp:TextBox>
</div>
<div class="input-group">
<asp:Label ID="Label2" runat="server" Text="Flight Date " CssClass="label"></asp:Label>
<asp:TextBox ID="flightDate" runat="server" CssClass="input" type ="Date"></asp:TextBox>
</div>
<div class="input-group">
<asp:Label ID="Label3" runat="server" Text="Flight Type" CssClass="label"></asp:Label>
<asp:DropDownList ID="flightType" runat="server" CssClass="input" Style="color: Black; font-size: 20px;">
<asp:ListItem Text="Arrival" />
<asp:ListItem Text="Departure" />
</asp:DropDownList>
</div>
<!-- Add other input elements here -->
<div class="input-group">
<asp:Label ID="Label4" runat="server" CssClass="label"></asp:Label>
<asp:Button ID="btnView" runat="server" Text="Submit" class="btn" OnClick="btnView_Click1" />
</div>
</div>
<div class="row sentence" style="display: none;" runat="server" id="dvLabels">
<asp:Label ID="Label5" runat="server" Text="Total Number of PAX: " CssClass="label" Style="color: red;"></asp:Label>
<asp:Label ID="lblpax" runat="server" CssClass="label" Style="font-weight: bold;"></asp:Label>
<asp:Label ID="Label6" runat="server" Text=" Total Number of Wheel Chairs:" CssClass="label" Style="color: red;"></asp:Label>
<asp:Label ID="lblwheel" runat="server" CssClass="label" Style="font-weight: bold;"></asp:Label>
</div>
</div>
</div>
<div class="bottom" >
<!-- Container for department Gantt charts -->
<div id="departmentChartsContainer" ></div>
</div>
</div>
<div id="gridModal" class="modal" runat="server">
<div class="modal-content">
<span class="close">×</span>
<h2>Details</h2>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" CssClass="gridview" />
</div>
</div>
</asp:Content>
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Script.Services;
using System.Web.Services;
using System.Web.UI;
using System.Web.UI.WebControls;
namespace FlightOperationsSystem
{
public partial class WebForm1 : System.Web.UI.Page
{
String cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
protected void Page_Load(object sender, EventArgs e)
{
}
[WebMethod]
public static Dictionary<string, List<object[]>> GetChartData(string flightNo, string flightDate, string flightType)
{
string conString = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
string query = "SELECT Department.DeptName, ActionID, eventname, starttime, CASE WHEN endtime IS NULL OR endtime = '' THEN starttime ELSE endtime END AS endtime FROM events INNER JOIN Assign ON Assign.eventid = events.eventid INNER JOIN Department ON Department.DeptID = Assign.DeptID INNER JOIN Action ON Assign.AssignID = Action.AssignID INNER JOIN flights ON flights.flightid = Action.flightid WHERE flights.flightno = @flightNo AND flights.flightdate = @flightDate AND events.eventtype = @flightType AND events.eventgroup = 'Time'; ";
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@flightNo", flightNo);
//string flightDateStr = flightDate;
DateTime selectedDate = DateTime.Parse(flightDate);
cmd.Parameters.AddWithValue("@flightDate", selectedDate);
cmd.Parameters.AddWithValue("@flightType", flightType);
con.Open();
SqlDataReader reader = cmd.ExecuteReader();
Dictionary<string, List<object[]>> departmentChartData = new Dictionary<string, List<object[]>>();
while (reader.Read())
{
string departmentName = reader["DeptName"].ToString();
if (!departmentChartData.ContainsKey(departmentName))
{
departmentChartData[departmentName] = new List<object[]>();
}
departmentChartData[departmentName].Add(new object[]
{
reader["eventname"],
reader["eventname"] ,
reader["starttime"].ToString(),
reader["endtime"].ToString()
});
}
return departmentChartData;
}
}
}
protected void btnView_Click1(object sender, EventArgs e)
{
string query = @"SELECT Action.starttime
FROM events
INNER JOIN Assign ON Assign.eventid = events.eventid
INNER JOIN Department ON Department.DeptID = Assign.DeptID
INNER JOIN Action ON Assign.AssignID = Action.AssignID
INNER JOIN flights ON flights.flightid = Action.flightid
INNER JOIN Users ON Users.UserID = Action.UserID
INNER JOIN Station ON Users.StationID = Station.StationID
WHERE flightno = @flightNo
AND CONVERT(date, flightdate) = @flightDate
AND eventtype = @flightType
AND eventgroup = 'Text'
AND eventname = 'Total Wheel Chair'
AND Department.DeptName = 'Traffic'";
using (SqlConnection con = new SqlConnection(cs))
{
using (SqlCommand cmd = new SqlCommand(query, con))
{
cmd.Parameters.AddWithValue("@flightNo", flightNo.Text);
cmd.Parameters.AddWithValue("@flightDate", flightDate.Text);
cmd.Parameters.AddWithValue("@flightType", flightType.SelectedValue);
try
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
lblwheel.Text = dr.GetValue(0).ToString();
}
else
{
lblwheel.Text = "No data found";
}
dr.Close();
}
catch (Exception ex)
{
lblwheel.Text = "Error: " + ex.Message;
}
}
}
string query1 = @"SELECT Action.starttime
FROM events
INNER JOIN Assign ON Assign.eventid = events.eventid
INNER JOIN Department ON Department.DeptID = Assign.DeptID
INNER JOIN Action ON Assign.AssignID = Action.AssignID
INNER JOIN flights ON flights.flightid = Action.flightid
INNER JOIN Users ON Users.UserID = Action.UserID
INNER JOIN Station ON Users.StationID = Station.StationID
WHERE flightno = @flightNo
AND CONVERT(date, flightdate) = @flightDate
AND eventtype = @flightType
AND eventgroup = 'Text'
AND eventname = 'PAX Load'
AND Department.DeptName = 'Traffic'";
using (SqlConnection con = new SqlConnection(cs))
{
using (SqlCommand cmd = new SqlCommand(query1, con))
{
cmd.Parameters.AddWithValue("@flightNo", flightNo.Text);
cmd.Parameters.AddWithValue("@flightDate", flightDate.Text);
cmd.Parameters.AddWithValue("@flightType", flightType.SelectedValue);
try
{
con.Open();
SqlDataReader dr = cmd.ExecuteReader();
if (dr.Read())
{
lblpax.Text = dr.GetValue(0).ToString();
}
else
{
lblpax.Text = "No data found";
}
dr.Close();
}
catch (Exception ex)
{
lblwheel.Text = "Error: " + ex.Message;
}
}
}
if (gridModal.Style["display"] == "block")
{
gridModal.Style["display"] = "none";
}
ClientScript.RegisterStartupScript(this.GetType(), "PopulateChart", "PopulateChart();", true);
}
protected void lnkSearch_Click(object sender, EventArgs e)
{
GridView1.DataSource = null;
GridView1.DataBind();
BindGridView();
//ClientScript.RegisterStartupScript(this.GetType(), "Popup", "<script>openModal();</script>");
//ClientScript.RegisterStartupScript(this.GetType(), "PopulateChart", "PopulateChart();", true);
}
protected void BindGridView()
{
using (SqlConnection con = new SqlConnection(cs))
{
con.Open();
SqlCommand cmd = new SqlCommand("SELECT events.eventname AS 'Task', Action.starttime AS 'Value', Department.DeptName AS 'Department' FROM events INNER JOIN Assign ON Assign.eventid = events.eventid INNER JOIN Department ON Department.DeptID = Assign.DeptID INNER JOIN Action ON Assign.AssignID = Action.AssignID INNER JOIN flights ON flights.flightid = Action.flightid INNER JOIN Users ON Users.UserID = Action.UserID INNER JOIN Station ON Users.StationID = Station.StationID WHERE flights.flightno = '" + flightNo.Text + "' AND CONVERT(date, flights.flightdate) = '" + flightDate.Text + "' AND events.eventgroup = 'Text' AND events.eventtype = '" + flightType.Text + "' ORDER BY Department ASC ", con);
SqlDataReader dr = cmd.ExecuteReader();
if (dr.HasRows == true)
{
GridView1.DataSource = dr;
GridView1.DataBind();
con.Close();
}
}
gridModal.Style["display"] = "block";
// dvLabels.Attributes.Remove("style");
}
}
}
