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

Update or change datasource on the client-side

3 Answers 1236 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Jesse
Top achievements
Rank 1
Veteran
Jesse asked on 10 Sep 2018, 05:18 PM

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?

3 Answers, 1 is accepted

Sort by
0
Jesse
Top achievements
Rank 1
Veteran
answered on 10 Sep 2018, 09:15 PM
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.
0
Accepted
Tsvetina
Telerik team
answered on 11 Sep 2018, 04:29 PM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Jesse
Top achievements
Rank 1
Veteran
answered on 12 Sep 2018, 01:32 PM
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!
Tags
Grid
Asked by
Jesse
Top achievements
Rank 1
Veteran
Answers by
Jesse
Top achievements
Rank 1
Veteran
Tsvetina
Telerik team
Share this question
or