Grid Batch Mode - Add new row programaticlly

[Jayson]

Having a bit of an issue adding a row via javascript to an ajax bound grid where the data source is set to batch mode.

While the edit and deletes are working fine, when i add a new record via javascript it appears to have worked, as in the row appears in the grid, but when save is clicked the create action for the new rows is never activated.

I presume it's because when the row is added directly to the data source there is no flag to indicate it's "dirty"  so that it's marked for saving when save is evoked but cannot find anything in the API to flag a row like this. Nor can i find a way for adding a row with data to grid direct

@(Html.Kendo().Grid<UserViewModel>()

        .Name("Grid")

        .ToolBar(toolbar => {toolbar.Save();        })

        .Editable(editable => editable.Mode(GridEditMode.InCell))

        .Sortable()

        .Pageable(pager => pager.PageSizes(true))

        .Selectable()

        .Columns(columns =>

            {

                columns.Bound(c => c.DisplayName);

                columns.Bound(p => p.Attended)

                 .Title("Attended")

                 .ClientTemplate("<input type='checkbox' #= Attended ? checked='checked': '' # class='chkbx' />")

                 .HtmlAttributes(new { style = "text-align: center" }).Width(50);

                columns.Bound(c => c.Duration).Width(100);

                columns.Command(commands => commands.Destroy()).Width(100).Title("Remove");

            })

        .DataSource(dataSource => dataSource.Ajax()

            .Model(model =>

                {

                    model.Id(p => p.ServiceUserID);

                    model.Field(p => p.DisplayName).Editable(false);

                })

            .ServerOperation(false)

            .Read(read => read.Action("_GetAttendees", "Activity", new { ViewBag.ActivityID }))

            .Create(update => update.Action("_AddAttendees", "Activity"))

            .Update(update => update.Action("_UpdateAttendees", "Activity"))

            .Destroy(update => update.Action("_RemoveAttendees", "Activity"))

            .Batch(true)

            .PageSize(20)

            )

)

function AddUser(searchModel) {

           $.getJSON("/Activity/GetUser", searchModel,

               function(data) {

                   switch (data.Value) {

                       case 0:

                       <snip>

                           break;

                       case -1:

                       <snip>

                           break;

                       default:

                           var grid = $("#Grid").data("kendoGrid");

                           var datasource = grid.dataSource;

                           var activityID = @ViewBag.ActivityID;

                           var User = { UserID: data.Value, ActivityID: activityID, DisplayName: data.Message, Attended: 0  @ViewBag.Duration };

                           datasource.insert(User);

 

                           break;

                   }

                   return false;

               });

           };

[Vladimir Iliev]

Hi,

Basically you should insert the record with null ID to be able to save it. Another option is to set the dirty flag to true, however in this case the Update action will be used instead of Create. Please check the examples below:

Insert the record with null ID:

var grid = $("#grid").data("kendoGrid");
var user = { UserID: null, UserName: 'Paul', Email: "[e-mail]" };
grid.dataSource.insert(user);

Insert the record and set it's dirty flag (please note that the Update action will be used for saving this record):

var grid = $("#grid").data("kendoGrid");
var user = { UserID: 12, UserName: 'Paul', Email: "[e-mail]" };
grid.dataSource.insert(user).set("dirty", true);

Kind Regards,
Vladimir Iliev
the Telerik team