Ajax connected grid - Posting without postback

3 posts, 1 answers
  1. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 25 May Link to this post

    I have an ajax connected grid, and I have a button thats a submit button, when I click it it posts the page and the searchstring I have in a textbox.

    This is fine and works, I was just wondering if and how I can with jquery get the button to get ajax to fetch the data for the grid? I would like that to happen without a postback if possible, and it should since its an ajax grid.

    any ideas ?

     

    Regards,

    Emil

     

  2. Answer
    Stephen
    Stephen avatar
    86 posts
    Member since:
    Jan 2011

    Posted 25 May in reply to Emil Link to this post

    Something along the lines of this should get you going(not a complete code sample):

    @(Html.Kendo().Button()
        .Name("button")
        .Content("Refresh grid")
        .HtmlAttributes( new {type = "button"} )
        .Events(ev => ev.Click("onClick")))
     
    @(Html.Kendo().TextBox()
        .Name("searchString")
     )
     
    @(Html.Kendo().Grid...
        .Name("grid")

     

        .DataSource(ds => ...
            .Read(read => read.Action("Grid_Read", "Controller").Data("gridData"))
            ...
        )
    )
     
    <script>
    function onClick() {
        $("#grid").getKendoGrid().dataSource.read();
    }
     
    function gridData() {
        return {
            searchString: $("#searchString").val()
        };
    }
    </script>

    The key is the Data() method of the Read() Action().

    Everytime the grid performs a read, the JS function gridData() is called where you simply return an object that contains the extra data you want to the send to the read action in addition to the request data that the grid always sends.

    If your grid read action has a string parameter named searchString, it will contain the value from gridData() which you can use however you need to filter the results before passing them back to the grid.

     

     

  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Emil
    Emil avatar
    30 posts
    Member since:
    Mar 2016

    Posted 26 May in reply to Stephen Link to this post

    I just needed : $("#grid").getKendoGrid().dataSource.read();

    in the onclick event on my button.

    thank you

     

Back to Top