hi dharmendr sir,
when i click on view detail button popup screen window appear. after enter flight no, date and type and click on submit button then GridView sould appear on this popup window. but GridView is not showing.
i dont kown why. when i click on button nothing appear.
i want to show timeline on main page and gridview on popup window according to provided flight no date and type.
please help me sir
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Mergegraph.aspx.cs" Inherits="GANTTCHART.Mergegraph" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<!-- Include Google Font link -->
<link href="https://fonts.googleapis.com/css2?family=Sofia+Sans+Condensed:wght@400;700&display=swap" rel="stylesheet"/>
<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>
<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: 'Department' });
dataTable.addColumn({ type: 'string', id: 'Event' });
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: 14, bold: true, fontName: 'Sofia Sans Condensed', color: '#000000' },
avoidOverlappingGridLines: true,
},
alternatingRowStyle: false,
backgroundColor: '#ffd',
height: 2000
};
chart.draw(dataTable, options);
}
$(document).ready(function () {
$("#btnView").click(function () {
var flightNo = $("#flightNo").val();
var flightDate = $("#flightDate").val();
var flightType = $("#flightType").val();
$.ajax({
type: "POST",
url: "Mergegraph.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', 'auto'); // Revert back to original state
},
error: function (response) {
alert(response.responseText);
}
});
return false;
});
// Modal handling
$(".view-detail").click(function () {
$("#myModal").css("display", "block");
});
$(".close").click(function () {
$("#myModal").css("display", "none");
});
$(window).click(function (event) {
if (event.target.id == "myModal") {
$("#myModal").css("display", "none");
}
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="registration-form-container">
<div id="registration-form">
<legend>Clockify report!</legend>
<a href="#" class="view-detail">View Detail</a>
<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"></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:Button ID="btnView" runat="server" Text="Submit" class="btn" />
</div>
</div>
<div class="row sentence" style="display: none;">
<asp:Label ID="Label4" runat="server" Text="Total Number of PAX: " CssClass="label" Style="color: red;"></asp:Label>
<asp:Label ID="lblpax" runat="server" Text="10:00" CssClass="label" Style="font-weight: bold;"></asp:Label>
<asp:Label ID="Label5" runat="server" Text=" Total Number of Wheel Chairs:" CssClass="label" Style="color: red;"></asp:Label>
<asp:Label ID="lblwheel" runat="server" Text="12:00" CssClass="label" Style="font-weight: bold;"></asp:Label>
</div>
</div>
</div>
<!-- Container for department Gantt charts -->
<div id="departmentChartsContainer"></div>
<!-- Modal -->
<div id="myModal" class="modal">
<div class="modal-content">
<div id="registration-form-container">
<div id="registration-form">
<legend>Clockify report!</legend>
<a href="#" class="view-detail">View Detail</a>
<div class="row">
<div class="input-group">
<asp:Label ID="Label6" runat="server" Text="Flight No" CssClass="label"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server" CssClass="input"></asp:TextBox>
</div>
<div class="input-group">
<asp:Label ID="Label7" runat="server" Text="Flight Date " CssClass="label"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server" CssClass="input" type="Date" ></asp:TextBox>
</div>
<div class="input-group">
<asp:Label ID="Label8" runat="server" Text="Flight Type" CssClass="label"></asp:Label>
<asp:DropDownList ID="DropDownList1" 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:Button ID="Button1" runat="server" Text="Submit" class="btn" Onclick="btnView_Click" />
</div>
</div>
</div>
</div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="true" />
</div>
</div>
</form>
</body>
</html>
namespace GANTTCHART
{
public partial class Mergegraph : System.Web.UI.Page
{
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 ISNULL(endtime, '') = '' THEN CONVERT(varchar(5), DATEADD(MINUTE, 1, CONVERT(time, 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 CONVERT(date, 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;
}
}
}
String cs = ConfigurationManager.ConnectionStrings["dbcs"].ConnectionString;
protected void btnView_Click(object sender, EventArgs e)
{
using (SqlConnection con = new SqlConnection(cs))
{
con.Open();
SqlCommand cmd = new SqlCommand("SELECT events.eventname AS 'Task', Action.starttime AS 'Value', Users.Name AS 'Written By', Users.PA# AS 'PA-num', Department.DeptName AS 'Department', Station.StationName AS 'Station' 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();
}
}
}
}
}
