Grid Integration with Querybuilder

[Rafael]

Hello,

I am testing DataGrid with QueryBuilder and its working nice!

But, I just want to know, if it's possible to open query builder like a "connected dialog". This behavior happens when I click in the choose columns, for example:

It would be nice if when I click in the button of toolbar "Pesquisar" (Search), one dialog with query builder open like that. It is possible?

Ps. If it is not possible, one another solution would be some accordion, and when I click on button "Pesquisar", shows the content of Query builder between toolbar and the grid.

Ps.2 Sorry for english mistakes

Thank you

[Rafael]

Hello,

Updating...

I almost got it! I use this article: https://www.syncfusion.com/forums/151140/add-a-custom-dropdown-button-to-a-grid-toolbar to put a dropdown button inside a grid toolbar and this another to put a custom content inside a dropdown button: https://ej2.syncfusion.com/angular/documentation/drop-down-button/popup-items/#template

Now, I just need to know if its possible to render the content to other side:

If it's not possible I will just change the dropdown search button from right to left. And one another problem, is that always that I click to select one field, the content of dropdown close.

Thank you

[Rafael]

Hello,

I put querybuilder button on the left side and about the problem closing dropdown area every time that I select a field in query builder, I solve doing this:

<ng-template #queryBuilderToolbarTemplate>
    <button ejs-dropdownbutton target='#target' content='Pesquisar' iconCss='e-icons e-search' (beforeClose)='onClose($event)'></button>
</ng-template>

onClose($event: any) {
  let parentElement = $event.event.srcElement.parentElement;
  if ((parentElement.attributes['id'] != null && parentElement.attributes['id'].value.includes('querybuilder')) || (parentElement.attributes['role'] != null && parentElement.attributes['role'].value.includes('menu'))){
    $event.cancel = true;
  }
}

Thank you

[Mohan Kumar Ramasamy]

Hi Rafael, 

 

We have checked your requirement and render dropdown button in Grid as toolbar item. And created our Query Builder inside the dropdown popup to achieve your requirement, please refer below code snippets. 

<div id="querybuilder"> 

    <ejs-querybuilder #querybuilder class="row" width="70%" [dataSource]="data" [rule]="importRules" (created)="createdControl()"> 

        <e-columns> 

            <e-column field="OrderID" label="Order ID" type="number"></e-column> 

            <e-column field="CustomerName" label="Customer Name" type="string"></e-column> 

            <e-column field="TitleOfCourtesy" label="Title Of Courtesy" type="boolean" [values]="values"></e-column> 

            <e-column field="Freight" label="Freight" type="number"></e-column> 

            <e-column field="OrderDate" label="Order Date" type="date" format="dd/MM/yyyy"></e-column> 

            <e-column field="ShipCountry" label="Ship Country" type="string"></e-column> 

        </e-columns> 

    </ejs-querybuilder> 

    <table class="filterquery"> 

        <tr> 

            <td> 

                <button #toggleBtn ejs-button [isPrimary]="true" (click)="btnClick()">Close</button> 

            </td> 

            <td> 

                <button #okBtn ejs-button [isPrimary]="true" (click)="okbtnClick()">filter</button> 

            </td> 

        </tr> 

    </table> 

</div> 

 

<ng-template #template2 let-data> 

    <button ejs-dropdownbutton target='#querybuilder' cssClass='e-customquerybuilder' (beforeClose)='onClose($event)'>QueryBuilder</button> 

</ng-template> 

 

okbtnClick() { 

    const predicate: Predicate = this.qryBldrObj.getPredicate(this.qryBldrObj.rule); 

    const fltrDataSource: Object[] = []; 

    let dataManagerQuery: Query; 

    if (isNullOrUndefined(predicate)) { 

        dataManagerQuery = new Query().select(['OrderID', 'CustomerName', 'Freight', 'OrderDate', 'ShipCountry']); 

    } else { 

        dataManagerQuery = new Query().select(['OrderID', 'CustomerName', 'Freight', 'OrderDate', 'ShipCountry']) 

            .where(predicate); 

    } 

    new DataManager(orderDetails) 

        .executeQuery(dataManagerQuery) 

        .then((e: ReturnOption) => { 

            (<Object[]>e.result).forEach((data: Object) => { 

                fltrDataSource.push(data); 

            }); 

        }); 

    this.grid.dataSource = fltrDataSource; 

    this.grid.refresh(); 

    let popupElem: HTMLElement = document.getElementsByClassName("e-dropdown-popup e-customquerybuilder")[0] as HTMLElement; 

    let popupObj: Popup = getComponent(popupElem, 'popup') as Popup; 

    popupObj.hide(); 

} 

 

For your reference, we have prepared a sample based on this, please refer below sample link. 

 

Link: https://stackblitz.com/edit/angular-ekft7w-lfwfzt?file=app.component.html  

 

Please let us know, if you need any further assistance, 

 

Regards, 

Mohankumar R 

[Rafael]

Hello Mohankumar,

Thank you very much

[Mohan Kumar Ramasamy]

Hi Rafael, 

 

Thanks for the update.  

 

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

 

Regards, 

Mohankumar R