[kalimuthuParticipant]

cannot able to append full code . my browser issues

[kalimuthuParticipant]

the issue is not yet solved, i posted another one to full code .. please let me know the solutions

[kalimuthuParticipant]

full code is not appended above. i will create new task

[kalimuthuParticipant]

Hi,

please find the issues in below source code:

The issues in below source code:

1) In jqxgrid1 and jqxgrid2 the grid is not properly set within specified pannel (the data is overflown, so the scrollbar’s down arrow is hidden)

2) When i press the splitter button or i resize the panel using splitter, the jqxgrid1 and jqxgrid2 width is minimizing

3)For panel2 i have set 20% for id=tabs and remaining 80% for id=box and grid width and height is set to 100%. But the grid is not properly fitting inside the panel2

4) we think that the inner div inside the id = ‘panel2’ is making a problem.

Please let me know the solutions.

This example shows how to create a Grid from Array data.

html, body
{
height: 100%;
width: 100%;
margin: 0px;
padding: 0px;
overflow: hidden;
position: absolute;
}
.jqx-splitter
{
overflow: hidden;
position: absolute;
}
div.boxcontent
{
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 29px 16px 16px 16px;
line-height: 1.25em;
background-color: #f3f3f3;
border: solid 1px #d9d9d9;
height: auto;
}
div.box
{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin-bottom: 1em;
border: solid 1px #c7c7c7;
height: 50%; /*margin-top:-16px;*/
margin-top: -8px;
width: 100%;
border: none;
}

$(document).ready(function () {
try {

var theme = getDemoTheme();
// prepare the data
var data = new Array();
var firstNames =
[
“Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
];
var lastNames =
[
“Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
];
var productNames =
[
“Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Cramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
];
var priceValues =
[
“2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
];
for (var i = 0; i < 200; i++) {
var row = {};
var productindex = Math.floor(Math.random() * productNames.length);
var price = parseFloat(priceValues[productindex]);
var quantity = 1 + Math.round(Math.random() * 10);
row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
row["productname"] = productNames[productindex];
row["price"] = price;
row["quantity"] = quantity;
row["total"] = price * quantity;
data[i] = row;
}
var source =
{
localdata: data,
datatype: "array",
datafields:
[
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' }
]
};
var dataAdapter = new $.jqx.dataAdapter(source);

$("#jqxgrid1").jqxGrid(
{
width: '100%',
height: '100%',
source: dataAdapter,
theme: theme,
columnsresize: true,
rowsheight: 23,
columnsheight: 23,
columns: [
{ text: 'Name', dataField: 'firstname', width: 100 },
{ text: 'Last Name', dataField: 'lastname', width: 100 },
{ text: 'Product', editable: false, dataField: 'productname', width: 180 },
{ text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
]
});

$("#jqxgrid2").jqxGrid(
{
width: '100%',
height: '100%',
source: dataAdapter,
theme: theme,
columnsresize: true,
rowsheight: 23,
columnsheight: 23,
columns: [
{ text: 'Name', dataField: 'firstname', width: 100 },
{ text: 'Last Name', dataField: 'lastname', width: 100 },
{ text: 'Product', editable: false, dataField: 'productname', width: 180 },
{ text: 'Quantity', dataField: 'quantity', width: 80, cellsalign: 'right' },
{ text: 'Unit Price', dataField: 'price', width: 90, cellsalign: 'right', cellsformat: 'c2' },
{ text: 'Total', dataField: 'total', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' }
]
});

$('#panel1').jqxPanel({ width: '100%', height: '100%', sizeMode: 'wrap' });
$('#panel2').jqxPanel({ width: '100%', height: '100%', sizeMode: 'wrap' });

$('#horizontalsplitter').jqxSplitter({
width: '100%',
height: '100%',
theme: theme,
splitBarSize: 16,
orientation: 'horizontal',
panels: [{ size: '50%', collapsible: true },
{ size: '50%', collapsible: true}]
});

} catch (e) {
alert("err " + e.Message);
}
});

button1

button2

button3

[Author]

Posts