KendoUI ASP.Net MVC Grid - How to add row client side?

Question

I am trying to implement a very simple grid with ability to add a new row via a toolbar button. None of the samples provided in the documentation seem to work as expected.

@model Models.MyModel

@{
    ViewBag.Title = "Simple Grid";
}

<div class="container-fluid">
    <div class="row"></div>
    <div class="row">
        <div class="col-xs-11">
            @(Html.Kendo().Grid<Models.MyModel>()
            .Name("myGrid")
            .ToolBar(toolbar => {
                toolbar.Create().Text("Add New Row");
            })
            .Columns(columns => {
                columns.Bound(p => p.Name).Width(200);
                columns.Bound(p => p.Header1).Width(100);
                columns.Bound(p => p.Header2).Width(100);
            })
            .Scrollable()
            .Editable(ed => ed.Mode(GridEditMode.InLine).CreateAt(GridInsertRowPosition.Bottom))
            .HtmlAttributes(new { style = "height:350px;" })
            .DataSource(ds => ds
                .Custom()
                .Schema(schema => schema
                        .Model(model => {
                            model.Id("Id");
                            model.Field("Name", typeof(string));
                            model.Field("Header1", typeof(string));
                            model.Field("Header2", typeof(string));
                        })
                    )
                )
            )
        </div>
    </div>
</div>

The above is in a simple index.chtml page which uses a layout page and injects all the jQuery and KendoUI scripts.

When the page is loaded get a JS error Unable to get property 'nodeName' of undefined or null reference

Not sure why that happens, but hitting continue, displays an empty grid as expected.

Clicking the "Add new Row" toolbar button results in another JS error (same as above)

Question: Am I missing a configuration option on the grid? Per documentation, this is supposed to work "out of the box". All I want to achieve is a simple grid which adds a new empty row everytime I click the "Add" button.

Answer 1

While it can be a bit tough to see at first, using the Custom() configuration requires more than just setting the .Schema() configuration. You can refer to samples in in the Custom DataSource documentation article for references to this. Every sample has at least the Transport field defined with a read configuration set so that the DataSource knows where to read the data.

Since you're doing CRUD operations here I also recommend that you set the other transport fields (Create, Read, Update, Destroy) to ensure that you can work with your controller and communicate with your backend properly.

As a quick note, if you search around the Telerik site for the error unable to get property 'nodeName' of undefined or null reference you start to get the hint that this error is due to an incorrect configuration of a component. It's not specific to the Grid, but it does pop up from time-to-time and the issue almost always boils down to configuration options.

Now, to fix this particular issue I'd recommend working with Ajax binding rather than custom binding. Ajax binding is super simple to work with and is perfect for this kind of scenario where you want a simple Grid added to the page without the more advanced configuration that comes from working with a more advanced feature. Plus you can work with your client-side model to set up validation etc., for your server-side (no need to set the schema manually).

Or, alternatively just set the transport field configuration to valid ActionResults or URLs to push information back and forth properly.

When first implementing any new product I always recommend following documentation closely and starting off with the smaller examples and building form there. If you're looking to work with a custom data source then I say start with a bigger configuration and remove pieces until you get the minimal piece that you're looking for.