jQuery UI Widgets › Forums › Grid › add jqxtree custom createfilterpanel
Tagged: tree filter
This topic contains 3 replies, has 2 voices, and was last updated by Hristo 5 years, 5 months ago.
-
Author
-
buildUserOrgFilter = ( filterPanel: any, datafield: string ): void => {
const randomId = filterPanel[0].parentElement.id.substr( 8 );
const userFilterDiv = document.createElement( ‘div’ );const userFilterDivClass = document.createElement( ‘div’ );
userFilterDivClass.className = ‘filter’;
userFilterDivClass.style.cssText = ‘margin-left: 7px;’;const textContainer = document.createElement( ‘div’ );
textContainer.className = ‘filter’;
textContainer.innerText = ‘search by the value: ‘;
textContainer.style.cssText = ‘margin-top: 3px; margin-bottom: 3px;’;userFilterDivClass.appendChild( textContainer );
// add tree
const userOrgTreeContainer = document.createElement( ‘div’ );
// userOrgTreeContainer.id = ‘userFilterOrgTreeContainer’ + randomId;
userOrgTreeContainer.style.cssText = ‘5px’;const userOrgTreeInner = document.createElement( ‘div’ );
userOrgTreeInner.id = ‘userOrgTreeInner’ + randomId;
// userOrgTreeContainer.appendChild(userOrgTreeInner);const buttonsContainer = document.createElement( ‘div’ );
buttonsContainer.className = ‘filter’;
Object.assign( buttonsContainer.style, { height: ’25px’, marginLeft: ’20px’, marginTop: ‘7px’ } )const filterButtonContainer = document.createElement( ‘div’ );
const filterClearButtonContainer = document.createElement( ‘div’ );filterButtonContainer.style.cssText = ‘margin-left: 16px; float: left’;
filterClearButtonContainer.style.cssText = ‘margin-left: 12px; float: left’;filterButtonContainer.id = ‘filterButtonContainer’ + randomId;
filterClearButtonContainer.id = ‘filterClearButtonContainer’ + randomId;buttonsContainer.appendChild( filterButtonContainer );
buttonsContainer.appendChild( filterClearButtonContainer );userFilterDivClass.appendChild( userOrgTreeInner );
userFilterDivClass.appendChild( buttonsContainer );
userFilterDiv.appendChild( userFilterDivClass );
filterPanel[0].appendChild( userFilterDiv );const filterButtonOptions = { width: 45, height: 25, theme: this.theme, value: ‘filter’ };
const filterButton = jqwidgets.createInstance( ‘#filterButtonContainer’ + randomId, ‘jqxButton’, filterButtonOptions );const filterClearButtonOptions = { width: 45, height: 25, theme: this.theme, value: ‘clear’ };
const filterClearButton = jqwidgets.createInstance( ‘#filterClearButtonContainer’ + randomId, ‘jqxButton’, filterClearButtonOptions );const filterUserOrgTreeOptions = {
source: this.orgTreeRecords, checkboxes: ‘true’, theme: this.theme, width: ‘192px’, height: ‘130px’
};const userOrgTreeInput = jqwidgets.createInstance( ‘#userOrgTreeInner’ + randomId, ‘jqxTree’, filterUserOrgTreeOptions );
const orgFilterInfo = this.gridUserxs.getfilterinformation();
if ( orgFilterInfo.length > 0 ) {
for ( let i = 0; i < orgFilterInfo.length; i++ ) {
if ( ‘organizationId’ === orgFilterInfo[i].filtercolumn ) {
const arrayFilters = orgFilterInfo[i].filter.getfilters();
for ( let j = 0; j < arrayFilters.length; j++ ) {
const orgItems = userOrgTreeInput.getItems();
for ( let k = 0; k < orgItems.length; k++ ) {
if ( orgItems[k].value === arrayFilters[j].value ) {
userOrgTreeInput.checkItem( orgItems[k], true );
}
}
}
}
}
}filterButton.addEventHandler( ‘click’, () => {
const checkedItems = userOrgTreeInput.getCheckedItems();
const filtergroup = new jqx.filter();
const filterOrOperator = 1;
// const checkedItems = userOrgTreeInput.getCheckedItems();
for ( let i = 0; i < checkedItems.length; i++ ) {
// set filter’s value.
const filtervalue = checkedItems[i].value;
const filtercondition = ‘equal’;
const filter1 = filtergroup.createfilter( ‘numericfilter’, filtervalue, filtercondition );
filtergroup.addfilter( filterOrOperator, filter1 );
}
// add the filters.
this.gridUserxs.addfilter( ‘organizationId’, filtergroup );
const filtergroupOrgName = new jqx.filter();
const filterOrgName = filtergroup.createfilter( ‘stringfilter’, ‘-0’, ‘not_equal’ );
filtergroupOrgName.addfilter( filterOrOperator, filterOrgName );
this.gridUserxs.addfilter( ‘organizationName’, filtergroupOrgName );
// apply the filters.
this.gridUserxs.applyfilters();
this.gridUserxs.closemenu();// let filtergroup = new jqx.filter();
// let filterOrOperator = 1;
// let filtervalue = ‘input.val()’;
// let filtercondition = ‘contains’;
// let filter1 = filtergroup.createfilter(‘stringfilter’, filtervalue, filtercondition);
// filtergroup.addfilter(filterOrOperator, filter1);
// add the filters.
// this.gridUserxs.addfilter(datafield, filtergroup);
// apply the filters.
// this.gridUserxs.applyfilters();
// this.gridUserxs.closemenu();
} );filterClearButton.addEventHandler( ‘click’, () => {
this.gridUserxs.removefilter( ‘organizationId’, false );
this.gridUserxs.removefilter( ‘organizationName’, false );
// apply the filters.
userOrgTreeInput.uncheckAll();
this.gridUserxs.applyfilters();
this.gridUserxs.closemenu();
} );
}hello there, after i do by this ,the tree style of checkbox is inaesthetic, could you help fix it, thanks
like this sample
https://github-oca6wt.stackblitz.io
https://stackblitz.com/edit/github-zh2ahfthanks
Hello genfu,
I would like to ask you for clarification.
Why you use the jqxTree there I think you should have a hierarchical structure to be useful?
Instead of this, you could use the jqxListBox with checkboxes.
Also, I would like to mention that if you open the browser’s console you will see the error messages.
There is nodataAdapterTree
option as a constructor of thejqx
object.
Could you clarify what is your issue and what do you want to achieve?Best Regards,
Hristo HristovjQWidgets team
https://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.