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.
Unfortunately, activation email could not send to your email. Please try again.

Filtering not working at first attempt

Thread ID:

Created:

Updated:

Platform:

Replies:

131498 Jul 13,2017 04:15 AM Jul 20,2017 12:23 AM ASP.NET MVC 5
loading
Tags: Grid
Omar Muscatello
Asked On July 13, 2017 04:15 AM

Hello Syncfusion Team,
I'm working with the grid control of ASP.NET MVC controls.
I added the filter functionality to let typing name and surname to find an user.
The problem is that it's working at second attempt.
The video will show you exactly what I mean.

In the first attempt you can notice that the filter summary under the pagination control is only with the Nome field.

I'm using Syncfusion ASP.NET MVC v14.2500.0.26.

The only action I execute in OnActionBegini is reported below:

function OnActionBegin(args) {
    if (args.requestType == "filtering" && args.currentFilterObject[0].operator == "startswith") {
        args.currentFilterObject[0].operator = "contains";
    }
}

The backend code for retrieving data is reported below:

 [HttpPost]
        public JsonResult Lista(DataManager dm)
        {
            using (DataDbContext db = new DataDbContext())
            {
                IEnumerable data = db.Pazienti.OrderBy(x => x.Cognome).ThenBy(x => x.Nome);
                DataOperations operation = new DataOperations();

                if (dm.Sorted?.Count > 0) //Sorting
                {
                    data = operation.PerformSorting(data, dm.Sorted);
                }
                if (dm.Where?.Count > 0) //Filtering
                {
                    data = operation.PerformWhereFilter(data, dm.Where, dm.Where[0].Operator);
                }

                int count = data.AsQueryable().Count();

                if (dm.Skip != 0)
                {
                    data = operation.PerformSkip(data, dm.Skip);
                }
                if (dm.Take != 0)
                {
                    data = operation.PerformTake(data, dm.Take);
                }

                List<PazienteViewModel.Paziente> result = data.Cast<Paziente>().MapList<PazienteViewModel.Paziente, Paziente>();

                return Json(new { result, count });
            }
        }

This is the request data sent to the server for the first attempt (which not work)

{"requiresCounts":true,"where":[{"isComplex":false,"field":"Nome","operator":"contains","value":"sebastiana","ignoreCase":true}],"skip":0,"take":30}

This is the request data sent to the server for the second attempt (which work)

{"requiresCounts":true,"where":[{"isComplex":true,"condition":"and","predicates":[{"isComplex":false,"field":"Nome","operator":"contains","value":"sebastiana","ignoreCase":true},{"isComplex":false,"field":"Cognome","operator":"contains","value":"amenta","ignoreCase":true}]}],"skip":0,"take":30}

It seems to be a JavaScript side problem.

Thank you :)

Attachment: video_bf44cad0.zip

Venkatesh Ayothi Raman [Syncfusion]
Replied On July 14, 2017 05:56 AM

Hi Omar, 

Thanks for contacting Syncfusion support. 

We went through your video as well as code example that you have shared for us and found that you are using URL adaptor to bound the data source to Grid. Here, if we type the values for filterbarcell to filtering the values then post request will sends to server side for filtering the record and server will sends the response as filtered records to Grid.  
From your scenario, you have typed the value in cognome column first then immediately typed the value to Nome column. In this scenario, cognomen column filter request won’t send to server side and it’s just need some milliseconds for complete the POST request process. This is the cause of the issue. 
We have built-in support of immediateModeDelay to reduce the time of the filter action while type the value in filterbar cell. Please refer to the following code example and Help documentation for more information, 
Code example
@Grid 
 
@(Html.EJ().Grid<OrdersView>("Grid") 
                    .Datasource(ds => ds.URL(@Url.Action("DataSource")) 
                    .Adaptor(AdaptorType.UrlAdaptor)) 
                    .AllowPaging() 
                    .AllowFiltering() 
                     
                    .ClientSideEvents(e=>e.ActionBegin("actionBegin").Load("load")) 
                    .Columns(col => 
                    { 
                        . . . 
                    }) 
) 
 
<script type="text/javascript"> 
 
 
    function actionBegin(args){ 
 
        if (args.requestType == "filtering" && args.currentFilterObject[0].operator == "startswith") { 
            args.currentFilterObject[0].operator = "contains"; 
        } 
     
    } 
 
    function load(args) { 
 
        this.model.filterSettings.immediateModeDelay = 500; //reduce the time delay for filter action 
    } 
 
</script> 

Note: For demonstration purpose, we have set the immediateModeDelay as 500. You can change the immediateModeDelay as per your requirement. 


Please let us know if you have any further assistance on this. 

Regards, 
Venkatesh Ayothiraman. 


Omar Muscatello
Replied On July 15, 2017 05:14 AM

Thank you Venkatesh Ayothi Ramanfor your answer.

Actually. I use FilterBarMode(FilterBarMode.OnEnter), so the filter process starts only when I press enter. In the video, I press enter after filling the nome field.

I forgot to post the view code which I report below:


