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. Image for the cookie policy date
  1. Home
  2. Forum
  3. jQuery
  4. [SOLVED] Filter & Search doesn't works

[SOLVED] Filter & Search doesn't works

Hello community, I have a problem in my code, I can not make the filters or searches work, so I know what I need to add or change.




Code:

<link rel='nofollow' href="http://cdn.syncfusion.com/15.1.0.41/js/web/bootstrap-theme/ej.web.all.min.css" rel="stylesheet" />
<script src="http://cdn.syncfusion.com/js/assets/external/jquery-3.1.1.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.easing.1.3.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jquery.globalize.min.js"></script>
<script src="http://cdn.syncfusion.com/js/assets/external/jsrender.min.js"></script>
<script src="http://cdn.syncfusion.com/15.1.0.41/js/web/ej.web.all.min.js"></script>

<div id='Grid'></div>
<script type="text/template" id="colTip">
 {{:value }}  
 </script>
<script>
<?PHP require "assets/ej.localetexts.es-ES.js";?>
    $(function () {
        $('#Grid').ejGrid({
            dataSource: ej.DataManager({
url : "/navigation/db_eventos.php?action=getData",
updateUrl : "/navigation/db_eventos.php?action=updateData",
insertUrl : "/navigation/db_eventos.php?action=insertData",
removeUrl : "/navigation/db_eventos.php?action=delData",
adaptor : "UrlAdaptor"}),
locale: "es-ES",
                         allowPaging: true,
                         allowGrouping: true,
enableRowHover : true,
allowReordering : true,
allowSearching : true,
searchSettings: { fields: ["nombre"], operator: "contains", key: "nu", ignoreCase: false },
allowSorting : true,
sortSettings: { sortedColumns: [{ field: "fecha", direction: "descending" }] },
allowFiltering : true,
filterSettings : { filterType : "excel" },
//allowTextWrap : true,
//textWrapSettings: {wrapMode: "both"},
editSettings : { allowEditing : true },
toolbarSettings : { showToolbar : true, toolbarItems : ["add", "edit", "delete", "update", "cancel", "search"] },
editSettings : { allowEditing: true, allowAdding: true, allowDeleting: true, showDeleteConfirmDialog : true},
columns : [
{ field : "id_evento", headerText : "ID", headerTextAlign : "center", textAlign : "center", width : 80, allowEditing: false, isPrimaryKey:true, defaultValue: 0, isIdentity: true },
{ field : "fecha", type: "datetime", editType: ej.ejDateTimePicker, editParams: {
dateTimeFormat: "dd/MM/yyyy tt hh:mm", 
locale: "es-ES",
interval: 15,
watermarkText: "Seleccione la Fecha"}, 
format: "{0:dd/MM/yyyy}", headerText : "Fecha", headerTextAlign : "center", textAlign : "center", width : 200},
{ field : "nombre", headerText : "Nombre", headerTextAlign : "left",tooltip:"#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip },
{ field : "lugar", headerText : "Lugar", headerTextAlign : "left",tooltip:"#colTip", clipMode: ej.Grid.ClipMode.EllipsisWithTooltip },
{ headerText: "Historial",template: "<a onclick ='Historial(this)' rel='nofollow' href=#>Ver Historial</a>", textAlign : "center", width : 150}
],
            pageSettings: { pageSize: 10 }
        });
    });

</script>
</div>

<script>
function Historial(e) {
var obj = $("#Grid").data("ejGrid");
alert(obj.getSelectedRecords()[0]);
}
</script>

3 Replies
FS Farveen Sulthana Thameeztheen Basha Syncfusion Team May 15, 2017 01:04 PM UTC

Hi Xavier , 

Thanks for your interest in syncfusion products. 
 
We are unable to reproduce your reported problem “Filtering and Searching” doesn’t work. We have prepared sample using URL adaptor with searching and filtering operation. To perform Searching, Filtering  operation using Url adaptor, we need to process the query sting values (parse url) and make the SQL queries.  
Please refer to the code example:- 

Index.php 

<script type="text/javascript"> 
        $(function () { 
            var data = ej.DataManager({ 
                url: "/data.php", adaptor: "UrlAdaptor" 
            }); 
 
            $("#Grid").ejGrid({ 
                dataSource: data, 
                allowPaging: true, 
                allowSorting: true, 
                allowFiltering: true, 
                filterSettings:{filterType:"menu"}, 
                allowSearching: true, 
                toolbarSettings: { showToolbar: true, toolbarItems: ["search"]}, 
                columns: [ 
                        { field: "help_category_id", isPrimaryKey: true, headerText: "ID", width: 90,type:"number" }, 
                        { field: "name", headerText: 'NAME', width: 90 }, 
                        { field: "parent_category_id", headerText: 'Category ID', width: 80, type:"number" }, 
                ] 
 
            }); 
 
        }); 
</script>  
  

Filtering: In my SQL query, we need to map the corresponding operators. In the following code example, we have mapped only the number filter operator and performed the filtering using “WHERE” clause. 
 
Data.php 
 
/* Filtering operation */  
if($filter !=null){  
    if(!$filter[0]['isComplex']){  
        $where= whereFilter($filter[0]);  
    }  
    else{  
        $where = performFiltering($filter[0]['predicates']);  
    }  
    
           if($searchQuery!= null){  
        $query = $query. " AND (" .$where. ")";  
    }  
    else{  
        $query = $query. " WHERE " .$where;  
    }  
    $sql= $query;  
}  
  
 function performFiltering($filter){  
    $temp;  
    $value;  
    foreach ($filter as $v) {  
        if(!$v['isComplex']){  
            $temp= whereFilter($v);  
            $value=  processFilterQuery($temp);  
        }  
        else  
        {  
            performFiltering($v['predicates']);  
        }  
    }  
    return $value;  
}  
  
 function processFilterQuery($temp){  
    global $filterQuery;  
    if($filterQuery != null){  
        $filterQuery =$filterQuery." AND ". $temp;  
    }  
    else{  
        $filterQuery = $temp;  
    }  
  
    return $filterQuery;  
}  


In the following code example, we are mapping the operators of both string and number type columns. Refer to the below code example as.    
function whereFilter($filter){  
    $field = $filter['field'];  
    $operator = $filter['operator'];  
    $value = $filter['value'];  
    $ignorecase = $filter['ignoreCase'];  
    $iscomplex = $filter['isComplex'];  
      
   //Map operators    
    $fltrOp= MapOperator($operator,$value);  
      
    return $field. " ".$fltrOp;  
}  
  
function MapOperator($op,$value){  
    $operater;  
    switch ($op)  
    {  
        case "greaterthan":  
            $operater = ">";  
            break;  
.. 
  
        /* String Operators */  
        case "startswith":  
            return "LIKE '" .$value."%'";  
.. 
    }  
    return $operater." '".$value."'";  //returning operators with values  
}  


Searching:  
  
/* Searching operation */  
if($search !=null){  
    $fields = $search[0]['fields'];  
    $key = $search[0]['key'];  
      
    $columncount = count($fields);  
    $searchQuery;  
    for($i = 0; $i <= $columncount-1; $i++){  
        $svalue = $fields[$i];  
  
          
        if($i>0){  
            $searchQuery =$searchQuery." OR ". $svalue." LIKE '%" .$key. "%'";  
        }  
        else{  
            $searchQuery = $svalue. " LIKE '%" .$key. "%'";  
        }  
    }  
      
    $query = $query. " WHERE " .$searchQuery ;  
    $sql= $query;  
}  

Please refer to the sample :- 

 
After following the above steps, still you are facing any problems, please share us the following details. 

1. Grid rendering code( code behind  example) 

2.Screenshot/Video regarding the issue. 

3.Stacktrace of the issue, if any script error occurs. 

4. Replicate the issue in the above sample and send us back. 
 
Regards, 

Farveen sulthana T 


XR Xavier Reyes May 16, 2017 06:35 PM UTC

Is exactly the information I needed, now works, thank you very much

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team May 18, 2017 04:47 AM UTC

Hi Xavier,  
 
Thanks for the update.  
 
We are happy to hear that your requirement has been achieved. If you require further assistance, please get back to us. 
 
Regards,  
Seeni Sakthi Kumar S. 


Loader.
Up arrow icon