Kendo ui网格-使用Ajax发布过滤

Question

I´m trying to filter my datasource but using a ajax post, and the reason is, i have a condition on main main GET on my server side which does this:

WHERE idPai IS NULL OR idPai = 0

Now what i want is to filter the datsource but without that condition on my server side, so first what i have done was:

       var value = $("#inputPastaFiltro").val();

        $.ajax({
        type: 'POST',
        url: "basedados.php",
        data: {dataFilter:value},
        dataType: "json",
        success: function(result) 
        {
           $('#gridBaseDados').data('kendoGrid').dataSource = new kendo.data.DataSource({ data: result.data[0] }).query({
            filter:{
              logic:"or",
              filters:[
                {field:"nome", operator:"contains",value:result.data[0].nome}]  
             }
          });
        },

On the server side, i have create a:

else if($_POST['dataFilter'])

with the same GET i have but without the condition i have wrote above, this way(i think) it searches for everything, but the rest of the logic is not correct has you already realized. If i do just like this:

var value = $("#inputPastaFiltro").val();
dataSource.query({
                filter:{
                  logic:"or",
                  filters:[
                    {field:"nome", operator:"contains",value:value}]  
                 }
              });

it works very well, and it also does that dynamic search of refreshing the grid as soon as you insert the words in the input(which is great!)...but it is based on my MAIN GET which has that condition.

Can anyone give me some help?, sorry for the bad english.

Regards.

Answer 1

Once you create a dataSource with the array result.data[0] , the filter will be performed over that data. So I think you want to execute the query again, when the filter it performed, right? The way you're calling the ajax request isn't nice when applied with kendo. You should do like that :

$('#gridBaseDados').kendoGrid({
    ...
    dataSource: {
        transport: {
            read: function(options) {
                $.ajax({
                    ...
                    success: function(result) {
                        options.success(result.data[0]);
                    }
                });
            }
        }
    }
});

Using a function in dataSource.transport.read is the best way. So you have the options argument, which has the success callback of the dataSource. This will overwrite the default dataSource's request and then the entire behiviour is preserved. Your filters should work as expected. They will call that read function each time it is changed.

Give it a try and tell us the results. I hope it helps.