Grid filter at load

[Stefano Capobianco]

Hi all, i've a little problem to set a  default filter for my grid. 

Grid Code

<ej-grid id="Grid" locale="it-IT" allow-sorting="true" allow-paging="true" allow-grouping="true" allow-filtering="true"

         is-responsive="true" enable-responsive-row="true" show-stacked-header="true"

         toolbar-click="GridToolbarClicked" action-complete="GridActionComplete"

         row-data-bound="GridRowDatabound" databound="GridShowToolbarTooltip" load="loadFunction"

         action-begin="GridActionBegin">

    <e-datamanager url="/Api/Cities/GetAll" adaptor="@AdaptorType.WebApiAdaptor"></e-datamanager>

    <e-sort-settings>

        <e-sorted-columns>

            <e-sorted-column field="CityName" direction="Ascending"></e-sorted-column>

        </e-sorted-columns>

    </e-sort-settings>

    <e-stacked-header-rows>

        <e-stacked-header-row>

            <e-stacked-header-columns>

                <e-stacked-header-column header-text="Comuni" text-align="Center" column='@new List<string> {"CityName", "ProvinceName","IstatCode" }'></e-stacked-header-column>

                <e-stacked-header-column header-text="Validità" text-align="Center" column='@new List<string> {"StartDate", "EndDate"}'></e-stacked-header-column>

                <e-stacked-header-column header-text="Azioni" text-align="Center" column='@new List<string> {"editField","deleteField"}'></e-stacked-header-column>

            </e-stacked-header-columns>

        </e-stacked-header-row>

    </e-stacked-header-rows>

    <e-page-settings page-size="5" show-defaults="true" enable-templates="true" template="#template">

    </e-page-settings>

    <e-toolbar-settings show-toolbar="true">

        <e-custom-toolbar-items>

            <e-custom-toolbar-item template-id="#Refresh"></e-custom-toolbar-item>

            <e-custom-toolbar-item template-id="#Add"></e-custom-toolbar-item>

        </e-custom-toolbar-items>

    </e-toolbar-settings>

    <e-columns>

        <e-column field="Id" visible="false"></e-column>

        <e-column field="CityName" header-text="Comune" header-text-align="TextAlign.Center" text-align="Center" width="300"></e-column>

        <e-column field="ProvinceName" header-text="Provincia" header-text-align="TextAlign.Center" text-align="Center" width="200"></e-column>

        <e-column field="IstatCode" header-text="Codice ISTAT" header-text-align="TextAlign.Center" text-align="Center" width="120"></e-column>

        <e-column field="StartDate" header-text="Data Inizio" header-text-align="TextAlign.Center" text-align="Center" width="100"></e-column>

        <e-column field="EndDate" header-text="Data Fine" header-text-align="TextAlign.Center" text-align="Center" width="100"></e-column>

        <e-column field="editField" header-text="Modifica" header-text-align="TextAlign.Center" text-align="Center" width="80">

            <e-column-commands>

                <e-column-command type="edit">

                    <e-button-options content-type="ImageOnly" prefix-icon="e-icon e-edit" click="GridEditRow"></e-button-options>

                </e-column-command>

            </e-column-commands>

        </e-column>

        <e-column field="deleteField" header-text="Cancella" header-text-align="TextAlign.Center" text-align="Center" width="80">

            <e-column-commands>

                <e-column-command type="delete">

                    <e-button-options content-type="ImageOnly" prefix-icon="e-icon e-delete" click="GridDeleteRow"></e-button-options>

                </e-column-command>

            </e-column-commands>

        </e-column>

    </e-columns>

</ej-grid>

I need to pass to the remote controller the first filter (EndDate is null) but i don't know hor to do this and after to add maybe other conditions.

How can i do this

Thanks in advance

Stefano Capobianco

[Venkatesh Ayothi Raman]

Hi Stefano, 

Thanks for using Syncfusion products. 

We have built-in support of filter-settings property to set the initial filtering in the Grid. In this property, we can set the initial filtering object by filtered-columns property like as follows, 

ej-grid id="Grid" is-responsive="true" allow-filtering="true" enable-responsive-row="true" allow-scrolling="true" allow-paging="true" > 

    <e-columns> 

        . .  . 

    </e-columns> 

    

      <e-filter-settings > 

          <e-filtered-columns> 

              <e-filtered-column field="CustomerID" operator="NotEquals" value=null></e-filtered-column> 

          </e-filtered-columns> 

      </e-filter-settings> 

     

    <ej-grid query-string="EmployeeID" allow-paging="true"> 

                <e-page-settings page-size="5"></e-page-settings> 

        <e-columns> 

            . .  . 

        </e-columns> 

    </ej-grid> 

</ej-grid> 

 

Note: If we use remote data source and initial filtering option like above code example, then filter request will send to the controller side while initial Grid rendering. 

Help Documentation: https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filteredcolumns 

If we misunderstood your requirement, then could you please provide more information about it and scenario? It would be helpful for us to find the query and provide the better solution as earliest. 

Regards, 

Venkatesh Ayothiraman. 

[Stefano Capobianco]

Thanks Venkatesh this solution work fine. I need also to know if it's possible to do the same but from the grid outside (text field or bombo or check). So i can leave to the user the possibility to choice the default value before the grid was loaded.

Thanks 

Stefano

[Venkatesh Ayothi Raman]

Hi Stefano, 

Thanks for the update. 

Yes, we can filter the Grid from outside values like textbox, checkbox,etc.. using load event in Grid. Please refer to the following code example, 

[Textbox] 

<input type="text" value=1 id="textbox" /> 

 

[Grid] 

 

<ej-grid id="Grid" datasource=ViewBag.orderdata is-responsive="true" load="onLoad" allow-filtering="true" enable-responsive-row="true" allow-scrolling="true" allow-paging="true" > 

    <e-columns> 

        . .  . 

    </e-columns> 

    

      

     

    <ej-grid query-string="EmployeeID" allow-paging="true"> 

        . .  . 

    </ej-grid> 

</ej-grid> 

 

[Load event] 

<script> 

    

    function onLoad(args) {  

        var textboxValue = $("#textbox").val();//get the value from text box which is resides in outside of the Grid 

        this.model.filterSettings.filteredColumns.push({ field: "EmployeeID", operator: "equal", value: textboxValue }); //apply the filter in filtered column property         

    } 

</script> 

In above code example, we have passed the filtered object to the filterSettings property in load event in Grid. Please refer to the following Help documentation for more information, 

Help documentation: https://help.syncfusion.com/api/js/ejgrid#events:load 

https://help.syncfusion.com/api/js/ejgrid#members:filtersettings-filteredcolumns  

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

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/Sample-2018020076 

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

Regards, 

Venkatesh Ayothiraman. 

[Stefano Capobianco]

Hi Venkatesh, the filter is ok but i would like the have the filter string like i pass inside the parameter side cshtml because not all sql database have the sames functions. How can i pass null value (es. EndDate == null )?

Thanks

Stefano

[Stefano Capobianco]

Ok i've solved with the matchcase option and the null vale in value parameter.

Thanks

Stefano

[Venkatesh Ayothi Raman]

Hi Stefano, 

Thanks for the update. 

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

Regards, 

Venkatesh Ayothiraman. 

[Venkatesh Ayothi Raman]

Hi Stefano, 

Thanks for the update. 

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

Regards, 

Venkatesh Ayothiraman.