SMD.cshtml

@{
    ViewBag.Title = "SMD";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<link href="~/Content/jqx.base.css" rel="stylesheet" />
<script src="~/Scripts/jqxcore.js"></script>
<script src="~/Scripts/jqxbuttons.js"></script>
<script src="~/Scripts/jqxscrollbar.js"></script>
<script src="~/Scripts/jqxdata.js"></script>
<script src="~/Scripts/jqxdata.export.js"></script>
<script src="~/Scripts/jqxdate.js"></script>
<script src="~/Scripts/jqxscheduler.js"></script>
<script src="~/Scripts/jqxscheduler.api.js"></script>
<script src="~/Scripts/jqxdatetimeinput.js"></script>
<script src="~/Scripts/jqxmenu.js"></script>
<script src="~/Scripts/jqxcalendar.js"></script>
<script src="~/Scripts/jqxtooltip.js"></script>
<script src="~/Scripts/jqxwindow.js"></script>
<script src="~/Scripts/jqxcheckbox.js"></script>
<script src="~/Scripts/jqxlistbox.js"></script>
<script src="~/Scripts/jqxdropdownlist.js"></script>
<script src="~/Scripts/jqxnumberinput.js"></script>
<script src="~/Scripts/jqxradiobutton.js"></script>
<script src="~/Scripts/jqxinput.js"></script>





<h2>SMD</h2>


        <div id="scheduler">
        </div>
            <br />
            <div style='margin-left: 10px; float: left;'>
                <input type="button" value="Export to Excel" id='excelExport' />
                <input type="button" value="Export to PDF" id='pdfExport' />
            </div>
        <div class="form-group"> </div>
        <div class="form-group"> </div>
        <div>
            @if (ViewData["JobList"] != null)
            {
                <div class="row">
                    <div class="col-md-12">
                        <table class="table table-striped table-hover" onclick="handleClick(event);">
                            <tr>
                                <th>Part No.</th>
                                <th>Job No.</th>
                                <th>Job Qty</th>
                                <th>Scheduled Start Time</th>
                                <th>Scheduled Finish Time</th>
                                <th></th>
                            </tr>
                            <tbody>
                                @foreach (System.Data.DataRow row in ViewBag.JobList.Rows)
                                {
                                    <tr>
                                        <td>@row["PartNum"].ToString()</td>
                                        <td>@row["Epicorjob"].ToString()</td>
                                        <td>@row["Qty"].ToString()</td>
                                        <td>@row["SchedStart"].ToString()</td>
                                        <td>@row["SchedFinish"].ToString()</td>
                                        <td>
                                            <form name="@row["Epicorjob"].ToString()" action="#">
                                                <input id="@row["Epicorjob"].ToString()" type="button" name="edit" value="Highlight Job" class="btn btn-primary">
                                                <input id="@row["Epicorjob"].ToString()" type="button" name="edit" value="Open Edit Dialog" class="btn btn-success">
                                            </form>
                                        </td>
                                    </tr>
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            }
        </div>




@section Scripts {

<script type="text/javascript">

    $(document).ready(function () {
        var source =
        {
            dataType: "json",
            dataFields: [
                { name: 'id', type: 'string' },
                { name: 'description', type: 'string' },
                { name: 'location', type: 'string' },
                { name: 'subject', type: 'string' },
                { name: 'calendar', type: 'string' },
                { name: 'start', type: 'date' },
                { name: 'end', type: 'date' },
                { name: 'allDay', type: 'boolean' },
                { name: 'jobtime', type: 'number' }
            ],
            id: 'id',
            //url: '/Schedule/GetSMDScheduleData'
            url: '../Content/jobs.txt'
        };
        var adapter = new $.jqx.dataAdapter(source);
        $("#scheduler").jqxScheduler({
            //date: new $.jqx.date(2015, 11, 23),
            width: 1200,
            editDialogDateTimeFormatString: 'dd-MM-yyyy HH:mm',
            editDialogDateFormatString: 'dd-MM-yyyy',
            height: 1200,
            dayNameFormat: "abbr",
            source: adapter,
            showLegend: true,
            resources:
            {
                colorScheme: "scheme05",
                dataField: "calendar",
                orientation: "horizontal",
                source: new $.jqx.dataAdapter(source)
            },
            appointmentDataFields:
            {
                from: "start",
                to: "end",
                id: "id",
                description: "description",
                location: "location",
                subject: "subject",
                resourceId: "calendar",
                allDay: "allDay",
                tooltip: "description",
                jobtime: "jobtime"

            },
            view: 'weekView',
            views:
            [
                { type: 'dayView', showWeekends: true, timeRuler: { scaleStartHour: 0, scaleEndHour: 24, scale: "quarterHour", formatString: 'HH:mm' }, workTime: { fromDayOfWeek: 1, toDayOfWeek: 6, fromHour: 0, toHour: 24 }, appointmentsRenderMode: "exactTime" },
                { type: 'weekView', showWeekends: true, timeRuler: { scaleStartHour: 0, scaleEndHour: 24, scale: "quarterHour", formatString: 'HH:mm' }, workTime: { fromDayOfWeek: 1, toDayOfWeek: 7, fromHour: 0, toHour: 24 }, appointmentsRenderMode: "exactTime" },
                { type: 'monthView' }
            ]
        });
    });

</script>
}