to search only in visible columns

[Luis Carlos]

Good morning.

When I use the method "search" of the component "ejGrid", it always looks for into all columns (hide and show columns), however I would like to search only in show columns. How can I get it?

I will be awating for your reply, thanks in advance.

Kind regards, Luis.

[Thavasianand Sankaranarayanan]

Hi Luis, 

Thanks for contacting Syncfusion support. 

We have analyzed your query and we suspect that you want to search the string, when the columns only shown in Grid. If initially you have hide for the columns using visible property of ejGrid control, then you can use load event of ejGrid control to search for shown columns in Grid. By push the field names, which is visible in Grid into searchSettings.fields property of ejGrid control. 

Refer the below code example. 

<script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: window.gridData, 

                commonWidth: 120, 

                allowPaging: true, 

     

                toolbarSettings: {showToolbar: true, toolbarItems: [ej.Grid.ToolBarItems.Search] }, 

 

                columns: [ 

            { field: "OrderID", headerText: "Order ID", isPrimaryKey: true, textAlign: ej.TextAlign.Right, width: 75 }, 

            { field: "CustomerID", visible:false, headerText: "Customer ID" }, 

 

            -------------------- 

                                               

                ], 

                load: "searchingColumn" 

                 

            }); 

        }); 

        function searchingColumn(args) { 

            var columns = args.model.columns; 

            for (var i = 0; i < columns.length ; i++) { 

                if (columns[i].visible == true || ej.isNullOrUndefined(columns[i].visible)) { 

 

                    args.model.searchSettings.fields.push(columns[i].field); // pus the field names which shown in Grid based on visible property  

                } 

            } 

        } 

    </script> 

We have prepared a JsPlayground sample in the following link. 

JsPlayground link: http://jsplayground.syncfusion.com/xcw5ki5c 

Note: If you hide any after the Grid initialization then you need to call for this function to change the field name according to columns showing in Grid. 

Refer the help documentation. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-visible 

Link: https://help.syncfusion.com/api/js/ejgrid#members:searchsettings-fields 

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

If we misunderstood your query then please get back to us. 

Regards, 

Thavasianand S. 

[Luis Carlos]

Hi again.

I forgot to tell you that my search input is out of the grid, as you can see in the next picture. 

How can I search only in visible columns?

I will be awating for your reply, thanks in advance.

Kind regards, Luis.

[Thavasianand Sankaranarayanan]

Hi Luis, 

As per your requirement we have use an external input box to search a value in Grid. In the modified sample, initially I have set visible as “false” for column “CustomerID” and in the load event I have push the field name which are visible to Grid in serachSettings.fields. So, now we able to search for an value in only shown columns in Grid. 

Refer the below code example. 

</body> 

<div class="content-container-fluid"> 

    <div class="row"> 

        <input type="text" id="serachval" name="serachval" /> 

        <button id="Searching"> Clickme </button> 

 

        ---------- 

</div> 

<script type="text/javascript"> 

        $(function () { 

            $("#Grid").ejGrid({ 

                 

                ----------                 

 

               allowSearching: true, 

                columns: [ 

                     

                    { field: "CustomerID",visible:false, headerText: "Customer ID" }, 

                     

                     ---------------- 

                ], 

                load: "searchingColumn" 

 

            }); 

          $("#Searching").ejButton({size: "small", click: "onSearching" }); 

        }); 

        function searchingColumn(args) { 

            var columns = args.model.columns; 

            for (var i = 0; i < columns.length ; i++) { 

                if (columns[i].visible == true || ej.isNullOrUndefined(columns[i].visible)) { 

                    args.model.searchSettings.fields.push(columns[i].field); 

                } 

            } 

 

        } 

      function onSearching(args){ 

          var gridObj = $("#Grid").ejGrid("instance"); 

          var val = $("#serachval").val(); 

          gridObj.search(val); 

      } 

</script> 

We have modified the JsPlayground sample in the following link. 

JsPlaygrund link: http://jsplayground.syncfusion.com/laowwtcb 

