jQuery UI Widgets › Forums › TreeGrid › JQXTreeGrid
Tagged: Angular tree grid, camelCase, datafields, datatable.js, Inline editing, jquery tree grid, jqxBaseFramework is not defined, jqxtree.js, jqxTreeGrid, reference error, tree grid, treegrid, version
This topic contains 5 replies, has 2 voices, and was last updated by Dimitar 9 years, 3 months ago.
-
AuthorJQXTreeGrid Posts
-
Hi,
I am trying to use JQXTreegrid. I am getting the following error for treeGrid.js and datatable.js.Uncaught ReferenceError: jqxBaseFramework is not defined
I am using jQWidgets v3.8.1 version. I am only having trouble with these two files. Remaining JQwidget files works fine. I am placing after my jquery file. These two are still not working. Is there any particular version of jquery that i should use?
Thanks
Hi swetha,
Please make sure that all your jQWidgets files are updated to version 3.8.1. This error is thrown when some files are from an older version. If this does not help, please post your script references so that we can review their order.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you Dimitar. Everything is working fine now. But I still have some problem with loading data into tree grid. I am using the sameway that I use for JQXGrids. Is it the right method for Treegrid. If I do this way, I am getting following error.
Cannot read property ‘datafields’ of undefined datatable.js
Here is my code.
manageGroupsData.push(manageGroupData)
}
}
var newSource =
{
localdata: manageGroupsData,
datatype: “array”
};
$(“#managegroupgrid”).jqxTreeGrid({
source: newSource
});
manageGroupsData= new Array();
var manageGroupSource =
{
datafields: [
{name: ‘groupid’},
{name: ‘groupName’},
{name: ‘firstName’},
{name: ‘lastName’},
{name: ‘contactid’}
],
hierarchy:
{
keyDataField: { name: ‘groupid’ },
parentDataField: { name: ‘contactid’ }
},
id: ‘groupid’,
localdata:manageGroupsData,
datatype: “array”
};manageGroupsdataAdapter = new $.jqx.dataAdapter(manageGroupSource)
$(“#managegroupgrid”).jqxTreeGrid(
{
width: ‘100%’,
height: ‘100%’,//showheader: true,
source: manageGroupsdataAdapter,
//enablemousewheel: true,
//showsortmenuitems: false,
//enablehover: false,
sortable: false,
// showtoolbar: false,
// selectionmode: ‘none’,
// pageable: true,
// rowsheight: 20,
// groupable:true,
columnsResize:true,
// altrows: true,columns: [
{datafield: ‘firstName’, editable:true, width: 181, height: 20},
{datafield: ‘lastName’, editable:true, width: 181, height: 20}
// {datafield: ‘groupName’, width: 181, height: 20}]
});Thanks
Hi swetha,
jqxTreeGrid properties are all written in camelCase unlike those of jqxGrid. You need to change datafields to dataFields, localdata to localData, etc. For the correct names, please refer to the jqxTreeGrid API Documentation.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thank you Dimitar. You made my day. I am also trying to group the contacts based on groupName. I would like to have inline edit option to the group name but not for the contacts that are listed under the group names. How can I do it?
var manageGroupSource =
{
datafields: [
{name: ‘groupid’},
{name: ‘groupName’},
{name: ‘firstName’},
{name: ‘lastName’},
{name: ‘contactid’}
],
hierarchy:
{
groupingDataFields:
[
{
name: “groupName”
]
},
root: “entry”,
record: “content”,
id: { name: “Contactid”},
localdata: manageGroupsData,
datatype: “array”,$(“#managegroupgrid”).jqxTreeGrid(
{
width: 350,
height: 250,
source: manageGroupsdataAdapter,
sortable: false,
columnsResize:true,
altRows: true,
editable:true,columns: [
{datafield: ‘firstName’, editable:false, width:100, height: 20},
{datafield: ‘lastName’, editable:false, width: 100, height: 20}]
If i use this code, I am not able to edit the group name. I just want to edit only group name.
Thanks
Hi swetha,
Unfortunately, this requirement cannot be achieved.
Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/ -
AuthorPosts
You must be logged in to reply to this topic.