Filtering and local/remote dataModel

[angelahlp]

I would like filtering to be local but I am getting my data with a getData call as follows:

   dataModel: {
            dataType: "JSON",
            location: "remote",
            recIndx: "contactid",
         url: '/cfc/Contact.cfc?method=getContactsMatrix',
            getData: function (response) {
                return { data: response };
            }
        }

I want to change location to "local" so that filtering will be local - the documentation says this is possible: "It can be either "remote" or "local". When location is local, dataModel.data option has to be assigned manually. It only means local data from the perspective of the grid, while the data could be fetched from remote server by implementor using AJAX synchronous or asynchronous requests."

How do I "manually" assign the data while still fetching it with an AJAX call?

[paramvir]

I understand that you want to filter data locally while load data from the remote server.

you have 2 options:

1) Easier option:  just add type: 'local' in your filterModel


2) put dataModel.location = 'local' and load data using jquery $.ajax success callback function.
Example: http://paramquery.com/pro/demos/filter_header_local

[angelahlp]

I changed my filterModel as follows:

filterModel: { on: true, mode: "AND", header: true, type: "local" },

but it is still calling the remote data when I do a filter ...

[paramvir]

How are you filtering the data?

[angelahlp]

Using standard filtering functions:
   
   function filter(dataIndx, value) {
      $grid.pqGrid("filter", {
         data: [{ dataIndx: dataIndx, value: value}]
      });
   }
   
   function filterhandler(evt, ui) {
 
      var $toolbar = $grid.find('.pq-toolbar-search'),
         $value = $toolbar.find(".filterValue"),
         value = $value.val(),
         condition = $toolbar.find(".filterCondition").val(),
         dataIndx = $toolbar.find(".filterColumn").val(),
         filterObject;
 
      if (dataIndx == "") {//search through all fields when no field selected.
         filterObject = [];
         var CM = $grid.pqGrid("getColModel");
         for (var i = 0, len = CM.length; i < len; i++) {
            var dataIndx = CM.dataIndx;
            filterObject.push({ dataIndx: dataIndx, condition: condition, value: value });
         }
      }
      else {//search through selected field.
         filterObject = [{ dataIndx: dataIndx, condition: condition, value: value}];
      }
      $grid.pqGrid("filter", {
         oper: 'replace',
         data: filterObject
      });
   }
   
   //filterRender to highlight matching cell text.
   function filterRender(ui) {
      var $cell = ui.$cell,
         rowData = ui.rowData,
         dataIndx = ui.dataIndx,
         val = $.trim(rowData[dataIndx]),
         filter = ui.column.filter;
      if (filter && filter.on && filter.value) {
         var condition = filter.condition,
            valUpper = val.toUpperCase(),
            txt = filter.value,
            txtUpper = txt.toUpperCase(),
            indx = -1;
         if (condition == "end") {
            indx = valUpper.lastIndexOf(txtUpper);
            //if not at the end
            if (indx + txtUpper.length != valUpper.length) {
               indx = -1;
            }
         }
         else if (condition == "contain") {
            indx = valUpper.indexOf(txtUpper);
         }
         else if (condition == "begin") {
            indx = valUpper.indexOf(txtUpper);
            //if not at the beginning.
            if (indx > 0) {
               indx = -1;
            }
         }
         if (indx >= 0) {
            var txt1 = val.substring(0, indx);
            var txt2 = val.substring(indx, indx + txt.length);
            var txt3 = val.substring(indx + txt.length);
            return txt1 + "<span style='background:yellow;color:#333;'>" + txt2 + "</span>" + txt3;
         }
         else {
            return val;
         }
      }
      else {
         return val;
      }
   }

Here is an example from my colModel:

         { title: "Full Name", width: 200, dataType: "string", dataIndx: "fullname",
            filter: { type: 'textbox', condition: 'contain',
               listeners: [{ change: function (evt, ui) {
                  filter("fullname", $(this).val());
               }
               }]
            }
         },

[paramvir]

From the code it looks like you are using older version of pqGrid.

If it's older than 2.0.4 please use second method mentioned before.

[angelahlp]

I just downloaded the pro version in February? I'm using 2.03 ? Can I get 2.04 and if so how will that affect what I already have coded?