Refer the below code example. 

Link: https://help.syncfusion.com/api/js/ejgrid#methods:search 

Regards, 

Thavasianand S. 

[Luis Carlos]

Thanks!! it works perfectly!

[Thavasianand Sankaranarayanan]

Hi Luis, 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

Regards, 

Thavasianand S. 

[Luis Carlos]

Hi again.

I've recently found a mistake with this function. 

The first image shows four columns, three of them are date types. The data source of these columns are numerics (ex: 980809200000) and the function called "queryCellInfo" turns these numbers into dates with format "DD/MM/YYYY" (ex: 30/01/2001).

As far as I concern, when I look for the string "2017" it shouldn't compare to data source, it ought to compare to data showed in website. 

As you can see in the image 2 and 3 it compares to data source, so, how can I compare to data showed in website?

IMAGE 1 

IMAGE 2

IMAGE 3

I will be awating for your reply, thanks again.

Regards, Luis.

[Thavasianand Sankaranarayanan]

Hi Luis, 

We have analyzed your query and we suspect that you want to search the date column values. You have mention that you have modify the date column value in the queryCellInfo event of ejGrid. By default, searching is based on the Grid’s bounded dataSource. So, if we search for the date column value as “1975” then the dataSource must be a date object for that date column. So, we suggest you to change the dataSource date column number value into date object in load event of ejGrid control and we can able to format the date object by using format property of Grid column. 

For an example, we have done it for a OrderDate column in Grid. 

Refer the below code example. 

$(function () { 

              var Data = [ 

         { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 1, Freight: 33.38,ShipName:'Alfreds Futterkiste',ShipCountry:'1',OrderDate:180895500022}, 

             

          --- 

               

       ]; 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: Data, 

                commonWidth: 120, 

                allowPaging: true, 

                allowSearching: true, 

                columns: [ 

 

                    --- 

                     

{field:"OrderDate", headerText:"Order Date", 

format:"{0: dd/MM/yyyy}", width:90} 

                            

                ], 

                load: " searchingColumn" 

                 

            }); 

                 

 

       }); 

        function searchingColumn(args) { 

            for(var j=0 ; j< args.model.dataSource.length; j++){ 

 

                args.model.dataSource[j].OrderDate = new Date(args.model.dataSource[j].OrderDate); 

                      

             } 

        } 

       

We have prepared a simple JsPlayground sample in the following link. 

JsPlayground link: http://jsplayground.syncfusion.com/jq1k24m2 

 

Currently we don’t have date object searching support in Grid and we have already added " Searching for date and numeric formatted columns " to our feature request list. We have added your requirements to the description of the feature 

 

The feature will be included in our any of our upcoming releases. 

Refer the below code example. 

Link: https://help.syncfusion.com/api/js/ejgrid#members:columns-format 

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

Regards, 

Thavasianand S. 

[Luis Carlos]

Hi again.

Maybe I didn't explain well, let me try again, please.

As you can see in the next image, the "queryCellInfo" function shows the employee's name instead of employee's id. However, I'd like to save the employee's id and to search for the employee's name.

I modified your example in order to let you know my problem.

http://jsplayground.syncfusion.com/eus3kl3o

I will be awating fot your reply, thanks again.

Regards, Luis.

[Thavasianand Sankaranarayanan]

Hi Luis, 

We have analyzed query and we suspect that you want to bind the foreignKey value for the “EmployeeID” column, then you need to search the EmployeeID column based on the foreignkey value. So, we suggest you to use ej.ForeignKeyAdaptor to sort or search the grid based on the foreign key value. 

 

Refer the below code example. 

 

 

