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.  */

That's neat. Thanks Anthony!

Hi Anthony,
could you show me how to make this SAVE button run as an INSERT command for the editable fields in the Grid?

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

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!!

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.

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.

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.

I figured this out, I needed to update the onclick function to the handle_SaveAll. Thank you so much for your help!!

Good job! I'm glad I helped. Take it easy :)