CODEWITHSUNDEEP
kendo-uiasp.net-mvc-5
tcrafton
tcrafton

Reputation: 97

Kendo-UI MVC Error Attaching Events to Grid

In an Asp.Net MVC Razor view, I'm trying to catch error events on my Kendo grid but it can't find the function 'onError' that I define below the grid, I've seen several examples of this working but can't get it to work in my application.

<div>
<div class="row">
    <div class="col-xs-12">
        @(Html.Kendo().Grid<OMG.StatisticsTool.Presentation.Web.Models.ManualStats.ManualStatsViewModel>()
        .Name("manualStatsGrid")
        .Columns(columns =>
        {
            columns.Bound(stat => stat.Statistic).Width(250);
            columns.Bound(stat => stat.Description);
            columns.Bound(stat => stat.Instructions).Width(250);
            columns.Command(commands =>
            {
                commands.Edit();
                commands.Destroy();
            }).Title("Commands").Width(200);
        })
        .ToolBar(toolbar => toolbar.Create())
        .Editable(editable => editable.Mode(GridEditMode.InLine))
        .DataSource(dataSource =>
            dataSource.Ajax()
                .Events(events => events.Error("onError"))
                .Model(model =>
                {
                    model.Id(p => p.Statistic);
                    model.Field(stat => stat.Description).Editable(false);
                })
                .Create(create => create.Action("Index_Create", "ManualStats"))
                .Read(read => read.Action("Index_Read", "ManualStats"))
                .Update(update => update.Action("Index_Update", "ManualStats"))
                .Destroy(destroy => destroy.Action("Index_Destroy", "ManualStats"))
        )
        .Sortable()
        .Scrollable()
        .Filterable(ftb => ftb.Mode(GridFilterMode.Row))
        )
    </div>
</div>        

<div class="row">
    <div class="col-xs-4 col-md-1">
        <button class="btn btn-primary" type="submit" id="save">Save</button>
    </div>
    <div class="col-xs-4 col-md-1">
        <button class="btn btn-primary" id="cancel">Cancel</button>
    </div>
</div>        


<script type="text/javascript">
    function onError() {
        console.log('had error');
    }
</script>

Upvotes: 0

Views: 343

Answers (1)

dimodi
dimodi

Reputation: 4139

The Grid initialization statement is wrapped in a document.ready handler, but if the Grid is loaded via Ajax from a partial view, it will be initialized immediately. If the onError function is defined afrer the Grid, its reference may not be available during Grid initialization. Try moving the function definition before the Grid.

Upvotes: 1

Related Questions