EasyUI Forum
March 19, 2024, 02:34:08 AM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Datagrid+loadFilter in combination with dataGrid Row filter is not working well  (Read 22668 times)
rkpunjal
Newbie
*
Posts: 15


View Profile
« on: December 30, 2014, 10:59:00 AM »

Say I have a datagrid and I have a loadFilter method to handle the custom data format coming from the remote, and I also want to have filters on my columns in the datagrid then there are some serious issues.

I shall mention the problems and also finally how I got it working (just in-case anyone else also needs this combination to work)

Issues are:

1. Problem: Soon after you define the datagrid along with the url and then immediately if you enable the by dg.datagrid('enableFilter'); then even if the call to the url is done, the data won't be rendered in the data-grid.

However this works if you have a preloaded data which you assign eg: "data: {total: xxx, rows: [{id:'1', name:'abc'},{id:'1', name:'abc'}] }". This is probably because the rendering of the filter is interfering with the rendering of the data.

So "dg.datagrid('enableFilter');" cannot come right after the datagrid definition in your javscript

2. But if you want the datagrid to load using the url attribute then you should place the filter enabling code "$(this).datagrid('enableFilter');" in the "onLoadSuccess" function. Then both the data in the data-grid is also loaded and the filter is also renders.
Problem: But then the filter won't work and the grid sort of hangs when you try to type-in and invoke the filtering... I don't know why this happens.

3. You can somewhat solve this by putting your  "$(this).datagrid('enableFilter');" in the " "loadFilter" function just before you return;
Then the filtering works fine.
Problem: Now when you invoke 'reload' on the datagrid after some record update, then the grid will fail to render the fresh data on the grid.



How I got this working



1. I defined a separate function (say: "loadAndSetGridData()") to load my data for the grid using "$.ajax"
2. Removed the 'url' attribute and also removed these functions: onLoadSuccess, loadFilter. These are not relevant now as we don't have the 'url' attribute.
3. Enable the filter right after the datagrid definition using "dg.datagrid('enableFilter');"
4. Manually set the data on the datagrid using 'loadData' method of the datagrid. I do this after I get response of my ajax call
5. All those places where you were reloading the datagrid data (i.e. "dg.datagrid('reload')" ) after your updates, replace that with call to your new method i.e. "loadAndSetGridData()"
6. And finally for the refresh-icon on the pagination-bar to work, call "loadAndSetGridData()" again in the "onBeforeLoad" of the grid definition.



Sample code (the logical code):

// ------------------------------
// the data-grid definition section ( this assumes that you already have the relevant html table with id "my-dg" ) without the 'url' of-course
// ------------------------------

   var dg = $("#my-dg").datagrid({
      loadMsg: "Loading data",
      onDblClickRow: function(index, row){
         // custom code
      },
      onSelect: function(index, row){
         // custom code
      }
      ,onBeforeLoad: function(){
         loadAndSetGridData(); // this will take care of loading the data via ajax separately and setting it to the datagrid
      }

   });

   dg.datagrid('enableFilter'); // Okay to enable the filter here now
         
         

// ------------------------------
// the data loader function
// ------------------------------
var loadAndSetGridData = function(dg){
            var listUrl = "my data-url url";
            $("my-dg").datagrid('loading');  // show the loading msg
            $.ajax({
                url:     listUrl,
                type:    'POST',
                dataType: 'json',
                contentType: 'application/json',
                error: function(xhr,status,err){
                    $("my-dg").datagrid('loaded');  // close the loading msg
                    // showWarningMessage("status : " + status + "<br/>" + "Error:" + err);

                    $("my-dg").datagrid('loadData',
                        {
                            total : 0
                            , rows: []
                        }
                    );

                },
                success: function(response){
                    $("my-dg").datagrid('loaded');
               // this is custom code on what you do after you get back the response
                    if (response.success){

                        $("my-dg").datagrid('loadData',
                            {
                                total: (response.dataList!=null)?response.dataList.length:0
                                , rows: (response.dataList!=null)?response.dataList:[]
                            }
                        );

                    } else {
                        // showWarningMessage(response.message); // custom code

                        $("my-dg").datagrid('loadData',
                            {
                                total : 0
                                , rows: []
                            }
                        );

                    }
                }
            });


        };

      
// ------------------------------
// replace with this in all places where you were dong $("my-dg").datagrid('reload'); or  $("my-dg").datagrid('load');
// ------------------------------
loadAndSetGridData();



This works !! But I belive the original problem has to be fixed. Until then this is the work-around.

Hope I have provided sufficient information to JEasy-UI developers for them to understand the underlying problem and fix it.

cheers,
Ram
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #1 on: December 30, 2014, 07:47:22 PM »

Please try to download the newest 'datagrid-filter.js' file from http://www.jeasyui.com/extension/datagrid_filter.php. You can use your custom 'loadFilter' function.
Code:
$('#dg').datagrid({
  loadFilter: function(data){
    return ...
  }
}).datagrid('enableFilter');
Logged
rkpunjal
Newbie
*
Posts: 15


View Profile
« Reply #2 on: January 03, 2015, 09:19:31 AM »

That looks Fantstic, I shall try that and let you know.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!