[Solved] Bind Grid on client side using Json

[Jatin]

Hi,
  I am trying to bind telerik mvc Grid on client side using javascript, from the Json object received from server (controller). I get the following error

SCRIPT5007: Unable to get value of the property 'success': object is null or undefined 
telerik.grid.min.js, line 1 character 25697

Here is the code I am using.

View

@using (Ajax.BeginForm("_AddToList", null, new AjaxOptions { OnSuccess = "updateGrid" }, new { id = "frmBulkAddState" })) {
    @Html.ValidationSummary();
    @Html.TextBoxFor(m => m.Name)
    <input type="submit" value="Add To List" class ="t-button" />
}

@(Html.Telerik().Grid<State>()
                .Name("tlkAddToGrid")
                .Scrollable(s => s.Enabled(true))
.Columns(col => {
    col.Bound(m => m.Id);
    col.Bound(m => m.Name);
}))

<script type="text/javascript">
    function updateGrid(json) {
        var grid = $('#tlkAddToGrid').data('tGrid');
        grid.dataBind(json);
    }
</script>

The Controller

public JsonResult _AddToList(State state) {
    List<State> states = Session["AddToList"] as List<State>;
    states.Add(state);
    Session["AddToList"] = states;
    return Json(states, JsonRequestBehavior.AllowGet);
}

 
Any help please.

regards,
Nirvan

[Charles]

I'm getting the exact same error. Have you had any luck finding a solution?

[Jatin]

Charles, it seems that we need to provide an empty GridModel when initially the page is loaded. So, I hooked up the Ajax binding in Grid to a controller action that returns an empty GridModel something like this.

[GridAction]
public ActionResult _BulkStateGrid(GridCommand command) {
    return View(new GridModel { Data = null, Total = 0 });
}

and in View, I used the ajax binding like this

@(Html.Telerik().Grid<State>()
                .DataBinding(db => db.Ajax().Select("_BulkStateGrid", "BulkState"))

and it worked. Hope it helps.
regards,
NIrvan.

[ben]

I found that by adding an onDataBinding client event handler the problem went away.  Even if the handler function doesn't actually do anything.

[Basem]

Thanks Nirvan, the dummy controller action worked. I also had to add a dummy view for it, or else I got an error 500 Javascript alert. I wish there was a more elegant way to start out with a blank grid. I also tried ben's suggestion, but did not work for me. I hope someone can fill us in with a cleaner, more native way to do this.

[Samuel]

Thanks for that. Just lost 2 hours trying to debug!!

[Dipak]

I have made dummy controller and view, but some how my contoller calls two times, first when initilaize and second after data binding through JSON. and while second time it calls the dummy controller its wipes out the data from the grid and it obvious because i am binding null to it.

i am not sure why i am getting call two times to controller.

anybody have any idea?

Thanks