This is a migrated thread and some comments may be shown as answers.

Grid Batch Mode - Add new row programaticlly

1 Answer 453 Views
This is a migrated thread and some comments may be shown as answers.
Top achievements
Rank 1
Jayson asked on 04 Mar 2013, 06:08 PM
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

        .ToolBar(toolbar => {toolbar.Save();        })
        .Editable(editable => editable.Mode(GridEditMode.InCell))
        .Pageable(pager => pager.PageSizes(true))
        .Columns(columns =>
                columns.Bound(c => c.DisplayName);
                columns.Bound(p => p.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);
            .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"))
function AddUser(searchModel) {
           $.getJSON("/Activity/GetUser", searchModel,
               function(data) {
                   switch (data.Value) {
                       case 0:
                       case -1:
                           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 };
                   return false;

1 Answer, 1 is accepted

Sort by
Vladimir Iliev
Telerik team
answered on 06 Mar 2013, 08:12 AM

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: "" };

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: "" };
grid.dataSource.insert(user).set("dirty", true);

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Asked by
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Share this question