[NickMember]

Hi,

Reposting the query

I have a jqxSplitter as the below code.

$(“#jqxSplitter”).jqxSplitter({ height: ’100%’, width: ’100%’, theme: theme, panels: [{ size: ‘10%’}, { size: ‘70%’ }, { size: ‘20%’}] });

1) i have a query about – on how to get the last panel i,e the one with size: ’20%’ from the splitter (or how to refer) and add a ‘div’
which contains data in ‘html table’ .

2) the other query is after knowing how to refer the last panel from the splitter , is it possible to put a jqxpanel with some content inside it,
Please provide a sample on how to acheive this.

Thanks
Nick

[NickMember]

Hi,

Thanks for the reply.

But my issue now is on how to display the row selected details. As the grid with column header are dynamic i.e every time they differ based on the grid chosen , so i am looking out on a generic solution of how to display the row selected details.

On select of row in a Customer grid ==>
I need to display a format Column header : Column value from the row as below.

Customer Name : Nick
Customer ID: 002
Customer Dept: Sales
Customer DeptCode: DT009

On select of row in a Deparment grid ==>
I need to display a format Column header : Column value from the row as below.

Dept Name : Sales
Dept ID: DT009
Dept Region: Texas
Dept RegCode: RC998

Please help me out on how to display it as the above format in a table.

Thanks and Regards
Nick

[NickMember]

Hi Dimitar,

I have tried the option suggested by you , but i still see the column having the check boxes as checked.

Though the first column with data field ‘CompName’ in my case is got from the datasource which is an array of values , but the next 2 columns are common for each row in the grid , one a text box and the other a checkbox as the code below.

var attrList = new Array();

// data is var holding the row details for first column
if(data != null){
for (var i = 0; i < data.length; i++) {
var row = {};
row["CompName"] = data[i];
attrList[i] = row;
}
}

var attrsSource =
{
datatype: "array",
localdata: attrList
};

var attrsDataAdapter = new $.jqx.dataAdapter(attrsSource);

$(“#jqxObjGrid”).jqxGrid(
{
width: 350,
editable: true,
source: attrsDataAdapter,
columnsresize: true,
theme: theme,
columns: [
{ text: 'Comp Name', dataField: 'CompName', columntype: 'textbox', width: 160, editable: false},
{ text: 'Comp Region', dataField: 'Comp Region', columntype: 'textbox', width: 100 , editable: true},
{ text: 'Alloted', dataField: 'isAlloted', columntype: 'checkbox', width: 100, editable: true, resizable: false, type: ‘bool’},
],
});

As i see checkbox design with the newer version is a small box within it a black filled in square box for the first time, i guess that’s how it is designed with newer version but as i uncheck its blank and if i check it back again its a ‘tick’ mark that appears rather the filled-in square box.

Please help me with the issue to have the checkbox not checked by default.

Regards
Nick

[NickMember]

Hi,

I have 2 issues with the grid.

1) Go to page option on the grid.
2) Show rows option is always holding 10,20,30 values only , my issues are with the horizontal scroll as i don’t see the 20 option in the scroll rows as i click the horizontal scroll it just throws javascript error with jqx-all.js at line 7.

I have created and initialized the grid with all the data displaying properly, just that these 2 options wouldn’t work.

Please find the code i have done for the grid.

$(“#jqxgridIR”).jqxGrid(
{
width: document.documentElement.clientWidth-150,
source: reqDataAdapter,
editable: true,
pageable: true, –> i have used this option for the Go to Page
autoheight: true,
columnsresize: true,
altrows:true,
filterable: true,
sortable: true,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘name’, datafield: ‘name’, columntype: ‘textbox’, width: 100, pinned: true, editable: false }
]
});
$(“#jqxgridIR”).jqxGrid({ columns: reqGridCustCols });

Kindly help me with the issues of the grid.

Regards
Nick

[Author]

Posts