DHTMLX Docs & Samples Explorer

Step 4. Filtering. Passing Additional Parameters to Server Side

Why do you think you need additional parameters and why am I talking about them together with Smart Rendering? There are two situations which come to my mind right away:

  • Filtering data;
  • Server side sorting (client side sorting kills all advantages of Smart Rendering, so you'd better move sorting to the server side. I'll tell you how to do this in Step 5).

Let's add the possibility to filter grid data by product name mask. Put the following code right before the DIV container we used for grid initialization:

  <input type="Text" id="nm_mask">
  <input type="Button" value="Filter" onclick="applyFilter()">

As you see, clicking the “Filter” button we call applyFilter function, which doesn't exist as we haven't created it yet. Let's do it now. It will contain the magic of getting the content for grid based on additional parameter :)

  function applyFilter(){
      mygrid.clearAll(); //remove all data
      gridQString = "getGridRecords.php?name_mask="+document.getElementById("nm_mask").value;//save query string in global variable (see step 5 for details)
      mygrid.loadXML(gridQString); // load new dataset from sever with additional parameter passed
  }

Put it into the script block we left for functions (or any other - it doesn't matter). Now getGridRecords file gets additional parameter named name_mask, which you can add to the query to filter the results by name. For example (PHP):

      //query to products table
      $sql = "SELECT  * FROM products";
      if(isset($_GET["name_mask"]))
          $sql.=" Where nm like '".$_GET["name_mask"]."%'";