jQWidgets Forums
This topic contains 8 replies, has 4 voices, and was last updated by DollyB 12 years, 11 months ago.
-
Hi,
I have created a jqxwindow and then added two sets of tabs and each of the tab contains some info in the jqxgrid. the tabs ui looks fine in mozilla firefox but looks odd in IE8.
Image is shown here below where no theme is applied and not well formatted.
Code is as below:
<div style="width: 100%;height: 650px;border: 0px solid #ccc;margin-top: 10px"> <div> <div> object</div> <div style="overflow: hidden"> <div> Details Attachments Reports <div> <div></div> </div> <div> attachment </div> <div> repoorts </div> </div> </div> <!-- window content --> </div> <!-- event winodw --> </div>
Could you please suggest me on this.
Thanks in advance,
SushmaHi 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’);
});TitlePlease provide the solution for this issue.
You must be logged in to reply to this topic.