Get KoolPHP UI with 30% OFF!

Using public static functions for General Koolgrid tasks.

Anthony Amolochitis
Here is an example use of creating custom edit / insert buttons for the edit/insert templates of Koolgrid. They need jquery included in the html header section.
Of course other items may be generalized as well. But in effort to generate ideas, here is the class object with public methods.
class GeneralOrderGridInsertEditTemplateMethods
{
    public static function GetInsertFormButtons()
    {
        $jqueryButton = ' <script> '
                . '$(function(){ '
                . ' $("#BackButton").button(); '
                . ' $("#SaveButton").button(); '
                . '}); </script> ';
        
        $confirmButton = '
            <input type="button" id="SaveButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text" 
            style="color:green; font-size:12px;border-color:green;" aria-disabled="false" onclick="grid_confirm_insert(this)" value="Save" />';
        
        $cancelButton = '
            <input type="button" id="BackButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text" 
            style="color:red;font-size:12px;border-color:#F78181;" aria-disabled="false" onclick="grid_cancel_insert(this)" value="Back" />';
            
        return '<table align="right">
                <tr>
                <td style="padding:5px;">'.$cancelButton.'</td><td>'.$confirmButton.'</td> 
                </tr>
                </table>' . $jqueryButton;
    }
    
    public static function GetEditFormButtons()
    {
        $jqueryButton = ' <script> '
                . '$(function(){ '
                . ' $("#BackButton").button(); '
                . ' $("#SaveButton").button(); '
                . '}); </script> ';
        
        $confirmButton = '
            <input type="button" id="SaveButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text" 
            style="color:green; font-size:12px;border-color:green;" aria-disabled="false" onclick="grid_confirm_edit(this)" value="Save" />';
        
        $cancelButton = '
            <input type="button" id="BackButton" class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text" 
            style="color:red;font-size:12px;border-color:#F78181;" aria-disabled="false" onclick="grid_cancel_edit(this)" value="Back" />';
            
        
        return '<table align="right">
                <tr>
                <td style="padding:5px;">'.$cancelButton.'</td><td>'.$confirmButton.'</td> 
                </tr>
                </table>' . $jqueryButton ;
    }
    
}

Here is the usage example.
$buttons = GeneralOrderGridInsertEditTemplateMethods::GetEditFormButtons();
/* Generate your form below, and include the buttons where you like.  */
Posted Dec 22, 2015 , edited Dec 22, 2015 Kool -
Peter
That's neat. Thanks Anthony!
Posted Dec 23, 2015 Kool
Hallie
Hi Anthony,
could you show me how to make this SAVE button run as an INSERT command for the editable fields in the Grid?
Posted Jun 30, 2017 Kool
Anthony Amolochitis
I use those buttons on the insert / edit templates depending on what I am doing, but they are custom templates.
You can use the same kind of buttons on inline row edit as well. They use the same build in functions to submit their data back to the server.
1. Change grid_confirm_edit(this) to grid_confirm_insert(this) for the insert.
2. Change grid_cancel_edit(this) to grid_cancel_insertTop(this) for the insert.
Here is the list of build in Koolgrid functions for reference.
http://doc.koolphp.net/Controls/KoolGrid/Javascript/Builtin_Functions/index.php
Posted Jun 30, 2017 Kool
Hallie
I am working on getting the entire grid Inserted not just row by row. I have the entire grid loaded in edit mode, so I am trying to create 1 submit button at the bottom of the grid so insert all the changes. . So if I was to add any numbers into the grid i would need 1 submit button.
Any advice is greatly appreciated!!
Posted Jun 30, 2017 Kool
Anthony Amolochitis
The function I had input in you topic of the spreadsheet like grid.
I call this function to do a save on all rows in edit mode.
The grid name is "CustomerBusinessHoursGrid" and I get the master table, loop through the rows, and confirm I want to edit each one.
At the end I commit the grid back to the server, in which the edit occurs on each row.
10 rows equals 10 updates.
The save button executes the function below.
/**
 * Save the Business Hours Grid Data.
 */
function Handle_SaveAllCustomerBusinessHours()
{
    var BusHrsGrid = CustomerBusinessHoursGrid.getMasterTable();
    var GridRows   = BusHrsGrid.getRows();
    for( var idx=0; idx < GridRows.length; idx++ )
    {
        GridRows[idx].confirmEdit();  // confirm row will post data back
    }
    CustomerBusinessHoursGrid.commit();
}

Here is the grid in edit mode.
Posted Jun 30, 2017 Kool
Hallie
Can you show me how to implement the buttons within the form? Everything I have tried hasn't worked, and they do not perform the on click action.
Posted Jul 11, 2017 Kool
Anthony Amolochitis
Can you post your code for the page so we can take a look at it as well? I'll check it out for you.
Posted Jul 11, 2017 Kool
Hallie
I figured this out, I needed to update the onclick function to the handle_SaveAll. Thank you so much for your help!!
Posted Jul 11, 2017 Kool -
Anthony Amolochitis
Good job! I'm glad I helped. Take it easy :)
Posted Jul 11, 2017 Kool