OBOUT - ASP.NET Grid - Templates for Buttons Tutorial

ASP.NET Grid - Templates for Buttons Tutorial

The ASP.NET Grid allows you using Templates to customize:
- The Add new/Save/Cancel
- Edit/Update/Cancel/Delete buttons.
- The Add New/Save All/Cancel All buttons.
- The Edit/Modify/Cancel/Delete/Undelete/Remove buttons.

Customizing the Edit/Update/Cancel/Delete buttons

To customize these buttons, you need to use the TemplateSettings.TemplateId and
TemplateSettings.EditTemplateId properties of the Column class:

<obout:Column runat="server" DataField="" AllowEdit="true" AllowDelete="true">
    <TemplateSettings  TemplateID="editBtnTemplate" EditTemplateId="updateBtnTemplate" />
</obout:Column>

These templates will use the edit_record, update_record, cancel_edit, delete_record
client-side methods:

<Templates>
    ...
    <obout:GridTemplate runat="server" ID="editBtnTemplate">
            <Template>
                    <input type="button" value="Edit" 
                     onclick="grid1.edit_record(this)"/>
                    |
                    <input type="button" value="Delete" 
                     onclick="grid1.delete_record(this)"/>
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="updateBtnTemplate">
            <Template>
                    <input type="button" value="Update" 
                     onclick="grid1.update_record(this)"/> 
                    |
                    <input type="button" value="Cancel" 
                     onclick="grid1.cancel_edit(this)"/> 
            </Template>
    </obout:GridTemplate>
    ...
</Templates>

Customizing the Add new/Save/Cancel buttons

To customize these buttons, you need to use the NewRecord_TemplateId and NewRecord_EditTemplateId
properties of the Grid class:

<obout:Grid NewRecord_TemplateId="addTemplate" NewRecord_EditTemplateId="saveTemplate">
...
</obout:Grid>

These templates will use the addRecord, insertRecord, cancelNewRecord client-side methods:

<Templates>
    ...
    <obout:GridTemplate runat="server" ID="addTemplate">
            <Template>
                    <input type="button" value="Add New" 
                     onclick="grid1.addRecord()"/>
            </Template>
    </obout:GridTemplate>
     <obout:GridTemplate runat="server" ID="saveTemplate">
            <Template>
                    <input type="button" value="Save"" 
                     onclick="grid1.insertRecord()"/> 
                    |
                    <input type="button" value="Cancel" 
                     onclick="grid1.cancelNewRecord()"/> 
            </Template>
    </obout:GridTemplate>
    ...
</Templates>

Customizing the Add New/Save All/Cancel All buttons

To customize these buttons, you need to use the NewRecord_TemplateId and MultiRecordSaveCancel_TemplateId
properties of the Grid class:

<obout:Grid NewRecord_TemplateId="addTemplate" MultiRecordSaveCancel_TemplateId="multirecord_save_cancel_tpl">
...
</obout:Grid>

These templates will use the addRecord, saveAll, cancelAll client-side methods:

<Templates>
    ...
    <obout:GridTemplate runat="server" ID="addTemplate">
        <Template>
            <input type="button" id="btnAddNew" value="Add New" 
             onclick="grid1.addRecord()"/>
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="multirecord_save_cancel_tpl">
        <Template>
            <input type="button" id="btnSave" value="Save All" 
             onclick="grid1.saveAll()"/> 
            |
            <input type="button" id="btnCancel" value="Cancel All" 
             onclick="grid1.cancelAll()"/> 
        </Template>
    </obout:GridTemplate>                
    ...
</Templates>

Customizing the Edit/Modify/Cancel/Delete/Undelete/Remove buttons

To customize these buttons, you need to use the TemplateSettings property of the Column class:

