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

[SOLVED] Filter & Search doesn't works

Thread ID:

Created:

Updated:

Platform:

Replies:

130428 May 12,2017 04:11 AM UTC May 18,2017 04:47 AM UTC JavaScript 3
loading
Tags: ejGrid
Xavier Reyes
Asked On May 12, 2017 04:11 AM UTC

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>

Farveen Sulthana Thameeztheen Basha [Syncfusion]
Replied On 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 


Xavier Reyes
Replied On May 16, 2017 06:35 PM UTC

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

Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On 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. 


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

;