Category / Section
How to work with Wizard component using Tab control ?
8 mins read
Wizard component using Tab control
Customize the Tab component like Wizards. In Tab control used 4-tab items are used and in each tab, there is a textbox and button. The button is used for navigation and will be enabled only if all textboxes are filled. You can see the difference between the tabs that are opened, active or in disabled state using the Tab header.
Find the codes for client-side web component rendering.
aspx
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<span class="sbtxt">Ticket Pundit</span>
<ej:Tab ID="wizardTab" runat="server" Width="800px" HeightAdjustMode="Auto">
<Items>
<ej:TabItem ID="Search" Text="Search" ImageCssClass="e-icon e-wiz1">
<ContentSection>
<div class="tab-title">
<h4>SEARCH TRAIN
</h4>
</div>
<div class="frame-tab">
<table>
<tr>
<td class="wizAlign">From
</td>
<td class="wizAlign" style="padding-left: 27px;">To
</td>
</tr>
<tr>
<td class="wizAlign">
<ej:Autocomplete ID="startpoint" FilterType="StartsWith" HighlightSearch="true" runat="server" Width="235px" DataTextField="Text"
DataUniqueKeyField="ID" /> // render autocomplete component
</td>
<td class="wizAlign" style="padding-left: 27px;">
<ej:Autocomplete ID="endpoint" runat="server" FilterType="StartsWith" HighlightSearch="true" Width="235px" DataTextField="Text"
DataUniqueKeyField="ID" />
</td>
</tr>
<tr>
<td class="wizAlign">Journey date
</td>
<td class="wizAlign" style="padding-left: 27px;">Ticket Type
</td>
</tr>
<tr>
<td class="wizAlign">
<ej:DatePicker ID="journeydate" runat="server" Width="235px">
</ej:DatePicker>
</td>
<td class="wizAlign" style="padding-left: 27px;">
<ej:DropDownList ID="tickettype" runat="server" Width="235px" WatermarkText="Select ticket type">
<Items>
<ej:DropDownListItem Text="First Class" Value="First Class"></ej:DropDownListItem>
<ej:DropDownListItem Text="Second Class" Value="Second Class"></ej:DropDownListItem>
<ej:DropDownListItem Text="Common Class" Value="Common Class"></ej:DropDownListItem>
<ej:DropDownListItem Text="Soft" Value="Soft"></ej:DropDownListItem>
</Items>
</ej:DropDownList>
</td>
</tr>
<tr>
<td class="wizAlign"><span id="tab1_err"></span>
</td>
<td class="wizAlign nextTab" style="margin-right: 5px;">
<ej:Button runat="server" ID="searchTrain" Type="Reset" Text="Go" Size="Small" ShowRoundedCorner="true" ClientSideOnClick="TabNavigations">
</ej:Button> // validation required and navigate to second tab item.
</td>
</tr>
</table>
</div>
</ContentSection>
</ej:TabItem>
<ej:TabItem ID="Train" Text="Train" ImageCssClass="e-icon e-wiz2">
<ContentSection>
<div class="tab-title1">
<h4>SELECT TRAIN
</h4>
</div>
<ej:Grid ID="TrainAvailability" runat="server">
<columns>
<ej:Column Field="TrainNo" HeaderText="Train No" Width="75" />
<ej:Column Field="TrainName" HeaderText="Train Name" Width="150" />
<ej:Column Field="Depature" HeaderText="Depature" Width="140" />
<ej:Column Field="Arrival" HeaderText="Arrival" Width="155" />
<ej:Column Field="Availability" HeaderText="Availability" Width="100" />
</columns>
<clientsideevents recordclick="selectedTrain" />
</ej:Grid> // select train in grid component.
<br />
<div style="height: 40px">
<div style="float: left; padding-left: 500px;">
<ej:Button runat="server" ID="gotosearch" Text="Back" Type="Reset" Size="Small" ShowRoundedCorner="true" ClientSideOnClick="TabNavigations">
</ej:Button>
</div>
<div style="float: right; width: 19%">
<ej:Button runat="server" ID="booktickets" Text="Continue" Type="Reset" Size="Small" ShowRoundedCorner="true" ClientSideOnClick="TabNavigations">
</ej:Button> // book the tickets and navigate next tab item for passenger details.
</div>
<span id="tab2_err" style="margin-left: 60px;"></span>
</div>
</ContentSection>
</ej:TabItem>
<ej:TabItem ID="Passenger" Text="Passenger" ImageCssClass="e-icon e-wiz3">
<ContentSection>
<div class="tab-title1">
<h4>PASSENGER DETAILS
</h4>
</div>
<div id="PassengersList">
<table id="Table1">
<colgroup>
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th>Name
</th>
<th>Age
</th>
<th>Gender
</th>
<th>Berth Preference
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<asp:TextBox ID="pass_name1" runat="server" Width="180px" Height="24px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="pass_age1" runat="server" Width="60px" Height="24px"></asp:TextBox>
</td>
<td>
<ej:DropDownList ID="pass_gender1" runat="server" DataIdField="ID" DataTextField="GText" Width="110px"></ej:DropDownList>
</td>
<td>
<ej:DropDownList ID="pass_berth1" runat="server" DataIdField="ID" DataTextField="BerthPref" Width="125px"></ej:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="pass_name2" runat="server" Width="180px" Height="24px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="pass_age2" runat="server" Width="60px" Height="24px"></asp:TextBox>
</td>
<td>
<ej:DropDownList ID="pass_gender2" runat="server" DataIdField="ID" DataTextField="GText" Width="110px"></ej:DropDownList>
</td>
<td>
<ej:DropDownList ID="pass_berth2" runat="server" DataIdField="ID" DataTextField="BerthPref" Width="125px"></ej:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="pass_name3" runat="server" Width="180px" Height="24px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="pass_age3" runat="server" Width="60px" Height="24px"></asp:TextBox>
</td>
<td>
<ej:DropDownList ID="pass_gender3" runat="server" DataIdField="ID" DataTextField="GText" Width="110px"></ej:DropDownList>
</td>
<td>
<ej:DropDownList ID="pass_berth3" runat="server" DataIdField="ID" DataTextField="BerthPref" Width="125px"></ej:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="pass_name4" runat="server" Width="180px" Height="24px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="pass_age4" runat="server" Width="60px" Height="24px"></asp:TextBox>
</td>
<td>
<ej:DropDownList ID="pass_gender4" runat="server" DataIdField="ID" DataTextField="GText" Width="110px"></ej:DropDownList>
</td>
<td>
<ej:DropDownList ID="pass_berth4" runat="server" DataIdField="ID" DataTextField="BerthPref" Width="125px"></ej:DropDownList>
</td>
</tr>
<tr>
<td>
<asp:TextBox ID="pass_name5" runat="server" Width="180px" Height="24px"></asp:TextBox>
</td>
<td>
<asp:TextBox ID="pass_age5" runat="server" Width="60px" Height="24px"></asp:TextBox>
</td>
<td>
<ej:DropDownList ID="pass_gender5" runat="server" Width="110px" DataIdField="ID" DataTextField="GText"></ej:DropDownList>
</td>
<td>
<ej:DropDownList ID="pass_berth5" runat="server" Width="125px" DataIdField="ID" DataTextField="BerthPref"></ej:DropDownList>
</td>
</tr>
</tbody>
</table>
</div>
<br />
<div style="height: 40px">
<div style="float: left; padding-left: 500px;">
<ej:Button runat="server" ID="gobacktobook" Text="Back" Type="Reset" Size="Small" ShowRoundedCorner="true" ClientSideOnClick="TabNavigations">
</ej:Button>
</div>
<div style="float: right; width: 19%">
<ej:Button runat="server" ID="confirmtickets" Text="Continue" Type="Reset" Size="Small" ShowRoundedCorner="true" ClientSideOnClick="TabNavigations">
</ej:Button> // confirm the ticket
</div>
<span id="tab3_err" style="margin-left: 60px;"></span>
</div>
</ContentSection>
</ej:TabItem>
<ej:TabItem ID="PaymentDetails" Text="Payment" ImageCssClass="e-icon e-wiz4">
<ContentSection>
<div class="tab-title1">
<h4>TICKET DETAILS
</h4>
</div>
<ej:Grid ID="TicketConfirmation" runat="server">
<columns>
<ej:Column Field="TrainNo" HeaderText="Train No" Width="75" />
<ej:Column Field="PassName" HeaderText="Name" Width="170" />
<ej:Column Field="Gender" HeaderText="Gender" Width="160" />
<ej:Column Field="CoachNo" HeaderText="Wagon" Width="165" />
<ej:Column Field="SeatNo" HeaderText="Seat No" Width="88" />
</columns>
</ej:Grid> // ticket details.
<br />
<div style="height: 40px">
<div style="float: left; padding-left: 500px;">
<ej:Button runat="server" ID="gobacktodetails" Text="Back" Type="Reset" Size="Small" ShowRoundedCorner="true" ClientSideOnClick="TabNavigations">
</ej:Button> //book the details.
</div>
<div style="float: right; width: 19%">
<ej:Button runat="server" ID="payment" Text="Pay" Size="Small" Type="Reset" ShowRoundedCorner="true" ClientSideOnClick="TabNavigations">
</ej:Button>
</div>
</div>
</ContentSection>
</ej:TabItem>
</Items>
</ej:Tab>
</asp:Content>
<asp:Content ContentPlaceHolderID="ScriptSection" ID="section2" runat="server">
<script src='<%= Page.ResolveClientUrl("Scripts/jsonTabWiz.min.js")%>' type="text/javascript"></script>
<script src='<%= Page.ResolveClientUrl("Scripts/TabWizard.js")%>' type="text/javascript"></script>
</asp:Content>
<asp:Content ID="section3" runat="server" ContentPlaceHolderID="StyleSection">
<link href="Content/TabWizard.css" rel="stylesheet" />
</asp:Content>
Find the following codes for server-side data-binding to dropdownlist and grid component.
aspx.cs
public partial class _Default : System.Web.UI.Page
{
List<TrainsList> trains = new List<TrainsList>();
protected void Page_Load(object sender, EventArgs e)
{
List<int> disableditem = new List<int>() { 1, 2, 3 };
this.journeydate.MinDate = DateTime.Now;
this.journeydate.MaxDate = DateTime.Now.AddDays(60);
this.wizardTab.DisabledItemIndex = disableditem;
this.startpoint.DataSource = new PlacesData().GetLocation().ToList();
this.endpoint.DataSource = new PlacesData().GetLocation().ToList();
this.pass_berth1.DataSource = new BerthDropDown().GetBerthList().ToList();
this.pass_berth2.DataSource = new BerthDropDown().GetBerthList().ToList();
this.pass_berth3.DataSource = new BerthDropDown().GetBerthList().ToList();
this.pass_berth4.DataSource = new BerthDropDown().GetBerthList().ToList();
this.pass_berth5.DataSource = new BerthDropDown().GetBerthList().ToList();
this.pass_gender1.DataSource = new GenDropDown().GetGenList().ToList();
this.pass_gender2.DataSource = new GenDropDown().GetGenList().ToList();
this.pass_gender3.DataSource = new GenDropDown().GetGenList().ToList();
this.pass_gender4.DataSource = new GenDropDown().GetGenList().ToList();
this.pass_gender5.DataSource = new GenDropDown().GetGenList().ToList();
BindDataSource();
}
private void BindDataSource()
{
trains.Add(new TrainsList("EN447", "JAN KIEPURA 2", "Amsterdam", "Warsaw", 4));
trains.Add(new TrainsList("EN447", "JAN KIEPURA 2", "Berlin", "Moscow", 23));
trains.Add(new TrainsList("EC41", "Berlin-Warszawa-Express", "Berlin", "Poznan", 65));
trains.Add(new TrainsList("EC41", "Berlin-Warszawa-Express", "Warsaw", "Berlin", 54));
trains.Add(new TrainsList("EC9242", "EC Dumas", "Milan", "Paris", 23));
trains.Add(new TrainsList("EC9242", "EC Dumas", "Milan", "Tonio", 53));
this.TrainAvailability.DataSource = trains;
this.TrainAvailability.DataBind();
}
[Serializable]
public class TrainsList
{
public TrainsList()
{
}
public TrainsList(string TrainNo, string TrainName, string Depature, string Arrival,
int Availability)
{
this.TrainNo = TrainNo;
this.TrainName = TrainName;
this.Depature = Depature;
this.Arrival = Arrival;
this.Availability = Availability;
}
public string TrainNo { get; set; }
public string TrainName { get; set; }
public string Depature { get; set; }
public string Arrival { get; set; }
public int Availability { get; set; }
}
[Serializable]
public class PlacesData
{
public PlacesData()
{
}
public PlacesData(int _id, string _text)
{
this.ID = _id;
this.Text = _text;
}
public int ID
{
get;
set;
}
public string Text
{
get;
set;
}
public List<PlacesData> GetLocation()
{
List<PlacesData> data = new List<PlacesData>();
data.Add(new PlacesData(1, "Amsterdam"));
data.Add(new PlacesData(2, "Warsaw"));
data.Add(new PlacesData(3, "Emmerich am Rhein"));
data.Add(new PlacesData(4, "Berlin"));
data.Add(new PlacesData(5, "Konin"));
return data;
}
}
public class GenDropDown
{
public GenDropDown(int _id, string _text)
{
this.ID = _id;
this.GText = _text;
}
public GenDropDown()
{
}
public int ID
{
get;
set;
}
public string GText { get; set; }
public List<GenDropDown> GetGenList()
{
List<GenDropDown> gdata = new List<GenDropDown>();
gdata.Add(new GenDropDown(1, "Male"));
gdata.Add(new GenDropDown(2, "Female"));
return gdata;
}
}
public class BerthDropDown
{
public BerthDropDown(int _id, string _text)
{
this.ID = _id;
this.BerthPref = _text;
}
public BerthDropDown()
{
}
public int ID
{
get;
set;
}
public string BerthPref { get; set; }
public List<BerthDropDown> GetBerthList()
{
List<BerthDropDown> bdata = new List<BerthDropDown>();
bdata.Add(new BerthDropDown(1, "Upper"));
bdata.Add(new BerthDropDown(2, "Lower"));
bdata.Add(new BerthDropDown(3, "Window"));
bdata.Add(new BerthDropDown(4, "Middle"));
bdata.Add(new BerthDropDown(5, "Aisel"));
return bdata;
}
}
}
Find the codes for input form validation and navigate to another tab. Check before navigating to another tab arrival and departure points in tab item. Once moved to second tab item choose the train in grid component based availability. Navigate to third tab item fill passenger details and continue to last tab item for payment details.
Js
var tabctrl, trainchosen,data, themechange;
$(function () {
$("#ejdarktext input, #ejlighttext input").change(function () {
if (((ej.browserInfo().name == "msie" && ej.browserInfo().version != "8.0") && ($(".darktheme").length != 0)) || ((ej.browserInfo().name == "msie" && ej.browserInfo().version == "8.0") && ($(".darktheme").length == 0)) || (ej.browserInfo().name != "msie" && $(".darktheme").length == 1)) {
$(".frame-tab").css("background-color", "#1f1f1f");
$(".frame-tab").css("border", "1px solid #5e5f5e");
$(".frame-tab").css("color", "#8f8f8f");
$("table#Table1, #Table1 th, #Table1 td").css("background-color", "#1f1f1f");
$("table#Table1, #Table1 th, #Table1 td").css("border", "1px solid #5e5f5e");
$("table#Table1, #Table1 th, #Table1 td").css("color", "#fff");
$("#Table1 #MainContent_wizardTab_ctl02_pass_age1,#Table1 #MainContent_wizardTab_ctl02_pass_age2,#Table1 #MainContent_wizardTab_ctl02_pass_age3,#Table1 #MainContent_wizardTab_ctl02_pass_age4,#Table1 #MainContent_wizardTab_ctl02_pass_age5,#Table1 #MainContent_wizardTab_ctl02_pass_name1,#Table1 #MainContent_wizardTab_ctl02_pass_name2,#Table1 #MainContent_wizardTab_ctl02_pass_name3,#Table1 #MainContent_wizardTab_ctl02_pass_name4,#Table1 #MainContent_wizardTab_ctl02_pass_name5").css("background-color", "#000");
$("#Table1 #MainContent_wizardTab_ctl02_pass_age1,#Table1 #MainContent_wizardTab_ctl02_pass_age2,#Table1 #MainContent_wizardTab_ctl02_pass_age3,#Table1 #MainContent_wizardTab_ctl02_pass_age4,#Table1 #MainContent_wizardTab_ctl02_pass_age5,#Table1 #MainContent_wizardTab_ctl02_pass_name1,#Table1 #MainContent_wizardTab_ctl02_pass_name2,#Table1 #MainContent_wizardTab_ctl02_pass_name3,#Table1 #MainContent_wizardTab_ctl02_pass_name4,#Table1 #MainContent_wizardTab_ctl02_pass_name5").css("border", "1px solid #5e5f5e");
$("#Table1 #MainContent_wizardTab_ctl02_pass_age1,#Table1 #MainContent_wizardTab_ctl02_pass_age2,#Table1 #MainContent_wizardTab_ctl02_pass_age3,#Table1 #MainContent_wizardTab_ctl02_pass_age4,#Table1 #MainContent_wizardTab_ctl02_pass_age5,#Table1 #MainContent_wizardTab_ctl02_pass_name1,#Table1 #MainContent_wizardTab_ctl02_pass_name2,#Table1 #MainContent_wizardTab_ctl02_pass_name3,#Table1 #MainContent_wizardTab_ctl02_pass_name4,#Table1 #MainContent_wizardTab_ctl02_pass_name5").css("color", "#fff");
}
else {
$(".frame-tab").css("background-color", "#f9f8fa");
$(".frame-tab").css("border", "1px solid #BBBCBB");
$("table#Table1, #Table1 th, #Table1 td").css("background-color", "#f9f8fa");
$("table#Table1, #Table1 th, #Table1 td").css("border", "1px solid #BBBCBB");
$("table#Table1, #Table1 th, #Table1 td").css("color", "#000");
$("#Table1 #MainContent_wizardTab_ctl02_pass_age1,#Table1 #MainContent_wizardTab_ctl02_pass_age2,#Table1 #MainContent_wizardTab_ctl02_pass_age3,#Table1 #MainContent_wizardTab_ctl02_pass_age4,#Table1 #MainContent_wizardTab_ctl02_pass_age5,#Table1 #MainContent_wizardTab_ctl02_pass_name1,#Table1 #MainContent_wizardTab_ctl02_pass_name2,#Table1 #MainContent_wizardTab_ctl02_pass_name3,#Table1 #MainContent_wizardTab_ctl02_pass_name4,#Table1 #MainContent_wizardTab_ctl02_pass_name5").css("background-color", "#fff");
$("#Table1 #MainContent_wizardTab_ctl02_pass_age1,#Table1 #MainContent_wizardTab_ctl02_pass_age2,#Table1 #MainContent_wizardTab_ctl02_pass_age3,#Table1 #MainContent_wizardTab_ctl02_pass_age4,#Table1 #MainContent_wizardTab_ctl02_pass_age5,#Table1 #MainContent_wizardTab_ctl02_pass_name1,#Table1 #MainContent_wizardTab_ctl02_pass_name2,#Table1 #MainContent_wizardTab_ctl02_pass_name3,#Table1 #MainContent_wizardTab_ctl02_pass_name4,#Table1 #MainContent_wizardTab_ctl02_pass_name5").css("border", "1px solid #BBBCBB");
$("#Table1 #MainContent_wizardTab_ctl02_pass_age1,#Table1 #MainContent_wizardTab_ctl02_pass_age2,#Table1 #MainContent_wizardTab_ctl02_pass_age3,#Table1 #MainContent_wizardTab_ctl02_pass_age4,#Table1 #MainContent_wizardTab_ctl02_pass_age5,#Table1 #MainContent_wizardTab_ctl02_pass_name1,#Table1 #MainContent_wizardTab_ctl02_pass_name2,#Table1 #MainContent_wizardTab_ctl02_pass_name3,#Table1 #MainContent_wizardTab_ctl02_pass_name4,#Table1 #MainContent_wizardTab_ctl02_pass_name5").css("color", "#000");
}
var colorvalue = $("#MainContent_wizardTab .e-header").css("background-color");
if (colorvalue.startsWith("#"))
$("table#Table1 th").css("border-bottom", "3px solid " + colorvalue);
else {
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(colorvalue);
if (digits != undefined) {
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
hexcol = digits[1] + '#' + rgb.toString(16);
$("table#Table1 th").css("border-bottom", "3px solid " + hexcol);
}
}
});
tabctrl = $("#MainContent_wizardTab").data("ejTab");
from = $("#MainContent_wizardTab_startpoint").data("ejAutocomplete");
to = $("#MainContent_wizardTab_endpoint").data("ejAutocomplete");
jdate = $("#MainContent_wizardTab_journeydate").data("ejDatePicker");
tktype = $("#MainContent_wizardTab_tickettype").data("ejDropDownList");
});
function TabNavigations(args) {
switch (this._id.split("_")[this._id.split("_").length - 1]) {
case "searchTrain":
if (from.getValue() != "" && to.getValue() != "" && tktype.getValue() != "" && jdate.getValue() != null) {
if (from.getValue() != "" && from.getValue() == to.getValue()) {
$("#tab1_err").text("");
$("#tab1_err").append("*Arrival point can't be same as Depature");
}
else {
$("#MainContent_wizardTab").ejTab({
disabledItemIndex: [0, 2, 3],
enabledItemIndex: [1],
selectedItemIndex: 1
});
filterTrains(args);
}
}
else {
$("#tab1_err").text("");
$("#tab1_err").append("*Please fill all the details before proceeding");
}
break;
case "gotosearch":
trainchosen = [];
$("#MainContent_wizardTab").ejTab({
disabledItemIndex: [1, 2, 3],
enabledItemIndex: [0],
selectedItemIndex: 0
});
break;
case "booktickets":
if (trainchosen == undefined || trainchosen.length <= 0) {
$("#tab2_err").text("");
$("#tab2_err").append("*Select your convenient train");
}
else {
$("#MainContent_wizardTab").ejTab({
disabledItemIndex: [0, 1, 3],
enabledItemIndex: [2],
selectedItemIndex: 2
});
var colorvalue = $("#MainContent_wizardTab .e-header").css("background-color");
if(colorvalue.startsWith("#"))
$("table#Table1 th").css("border-bottom", "3px solid " + colorvalue);
else{
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(colorvalue);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
hexcol= digits[1] + '#' + rgb.toString(16);
$("table#Table1 th").css("border-bottom", "3px solid " + hexcol);
}
}
break;
case "gobacktobook":
$("#MainContent_wizardTab").ejTab({
disabledItemIndex: [0, 2, 3],
enabledItemIndex: [1],
selectedItemIndex: 1
});
break;
case "confirmtickets":
if ($("#MainContent_wizardTab_ctl02_pass_name1").val() == "") {
$("#tab3_err").text("");
$("#tab3_err").append("*Please enter passenger details");
}
else {
$("#MainContent_wizardTab").ejTab({
disabledItemIndex: [0, 1, 2],
enabledItemIndex: [3],
selectedItemIndex: 3
});
finaldetails(args);
}
break;
case "gobacktodetails":
$("#MainContent_wizardTab").ejTab({
disabledItemIndex: [0, 1, 3],
enabledItemIndex: [2],
selectedItemIndex: 2
});
dialogmsg = $("#MainContent_wizardTab_confirmmsg").data("ejDialog");
dialogmsg.close();
var colorvalue = $("#MainContent_wizardTab .e-header").css("background-color");
if(colorvalue.startsWith("#"))
$("table#Table1 th").css("border-bottom", "3px solid " + colorvalue);
else{
var digits = /(.*?)rgb\((\d+), (\d+), (\d+)\)/.exec(colorvalue);
var red = parseInt(digits[2]);
var green = parseInt(digits[3]);
var blue = parseInt(digits[4]);
var rgb = blue | (green << 8) | (red << 16);
hexcol= digits[1] + '#' + rgb.toString(16);
$("table#Table1 th").css("border-bottom", "3px solid " + hexcol);
}
break;
case "payment":
$("#MainContent_wizardTab").ejTab({
disabledItemIndex: [0, 1, 2],
enabledItemIndex: [3],
selectedItemIndex: 3
});
dialogmsg = $("#MainContent_wizardTab_confirmmsg").data("ejDialog");
dialogmsg.open();
break;
}
}
function filterTrains(args) {
$("#tab1_err").text("");
var fromCity = document.getElementById("MainContent_wizardTab_startpoint").value;
var toCity = document.getElementById("MainContent_wizardTab_endpoint").value;
var query = ej.Query()
.search(fromCity, ["Depature"])
.search(toCity, ["Arrival"])
var result;
if(data==undefined){
var model = $("#MainContent_wizardTab_TrainAvailability").ejGrid("model");
data = model.dataSource;
}
var dataManager = ej.DataManager(data);
result = dataManager.executeLocal(query);
if (result && !result[0]) {
query = ej.Query()
.search(fromCity, ["Depature"])
result = dataManager.executeLocal(query);
}
if (result && !result[0]) {
query = ej.Query()
.search(fromCity, ["Arrival"])
result = dataManager.executeLocal(query);
}
var gridObj = $("#MainContent_wizardTab_TrainAvailability").data("ejGrid");
gridObj.option("dataSource", result);
}
function finaldetails(args) {
var reserved = [];
$("#tab3_err").text("");
for (i = 1; i <= 5; i++) {
if ($("#MainContent_wizardTab_ctl02_pass_name" + i).val() != "") {
details = {}
details["TrainNo"] = trainchosen.TrainNo.toString();
details["PassName"] = $("#MainContent_wizardTab_ctl02_pass_name" + i).val();
details["Gender"] = $("#pass_gender" + i).val();
details["CoachNo"] = "S" + i;
details["SeatNo"] = i * 2;
reserved.push(details);
}
}
$("#MainContent_wizardTab_TicketConfirmation").ejGrid({ dataSource: reserved });
}
function selectedTrain(args) {
trainchosen = args.data;
}
