We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. EJ2 Grid Filter Display Text

EJ2 Grid Filter Display Text

Hello

I am using EJ 2 version 16.3.0.36 (nuget package).


In a grid I have a column that represents values from an array of objects as follows:
[
     {
          id: 0,
          text: "New"
     },
     {
          id: 1,
          text: "Old"
     },
     ...
]

The column is added like this:
...
col.Field("State").HeaderText("State").Type("number").Filter(new { type = "CheckBox" }).Add();
...

The grid displays this column as expected, with the display texts as "New", "Old", etc. I used the "valueAccessor" to display the correct text.

However, when I filter this column, the options only display the id, not the text. E.g. "0" is displayed instead of "New".

How can I display the text instead of the id for the filter options?


Kind regards
Phil

15 Replies
MS Madhu Sudhanan P Syncfusion Team December 10, 2018 08:45 AM UTC

Hi Phil, 

Thanks for contacting Syncfusion support.  

You can use the filter.itemTemplate property to achieve your requirement. Now the check box filter will show the text instead of the item id. 


 
<script id='filteritem'  type="text/x-jsrender" > 
    <span>${getItemTemplate(data)}</span> 
</script> 

<script> 
 
    var dm = [{ 
          id: 0, 
          text: "New" 
     }, 
     { 
          id: 1, 
          text: "Old" 
     }]; 
    window.getItemTemplate = function(data) { 
          if (data.State === 'Select All') {  
            return data.State; 
          } 
            return dm.filter((d) => d.id === data["State"])[0].text; 
        } 
</script> 

. . . . 
col.Field("State").HeaderText("State").Type("number").Filter(new { type = "CheckBox", itemTemplate="#filteritem" }).Add(); 
. . . . 


Regards, 
Madhu Sudhanan P 


UN Unknown December 10, 2018 01:07 PM UTC

Thank you for your reply.

This works very well for simple cases, at least on the client side.
On the server side there is an issue.
I use an enum to store the data.
When performing the data operations .Execute() method, I get an exception "Invalid cast from 'System.Int64' to 'MyStateEnum'."
I can manually cast the int to the enum and all works fine.
However, it would be nice if DataOperations's .Execure() method could automatically convert the int into the enum.
Could this be implemented in the future?


One of my use cases is a bit more complicated.
It is possible to have more than 1 value at the same time.
A column may contain several ids ("0" and "1"). The data.State would then not be a string, but an array of strings.
(Note: in this more complex case, the ids are strings as well)
When I filter now, the options are combined, separated by comma e.g: "New, Old". But what I would want is to have 2 separate options "Old" and "New".
On the server side the model contains a list of 
Is it possible to do this?
Would the filter still work? On the server side this might need quite some adaptions in order to work correctly.


DR Dhivya Rajendran Syncfusion Team December 13, 2018 03:30 AM UTC

Hi Phil, 

Thanks for your update. 

Query1: However, it would be nice if DataOperations's .Execure() method could automatically convert the int into the enum. 

Thanks for your suggestion we will check the feasibility with our source and included this in any of our upcoming release. 

Query2: The data.State would then not be a string, but an array of strings. 
 
By default, DataOperation will work for one to one relation (work for collection of object) but in your case you are trying to perform filter for collections(array of string) so its not feasible to do with DataOperation. 

Regards, 
R.Dhivya 


UN Unknown December 13, 2018 07:48 AM UTC

Thank you for your reply.

Would it be possible to manually set the options that are available in the filter?

In my case the options correspond to an enum. Thus all enum values should be available in the filter as options (e.g. "New" and "Old").
These options should be independent of the rows available in the grid (even if there is not a single row the enum values + select all should be available)
When selecting an option (e.g. "Old") and filtering, the dm.Where property should contain only the value that was selected (e.g. id = 0) for the column that contains the enum values.

Is it possible to do something like this?
If so, could you please show me how to manually set the options available in the filter (all enum values + Select all)?


TS Thavasianand Sankaranarayanan Syncfusion Team December 14, 2018 11:51 AM UTC

Hi Phil, 

Thanks for your update. 

Query : could you please show me how to manually set the options available in the filter (all enum values + Select all)? 
 
We have validated your query and you can achieve your requirement by using the below way. In the below code example, we have provide custom dataSource for filterModel in actionBegin event of Grid. 

Please refer the below code example for more information. 

<script> 
    function actionbegin(e) { 
        if (e.requestType === 'filterbeforeopen' && e.columnName === 'State') { 
            // you can provide custom dataSource (all enum values) 
            e.filterModel.options.dataSource = [{ State: "New" }, { State: "Old" }, { State:"Latest" }] 
    } 
  } 
