[DollyBMember]

Hi Peter,

The issue is resolved now.
I have jsp2 which contains the code pasted by me in my previous post. And I am including jsp2 in jsp1. And I placed DOCTYPE in the included jsp (jsp2) instead of including jsp(jsp1).
Now I corrected my code and the Tabs are looking fine now.

Thankx for your valuable input.

Regards
DollyB

[DollyBMember]

Hi Peter,

Yes. the DOCTYPE has been set.

[DollyBMember]

Hi Minko,

Even I face this issue in IE8. I have downloaded jqwidgets-ver2.2_trial.zip file and the tabs appear vertical instead of horizontal.
I am placing my whole code here.

function addEventListeners() {
$(‘#showWindowButton’).mousedown(function () {
$(‘#eventWindow’).jqxWindow(‘show’);
});

$(“#jqxgridreq”).bind(‘cellbeginedit’, function (event) {
var args = event.args;
$(“#cellbegineditevent”).html(“Event Type: cellbeginedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
$(“#jqxgridreq”).bind(‘cellendedit’, function (event) {
var args = event.args;
$(“#cellendeditevent”).html(“Event Type: cellendedit, Column: ” + args.datafield + “, Row: ” + (1 + args.rowindex) + “, Value: ” + args.value);
});
}
function createElements(theme) {
$(‘#eventWindow’).jqxWindow({ maxHeight: 1250, maxWidth:1000, minHeight: 200, minWidth: 200, height: 725, width: 750,
theme: theme, resizable: false, isModal: true, modalOpacity: 0.3, showCollapseButton: true
});

$(‘#tab1’).jqxTabs({ height: 300, theme: theme });
$(‘#tab2’).jqxTabs({ height: 650, theme: theme });

//prepare grid
// prepare the data
var reqData = generatedata(200);
var reqSource =
{
localdata: reqData,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
var reqDataAdapter = new $.jqx.dataAdapter(reqSource);
// initialize jqxGrid
$(“#jqxgridreq”).jqxGrid(
{
width: 700,
source: reqDataAdapter,
editable: true,
pageable: true,
autoheight: true,
theme: theme,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘First Name’, columntype: ‘textbox’, datafield: ‘firstname’, width: 90 },
{ text: ‘Last Name’, datafield: ‘lastname’, columntype: ‘textbox’, width: 90 },
{ text: ‘Product’, columntype: ‘dropdownlist’, datafield: ‘productname’, width: 177},
{ text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, width: 67 },
{ text: ‘Ship Date’, datafield: ‘date’, columntype: ‘datetimeinput’, width: 95, cellsalign: ‘right’, cellsformat: ‘d’,
validation: function (cell, value) {
var year = value.getFullYear();
if (year >= 2013) {
return { result: false, message: “Ship Date should be before 1/1/2013” };
}
return true;
}
},
{ text: ‘Quantity’, datafield: ‘quantity’, width: 75, cellsalign: ‘right’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value 150) {
return { result: false, message: “Quantity should be in the 0-150 interval” };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });
}
},
{ text: ‘Price’, datafield: ‘price’, width: 70, cellsalign: ‘right’, cellsformat: ‘c2’, columntype: ‘numberinput’,
validation: function (cell, value) {
if (value 15) {
return { result: false, message: “Price should be in the 0-15 interval” };
}
return true;
},
initeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ digits: 3 });
}
}
]
});

var url = “/eMatrix/jsp/mars/jquery/data/wpReqs.xml”;
// prepare the data
var source =
{
datatype: “xml”,
datafields: [
{ name: ‘Name’, map: ‘name’ },
{ name: ‘Revision’, map: ‘revision’ },
{ name: ‘Description’, map: ‘description’ },
{ name: ‘Owner’, map: ‘owner’ },
{ name: ‘Category’, map: ‘category’ },
{ name: ‘Priority’, map: ‘priority’ }
],
root: “objects”,
record: “object”,
id: ‘id’,
url: url
};

// Create jqxGrid
$(“#jqxgrid”).jqxGrid(
{
width: 670,
source: source,
theme: theme,
columnsresize: true,
autoheight: true,
columns: [
{ text: ‘Name’, datafield: ‘Name’, width: 150, pinned: true },
{ text: ‘Revision’, datafield: ‘Revision’, width: 50 },
{ text: ‘Description’, datafield: ‘Description’, width: 250 },
{ text: ‘Owner’, datafield: ‘Owner’, width: 120 },
{ text: ‘Category’, datafield: ‘Category’, width: 100 },
{ text: ‘Priority’, datafield: ‘Priority’, width: 100 }
]
});

//Added for Attachments Tab

// prepare the data
var attachData = generateattachdata(4);
var attachSource =
{
localdata: attachData,
datatype: “array”,
updaterow: function (rowid, rowdata) {
// synchronize with the server – send update command
}
};
var attachDataAdapter = new $.jqx.dataAdapter(attachSource);

// Create jqxGrid
$(“#jqxgrid2″).jqxGrid(
{
width: 700,
source: attachDataAdapter,
editable: false,
pageable: true,
autoheight: true,
columnsresize: true,
theme: theme,
columns: [
{ text: ”, columntype: ‘checkbox’, datafield: ‘CButton’, width: 67 },
{ text: ”, datafield: ‘image’, width: 40 },
{ text: ‘File Name’, datafield: ‘FileName’, width: 300 },
{ text: ‘Format’, datafield: ‘Format’, width: 150 },
{ text: ‘Checked Out’, datafield: ‘CheckedOut’, width: 150 }
]
});
}

$(document).ready(function () {
var theme = $.data(document.body, ‘theme’, theme);
if (theme == undefined) theme = ”;
addEventListeners();
createElements(theme);
$(“#jqxWidget”).css(‘visibility’, ‘visible’);
});

Title

Details
Attachments
Reports

The project was in development for approximately three years at Paramount Pictures,
during which time a screen adaptation that differed significantly from the novel
was written.

Connected Items:

Requirements

Please provide the solution for this issue.

[Author]

Posts