Inline insert

[Mitchell]

I have have a mvc grid that is very similar to the AJAX editing demo except I don't have an edit button.  The issue that I am having is when I click the insert new record button, I do not get the insert and cancel buttons.  The delete button stays in this mode and I never see the other buttons.  I get the insert and cancel buttons if I use InForm or PopUp.

I will post my code if necessary but I was wondering if anyone else has had this issue.  I have seen a few similar cases here on the forums but I have not seen a solution for my exacpt problem.

[Atanas Korchev]

Hello Mitchell,

Currently the edit command serves as a placeholder for save and cancel. It is ambiguous where to render the Insert and Cancel buttons if the Edit command is not present. For example the grid may have more than one command column.

As a workaround you can use the OnEdit event and add the buttons in the last cell:

<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .ToolBar(tools => tools.Insert())
        .DataKeys(keys => keys.Add(c => c.ID))
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Command(c => c.Delete()).Width(200);
        })
        .DataBinding(dataBinding => dataBinding.Ajax().Insert("foo", "bar").Delete("foo", "bar"))
        .ClientEvents(e => e.OnEdit("onEdit"))
%>
<script type="text/javascript">
    function onEdit(e) {
        if (e.mode == 'insert') {
            $(e.form).find('td:last')
                     .append('<a href="#" class="t-grid-action t-button t-state-default t-grid-insert">Insert</a>')
                     .append('<a href="#" class="t-grid-action t-button t-state-default t-grid-cancel">Cancel</a>')
                     .find('.t-grid-delete')
                     .remove();
        }
    }
</script>
</asp:Content>

Regards,

Atanas Korchev
the Telerik team

[Mitchell]

Thank you Atanas Korchev.  That worked like a charm.