</script> 
<div> 
 
    @Html.EJS().Grid("Grid").ActionBegin("actionbegin").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col => 
{ 
    . . . . . 
    col.Field("State").HeaderText("State").Type("number").ValueAccessor("state").Filter(new { type = "CheckBox"}).Width("100").Add(); 
 
}).AllowPaging().Render() 
 
</div> 

 

Regards, 
Thavasianand S. 


UN Unknown December 14, 2018 02:45 PM UTC

Thank you for your reply.

I am able to correctly display the text for the filter options.
However, there are some problems.

The Value sent in the where filter on the server side is the text property ( e.g."Old"). This is however of no use to the server. I need to send the id property (e.g. "0"). How can this be changed?

When setting a filter on another column first and then setting the filter on the "State" column, no options are displayed, when the popup for the "State" column filter appears. Could you help me with that as well?

TS Thavasianand Sankaranarayanan Syncfusion Team December 17, 2018 12:37 PM UTC

Hi Phil, 

Thanks for your update. 
 
Query :  I need to send the id property (e.g. "0"). How can this be changed? 
 
We have validated with our end and we suggest you to use the below way to achieve your requirement. In the below sample, we have used itemTemplate and provide custom dataSource for checkbox filter in actionBegin event with requestType as filterbeforeopen.  

Please refer the below code example for more information. 

<script id='filteritem' type="text/x-jsrender"> 
    <span>${getItemTemplate(data)}</span> 
</script> 
 
<script> 
    function state(field, data, column) { 
        var enumText = data[field] == 1 ? "New" : "Old"; 
        return enumText; 
    }; 
 
    var dm = [{ 
        id: 1, 
        text: "New" 
    }, 
    { 
        id: 2, 
        text: "Old" 
    }]; 
    window.getItemTemplate = function (data) { 
        if (data.State === 'Select All') { 
            return data.State; 
        } 
        return dm.filter((d) => d.id === data["State"])[0].text; 
    } 
    function actionbegin(e) { 
        if (e.requestType === 'filterbeforeopen' && e.columnName === 'State') { 
            // custom dataSource 
            e.filterModel.options.dataSource = [{ State: 1 }, { State: 2}]; 
            e.filterModel.options.filteredColumns = e.filterModel.options.filteredColumns.filter(function (col) { 
                if (col.field == 'State') { 
                    return true; 
                } 
                return false; 
            })  
        } 
    } 
</script> 
<div> 
 
    @Html.EJS().Grid("Grid").ActionBegin("actionbegin").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("OrderID").Width("150").Add(); 
    col.Field("State").HeaderText("State").Type("number").ValueAccessor("state").Filter(new { type = "CheckBox", itemTemplate = "#filteritem" }).Width("100").Add(); 
 
}).AllowPaging().Render() 
 
</div> 

Query : When setting a filter on another column first and then setting the filter on the "State" column, no options are displayed, 
 
By default, we have displayed checkbox data (State column) based on the previous filtered data(another column). While using custom data source there is no filtered field(another column Ex: EmployeeID) in the custom data so that it shows no matches found. 

We suggest you to use the below way to achieve your requirement. 

<script> 
    . . . . . 
    function actionbegin(e) { 
        if (e.requestType === 'filterbeforeopen' && e.columnName === 'State') { 
            // custom dataSource 
            e.filterModel.options.dataSource = [{ State: 1 }, { State: 2}]; 
            remove already filtered columns except State 
            e.filterModel.options.filteredColumns = e.filterModel.options.filteredColumns.filter(function (col) { 
                if (col.field == 'State') { 
                    return true; 
                } 
                return false; 
            })  
        } 
    } 
