Filtering with additional external fields

[Marko Gluhak]

I could not find any examples on how to add extra fields that can be used in filtering remote data.

Filtering works with in-place filters in the header row of the data grid, but I want to add some extra fields as separate section on page.

For example my grid is displaying Users with FirstName, LastName and Email column.

I want to add more filtering fields (Birth year, country (referenced table), class (referenced table),...) 

My idea is to somehow send those extra field values on backend (using DataMangerRequest or inherited class) using the datagrid remote url link. 

Is that possible, and if yes please can you give me example (.chtml, .js if needed and .cs). Thanx!

[Aishwarya Rameshbabu]

Hi Marko Gluhak,

Greetings from Syncfusion support.

Upon reviewing your query, it appears that you are trying to filter the additional fields on your web page. In order to provide a solution, we kindly request further information to validate your requirements effectively.

• It seems that you wish to add extra fields as a separate section on a web page. Could you please confirm whether these additional fields need to be added to the existing Grid columns? If not, we would appreciate a more detailed explanation of your use case.
• “I could not find any examples on how to add extra fields that can be used in filtering remote data” – this line indicates that you are attempting to dynamically add columns to the Grid and to filter them accordingly. This can be achieved using the 'changeDataSource' method of the Grid. For more information, please refer to the documentation link provided below.

Documentation Link: how-to-change-the-data-source-or-columns-dynamically

• Furthermore, it appears that you are utilizing Remote Data Binding in the Grid. Therefore, we kindly request clarification on the adaptor details and the current version of the Syncfusion package you are using.
• Please elaborate on the scenarios in which you intend to add additional fields and in which case you need to send those additional field values to the backend.

Providing this information will enable us to better understand your requirements and offer a timely solution.

Regards

Aishwarya R

[Marko Gluhak]

Hi.

here is example what I would like. I have student and enrollments. Each student can have many enrollments. I have grid that display all enrollments and column are:

• Firstname of student
• Lastname of student
• Date od enrollment
• Name of class
• Grade text (artificial column that is calculated on the fly on server, basically turn ids to text - this can not be used for filtering as data displayed are not part of columns in database
  

On that same page (above grid) I want to have search section that includes:

• Student city
• Student email
• Date of enrollment invitation
• Grade
• Button that will initiate grid refresh
  

The best way for filtering would be to have all searching fields inside that search section (and disable filtering in the grid) just for consistency so I do not have to places to filter something (grid + search section).

Example of how I would like this to look like is similar to this image. In this example search fields are also part of the grid but that is not the point. Point is to have separate "section" where I can define my own fields that will be transfered to server side along with sorting, grouping, ... and I will handle filtering on server side:

Sorting, grouping, .. all other thing should remain as existing part of DataGrid.

For retriving data I am using this like in .cshtml

......

<e-data-manager url="/Admin/AppUser/GetAppUsersGrid" crossdomain="true" adaptor="UrlAdaptor" ></e-data-manager>

......

[Marko Gluhak]

I did manage to achieve this (I did not test all scenarios) but I'm not is is right way.

1. I add text field "CountryNameSearch"
2. I set the model for the .cshtml page with my own class "AppUserListSearchModel" which inherits "DataManagerRequest" and has "CountryNameSearch" property
3. I changed the backend method signature to reflect that (public async Task<IActionResult> GetAppUsersGrid( [FromBody] AppUserListSearchModel dm ))
4. I add actionBegin="actionBegin" to ejs-grid tag helper in .cshtml
   
5. I add javascript part with:

function actionBegin(){
    if (this.query.params.length && this.query.params.find(element => element.key === "CountryNameSearch"))
        this.query.params["CountryNameSearch"].value = countryNameValue;
      else
        this.query.addParams("CountryNameSearch", countryNameValue);
}

This is an example with only 1 field just to make this work. Please can you advise is that good approach or if you would suggest something different?

Thank you

[Aishwarya Rameshbabu]

Hi Marko Gluhak,

Thank you for sharing the details.

Based on the information provided, it appears that you are attempting to apply filters to an external search area by disabling filtering within the Grid. You have also attempted to meet this requirement for a single field in the actionBegin event of the Grid. For filtering by multiple fields, we recommend generating complex predicates using which you can create composite filter criteria.

We have developed a simple sample where there are two input fields in the search area, with one field being a part of the Grid and the other not defined in the Grid columns. Searching for values in both input fields will result in the Grid displaying corresponding results.

In the onclick event of the search button, filter predicates have been created and assigned to the query property of the Grid. For further information, please consult the attached sample, video demonstration, and code example.

DataGridFeatures.cshtml

 

<div class="control-section">

    <form id="customForm">

        <div class="form-row">

        <div class="form-group col-md-6">

            <div class="e-float-input e-control-wrapper">

                <input name='CustomerID'  type='text' />

                <span class="e-float-line"></span>

                <label  class="e-float-text e-label-top">Customer Name</label>

            </div>

        </div>

        <div class="form-group col-md-6">

            <div class="e-float-input e-control-wrapper">

                <input name='ShipCountry' />

                <span class="e-float-line"></span>

                <label  class="e-float-text e-label-top">Ship Country</label>

            </div>

        </div>

        <div class="btnStyles">

        <ejs-button id="search" onclick=processForm(event) content="Search"></ejs-button>

        <ejs-button id="clear" content="Clear"></ejs-button>

        </div>

    </div>

    </form>

</div>

 

 

   function processForm(event) {

    event.preventDefault();

    var grid = document.getElementById('Grid').ej2_instances[0];

    const form = document.getElementById('customForm');

    const inputs = form.getElementsByTagName('input');

    const predicates = [];

    for (let i = 0; i < inputs.length; i++) {

        const input = inputs[i];

        if (input.value) {

            const field = input.name;

            const value = input.value;

const predicate = new ej.data.Predicate(field, 'equal', value);

predicates.push(predicate);

        }

    }

    const filterQuery = new ej.data.Query().where(ej.data.Predicate.and(predicates));

    grid.query = filterQuery;

}

 

 

Sample and Video demo: Attached.

If you need any further assistance or have additional questions, please feel free to let us know.

Documentation Link: Building-complex-filter-criteria-using-predicate

Regards

Aishwarya R

Attachment: 188411SampleAndVideo_e413a199.zip