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. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

to search only in visible columns

Thread ID:

Created:

Updated:

Platform:

Replies:

131517 Jul 14,2017 08:40 AM UTC Oct 25,2017 01:32 PM UTC JavaScript 15
loading
Tags: ejGrid
Luis Carlos
Asked On July 14, 2017 08:40 AM UTC

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 [Syncfusion]
Replied On July 17, 2017 01:04 PM UTC

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. 


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. 




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

Regards, 
Thavasianand S. 


Luis Carlos
Replied On July 18, 2017 06:33 AM UTC

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 [Syncfusion]
Replied On July 19, 2017 03:45 PM UTC

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. 


Refer the below code example. 


Regards, 
Thavasianand S. 


Luis Carlos
Replied On July 20, 2017 10:02 AM UTC

Thanks!! it works perfectly!


Thavasianand Sankaranarayanan [Syncfusion]
Replied On July 21, 2017 06:18 AM UTC

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
Replied On September 27, 2017 11:33 AM UTC

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 [Syncfusion]
Replied On September 29, 2017 01:27 PM UTC

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. 

 
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. 



Regards, 
Thavasianand S. 


Luis Carlos
Replied On October 2, 2017 07:58 AM UTC

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 [Syncfusion]
Replied On October 3, 2017 11:18 AM UTC

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. 
 
 
Refer the documentation 
 


Regards, 
Thavasianand S. 


Luis Carlos
Replied On October 3, 2017 11:31 AM UTC

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 [Syncfusion]
Replied On October 4, 2017 12:53 PM UTC

Hi Luis, 

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


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
Replied On October 20, 2017 09:03 AM UTC

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 [Syncfusion]
Replied On October 23, 2017 01:01 PM UTC

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. 
 
 
Regards, 
Thavasianand S. 


Luis Carlos
Replied On October 24, 2017 11:28 AM UTC

Hi again.

Is there another way without "ej.ForeignKeyAdaptor" ?

Thank you again.

Regards, Luis.



Thavasianand Sankaranarayanan [Syncfusion]
Replied On October 25, 2017 01:32 PM UTC

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 


Regards, 
Thavasianand S. 


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.

Warning Icon 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.Close Icon

;