</script> 
<div> 
 
    @Html.EJS().Grid("Grid").ActionBegin("actionbegin").DataSource(dataManager => { dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor"); }).AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col => 
{ 
    col.Field("OrderID").HeaderText("OrderID").Width("150").Add(); 
    col.Field("State").HeaderText("State").Type("number").ValueAccessor("state").Filter(new { type = "CheckBox", itemTemplate = "#filteritem" }).Width("100").Add(); 
 
}).AllowPaging().Render() 
 
</div> 

Regards, 
Thavasianand S. 
 


UN Unknown January 14, 2019 10:47 AM UTC

Hello

Thank you a lot for your response. So far I was able to implement the described code.

However, there is now another problem.
On the server side the data source contains a list of states for each item. E.G. there is a List<int> for the "State" field.
Now when I try to filter DataOperations.PerformFiltering(), I get an invalid cast exception because the filter tries to apply the operation for the type int to a type of List<int>.

I would need to completely rewrite the server side filter operation for the "State" field (and only this field).
Could you please help me with that?



MS Madhu Sudhanan P Syncfusion Team January 16, 2019 05:33 AM UTC

Hi Phil, 

Thanks for the update. 

DataOperation class is designed to handle one-to-one relation entity. It is not possible to perform data operations on List item properties[one to many] using  DataOperation class. However it is possible to do the same at the client side using custom adaptor concept. Could you please confirm whether it is ok for you to perform the grid actions such as filtering, sorting etc at the client side itself and we will provide sample based on that. 

Regards, 
Madhu Sudhanan P 


UN Unknown January 21, 2019 06:33 AM UTC

Thank you for your reply.

Yes, it would be ok to filter, sort, etc. at the client side.

DR Dhivya Rajendran Syncfusion Team January 22, 2019 12:42 PM UTC

Hi Phil, 

Thanks for your update. 

Before creating sample, please provide the below details it will helpful for us to provide a better solution. 

  1. Did you perform CRUD operation for Grid and update the record in server side?
  2. If you want to update data in server then we create customAdaptor for remoteSaveAdaptor or else we extend jsonAdaptor(local data) to achieve your requirement.


Regards, 
R.Dhivya 


UN Unknown January 23, 2019 10:24 AM UTC

1. Yes, I am using the inline mode to edit the records. This works fine.
2. The data needs to be updated on the server side. As it already works, I would not like to change this code.

The Add/Edit/Delete functionality is already working fine. So if possible I would not like to change this code.
I only need to be able to use the filter as described in the previous posts, thus manually filtering the results according to the "State" column on the client might be enough.

MS Madhu Sudhanan P Syncfusion Team January 24, 2019 08:57 AM UTC

Hi Phil, 

Thanks for your update. 

We have validated the provided information and we suggest you to extend the remoteSaveAdaptor (CRUD operation are performed in server side(like urlAdaptor) and Grid actions are handled in client side) to achieve your requirement. 

In the below code example, we have used customAdaptor (extend from remoteSaveAdaptor) and override onWhere method to perform filtering for (filter value from list of value(State)) Grid columns. 

<div> 
 
    @Html.EJS().Grid("Grid").Created("create").AllowFiltering(true).FilterSettings(filter => filter.Type(Syncfusion.EJ2.Grids.FilterType.Menu)).Columns(col => 
    { 
    col.Field("OrderID").HeaderText("OrderID").Width("150").Add(); 
    . . . . . . 
    col.Field("State").HeaderText("State").Type("number").ValueAccessor("state").Filter(new { type = "CheckBox", itemTemplate = "#filteritem" }).Width("100").Add(); 
 
    }).AllowPaging().Render() 
 
</div> 
<script> 
 
    function create() { 
        class CustomAdaptor extends ej.data.RemoteSaveAdaptor { 
            onWhere(ds,e){ 
                if (!ds || !ds.length) { return ds; } 
                return ds.filter((obj) => { 
                    if (e) { 
                        let field = e.isComplex ? e.predicates[0].field : e.field; 
                        // override default filtering for State column. 
                        if (field === 'State') { 
                            let value = parseInt(e.isComplex ? e.predicates[0].value : e.value, 10) 
                            // check whether the filtered value in list of state field.  
                            return obj.State.filter(state => state === value).length !== 0; 
                        } else { 
                            return e.validate(obj);  // default filtering 
                        } 
                    } 
                }); 
            } 
        } 
 
        this.dataSource = new ej.data.DataManager({ 
            // its necessary to provide a json data to bind data to Grid 
            json: @Html.Raw(Json.Encode(ViewBag.datasource)), 
            adaptor: new CustomAdaptor() 
        }) 
    } 
 
</script> 



Regards, 
Madhu Sudhanan P 


UN Unknown January 25, 2019 07:18 AM UTC

Unfortunately, I was not able to implement the solution you suggested.

There might be a huge number of records being returned from the server (that's why I used the UrlAdaptor in the first place).
Adding all of them as a json is a no go.
It is easier to just disable the filtering/sorting for the "State" column.


This issue has been resolved.
Thank you so much for all your help.

MS Madhu Sudhanan P Syncfusion Team January 28, 2019 04:17 AM UTC

Hi Phil, 

Thanks for the update. Please get back to us if you need further assistance.  

Regards, 
Madhu Sudhanan P 


Loader.
Up arrow icon