Load grid on button click not at page load

1 Answer 1673 Views
Grid
Prashanth CS
Top achievements
Rank 1
Prashanth CS asked on 29 Jan 2013, 12:21 PM
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?

1 Answer, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 30 Jan 2013, 12:09 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Prashanth CS
Top achievements
Rank 1
commented on 01 Feb 2013, 10:10 AM

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
Top achievements
Rank 1
commented on 06 Feb 2013, 12:27 PM

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
Top achievements
Rank 1
commented on 08 Feb 2013, 12:12 AM

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
Telerik team
commented on 11 Feb 2013, 03:57 PM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Narender
Top achievements
Rank 1
commented on 12 Feb 2013, 04:28 PM

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
Top achievements
Rank 1
commented on 12 Feb 2013, 05:53 PM

Dimiter, it was my mistake...its working fine
Thanks for the post
Robert
Top achievements
Rank 1
commented on 12 Feb 2013, 11:55 PM

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
Top achievements
Rank 1
commented on 30 Nov 2013, 09:36 AM

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
Telerik team
commented on 02 Dec 2013, 09:54 AM

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Shashank
Top achievements
Rank 1
commented on 19 Aug 2014, 11:58 PM

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
Telerik team
commented on 21 Aug 2014, 06:23 AM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
DavidOBrien
Top achievements
Rank 2
commented on 21 Aug 2014, 09:35 PM

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
Top achievements
Rank 2
commented on 21 Aug 2014, 09:37 PM

I meant manager6 in the POST data :\ not manager5

Dimiter Madjarov
Telerik team
commented on 22 Aug 2014, 12:09 PM

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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
Tags
Grid
Asked by
Prashanth CS
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Share this question
or