locked
Bind Kendo grid after the call from Ajax.BeginForm RRS feed

  • Question

  • User-1364446067 posted

    Hi,

    I'm new in MVC. I'm working on a page and I do not want to make an ajax call using

    $.ajax({...


    but instead I'm using Ajax.BeginForm. I have a kendo grid also, which I intend to bind after getting the results from action method.

    My Kendo grid is not the one with Html Helpers. So, I make it using 

     $("#regs-grid").kendoGrid({... 

    But there are 2 problems;

    1. The Kendo grid is hidden after the ajax call (Because it's made entirely on the client side may be that's why)

    2. I have no idea how to bind it after getting the results from the action method

    Any help or related sample will be very helpful. 

    Thursday, November 9, 2017 5:51 AM

All replies

  • User-1838255255 posted

    Hi hassanmehmood,

    According to your description, I think your issue is want to bind the data source to Kendo grid, although your project is MVC, but I notice that you use AJAX Call, so I think you could refer to the following tutorial about bind the data source to Kendo grid in JS:

    Grid / Basic usage:

    http://demos.telerik.com/kendo-ui/grid/index 

    About why Kendo grid is hidden after AJAX call, maybe this issue is you trigger ajax call, but not get the datasource immediately, the Kendo grid is null, so not show.

    Best Regards,

    Eric Du

    Friday, November 10, 2017 3:17 AM
  • User991499041 posted

    Hi Hassan,

    1. The Kendo grid is hidden after the ajax call (Because it's made entirely on the client side may be that's why)

    2. I have no idea how to bind it after getting the results from the action method

    You could try AjaxOptions.OnSuccess.

    This function is called if the response status is in the 200 range.

    @using (Ajax.BeginForm("xxx", "xxx",
                  new AjaxOptions
                  {
                    OnSuccess = "OnSuccess",
                  }))
    
    <script type="text/javascript">
    
    function OnSuccess(response) {
    // load your grid when ajax call success $('#regs-grid').data('kendoGrid').dataSource.read(); } </script>

    Take alook at this article, it explains how to get ASP.NET MVC 5 Ajax.BeginForm AjaxOptions custom arguments for OnSuccess, OnFailure.

    Regards,

    zxj

    Friday, November 10, 2017 9:30 AM