Load grid on button click not at page load

[Prashanth CS]

Hi..
I have a MVC view. 
I have a few textboxes and drop down lists and a kendo grid in it .
And I have a find button.
My controller code for reading records and edit and destroy are in place.
The problem is, when we configure the grid to read records,
It is displaying all the records in the grid at view load it self.
what I want is, 
Initially when the view loads, the grid should not be visible. and it should not have any records.
When I click on the find button, it should fetch the records and display it in the grid. 
In the grid, I should be able to edit/add/delete records.
How can I do this using Kendo Grid?

[Dimiter Madjarov]

Hello Prashanth,

 
If you want the grid not to be automatically bound on initial load, you could set the AutoBind() option to false. You can also hide it by using the display:none CSS property.

See the code below:

@(Html.Kendo().Grid<KendoMvcPractice.ViewModels.ProductViewModel>()
      .Name("AjaxGrid")
      .AutoBind(false)
      ...
)

<style>
    #AjaxGrid{
        display:none;
    }
</style>

When the button is clicked you should call the DataSource read method to load the data and change the display property:

<button id="showGrid">ShowGrid</button>

<script>
    $("#showGrid").click(function () {
        $("#AjaxGrid").data("kendoGrid").dataSource.read();
        $("#AjaxGrid").css("display", "block");
    });
</script>

I hope this will work in your scenario.

Regards,
Dimiter Madjarov
the Telerik team

[Prashanth CS]

Hi Dimiter Madjarov ..
Thank you so much..
I will try this and if I can make it work., I will mark it as answer.,

[Prashanth CS]

Thank you so much Dimiter Madjarov ..
It works like magic.,
This is exactly what I was looking for.

Thanks a ton again.

Regards,
Prashanth.

[Robert]

Hi Dimiter,

Could you post the rest of the datasource configuration for the grid instead of '...'?  I'm having the same issues as Prashanth and am unsure how to configure the grid's datasource to make an ajax call, passing the search parameters the user entered in the HTML inputs.

Regards,

Robert

[Dimiter Madjarov]

Hello Robert,

You could pass additional parameters to the Action with the Data method of the Crud Operation Builder. For your convenience I am attaching the full source code of the solution. 

Please let me know if it works in your scenario.

 

Regards,
Dimiter Madjarov
the Telerik team

[Narender]

Hi Dimiter,

            The downloaded code works perfectly fine.
            when applied the same on my application, for some reason the form is not getting posted to server on button click to call the controller method.when i click the grid for paging/sorting/interchanging columns, the same method on the controller gets hit.

            Iam i missing something to be configured...and moreover i dont see the method datasource on the data method in the intellisense.
$("#AjaxGrid").data("kendoGrid").dataSource.read();
             

Thanks,
Naren

[Narender]

Dimiter, it was my mistake...its working fine
Thanks for the post

[Robert]

Hi Dimiter,
Works perfectly.  Thanks for your help.  I was missing the .Data part for the datasource to get values to send to the server.
Robert

[Mithun Prasath]

Hai,
      I need a example for kendo grid which data's are based on the value i given in a form, and the grid is loaded after submitting the values, i need an example in 
java(jsp) pls i am waiting 

[Dimiter Madjarov]

Hi Mithun,


Currently we don't have such example. Nevertheless as stated in the previous answers if the Grid should not be bound on page load, you should set it's autoBind option to false. In this case the developer is responsible to trigger the data load by calling the read method of the Grid's dataSource.
E.g.

$("#AjaxGrid").data("kendoGrid").dataSource.read();

This method accepts an optional object parameter, which contains an additional data, that will be send to the Read action. In the current case this could be the values entered in the form.

If you are still experiencing any specific issues, you could open a support ticket and send us a sample project, demonstrating the exact problem, so we could assist you further.

Have a great day!

Regards,
Dimiter Madjarov
Telerik

[Shashank]

Hi,

I am loading the data on page but when a user makes any changes then the on seperate button click I want the data and then I will post it to the server. Any help

[Dimiter Madjarov]

Hi Shashank,


It is not exactly clear what is the current case. Could you please elaborate further so we could provide assistance?

I am looking forward to hearing from you.

Regards,
Dimiter Madjarov
Telerik

 

 

[DavidOBrien]

How I do it .... For the button I want to actually load the grid I subscribe to the click event...

// subscribe to click on the governance button
$('#governance').on( "click" , '#generate' , function (e) {

    readGrid();

});

Then using the datasource -> transport -> data configuration I send the form fields content, in my case this is the value of some multiselects

function readGrid( e ) {

             // If the grid exists empty it

    if ( $("#grid").data("kendoGrid") != undefined ) {

        $("#grid").empty();

    }

     var data_source = new kendo.data.DataSource({

        batch: true,

        pageSize: 50,

        serverFiltering: true,

        serverPaging: true,

        serverSorting: true,                                       

        transport: {

            read: {

                url: "ajaxdata/grid_governance.php",

                dataType: "json",

                type: "POST",

                data: function() {
                          // THESE ARE ALL MY FORMS FIELDS
                          var multiselect6 =  $("#manager6").data("kendoMultiSelect");
                          var multiselect7 =  $("#manager7").data("kendoMultiSelect");
                          var multiselect8 =  $("#manager8").data("kendoMultiSelect");
                          var multiselect9 =  $("#manager9").data("kendoMultiSelect");
                          var multiselect10 = $("#manager10").data("kendoMultiSelect");
                          var multiselect11 = $("#manager11").data("kendoMultiSelect");
                          var multiselect12 = $("#manager12").data("kendoMultiSelect");
                    var value6 =  multiselect6.value();


                    var value7 =  multiselect7.value();

                    var value8 =  multiselect8.value();

                    var value9 =  multiselect9.value();

                    var value10 = multiselect10.value();

                    var value11 = multiselect11.value();

                    var value12 = multiselect12.value();

                    return {

                        manager6: value6,

                        manager7: value7,

                        manager8: value8,

                        manager9: value9,

                        manager10: value10,

                        manager11: value11,

                        manager12: value12,
                               // I also send this to my single ajax page to tell it what action to perform

                        action: "ReadGrid"

                    }

                }

            },

            update: {

                url: "ajaxdata/grid_governance.php?action=UpdateGrid",

                dataType: "json",

                type: "POST"

            },

        },

        schema: {

            data: function(response) {
                     // I also return the actual sql used in my ajax call for debugging :)

                $("#sql").html( response.sql );

               return response.data;

           },

            total: "total",                                        

            model: {

                id: "HostID" ,

                fields: {

                     ...
                },

            },

        }

    });           

     

    var grid = $("#grid").kendoGrid({

        dataSource: data_source,

        sortable: true,

        filterable: true,

        scrollable: true,

        minheight: 600,

        height: 600,

        navigatable: true,

        reorderable: true,                                 

        resizable: true,

        pageable: { refresh: true, pageSizes: [25,50,100,250,500,1000], buttonCount: 10 },

        editable: true,                            

        columns: [          

             ...        
        ]

    });

};

which when clicked sends this to my ajax page

manager5: 00467094

[DavidOBrien]

I meant manager6 in the POST data :\ not manager5

[Dimiter Madjarov]

Hello David,


It is not exactly clear what issue are you experiencing in the current case. Could you please elaborate further?

As a side note I would suggest to destroy the Grid before emptying and recreating it.

Regards,
Dimiter Madjarov
Telerik