Forums Retired Products and Controls
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Sam
115
Adding Insert and Delete buttons to RowEditTemplate
posted

Hi All,

The standard RowEditTemplate comes with an "OK" button (meaning accept changes to the edited row) and a "Cancel" button (meaning ignore changes). I'm trying to add two more buttons to the RowEditTemplate (in C# / ASP.Net / javascript):

 1. to insert a new row, pre-populated as per the template values. Why? It makes inserting rows faster in certain situations when you can pre-populate a new row based on an existing (selected) row.

2. to delete the selected row (and hence ignore any edits made to it). Why? (a) so the delete operation requires two clicks (one to select row, one to click button) reducing the chances of accidental deletion, and (b) to keep the UI consistent (keep all insert/update/delete functions within the one popup).

The ASP.Net I have in mind would possibly look something like this (bold javascript being doubtful):

<RowEditTemplate>
    <table width="250" cellpadding="0" cellspacing="0" style="font-family: Verdana; font-size: 8pt;">
        ... various fields
    </table>
    <br />
    <p align="center">
        <input id="InsertButton_igtbl_reOkBtn" onclick="igtbl_gRowEditButtonClick(event,true);" style="min-width: 50px" type="button" value="Insert" title="Insert" />&nbsp;
        <input id="UpdateButton_igtbl_reOkBtn" onclick="igtbl_gRowEditButtonClick(event,true);" style="min-width: 50px" type="button" value="Update" title="Update" />&nbsp;
        <input id="DeleteButton_igtbl_reOkBtn" onclick="igtbl_gRowEditButtonClick(event,true);" style="min-width: 50px" type="button" value="Delete" title="Delete" />&nbsp;
        <input id="CancelButton" onclick="igtbl_gRowEditButtonClick(event);" style="min-width: 50px" type="button" value="Cancel" title="Cancel" /></p>
</RowEditTemplate>

I'm having trouble navigating all the Javascript behind the grid, to figure out exactly what I need to call, and when, and how. Does anyone have any good suggestions in this regard? I've searched the web (and these forums) pretty thoroughly and not found anything useful yet.

I understand that an update is submitted by calling igtbl_gRowEditButtonClick(event) from a button whose ID terminates in "igtbl_reOkBtn"... The parts I don't understand are which of the various functions I should be calling to perform the insert (or delete) and in what context - particularly when requiring the postback to trigger the correct (C#) eventhandlers (IE. so that clicking the delete button triggers the DeleteRow eventhandler, not the UpdateRow eventhandler). Should I deal with the event in one of the client-side RowTemplateCloseHandlers (filter on event.srcElement.id), or should I replace insert/delete calls to igtbl_gRowEditButtonClick(event) with some hand-rolled javascript (a sample would be really helpful)?

Any assistance would be gratefully received, especially from the Infragistics gurus! For the record, I'm on v7.1.20071.40...

Cheers,

  - Sam.

Parents
No Data
Reply
  • 115
    posted

    I've finally figured this one out. The approach I wound up taking was to have an "Insert" button outside the grid itself, but to keep the Update button (the button formerly known as "Ok") within the RowEditTemplate. The "Insert" button adds a blank row to the grid and then displays the rowEditTemplate... from there the Update functionality is the same regardless of whether you're updating an old row or a newly-inserted row. NB. I was working on single-row updates, your approach may vary if you want to use Batch mode etc.

    For the Insert button clicked event, I created my own javascript function that adds a new (blank) row to the first row of the grid (otherwise it would be added to the last row, and when the template pops up it extends below the bottom of the window in IE6). You need to do this carefully, as the client-side row Ids used in the grid do not always reflect the order in which they are presented (if you get the code wrong, you'll have bugs that let you update or delete the wrong row). Without giving too much away (your needs & implementation may vary), I'd suggest using a combination of the following client-side functions: grid.setActiveRow(), igtbl_addNew(), grid.Rows.indexOf(), grid.Rows.remove(), grid.Rows.insert(), and row.editRow(). The last one displays the rowEditTemplate. You may also want to track the inserted row (or rows, depending on your implementation) as a "global variable" in the javascript you use on the page, for easier reference.

    For the Update button, I just relabelled the Ok button. For the Delete button, I made a new button (as per first post above). Then for all the buttons, I handled the events inside the grid_AfterRowTemplateCloseHandler() on the client side. As long as your Update and Delete buttons have different IDs but those IDs both end with "igtbl_reOkBtn" then the Infragistics controls will still fire the events required to process changes made to the grid. Useful functions in this eventhandler could include igtbl_getRowById(), igtbl_deleteRow(), and igtbl_needPostBack() (plus some of those mentioned above) depending on what your needs are and how you implement it.

    A couple of final tips: enabling client-side debugging will help you get to know what happens under the hood with the grid components and events, I can strongly recommend enabling it if you want to implement something like this. Also, take the time to read through the WebGrid client-side API so you can understand the objects and functions available to you.

Children