jQuery UI Widgets Forums Grid add jqxtree custom createfilterpanel

Tagged: 

This topic contains 3 replies, has 2 voices, and was last updated by  Hristo 5 years, 5 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
  • add jqxtree custom createfilterpanel #107887

    genfu
    Participant

    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

    add jqxtree custom createfilterpanel #107888

    genfu
    Participant
    add jqxtree custom createfilterpanel #107890

    genfu
    Participant
    add jqxtree custom createfilterpanel #107908

    Hristo
    Participant

    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 no dataAdapterTree option as a constructor of the jqx object.
    Could you clarify what is your issue and what do you want to achieve?

    Best Regards,
    Hristo Hristov

    jQWidgets team
    https://www.jqwidgets.com

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.