<obout:Column HeaderText="EDIT" Width="150" AllowEdit="true" AllowDelete="true" runat="server">
    <TemplateSettings
         ModifyTemporaryEditedRecord_TemplateId="modifyTempEditedRecordBtnTemplate"
         CancelTemporaryEditedRecord_TemplateId="cancelTempEditedRecordBtnTemplate"
         ModifyTemporaryAddedRecord_TemplateId="modifyTempAddedRecordBtnTemplate"
         CancelTemporaryAddedRecord_TemplateId="cancelTempAddedRecordBtnTemplate"
         RemoveTemporaryAddedRecord_TemplateId="removeTempAddedRecordBtnTemplate"
         UndeleteTemporaryDeletedRecord_TemplateId="undeleteTempRecordBtnTemplate"
         EditTemplateId="updateBtnTemplate" TemplateId="editBtnTemplate"
    />
</obout:Column>

These templates will use the edit_record, delete_record,update_record, cancel_edit, modifyTemporaryRecord,removeTemporaryRecord,undeleteTemporaryRecord client-side methods:

<Templates>
    ...
    <obout:GridTemplate runat="server" ID="editBtnTemplate">
        <Template>
            <input type="button" id="btnEdit" value="Edit" 
             onclick="grid1.edit_record(this)"/>
            |
            <input type="button" id="btnDelete" value="Delete" 
             onclick="grid1.delete_record(this)"/>
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="updateBtnTemplate">
        <Template>
            <input type="button" id="btnUpdate" value="Update" 
             onclick="grid1.update_record(this)"/> 
            |
            <input type="button" id="btnCancel" value="Cancel" 
             onclick="grid1.cancel_edit(this)"/> 
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="modifyTempEditedRecordBtnTemplate">
        <Template>
            <input type="button" id="btnSave" value="Modify" 
             onclick="grid1.modifyTemporaryRecord(this)"/> 
            |
            <input type="button" id="btnCancel" value="Delete" 
             onclick="grid1.delete_record(this)"/> 
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="cancelTempEditedRecordBtnTemplate">
        <Template>
            <input type="button" id="btnSave" value="Cancel" 
             onclick="grid1.cancel_edit(this, true)"/> 
            |
            <input type="button" id="btnCancel" value="Delete" 
             onclick="grid1.delete_record(this)"/> 
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="modifyTempAddedRecordBtnTemplate">
        <Template>
            <input type="button" id="btnSave" value="Modify" 
             onclick="grid1.modifyTemporaryRecord(this)"/> 
            |
            <input type="button" id="btnCancel" value="Remove" 
                 onclick="grid1.removeTemporaryRecord(this, 'EDIT')"/> 
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="cancelTempAddedRecordBtnTemplate">
        <Template>
            <input type="button" id="btnSave" value="Cancel" 
             onclick="grid1.cancel_edit(this, true)"/> 
            |
            <input type="button" id="btnCancel" value="Remove" 
             onclick="grid1.removeTemporaryRecord(this, 'EDIT')"/> 
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="removeTempAddedRecordBtnTemplate">
        <Template>
            <input type="button" id="btnCancel" value="Remove" 
             onclick="grid1.removeTemporaryRecord(this, 'ADD')"/> 
        </Template>
    </obout:GridTemplate>
    <obout:GridTemplate runat="server" ID="undeleteTempRecordBtnTemplate">
        <Template>
            <input type="button" id="btnSave" value="Undelete" 
             onclick="grid1.undeleteTemporaryRecord(this)"/>
        </Template>
    </obout:GridTemplate>
    ...
</Templates>

"My Feedback for Product: The obout GRID control is the best and easiest grid control I have ever used till date. It has all the features that needs to be, within a GRID and it’s so user friendly that even a layman can use it just by drag and drop and few lines of code. My Feedback for Support: Honestly speaking, I had not expected the first response from obout that quickly. I mean, I got the response to my query in less than 20 minutes (which is really amazing) and I was really shock to see that. And also, good to see the way Obout team works to fix the issue so quickly. Please continue do design and develop the best tools that are really helpful for the developers in the IT market."

Rohan Lopes

Random testimonial All testimonials