Filtering not work with unchecked checkbox

Hi,
I have a grid with filtering allowed.

<ejs-grid id="Grid" dataSource="@ViewBag.source" allowFiltering="true">  

    <e-grid-columns>

        [...]

        <e-grid-column field="IsActive" headerText="Active" editType="booleanedit" width="100" displayAsCheckBox="true" textAlign="Center" type="boolean"></e-grid-column>

    </e-grid-columns>

</ejs-grid>

When filter "IsActive" is true, the filter works.
When filtr "IsActive" is false, the filter does not work.

Is it a bug?
Thanks.

See attachments for more info


Attachment: Capture_b421ffcd.zip

7 Replies

HJ Hariharan J V Syncfusion Team September 21, 2018 06:12 AM UTC

Hi Mini, 

Thanks for contacting Syncfusion support. 

We have tried to reproduce the reported issue based on given details, but its unsuccessful. The filter is working fine. We have prepared a sample for your convenience. Please download the sample from the link below, 

If you still face the issue, please get back to us with the following details, 

  1. Share the full grid code example.
  2. Share Grid package version.
  3. Replicate the issue with above given sample.
  4. Share Browser details.

Please get back to us if you need further assistance. 

Regards, 
Hariharan 



MD Mini Dev September 21, 2018 12:55 PM UTC

I replicate your sample and it works correctly.
But my code does not work.

MyController.cs

[Route("[controller]")]
public class TestController : Controller
{        
    [HttpGet]
    public IActionResult Index()
    {
        ViewBag.usersSource = GetUsers();
        return View();
    }

    private IList<User> GetUsers()
    {
        var users = new List<User>
        {
            new User
            {
                UserId = 1,
                Email = "[email protected]",
                FirstName = "Mario",
                LastName = "Rossi",
                IsActive = true
            },
            new User
            {
                UserId = 1,
                Email = "[email protected]",
                FirstName = "Luca",
                LastName = "Rossi",
                IsActive = false
            },
            new User
            {
                UserId = 1,
                Email = "[email protected]",
                FirstName = "Franco",
                LastName = "Rossi",
                IsActive = true
            },
            new User
            {
                UserId = 1,
                Email = "[email protected]",
                FirstName = "Alberto",
                LastName = "Rossi",
                IsActive = false
            }
        };
        return users;
    }        
}

MyView.cshtml

@using Syncfusion.EJ2
<div class="control-section">
    <ejs-grid id="UserGrid" dataSource="@ViewBag.usersSource" allowFiltering="true" allowPaging="true" allowSelection="false">
        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" mode="Dialog"></e-grid-editSettings>
        <e-grid-pagesettings pageCount="10"></e-grid-pagesettings>
        <e-grid-columns>            
            <e-grid-column field="UserId" headerText="ID" isPrimaryKey="true"  textAlign="Right" width="75"></e-grid-column>
            <e-grid-column field="Email" headerText="Email"  textAlign="Left" width="200"></e-grid-column>            
            <e-grid-column field="FirstName" headerText="Nome" width="170"></e-grid-column>
            <e-grid-column field="LastName" headerText="Cognome" width="150"></e-grid-column>                       
            <e-grid-column field="IsActive" headerText="Attivo" width="100" displayAsCheckBox="true" textAlign="Center" type="boolean"></e-grid-column>
        </e-grid-columns>
    </ejs-grid>
</div>
My User.cs

public int UserId { get; set; }

public string FirstName { get; set; }

public string LastName { get; set; }

public string Email { get; set; }

public bool IsActive { get; set; }


My data source:

"dataSource": ej.data.DataUtil.parse.isJson([

  {

    "UserId": 1,

    "FirstName": "Mario",

    "LastName": "Rossi",

    "Email": "[email protected]",

    "IsActive": true

  },

  {

    "UserId": 1,

    "FirstName": "Luca",

    "LastName": "Rossi",

    "Email": "[email protected]"

  },

  {

    "UserId": 1,

    "FirstName": "Franco",

    "LastName": "Rossi",

    "Email": "[email protected]",

    "IsActive": true

  },

  {

    "UserId": 1,

    "FirstName": "Alberto",

    "LastName": "Rossi",

    "Email": "[email protected]"

  }

])

 I notice that IsActive=false is not in data source list. Could be this the problem?

