$(function () { /* var response = new $.jqx.response(); response.resize(function (event) { var col = {}; var gPosition = $("#jqxgrid").position(); col.winY = gPosition.top - 180; col.winX = localparams['gridWidth']/2 + gPosition.left; $('#jqxwindow').jqxWindow({ position: { x: col.winX, y: col.winY }}); }); */ var response = new $.jqx.response(); response.resize(function (event) { setupDetailWindow(); }); var setupDetailWindow = function() { var col = {}; var viewPort = response.viewPort; var gPosition = $("#jqxgrid").position(); var gridRight = gPosition.left + localparams['gridWidth']; var gridClear = viewPort.width - gridRight; col.winY = gPosition.top - 50; if (gridClear > localparams['winWidth']) { col.winX = gridRight; } else { col.winX = viewPort.width - localparams['winWidth']; } $('#jqxwindow').jqxWindow({ position: { x: col.winX, y: col.winY }}); } $("#jqxwindow").jqxWindow({ width: localparams['winWidth'], height: localparams['winHeight'], position: 'center,center', resizable: false, //theme: 'education', autoOpen: false, showCollapseButton: false, showCloseButton: true, isModal: false }).on('collapse', function (event) { $("#jqxwindow").jqxWindow('close'); }); // prepare the data // var theme = 'classic'; var source = { datatype: "json", datafields: [ { name: 'StartDate' }, { name: 'OfferingID' }, { name: 'GradCredits' }, { name: 'GradeLevels' }, { name: 'RenewalCredits' }, { name: 'SubjectAreas' }, { name: 'Title' }, { name: 'Type' } ], url: localparams['urlCourses'], root: 'Rows', type: 'POST', beforeprocessing: function (data) { source.totalrecords = data[0].TotalRows; source.jqxrawform = data[0].JQXRawForm; }, sort: function () { // update the grid and send a request to the server. $("#jqxgrid").jqxGrid('updatebounddata'); } }; var dataAdapter = new $.jqx.dataAdapter(source, { loadServerData: function(postdata, source, callback) { postdata['gradelevel'] = $("#filter_gradelevel").val(); postdata['subjectarea'] = $("#filter_subject").val(); postdata['deliverymode'] = $("#filter_deliverymode").val(); postdata['type'] = $("#filter_type").val(); postdata['credittype'] = $("#filter_credittype").val(); postdata['startdate'] = $("#filter_startdate").val(); $.ajax({ dataType: "json", cache: false, type: "POST", url: source.url, data: postdata, success: function (data, status, xhr) { if ($.isFunction(source.beforeprocessing)) { source.beforeprocessing(data, status, xhr); } var records = data; dataAdapter.loadjson(null, records, source); callback({records: dataAdapter.records, totalrecords: source.totalrecords}); } }); } } ); // initialize jqxGrid $("#jqxgrid").jqxGrid({ // width: localparams['gridWidth'], // pagesizeoptions: ['5', '10', '15', '20'], // pagesize: 15, source: dataAdapter, // theme: theme, autoheight: true, columnsresize: true, pageable: true, virtualmode: true, sortable: true, // theme: 'education', editable: true, selectionmode: 'multiplecellsadvanced', rendergridrows: function () { return dataAdapter.records; }, columngroups: [ { text: 'Credits', align: 'center', name: 'Credits'} ], columns: [ { text: 'Start Date', datafield: 'StartDate', cellsalign: 'center', align: 'center'}, { text: 'Title', datafield: 'Title', width:'38%'}, { text: 'Grade Band', datafield: 'GradeLevels'}, { text: 'Subject', datafield: 'SubjectAreas'}, { text: 'Type', datafield: 'Type'}, { text: 'Renewal', columngroup: 'Credits', datafield: 'RenewalCredits', cellsalign: 'center', align: 'center'}, { text: 'Grad', columngroup: 'Credits', datafield: 'GradCredits', cellsalign: 'center', align: 'center'} ] }); function DetailModel() { var self = this; this.addFormParams = function(formElement) { $("#jqxgrid").jqxGrid('updatebounddata'); }; this.detail = {}; this.detail.OfferingID = ko.observable(""); this.detail.StartDate = ko.observable(""); this.detail.EndDate = ko.observable(""); this.detail.RegStartDate = ko.observable(""); this.detail.RegEndDate = ko.observable(""); this.detail.StartOpen = ko.observable(""); this.detail.EndOpen = ko.observable(""); this.detail.ExtShortName = ko.observable(""); this.detail.Information = ko.observable(""); this.detail.InformationLabel = ko.observable(""); this.detail.BaseShortName = ko.observable(""); this.detail.CommonCoreAligned = ko.observable(""); this.detail.CommonCoreAlignedAlert = ko.observable(""); this.detail.ContactEmail = ko.observable(""); this.detail.ContactPhone = ko.observable(""); this.detail.CourseID = ko.observable(""); this.detail.DeliveryMode = ko.observable(""); this.detail.Description = ko.observable(""); this.detail.GradeLevels = ko.observable(""); this.detail.SpecificGradeLevels = ko.observable(""); this.detail.GraduateCredits = ko.observable(""); this.detail.NonCredit = ko.observable(""); this.detail.Notes = ko.observable(""); this.detail.PaceCredits = ko.observable(""); this.detail.Price = ko.observable(""); this.detail.ProgramName = ko.observable(""); this.detail.SCRenewalCredits = ko.observable(""); this.detail.StructureType = ko.observable(""); this.detail.SubjectAreas = ko.observable(""); this.detail.TechCredits = ko.observable(""); this.detail.Title = ko.observable(""); this.detail.URL = ko.observable(""); this.detail.EnrollURL = ko.observable(""); $("#jqxgrid").on('rowclick', function (event) { var args = event.args; var row = args.rowindex; var data = $('#jqxgrid').jqxGrid('getrowdata', row); var url = localparams['urlDetail'] + data.OfferingID; $.getJSON(url, function(data) { var datarecord = data.Data[0]; self.temp.OfferingID(datarecord.OfferingID); self.temp.StartDate(datarecord.StartDate); self.temp.EndDate(datarecord.EndDate); self.temp.RegStartDate(datarecord.RegStartDate); self.temp.RegEndDate(datarecord.RegEndDate); self.temp.StartOpen(datarecord.StartOpen); self.temp.EndOpen(datarecord.EndOpen); self.temp.ExtShortName(datarecord.ExtShortName); self.temp.Information(datarecord.Information); self.temp.BaseShortName(datarecord.BaseShortName); self.temp.CommonCoreAligned(datarecord.CommonCoreAligned); self.temp.CommonCoreAlignedAlert(datarecord.CommonCoreAligned); self.temp.ContactEmail(datarecord.ContactEmail); self.temp.ContactPhone(datarecord.ContactPhone); self.temp.CourseID(datarecord.CourseID); self.temp.DeliveryMode(datarecord.DeliveryMode); self.temp.Description(datarecord.Description); self.temp.GradeLevels(datarecord.GradeLevels); self.temp.SpecificGradeLevels(datarecord.SpecificGradeLevels); self.temp.GraduateCredits(datarecord.GraduateCredits); self.temp.NonCredit(datarecord.NonCredit); self.temp.Notes(datarecord.Notes); self.temp.PaceCredits(datarecord.PaceCredits); self.temp.Price(datarecord.Price); self.temp.ProgramName(datarecord.ProgramName); self.temp.SCRenewalCredits(datarecord.SCRenewalCredits); self.temp.StructureType(datarecord.StructureType); self.temp.SubjectAreas(datarecord.SubjectAreas); self.temp.TechCredits(datarecord.TechCredits); self.temp.Title(datarecord.Title); self.temp.URL(datarecord.URL); self.temp.EnrollURL(datarecord.EnrollURL); }); setupDetailWindow(); $("#jqxwindow").jqxWindow('expand'); $("#jqxwindow").jqxWindow('open'); }); this.acceptedNumericValue = ko.observable(123); this.lastInputWasValid = ko.observable(true); this.temp = {}; this.temp.OfferingID = ko.computed({ read: this.detail.OfferingID, write: function (value) { this.detail.OfferingID(value); // Write to underlying storage }, owner: this}); this.temp.StartDate = ko.computed({ read: this.detail.StartDate, write: function (value) { this.detail.StartDate(value); // Write to underlying storage }, owner: this}); this.temp.EndDate = ko.computed({ read: this.detail.EndDate, write: function (value) { this.detail.EndDate(value); // Write to underlying storage }, owner: this}); this.temp.RegStartDate = ko.computed({ read: this.detail.RegStartDate, write: function (value) { this.detail.RegStartDate(value); // Write to underlying storage }, owner: this}); this.temp.RegEndDate = ko.computed({ read: this.detail.RegEndDate, write: function (value) { this.detail.RegEndDate(value); // Write to underlying storage }, owner: this}); this.temp.StartOpen = ko.computed({ read: this.detail.StartOpen, write: function (value) { this.detail.StartOpen(value); // Write to underlying storage }, owner: this}); this.temp.EndOpen = ko.computed({ read: this.detail.EndOpen, write: function (value) { this.detail.EndOpen(value); // Write to underlying storage }, owner: this}); this.temp.ExtShortName = ko.computed({ read: this.detail.ExtShortName, write: function (value) { this.detail.ExtShortName(value); // Write to underlying storage }, owner: this}); this.temp.Information = ko.computed({ read: this.detail.Information, write: function (value) { this.detail.Information(value); if (value == '') { this.detail.InformationLabel(''); } else { this.detail.InformationLabel('Participation Details:'); } }, owner: this}); this.temp.BaseShortName = ko.computed({ read: this.detail.BaseShortName, write: function (value) { this.detail.BaseShortName(value); // Write to underlying storage }, owner: this}); this.temp.CommonCoreAligned = ko.computed({ read: this.detail.CommonCoreAligned, write: function (value) { this.detail.CommonCoreAligned(value); // Write to underlying storage }, owner: this}); this.temp.CommonCoreAlignedAlert = ko.computed({ read: this.detail.CommonCoreAlignedAlert, write: function (value) { if (value == 'no ') { this.detail.CommonCoreAlignedAlert(''); // Write to underlying storage } else { this.detail.CommonCoreAlignedAlert('This course is aligned to the Common Core State Standards.'); // Write to underlying storage } }, owner: this}); this.temp.ContactEmail = ko.computed({ read: this.detail.ContactEmail, write: function (value) { this.detail.ContactEmail(value); // Write to underlying storage }, owner: this}); this.temp.ContactPhone = ko.computed({ read: this.detail.ContactPhone, write: function (value) { this.detail.ContactPhone(value); // Write to underlying storage }, owner: this}); this.temp.CourseID = ko.computed({ read: this.detail.CourseID, write: function (value) { this.detail.CourseID(value); // Write to underlying storage }, owner: this}); this.temp.DeliveryMode = ko.computed({ read: this.detail.DeliveryMode, write: function (value) { this.detail.DeliveryMode(value); // Write to underlying storage }, owner: this}); this.temp.Description = ko.computed({ read: this.detail.Description, write: function (value) { this.detail.Description(value); // Write to underlying storage }, owner: this}); this.temp.GradeLevels = ko.computed({ read: this.detail.GradeLevels, write: function (value) { this.detail.GradeLevels(value); // Write to underlying storage }, owner: this}); this.temp.SpecificGradeLevels = ko.computed({ read: this.detail.SpecificGradeLevels, write: function (value) { this.detail.SpecificGradeLevels(value); // Write to underlying storage }, owner: this}); this.temp.GraduateCredits = ko.computed({ read: this.detail.GraduateCredits, write: function (value) { this.detail.GraduateCredits(value); // Write to underlying storage }, owner: this}); this.temp.NonCredit = ko.computed({ read: this.detail.NonCredit, write: function (value) { this.detail.NonCredit(value); // Write to underlying storage }, owner: this}); this.temp.Notes = ko.computed({ read: this.detail.Notes, write: function (value) { this.detail.Notes(value); // Write to underlying storage }, owner: this}); this.temp.PaceCredits = ko.computed({ read: this.detail.PaceCredits, write: function (value) { this.detail.PaceCredits(value); // Write to underlying storage }, owner: this}); this.temp.Price = ko.computed({ read: this.detail.Price, write: function (value) { this.detail.Price(value); // Write to underlying storage }, owner: this}); this.temp.ProgramName = ko.computed({ read: this.detail.ProgramName, write: function (value) { this.detail.ProgramName(value); // Write to underlying storage }, owner: this}); this.temp.SCRenewalCredits = ko.computed({ read: this.detail.SCRenewalCredits, write: function (value) { this.detail.SCRenewalCredits(value); // Write to underlying storage }, owner: this}); this.temp.StructureType = ko.computed({ read: this.detail.StructureType, write: function (value) { this.detail.StructureType(value); // Write to underlying storage }, owner: this}); this.temp.SubjectAreas = ko.computed({ read: this.detail.SubjectAreas, write: function (value) { this.detail.SubjectAreas(value); // Write to underlying storage }, owner: this}); this.temp.TechCredits = ko.computed({ read: this.detail.TechCredits, write: function (value) { this.detail.TechCredits(value); // Write to underlying storage }, owner: this}); this.temp.Title = ko.computed({ read: this.detail.Title, write: function (value) { this.detail.Title(value); // Write to underlying storage }, owner: this}); this.temp.URL = ko.computed({ read: this.detail.URL, write: function (value) { this.detail.URL(value); // Write to underlying storage }, owner: this}); this.temp.EnrollURL = ko.computed({ read: this.detail.EnrollURL, write: function (value) { this.detail.EnrollURL(value); // Write to underlying storage }, owner: this}); } // Activates knockout.js ko.applyBindings(new DetailModel()); });