<script type="text/javascript"> 

        var fdata = [{ EmployeeID: 1, FirstName: "Nancy" }, 

               

                   --- 

 

       ]; 

        var Data = [ 

         { OrderID: 10248, CustomerID: 'VINET', EmployeeID: 1, Freight: 33.38, ShipName: 'Alfreds Futterkiste', ShipCountry: '1', OrderDate: 180895500022 }, 

             

          --- 

 

       ]; 

        $(function () { 

 

            $("#Grid").ejGrid({ 

                // the datasource "window.gridData" is referred from jsondata.min.js 

                dataSource: Data, 

                 

                --- 

 

               columns: [ 

 

                    { field: "FirstName", headerText: "Employee ID", textAlign: ej.TextAlign.Right, width: 100 }, 

 

                   

                     --- 

 

                ], 

                load: "searchingColumn" 

 

            }); 

             

        }); 

        function searchingColumn(args) { 

 

            this.model.dataSource.adaptor = new ej.ForeignKeyAdaptor([ 

             { foreignKeyField: "EmployeeID", foreignKeyValue: "FirstName", dataSource: fdata }], "JsonAdaptor"); 

 

             

            ---- 

 

        } 

         

         --- 

 

   </script> 

 

 

 

The above code example illustrates how to render the foreignkey column using ej.ForeignKeyAdaptor. ForeignKeyAdaptor accepts two parameters. First parameter accepts the array of objects, which has dataSource, foreignKeyField and foreignKeyValue for the virtual column (“FirstName”) in Grid. Whereas the second parameter holds the type of secondary adaptor (either JsonAdaptor or remoteSaveAdaptor).  

 

We have prepared a simple Jsplayground sample in the following link. 

 

JsPlayground link: http://jsplayground.syncfusion.com/txl4zblc 

 

Refer the documentation 

 

Link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#foreign-key-adaptor 

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

Regards, 

Thavasianand S. 

[Luis Carlos]

Hi again.

Could you apply this solution for two columns?

For instance, I would like to apply this solution for "OrderID" and "EmployeeID" columns. Here you have the array to the "OrderID" column.

var fdata = [{OrderID:10248,OrderName:"First"},

{OrderID:10248,OrderName:"Second"},

{OrderID:10248,OrderName:"Third"},

{OrderID:10248,OrderName:"Fourth"}

];

I will be awaiting for your reply, thanks in advance.

Regards, Luis.

[Thavasianand Sankaranarayanan]

Hi Luis, 

As per your requirement we have prepared a simple JsPlayground sample with two foreignKey columns in Grid. 

JsPlayground link: http://jsplayground.syncfusion.com/m1vhmjl3 

Note: In your given foreignKey data’s OrderID column have the same data for all values. This is not recommended way if the Grid have OrderID column is in foreignKey column. So, OrderID column value must be unique in foreign key table. 

Regards, 

Thavasianand S. 

[Luis Carlos]

Hi again.

Thank you for your reply, but I can't change the attribute's value called "field" in the "columns" array. 

Is there another option?

Regards, Luis.

[Thavasianand Sankaranarayanan]

Hi Luis, 

 

According to a foreignkey table binding, foreignkey field must be a primaryKey / unique values in the foreignkey table. So, that we can get the foreignkey value based on the foreignkey field from the foreignkey table.  

 

If you want to have same values for a foreignkey field in foreignkey table, then you cannot get the expected value in Grid foreignkey column. So, we suggest you to use queryCellInfo event of ejGrid control to get that foreignkey values in Grid column. 

 

Refer the help documentation. 

 

Link: https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

 

Regards, 

Thavasianand S. 

[Luis Carlos]

Hi again.

Is there another way without "ej.ForeignKeyAdaptor" ?

Thank you again.

Regards, Luis.

[Thavasianand Sankaranarayanan]

Hi Luis, 

In your previous queries that you want to have foreignKey column in Grid and you need to search that column based on the foreignKey value (FirstName) not with foreignKeyField (EmployeeID) value. So, that we suggest you to enable ForeignKeyAdaptor in your sample to search the Grid column values based on the foreignKey value (FirstName).  

We are unclear about your requirement so, please provide a proper requirement on ejGrid control with foreignKey column binding.  

Refer the help documentation for ForeignKey Adaptor 

Link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#foreign-key-adaptor 

Regards, 

Thavasianand S.