How can i fix?



HJ Hariharan J V Syncfusion Team September 25, 2018 12:33 PM UTC

Hi Mini, 

We have validated the provided code example and we have achieved your requirement by using ActionBegin’ and ‘ActionComplete’ event with its requestType as ‘filtering’. Please find the code example and sample for your reference. 


Code example 



<ejs-grid id="Grid" load="load" actionComplete="actionComplete" actionBegin="actionBegin" allowFiltering="true" allowPaging="true" allowSelection="false"> 
        <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" mode="Dialog"></e-grid-editSettings> 
        <e-grid-pagesettings pageCount="10"></e-grid-pagesettings> 
        <e-grid-columns> 
            <e-grid-column field="UserId" headerText="ID" isPrimaryKey="true" textAlign="Right" width="75"></e-grid-column> 
            <e-grid-column field="Email" headerText="Email" textAlign="Left" width="200"></e-grid-column>                                                                
            <e-grid-column field="FirstName" headerText="Nome" width="170"></e-grid-column> 
            <e-grid-column field="LastName" headerText="Cognome" width="150"></e-grid-column> 
            <e-grid-column field="IsActive" headerText="Attivo" width="100" displayAsCheckBox="true" textAlign="Center" type="boolean"></e-grid-column> 
        </e-grid-columns> 
    </ejs-grid> 
</div> 
 
<script> 
    function actionComplete(args) { 
        if (args.requestType == "filtering") { 
            args.columns.forEach(function (col) { 
                // filter bar message updated 
                if (col.field == 'IsActive' && !col.value) 
                    document.getElementsByClassName('e-pagerexternalmsg')[0].innerHTML = document.getElementsByClassName('e-pagerexternalmsg')[0].innerHTML.replace('undefined', 'false'); 
            })             
        } 
    } 
    function actionBegin(args) { 
        if (args.requestType == "filtering") { 
            this.filterSettings.columns.forEach(function (e) {  
                if (e.field == 'IsActive' && !e.value) { 
                    e.value = undefined; // empty value filtered 
                } 
            }) 
        } 
 
    } 
    function load(ags) { 
        this.dataSource = ej.data.DataUtil.parse.isJson([ 
 
            { 
 
                "UserId": 1, 
 
                "FirstName": "Mario", 
 
                "LastName": "Rossi", 
 
                "Email": "[email protected]", 
 
                "IsActive": true 
 
            }, 
 
            { 
 
                "UserId": 1, 
 
                "FirstName": "L" 
            } 
        ]);     
     } 
 
</script> 




Documentation : 



Regards, 
Hariharan 



MD Mini Dev September 25, 2018 01:16 PM UTC

Hi

thanks for the solution written above but in my model.cs has property IsActive=false valorized.

            new User
            {
                UserId = 1,
                Email = "[email protected]",
                FirstName = "Luca",
                LastName = "Rossi",               
                  IsActive = false
            }

but in datasource (page source on view.cshtml) the property IsActive is not in User model. 
In my data source model is the following:
new User
            {
                UserId = 1,
                Email = "[email protected]",
                FirstName = "Luca",
                LastName = "Rossi"
            }
Why happens this?
Why Do I lose the property IsActive in datasource if my user model has it valorized to false?


MS Madhu Sudhanan P Syncfusion Team September 27, 2018 08:40 AM UTC

 
ASP.NET Core uses JSON.Net for serializing objects and we suspect that the properties with value as same as default values are not included in the serialized result by the JSON.Net. To include property even when the default value are same, decorate the IsActive property with the JsonProperty and set DefaultValueHandling as Include as follows. 
 
 
public class User 
{ 
    ... 
 
    [JsonProperty(DefaultValueHandling = DefaultValueHandling.Include)] 
    public bool IsActive { get; set; } 
} 
 
 
 
 
 
Please try the above solution and let us know if you have any queries. 
 
Regards, 
Madhu Sudhanan P 
  




MD Mini Dev September 27, 2018 01:45 PM UTC

Yes, it was! Thanks for the correct solution!


MS Madhu Sudhanan P Syncfusion Team September 28, 2018 04:23 AM UTC

 
Thanks for the update. We are glad that your requirement has been achieved. 
 
Regards, 
Madhu Sudhanan P 



Loader.
Up arrow icon