@(Html.EJ().Grid<PazienteViewModel.Paziente>("tbPazienti")

                        .Locale("it-IT")

                        .Datasource(ds => ds

                                            .URL(Url.Action("Lista"))

                                            .InsertURL(Url.Action("Aggiungi"))

                                            .UpdateURL(Url.Action("Modifica"))

                                            .RemoveURL(Url.Action("Elimina"))

                                            .Adaptor(AdaptorType.UrlAdaptor)

                                    )

                        .EditSettings(x => x.AllowEditing().AllowEditOnDblClick(true).AllowAdding().AllowDeleting().ShowDeleteConfirmDialog())

                        .AllowFiltering().FilterSettings(filter => { filter.ShowFilterBarStatus().StatusBarWidth(500).FilterBarMode(FilterBarMode.OnEnter).FilterType(FilterType.FilterBar); })

                        .AllowPaging().PageSettings(x => x.PageSize(30))

                        .AllowScrolling()

                        .AllowSorting()

                        .AllowTextWrap()

                        .SelectionSettings(x => x.EnableToggle(true))

                        .IsResponsive(true).EnableResponsiveRow(true)

                        .GridLines(GridLines.Horizontal)

                        .ClientSideEvents(x => x.ActionFailure("OnActionFailure").ActionBegin("OnActionBegin").DataBound("OnDataBound").ActionComplete("OnActionComplete").Load("OnLoad"))

                        .Columns(col =>

 {

                            col.Field(x => x.Id).IsPrimaryKey(true).Visible(false).Add();

                            col.Field(x => x.Cognome).Width(150).Add();

                            col.Field(x => x.Nome).Width(120).Add();

                        })

)



And JS code:

function OnActionBegin(args) {


    //Cambio la modalità di ricerca predefinita per le stringhe. Contains invece di startswith

    if (args.requestType == "filtering" && args.currentFilterObject[0].operator == "startswith") {

        args.currentFilterObject[0].operator = "contains";

    }

}


function OnActionFailure(args) {

    toastr.error($(args.error.error.responseText).find('i').first().text());

}


function OnDataBound(args) {

    fixDimensioniTabella(tb);

}


function OnActionComplete(args) {

    if (args.requestType == "filtering") {

        fixDimensioniTabella(tb);

    }

}


function OnLoad(args) {

    this.model.filterSettings.immediateModeDelay = 500; //reduce the time delay for filter action 

}



Here, fixDimensioniTabella is a function which adjust the height of the table based on some parameters,


Venkatesh Ayothi Raman [Syncfusion]
Replied On July 17, 2017 08:29 AM

Hi Omar, 

Thanks for the update. 

The behavior of onEnter mode is filter each column by pressing the enter key after typing the value in the particular column. This is the default behavior of the Grid, but your requirement is enter filter value in filter bar cell of some other column and  pressing the enter key in any column filterbar cell then the filtering is done based on all the column filter value.  
We have achieved your requirement in same ActionBegin event in Grid. In this event, we can get filterCollections for last column filterbar cell, so we append the filtercollections value based on all filterbarcell values. Please refer to the following code example, 
Code example
@(Html.EJ().Grid<OrdersView>("Grid") 
                    .Datasource(ds => ds.URL(@Url.Action("DataSource")) 
                    .Adaptor(AdaptorType.UrlAdaptor)) 
                    .AllowReordering() 
 
                    .ToolbarSettings(toolbar => 
        { 
            toolbar.ShowToolbar().ToolbarItems(items => 
            { 
                items.AddTool(ToolBarItems.Add); 
                items.AddTool(ToolBarItems.Edit); 
                items.AddTool(ToolBarItems.Delete); 
                items.AddTool(ToolBarItems.Update); 
                items.AddTool(ToolBarItems.Cancel); 
            }); 
 
        }) 
                    .AllowPaging() 
                      .AllowFiltering().FilterSettings(filter => { filter.ShowFilterBarStatus().StatusBarWidth(500).FilterBarMode(FilterBarMode.OnEnter).FilterType(FilterType.FilterBar); }) 
                    .ClientSideEvents(e=>e.ActionBegin("actionBegin").Load("load")) 
                     
                    .Columns(col => 
                    { 
                        col.Field(p => p.OrderID).HeaderText("Order ID").Add(); 
                        col.Field(p => p.CustomerID).HeaderText("Customer ID").TextAlign(TextAlign.Left).Add(); 
 
                        col.Field(p => p.ShipCity).HeaderText("ShipCity").Format("{0:C2}").Add(); 
                        col.Field(p => p.EmployeeID).HeaderText("FirstName").Add(); 
                    }) 
) 
 
<script type="text/javascript"> 
     
    function actionBegin(args) { 
         
        if (args.requestType == "filtering" && args.currentFilterObject[0].operator == "startswith") { 
 
            args.currentFilterObject[0].operator = "contains"; 
            //here we can find the columns length and current filter field value 
            var len = this.model.columns.length, columns = this.model.columns, currentFilterField = args.currentFilterObject[0].field; 
 
            for (var i = 0; i < len; i++) { 
                //check the condition for any filterbarcell has value expect current filter barcell 
                if ($("#" + columns[i].field + "_filterBarcell").val().length > 0 && (columns[i].field != currentFilterField)) { 
 
                    var filterCollection = { "field": columns[i].field, "operator": "contains", "predicate": 'and', "value": $("#" + columns[i].field + "_filterBarcell").val() } //create a filter object 
 
                    args.filterCollection.splice(i - 1, 0, filterCollection);//insert filterobject into filtercollection array based on that index 
                } 
            } 
        } 
 
    } 
 
</script> 
  

We have also prepared a sample for your convenience which can be download from following link, 



Regards, 
Venkatesh Ayothiraman. 
  


Omar Muscatello
Replied On July 19, 2017 02:08 AM

Thank you so much, it works!


Venkatesh Ayothi Raman [Syncfusion]
Replied On July 20, 2017 12:23 AM

Hi Omar, 

Thanks for the feedback. 

We are very happy to hear that your requirement is achieved. 

Regards, 
Venkatesh Ayothiraman. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;