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
<%@ Page Title="" Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="ganttchart.aspx.cs" Inherits="FlightOperationsSystem.WebForm1" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<%-- <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();
});
});
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>
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");
}
}
}
