jqwidgets-framework
Version:
jQWidgets is an advanced Angular, Vue, Blazor, React, Web Components, jquery, ASP .NET MVC, Custom Elements and HTML5 UI framework.
892 lines (837 loc) • 36.9 kB
JavaScript
$(document).ready(function ()
{
'use strict';
var response = new $.jqx.response();
response.responsive({
container: $("#row"),
deviceTypes: "Desktop, Tablet, Phone",
margin: { left: 0, top: 0, right: 0, bottom: 0 },
padding: { left: 0, top: 0, right: 0, bottom: 0 },
colWidths: [0.8],
colOffsets: [0.1],
colClass: "big",
breakpoints: [{
colClass: "big",
colWidths: [1],
colOffsets: [0],
width: 1440
}, {
colClass: "small",
colWidths: [1],
colOffsets: [0],
width: 1200
}]
});
var source = [{
label: "Dashboard"
}, {
label: "Schedules",
items: [{
label: "Rooms"
}, {
label: "Instructors"
}]
},{
label: "Fitness instructors"
}, {
label: "Workload chart"
}, {
label: "Administrative tasks"
}, {
label: "Quick notes"
}];
$("#jqxMenu").jqxMenu({
source: source,
width: 680,
theme: 'light'
});
var minimized = false;
if (document.documentElement.clientWidth < 890)
{
$("#jqxMenu").jqxMenu('minimize');
minimized = true;
}
$(window).on("resize", function ()
{
if ((document.documentElement.clientWidth < 890)&& (minimized === false))
{
$("#jqxMenu").jqxMenu('minimize');
minimized = true;
} else if((document.documentElement.clientWidth >= 890) && (minimized === true))
{
$("#jqxMenu").jqxMenu('restore');
minimized = false;
}
});
$('#jqxMenu').on('itemclick', function (event)
{
var element = event.args;
var label = $(element).attr("item-label");
if (label !== "Schedules")
{
$(".page").addClass("page-hidden");
if (label==="Dashboard")
{
$("#page1").removeClass("page-hidden");
$("#page").html('Dashboard');
dashboard();
}
switch(label){
case 'Dashboard':
$("#page1").removeClass("page-hidden");
$("#page").html('Dashboard');
break;
case 'Rooms':
$("#page2").removeClass("page-hidden");
$("#page").html('Rooms schedules');
roomsSheduler();
break;
case 'Instructors':
$("#page3").removeClass("page-hidden");
$("#page").html('Instructors schedules');
instructorsSheduler();
break;
case 'Fitness instructors':
$("#page5").removeClass("page-hidden");
$("#page").html('Fitness instructors list');
instructorsGrid();
break;
case 'Workload chart':
$("#page6").removeClass("page-hidden");
$("#page").html('Workload chart of the fitness instructors');
workloadChartTreeTagcloud();
break;
case 'Administrative tasks':
$("#page7").removeClass("page-hidden");
$("#page").html('Administrative tasks');
tasksKanban();
break;
case 'Quick notes':
$("#page8").removeClass("page-hidden");
$("#page").html('Quick notes');
quickNotesListBox();
break;
default:
$("#page1").removeClass("page-hidden");
$("#page").html('Dashboard');
dashboard();
}
}
});
var dockingWindows = ['window1', 'window2', 'window4'];
$('#docking').jqxDocking({ theme: 'light', orientation: 'horizontal', width: '100%', mode: 'docked' });
for (var i = 0; i < dockingWindows.length; i++)
{
$('#docking').jqxDocking('disableWindowResize', dockingWindows[i]);
}
var listBoxSource = [
'Repair of broken gym equipment',
'Staff recruitment',
'Instructors course',
'Buy a new bench press'];
$('#dashboardListbox').jqxListBox({
source: listBoxSource, width: "100%", height: "100%", theme: 'light', renderer: function (index)
{
var datarecord = listBoxSource[index];
return "<div style='padding:10px 10px 10px 20px;'>" + datarecord + "</div>";
}
});
function dashboard()
{
if ($("#hours").hasClass("jqx-widget")===false)
{
var selectedThermometer = 1;
function createTemperatureKnob()
{
$('#themperatureKnob').jqxKnob({
width: 330,
height: 330,
value: 16,
min: 15,
max: 95,
startAngle: 120,
endAngle: 420,
snapToStep: true,
rotation: 'clockwise',
style: { stroke: '#dfe3e9', strokeWidth: 3, fill: { color: '#fefefe', gradientType: "linear", gradientStops: [[0, 1], [50, 0.9], [100, 1]] } },
marks: {
colorRemaining: { color: 'grey', border: 'grey' },
colorProgress: { color: '#00a4e1', border: '#00a4e1' },
type: 'line',
offset: '71%',
thickness: 3,
size: '6%',
majorSize: '9%',
majorInterval: 10,
minorInterval: 2
},
labels: {
offset: '88%',
step: 10,
visible: true
},
progressBar: {
style: { fill: '#00a4e1', stroke: 'grey' },
size: '9%',
offset: '60%',
background: { fill: 'grey', stroke: 'grey' }
},
pointer: { type: 'arrow', style: { fill: '#00a4e1', stroke: 'grey' }, size: '59%', offset: '49%', thickness: 20 }
});
$('#themperatureKnob').on('change', function ()
{
var colorScheme = 'scheme02';
var textCondition = '<div style="text-align: center; color: green; font-size: 10px;">Temp. in range</div>';
var newValue = $('#themperatureKnob').val();
var gaugesValueForComparisson = $('#gauge' + selectedThermometer).jqxLinearGauge("val");
if ((newValue - 1.5) > gaugesValueForComparisson)
{
colorScheme = 'scheme01';
textCondition = '<div style="text-align: center; color: blue; font-size:10px;">Low temp.</div>';
} else if ((newValue + 2.5) < gaugesValueForComparisson)
{
colorScheme = 'scheme03';
textCondition = '<div style="text-align: center; color: red; font-size: 10px; ">High temp.</div>';
}
$('#gauge' + selectedThermometer).parent().find(".temperatureText").html(textCondition);
$('#gauge' + selectedThermometer).jqxLinearGauge({
colorScheme: colorScheme,
ranges: [
{ startValue: (newValue - 1.5), endValue: (newValue + 2.5), style: { fill: '#FFA200', stroke: '#FFA200', opacity: 0.5, 'stroke-width': 8 } },
{ startValue: newValue, endValue: (newValue + 0.5), style: { fill: '#0000FF', stroke: '#0000FF', opacity: 0.5, 'stroke-width': 8 } }
]
});
});
}
function createTemperatureThermometer()
{
var majorTicks = { size: '10%', interval: 5 },
minorTicks = { size: '5%', interval: 1, style: { 'stroke-width': 1, stroke: '#aaaaaa' } },
labels = { interval: 20 };
function createLinearGaugeThermometer(gaugeId, colorScheme, startVal1, endVal1, startVal2, endVal2)
{
$('#' + gaugeId).jqxLinearGauge({
rangesOffset: 5,
width: "100%",
orientation: 'vertical',
labels: labels,
ticksMajor: majorTicks,
ticksMinor: minorTicks,
max: 95,
min: 0,
value: 0,
pointer: { size: '6%' },
colorScheme: colorScheme,
ranges: [
{ startValue: startVal1, endValue: endVal1, style: { fill: '#FFA200', stroke: '#FFA200', opacity: 0.5, 'stroke-width': 8 } },
{ startValue: startVal2, endValue: endVal2, style: { fill: '#0000FF', stroke: '#0000FF', opacity: 0.5, 'stroke-width': 8 } }]
});
}
createLinearGaugeThermometer('gauge1', 'scheme01', 18, 22, 19.5, 20);
createLinearGaugeThermometer('gauge2', 'scheme02', 16, 20, 17.5, 18);
createLinearGaugeThermometer('gauge3', 'scheme03', 80, 86, 82.5, 83);
$('#gauge1').parent().addClass("linear-gauge-selected");
$('#gauge1').jqxLinearGauge('value', 16);
$('#gauge2').jqxLinearGauge('value', 19);
$('#gauge3').jqxLinearGauge('value', 90);
$("#jqxRadioButton1").jqxRadioButton({ theme: 'light', width: 100, height: 25, checked: true });
$("#jqxRadioButton2").jqxRadioButton({ theme: 'light', width: 100, height: 25 });
$("#jqxRadioButton3").jqxRadioButton({ theme: 'light', width: 100, height: 25 });
$('.themperatureRadioButton').on('checked', function ()
{
var idNumber = $(this).attr("id").slice(-1);
$('#gauge1, #gauge2, #gauge3').parent().removeClass("linear-gauge-selected");
$('#gauge' + idNumber).parent().addClass("linear-gauge-selected");
selectedThermometer = idNumber;
var ranges = $('#gauge' + idNumber).jqxLinearGauge('ranges');
$('#themperatureKnob').jqxKnob('val', ranges[1].startValue);
});
}
createTemperatureKnob();
createTemperatureThermometer();
}
}
dashboard();
function roomsSheduler(){
if (!$("#roomsSheduler").hasClass("jqx-widget"))
{
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', format: "yyyy-MM-dd HH:mm" },
{ name: 'end', type: 'date', format: "yyyy-MM-dd HH:mm" }
],
id: 'id',
url: "data.php?usedwidget=roomsscheduler"
};
var adapter = new $.jqx.dataAdapter(source);
$("#roomsSheduler").jqxScheduler({
date: new $.jqx.date(2015, 11, 23),
width: "100%",
height: window.innerHeight - 150,
theme: 'light',
source: adapter,
view: 'weekView',
appointmentOpacity: 0.7,
showLegend: true,
ready: function ()
{
$("#roomsSheduler").jqxScheduler('ensureAppointmentVisible', 'id2');
},
resources:
{
colorScheme: "scheme05",
dataField: "calendar",
source: new $.jqx.dataAdapter(source)
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "description",
location: "place",
subject: "subject",
resourceId: "calendar"
},
views: ['weekView']
});
}
}
function instructorsSheduler()
{
if (!$("#instructorsSheduler").hasClass("jqx-widget"))
{
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', format: "yyyy-MM-dd HH:mm" },
{ name: 'end', type: 'date', format: "yyyy-MM-dd HH:mm" }
],
id: 'id',
url: "data.php?usedwidget=instructorsscheduler"
};
var adapter = new $.jqx.dataAdapter(source);
$("#instructorsSheduler").jqxScheduler({
date: new $.jqx.date(2015, 11, 23),
width: "100%",
height: window.innerHeight - 150,
theme: 'light',
source: adapter,
view: 'weekView',
appointmentOpacity: 0.7,
showLegend: true,
ready: function ()
{
$("#instructorsSheduler").jqxScheduler('ensureAppointmentVisible', 'id2');
},
resources:
{
colorScheme: "scheme05",
dataField: "calendar",
source: new $.jqx.dataAdapter(source)
},
appointmentDataFields:
{
from: "start",
to: "end",
id: "id",
description: "description",
location: "place",
subject: "subject",
resourceId: "calendar"
},
views:['weekView']
});
}
}
function instructorsGrid()
{
if (!$("#instructorsGrid").hasClass("jqx-widget"))
{
var source = {
datatype:'json',
datafields: [
{ name: "id", type: "string" },
{ name: "lastname", type: "string" },
{ name: "firstname", type:"string" },
{ name: "phone", type: "string" },
{ name: "image", type: "string" }
],
url: "data.php?usedwidget=instructorsgrid"
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#instructorsGrid").jqxGrid({
width: "100%",
autoheight:true,
theme:"light",
rowsheight: 110,
showheader: false,
source: dataAdapter,
columns: [
{
text: 'Picture', datafield: 'image', width:110,
createwidget: function (row, column, value, htmlElement)
{
var img = '<img style="margin: 10px;" height="90" width=90" src="' + value + '"/>';
$(htmlElement).append(img);
},
initwidget: function (){ }
},
{ text: 'First Name', datafield: 'firstname', width: 100, cellsalign:"center", cellclassname: "instructors-grid-cell" },
{ text: 'Last Name', datafield: 'lastname', width: 100, cellsalign: "center", cellclassname: "instructors-grid-cell" },
{ text: 'Phone', datafield: 'phone', cellsalign: "center", cellclassname: "instructors-grid-cell" }
]
});
}
}
function workloadChartTreeTagcloud()
{
if (!$("#jqxChart").hasClass("jqx-widget"))
{
var workloadResponse = new $.jqx.response();
workloadResponse.responsive({
container: $("#workloadResponsiveContainer"),
deviceTypes: "Desktop, Tablet, Phone",
margin: {
left: 0,
top: 0,
right: 0,
bottom: 0
},
padding: {
left: 0,
top: 0,
right: 0,
bottom: 0
},
colWidths: [0.3, 0.7],
colClass: "workloadBig",
breakpoints: [{
colClass: "workloadSmall",
colWidths: [1, 1],
width: 500
}]
});
var source =
{
datatype: "json",
datafields: [
{ name: 'id' },
{ name: 'parentid' },
{ name: 'text' },
{ name: 'html' },
{ name: 'value' },
{ name: 'icon' }
],
id: 'id',
url: "data.php?usedwidget=workloadtree"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
loadComplete: function ()
{
var records1 = dataAdapter.getRecordsHierarchy('id', 'parentid', 'items',[{ name: 'text', map: 'label' }]);
$('#jqxTree').jqxTree({ theme: 'light', source: records1, allowDrag: false, width: '100%' });
}
});
dataAdapter.dataBind();
$('#instructorsJqxExpander').jqxExpander({ theme: 'light', showArrow: false, toggleMode: 'none', width: '100%', height: window.innerHeight - 150 });
var tagCloudSource =
{
datatype: "json",
datafields: [
{ name: 'fitnessInstructorName' },
{ name: 'clientsPerWeek' }
],
url: "data.php?usedwidget=workloadtaglloud"
};
var tagCloudDataAdapter = new $.jqx.dataAdapter(tagCloudSource);
$('#jqxTagCloud').jqxTagCloud({
width: '100%',
source: tagCloudDataAdapter,
displayMember: 'fitnessInstructorName',
theme: 'light',
valueMember: 'clientsPerWeek',
minFontSize: 12,
maxFontSize: 56,
minColor: '#00AA99',
maxColor: '#FF0000'
});
var chartSource =
{
datatype: "json",
datafields: [
{ name: 'Day' },
{ name: 'Andrew' },
{ name: 'Nancy' },
{ name: 'Janet' },
{ name: 'Margaret' }
],
url: "data.php?usedwidget=workloadchart"
};
var chartDataAdapter = new $.jqx.dataAdapter(chartSource);
var jqxChartSettings = {
title: "",
description: "",
enableAnimations: true,
showBorderLine: false,
showLegend: true,
padding: { left: 10, top: 10, right: 15, bottom: 10 },
titlePadding: { left: 90, top: 0, right: 0, bottom: 10 },
source: chartDataAdapter,
colorScheme: 'scheme05',
xAxis: {
dataField: 'Day',
unitInterval: 1,
tickMarks: { visible: true, interval: 1 },
valuesOnTicks: false,
padding: { bottom: 10 },
gridLines: {
visible: false
}
},
valueAxis: {
unitInterval: 1,
minValue: 0,
maxValue: 5,
title: { text: 'Clients per day<br><br>' },
labels: { horizontalAlignment: 'right' },
gridLines: {
visible: false
}
},
seriesGroups:
[
{
type: 'line',
series:
[
{
dataField: 'Andrew',
symbolType: 'square',
labels:
{
visible: true,
backgroundColor: '#FEFEFE',
backgroundOpacity: 0.2,
borderColor: '#7FC4EF',
borderOpacity: 0.7,
padding: { left: 5, right: 5, top: 0, bottom: 0 }
}
},
{
dataField: 'Nancy',
symbolType: 'square',
labels:
{
visible: true,
backgroundColor: '#FEFEFE',
backgroundOpacity: 0.2,
borderColor: '#7FC4EF',
borderOpacity: 0.7,
padding: { left: 5, right: 5, top: 0, bottom: 0 }
}
},
{
dataField: 'Janet',
symbolType: 'square',
labels:
{
visible: true,
backgroundColor: '#FEFEFE',
backgroundOpacity: 0.2,
borderColor: '#7FC4EF',
borderOpacity: 0.7,
padding: { left: 5, right: 5, top: 0, bottom: 0 }
}
},
{
dataField: 'Margaret',
symbolType: 'square',
labels:
{
visible: true,
backgroundColor: '#FEFEFE',
backgroundOpacity: 0.2,
borderColor: '#7FC4EF',
borderOpacity: 0.7,
padding: { left: 5, right: 5, top: 0, bottom: 0 }
}
}
]
}
]
};
$('#jqxChart').jqxChart(jqxChartSettings);
}
}
function tasksKanban()
{
if (!$("#jqxKanban").hasClass("jqx-widget"))
{
var source =
{
dataType: "json",
dataFields: [
{ name: "id", type: "string" },
{ name: "status", map: "state", type: "string" },
{ name: "text", map: "label", type: "string" },
{ name: "tags", type: "string" },
{ name: "color", map: "hex", type: "string" },
{ name: "resourceId", type: "number" }
],
url: "data.php?usedwidget=taskskanban"
};
var dataAdapter = new $.jqx.dataAdapter(source);
var resourcesAdapterFunc = function ()
{
var resourcesSource =
{
dataType: "json",
dataFields: [
{ name: "id", type: "number" },
{ name: "name", type: "string" },
{ name: "image", type: "string" },
{ name: "common", type: "boolean" }
],
url: "data.php?usedwidget=taskskanbanusers"
};
var resourcesDataAdapter = new $.jqx.dataAdapter(resourcesSource);
return resourcesDataAdapter;
};
var getIconClassName = function ()
{
return "jqx-icon-plus-alt";
};
$('#jqxKanban').jqxKanban({
template: "<div class='jqx-kanban-item' id=''>" +
"<div class='jqx-kanban-item-color-status'></div>" +
"<div style='display: none;' class='jqx-kanban-item-avatar'></div>" +
"<div class='jqx-icon jqx-icon-close jqx-kanban-item-template-content jqx-kanban-template-icon'></div>" +
"<div class='jqx-kanban-item-text'></div>" +
"<div style='display: none;' class='jqx-kanban-item-footer'></div>" +
"</div>",
resources: resourcesAdapterFunc(),
width: "100%",
//height: window.innerHeight - 150,
height: "100%",
source: dataAdapter,
theme: 'light',
itemRenderer: function (item, data, resource)
{
$(item).find(".jqx-kanban-item-color-status").html("<span style='line-height: 23px; margin-left: 5px;'>" + resource.name + "</span>");
$(item).find(".jqx-kanban-item-text").css('background', item.color);
item.on('dblclick', function (event)
{
var input = $("<textarea placeholder='(No Title)' style='border: none; width: 100%;' class='jqx-input'></textarea>");
var addToHeader = false;
var header = null;
if (event.target.nodeName === "SPAN" && $(event.target).parent().hasClass('jqx-kanban-item-color-status'))
{
input = $("<input placeholder='(No Title)' style='border: none; background: transparent; width: 80%;' class='jqx-input'/>");
header = event.target;
header.innerHTML = "";
input.val($(event.target).text());
$(header).append(input);
addToHeader = true;
}
if (!addToHeader)
{
var textElement = item.find(".jqx-kanban-item-text");
input.val(textElement.text());
textElement[0].innerHTML = "";
textElement.append(input);
}
input.mousedown(function (event)
{
event.stopPropagation();
});
input.mouseup(function (event)
{
event.stopPropagation();
});
input.blur(function ()
{
var value = input.val();
if (!addToHeader)
{
$("<span>" + value + "</span>").appendTo(textElement);
}
else
{
header.innerHTML = value;
}
input.remove();
});
input.keydown(function (event)
{
if (event.keyCode === 13)
{
if (!header)
{
$("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
$(event.target).remove();
}
else
{
header.innerHTML = $(event.target).val();
}
}
});
input.focus();
});
$(window).on("resize", function ()
{
// $('#jqxKanban').jqxKanban({ height: window.innerHeight - 150 });
});
},
columns: [
{ text: "Backlog", iconClassName: getIconClassName(), dataField: "new", maxItems: 6 },
{ text: "In Progress", iconClassName: getIconClassName(), dataField: "work", maxItems: 6 },
{ text: "Done", iconClassName: getIconClassName(), dataField: "done", maxItems: 6 }
],
columnRenderer: function (element, collapsedElement, column)
{
var columnItems = $("#jqxKanban").jqxKanban('getColumnItems', column.dataField).length;
element.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
collapsedElement.find(".jqx-kanban-column-header-status").html(" (" + columnItems + "/" + column.maxItems + ")");
}
});
$('#jqxKanban').on("itemAttrClicked", function (event)
{
var args = event.args;
if (args.attribute === "template")
{
$('#jqxKanban').jqxKanban('removeItem', args.item.id);
}
});
var itemIndex = 0;
$('#jqxKanban').on('columnAttrClicked', function (event)
{
var args = event.args;
if (args.attribute === "button")
{
args.cancelToggle = true;
if (!args.column.collapsed)
{
var colors = ['#f19b60', '#5dc3f0', '#6bbd49', '#dddddd'];
$('#jqxKanban').jqxKanban('addItem', { status: args.column.dataField, text: "<textarea placeholder='(No Title)' style='width: 96%; margin-top:2px; border-radius: 3px; border:none; line-height:20px; height: 50px;' class='jqx-input' id='newItem" + itemIndex + "' value=''></textarea>", tags: "new task", color: colors[Math.floor(Math.random() * 4)], resourceId: null });
var input = $("#newItem" + itemIndex);
input.mousedown(function (event)
{
event.stopPropagation();
});
input.mouseup(function (event)
{
event.stopPropagation();
});
input.keydown(function (event)
{
if (event.keyCode === 13)
{
$("<span>" + $(event.target).val() + "</span>").insertBefore($(event.target));
$(event.target).remove();
}
});
input.focus();
itemIndex++;
}
}
});
}
}
function quickNotesListBox()
{
var noteId = -1;
if (!$("#jqxListBox").hasClass("jqx-widget"))
{
var data;
$("#splitter").jqxSplitter({ theme: 'light', resizable: false, showSplitBar: false, width: "99%",height: window.innerHeight - 150, panels: [{ size: '25%', min: 250 }] });
var source =
{
datatype: "json",
dataFields: [
{ name: "id", type: "number" },
{ name: "image", type: "string" },
{ name: "firstname", type: "string" },
{ name: "lastname", type: "string" },
{ name: "job", type: "string" },
{ name: "title", type: "string" },
{ name: "notes", type: "string" }
],
url: "data.php?usedwidget=quicknotesdata"
};
var dataAdapter = new $.jqx.dataAdapter(source, {
beforeLoadComplete: function (records)
{
data = records;
},
loadComplete: function ()
{
updatePanel(0);
noteId = 1;
}
});
var dataAdapter2 = new $.jqx.dataAdapter(source);
$('#dropdownlist').jqxDropDownList({
selectedIndex: 0, theme: 'light', source: dataAdapter2, displayMember: "firstname", valueMember: "id", itemHeight: 70, height: 25, width: "99%", disabled: false,
renderer: function (index)
{
var datarecord = data[index];
var imgurl = datarecord.image;
var img = '<img height="50" width="45" src="' + imgurl + '"/>';
var table = '<table style="min-width: 150px;"><tr><td style="width: 55px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + " " + datarecord.lastname + '</td></tr><tr><td>' + datarecord.job + '</td></tr></table>';
return table;
}
});
var updatePanel = function (index)
{
var datarecord = data[index];
$("#dropdownlist").jqxDropDownList({ disabled: false });
$("#dropdownlist").jqxDropDownList('selectIndex', index);
$("#dropdownlist").jqxDropDownList({ disabled: true });
$("#subject").jqxInput("val", datarecord.title);
$('#editor').jqxEditor("val", datarecord.notes);
};
$('#jqxListBox').on('select', function (event)
{
updatePanel(event.args.index);
noteId = event.args.index;
});
$("#subject").jqxInput({ theme: 'light', width: "99%", height: 25, placeHolder: "Enter text", disabled: true });
$('#editor').jqxEditor({
theme: 'light',
height: "80%",
width: '100%'
});
$("#add").jqxButton({ width: "100%", height: 50, theme: 'light' });
$("#add").on("click", function ()
{
data[noteId].notes = $('#editor').jqxEditor("val");
});
$('#jqxListBox').jqxListBox({
selectedIndex: 0, theme: 'light', source: dataAdapter, displayMember: "firstname", valueMember: "notes", itemHeight: 120, height: '100%', width: '100%',
renderer: function (index)
{
var datarecord = data[index];
var imgurl = datarecord.image;
var img = '<img height="100" width="100" src="' + imgurl + '"/>';
var table = '<table style="min-width: 130px;"><tr><td style="width: 120px;" rowspan="2">' + img + '</td><td>' + datarecord.firstname + " " + datarecord.lastname + '</td></tr><tr><td>' + datarecord.job + '</td></tr></table>';
return table;
}
});
}
}
});