Auto add row client side

[Bob]

I am using a grid in Cell Edit mode. Our use case calls for adding a row to the grid automatically. Basically there should always be a new row.

I need some help with the client side API.. so far I am handing the onEdit event.

function Grid_onEdit(e) {
    alert("onEdit Fired mode " + e.mode);
    if (e.mode == "edit") {
        var rowText = "";
        $("#BudgetVersions tbody tr:first td").each(function (index) { rowText += $(this).text(); });
        if (rowText) {
            $("#BudgetVersions").data("tGrid").addRow();
            $(e.cell).focus();
        }
    }
}

I check to make sure that it wasn't fired due to an insert. Then I check the the top (want it to be last, see next issue) row is empty and if it is I add a new row with addRow. After that I set the focus back to the cell that is being edited.

A few problems. addRow adds a new row to the top.. I want to add it to the bottom. The API doesn't seem to allow for that.

Setting focus doesn't seem to be working. I assume there is a control or something I need to set? The dataItem maybe?

Finally, when I edit a column in the added row, the onEdit fires but the mode is reported as insert rather than edit.

For extra credit I'd like to make this a generic function. Is there a way to get a reference to the grid that fired the event without knowing its name which I am using in those jQuery selectors?

Thanks,
BOb

[Petur Subev]

Hello Bob,


In your approach before giving focus to a cell the new inserted row you need to use the cancelCell to close the currently edited cell, since the Grid should have only one cell in edit mode at a time.Also think about changing the event handling that custom logic. For example:

1. When the OnDataBound event is fired add the new row.
2. When the OnSave is fired check if the values in the first row are different than the default ones then add another new row.

There is no option available to add the new row at the bottom.
The mode in the event argument is inserted for all the new inserted rows.
When the edit event is fired you can get the Grid object like this:

$(e.currentTarget).data('tGrid')

Greetings,
Petur Subev
the Telerik team

[Bob]

I think due to all the issues I am having trying to use your grid to edit a collection that is within a larger model I am going to have to abandon this and roll my own js to get the behavior I want.

I would like to suggest that the Telerik grid support batch/cell editing in server binding mode. The grid should build a table using indexed names in the inputs so that the grid can participate in a form (post on submit) and the MVC3 model binders can take the posted data and put it into a collection. This is supported by the model binders as you see from these articles:

http://haacked.com/archive/2008/10/23/model-binding-to-a-list.aspx 
http://jarrettmeyer.com/post/2995732471/nested-collection-models-in-asp-net-mvc-3 

The grid works great in display mode and perhaps as an editable grid when it is the only control on the page. But, including it as part of a larger form is too much work. Also, not being able to add a row to the bottom (append vs prepend) is surprising. jQuery makes it easy to append and prepend... it should be an option on the addRow method.

I am still in my eval phase and it started well until I hit this use case, which is very common in our app. Since the grid control is the primary reason we would license your tools and I have to write my own edit grid, this may cause me to look at slick grid for the other use cases and abandon my eval.

BOb

[Bob]

>In your approach before giving focus to a cell the new inserted row you need to use thecancelCell to close the currently edited cell, 

I think you misunderstand.. I don't want to change focus from the cell that is being edited. The user will carry on editing in the current cell. But focus was switching when I did the add row.. I want to prevent that. I'll look at cancelCell though. 

I am only using Ajax binding to be able to use the batch/in cell editing mode. I don't actually use the Save feature of the grid... won't OnDataBound only fire once when the grid is initially created?

BOb

[Petur Subev]

Hello Bob,

Yes when adding a row the focus is automatically set  to the new row (and there is no option to prevent it), so you need to handle the cancellation of the cell in order to keep the grid in valid state. 
The OnDataBound event is fired each time the Grid rebinds its data with the one received from the server (change page, apply filters, save changes, apply sorting - check this demo)


Greetings,
Petur Subev
the Telerik team

[Bob]

What's is the easiest way to get access to the cell that has focus in the new row to cancel the edit? I don't see any doc on a cancelCell method?

I also assume I need to start the edit again in the cell that raised the event as well? How would I do that?

Keep in mind I am an Batch Edit / Cell edit mode so there is no SaveChanges being done as each row is entered.

Would love to see a working sample of what I am trying to do. 

BOb

[Petur Subev]

Hello Bob,

Generally speaking the cell that has focus (when inserting new row) is in the first row and the first column. You can select it and cancel its edit state like shown in the snippet below:

$('#YourGrid').data('tGrid').cancelCell($('#YourGrid td:eq(0)'))

Indeed, the cancellCell and editCell methods are not documented - we are currently improving the documentation and we will add them for the next release. Basically they accept a <td> element which represents the cell to be edited/displayed using the methods.
The onSave event, as I mentioned in my previous post, is raised when any of the cell loses focus (i.e. on blur) and it is available in batch editing. The onSave event arguments exposes a field called cell which contains the <td> element that loses focus.


Regards,
Petur Subev
the Telerik team