How to integrate JQX grid with jquery Resizable

[amitsahaParticipant]

I am intending to use jqxgrid for my application but I have a certain requirement where the grid has to be resized by user. So I tried to use jquery resizable but it is not working well.

My html
<div id=’jqxWidget’>
<div id=”agent”>
</div>
</div>

var source =
{
//localdata: generatedata(5),
datafields:
[
{ name: ‘name’, type: ‘string’ },
{ name: ‘state’, type: ‘string’ },
{ name: ‘skill’, type: ‘string’ },
{ name: ‘avgAcwTime’, type: ‘number’ },
{ name: ‘avgHandleTime’, type: ‘number’ },
{ name: ‘avgTalkTime’, type: ‘number’ },
{ name: ‘callsAnswered’, type: ‘string’ },
{ name: ‘center’, type: ‘string’ },
{ name: ‘lanId’, type: ‘string’ },
{ name: ‘loginId’, type: ‘string’ },
{ name: ‘manager’, type: ‘string’ },
{ name: ‘site’, type: ‘string’ },
{ name: ‘teamLead’, type: ‘string’ },
{ name: ‘workGroup’, type: ‘string’ },
],
datatype: “array”
};

var dataAdapter = new $.jqx.dataAdapter(source);
var columns = [
{ text: ‘Name’, dataField: ‘name’, minwidth: 20 },
{ text: ‘State’, dataField: ‘state’, minwidth: 20 },
{ text: ‘Skill’, dataField: ‘skill’, minwidth: 20 },
{ text: ‘Avg Acw Time’, dataField: ‘avgAcwTime’, minwidth: 20, cellsalign: ‘right’ },
{ text: ‘Avg Handle Time’, dataField: ‘avgHandleTime’, minwidth: 20, cellsalign: ‘right’ },
{ text: ‘Avg Talk Time’, dataField: ‘avgTalkTime’, cellsalign: ‘right’, minminwidth: 10},
{ text: ‘Calls Answered’, dataField: ‘callsAnswered’, minwidth: 20 },
{ text: ‘Center’, dataField: ‘center’, minwidth: 20 },
{ text: ‘Lanid’, dataField: ‘lanId’, minwidth: 20 },
{ text: ‘Login Id’, dataField: ‘loginId’, minwidth: 20 },
{ text: ‘Manager’, dataField: ‘manager’, minwidth: 20 },
{ text: ‘Site’, dataField: ‘site’, minwidth: 20 },
{ text: ‘Team Lead’, dataField: ‘teamLead’, minwidth: 20 },
{ text: ‘Workgroup’, dataField: ‘workGroup’, minwidth:20 }
];

// create data grid.
$(“#agent”).jqxGrid(
{
/* width: ‘100%’,
height: ‘100%’,*/
source: dataAdapter,
columnsresize: true,
columnsreorder: false,
sortable: true,
columns: columns,
enabletooltips: true,
columnsautoresize: true
});

Now when I am writing

this.$(“#agent”).resizable(); or
this.$(“#jqxWidget”).resizable(); It is not working

[Peter StoevKeymaster]

Hi amitsaha,

It’s not possible to use jqxGrid with jQuery UI’s Resizable plugin.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[amitsahaParticipant]

Yes I figured that out and achieved that using jqx splitter

[Author]

Posts