Update or change datasource on the client-side

[Jesse]

I'd like to create a grid based on a ViewModel type like you normally would:

                    @(Html.Kendo().Grid<BlockoutPeriodVM>()
                        .Name("BlockoutWeeks")
                        .Columns(columns =>
                        {
                            columns.Bound(b => b.Name).Title("Name");
                            columns.Bound(b => b.StartDate).Title("Start Date").Format("{0:d}");
                            columns.Bound(b => b.EndDate).Title("End Date").Format("{0:d}");
                            columns.Template(@<text>[buttons]</text>).Title("Edit").ClientTemplate(@"#= crm.setup_classSchedule_edit.getBlockoutCommandTemplate(data) #");
                        })
)

 

but I want to manage the data that it is bound to myself, on the client-side. In my script, I will deserialize an array of BlockoutPeriodVMs and would then like to set that array as the datasource of the grid. I will also offer CRUD support for this array outside of the grid so I'm hoping the Grid/datasource can make the array an observable array and update according to any changes I make. I found this old thread asking the same thing for jQuery Kendo UI, but is there a way to set the read action to a function like that using the MVC Html helper?

[Jesse]

Sorry, here is the old thread I mentioned: https://www.telerik.com/forums/change-dynamically-data-in-datasource. Also, please don't get hung up on my mention of an observable array. I don't think I'm looking for the MVVM approach in the demo, I just need to be able to update items in the datasource.

[Tsvetina]

Hello Jesse,

One option to achieve your goal is to declare a client-side DataSource and use it with the MVC Grid. In the client DataSource definition, you can implement custom editing of the data of an array, like shown in this example:
Local or Custom Transport CRUD Operations

Here is an example of such a set up:

<script>
    var sampleData = [
        { ProductID: 1, ProductName: "Apple iPhone 5s", Introduced: new Date(2013, 8, 10), UnitPrice: 525, Discontinued: false, UnitsInStock: 10 },
        { ProductID: 2, ProductName: "HTC One M8", Introduced: new Date(2014, 2, 25), UnitPrice: 425, Discontinued: false, UnitsInStock: 3 },
        { ProductID: 3, ProductName: "Nokia 5880", Introduced: new Date(2008, 10, 2), UnitPrice: 275, Discontinued: true, UnitsInStock: 0 }
    ];

    // custom logic start

    var sampleDataNextID = sampleData.length + 1;

    function getIndexById(id) {
        var idx,
            l = sampleData.length;

        for (var j = 0; j < l; j++) {
            if (sampleData[j].ProductID == id) {
                return j;
            }
        }
        return null;
    }

    // custom logic end

        var dataSource = new kendo.data.DataSource({
            transport: {
                read: function (e) {
                    // on success
                    e.success(sampleData);
                    // on failure
                    //e.error("XHR response", "status code", "error message");
                },
                create: function (e) {
                    // assign an ID to the new item
                    e.data.ProductID = sampleDataNextID++;
                    // save data item to the original datasource
                    sampleData.push(e.data);
                    // on success
                    e.success(e.data);
                    // on failure
                    //e.error("XHR response", "status code", "error message");
                },
                update: function (e) {
                    // locate item in original datasource and update it
                    sampleData[getIndexById(e.data.ProductID)] = e.data;
                    // on success
                    e.success();
                    // on failure
                    //e.error("XHR response", "status code", "error message");
                },
                destroy: function (e) {
                    // locate item in original datasource and remove it
                    sampleData.splice(getIndexById(e.data.ProductID), 1);
                    // on success
                    e.success();
                    // on failure
                    //e.error("XHR response", "status code", "error message");
                }
            },
            error: function (e) {
                // handle data operation error
                alert("Status: " + e.status + "; Error message: " + e.errorThrown);
            },
            pageSize: 10,
            batch: false,
            schema: {
                model: {
                    id: "ProductID",
                    fields: {
                        ProductID: { editable: false, nullable: true },
                        ProductName: { validation: { required: true } },
                        Introduced: { type: "date" },
                        UnitPrice: { type: "number", validation: { required: true, min: 1 } },
                        Discontinued: { type: "boolean" },
                        UnitsInStock: { type: "number", validation: { min: 0, required: true } }
                    }
                }
            }
    });
</script>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-18 col-md-12">
            @(Html.Kendo().Grid<TelerikMvcApp11.Models.ProductViewModel>()
        .Name("grid")
        .Columns(columns =>
        {
        columns.Bound(p => p.ProductID).Filterable(false);
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.Introduced).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.UnitPrice);
        columns.Bound(p => p.Discontinued);
        columns.Command(p => p.Edit());
        })
        .Editable(edit=>edit.Mode(GridEditMode.InLine))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
        .HtmlAttributes(new { style = "height:550px;" })
        .DataSource("dataSource")
            )
        </div>
    </div>
</div>

It is also possible to declare the DataSource in the Grid in Custom() mode to allow custom assignments for the Read, Create, Update and Delete methods of the Transport. See more information about assigning functions in the MVC DataSource component here:
Function and Object Setup as DataSource Objects

Regards,
Tsvetina
Progress Telerik

[Jesse]

Ah, interesting. I think what I was trying to avoid...or I'll say trying to take advantage of, was mostly allowing the MVC component to generate the columns and datasource schema for me. I ended up biting the bullet and just learning to use the full kendo jQuery grid on the client-side without the MVC HtmlHelper and it's working out. But thank you for showing me how to do this. It's helpful!