[SOLVED] Filter & Search doesn't works

[Xavier Reyes]

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]

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 :- 

http://www.syncfusion.com/downloads/support/forum/130428/ze/sample-1904067258574854758.zip 

 

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]

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

[Seeni Sakthi Kumar Seeni Raj]

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.