Get KoolPHP UI with 30% OFF!

Koolgrid select command with dynamic parameters

Badal
Koolgrid select command with dynamic parameters from the same page having more controls to choose date from and to. Grid paging fails
Posted Mar 30, 2019 Kool
Anthony Amolochitis
In the grid object you need to set a javascript function on the GridEvent that you need to execute the javascript method.
Example for GridLoad:
$KoolGrid->ClientSettings->ClientEvents["OnGridLoad"] = "AttachFilterCriteriaToGrid";

In javascript you can attach data to the grid before postback.
This will post back the data you need. I use to and from dates in the code as well as other variables.
Grid.attachData( VariableName , VariableData ) ;
ExampleMethod I use to do this.
The name of my grid created in the PHP backend is "LeadGrid", so the same name is used on the client side.
function AttachFilterCriteriaToGrid()
{
    var FilterPhones = document.getElementById("phones")    ;
    var FilterEmails = document.getElementById("emails")    ; 
    var FilterOthers = document.getElementById("others")    ; // address only
    var StartDate    = document.getElementById("startDate") ;
    var EndDate      = document.getElementById("endDate")   ;
    var NewLeads     = document.getElementById("newleads")  ;
    var ProductSold  = document.getElementById("productIsSold")  ;
    var WordSearch   = document.getElementById("wordSearch");
    
    var HaveAppts    = document.getElementById("haveAppt");
    var HaveFollowUp = document.getElementById("haveFollowup");
    var HaveRecording = document.getElementById("haveRecording");
    
    // 
    // Attach data to the grid
    //    
    LeadGrid.attachData("orderId"   , orderId           );
    LeadGrid.attachData("startDate" , StartDate.value   );
    LeadGrid.attachData("endDate"   , EndDate.value     );
    LeadGrid.attachData("wordSearch", WordSearch.value  );
    
    if( HaveRecording.checked )
    {   LeadGrid.attachData("haveRecording", "1")  ; }
    else
    {   LeadGrid.attachData("haveRecording", "0")  ; }
    
    if( NewLeads.checked )
    {   LeadGrid.attachData("newleads", "1")  ; }
    else
    {   LeadGrid.attachData("newleads", "0")  ; }
    
    if( FilterPhones.checked )
    {   LeadGrid.attachData("phones", "1")    ; }
    else
    {   LeadGrid.attachData("phones", "0")    ; }
    
    if( FilterEmails.checked )
    {   LeadGrid.attachData("emails", "1")    ; }
    else
    {   LeadGrid.attachData("emails", "0")    ; }
    
    if( FilterOthers.checked )
    {   LeadGrid.attachData("others","1")     ; }
    else
    {   LeadGrid.attachData("others", "0")    ; }
    
    if( HaveAppts.checked )
    {   LeadGrid.attachData("haveAppt","1")   ; }
    else
    {   LeadGrid.attachData("haveAppt", "0")  ; }
    
    if( HaveFollowUp.checked )
    {   LeadGrid.attachData("haveFollowup","1")     ; }
    else
    {   LeadGrid.attachData("haveFollowup", "0")    ; }
    
    if( ProductSold.checked )
    {   LeadGrid.attachData("productIsSold","1")     ; }
    else
    {   LeadGrid.attachData("productIsSold", "0")    ; }
    
}

Here is what is looks like.
Posted Apr 3, 2019 Kool