Load grid on button click not at page load

16 posts, 1 answers
  1. Prashanth CS
    Prashanth CS avatar
    3 posts
    Member since:
    Apr 2010

    Posted 29 Jan 2013 Link to this post

    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?
  2. Answer
    Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 30 Jan 2013 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
  4. Prashanth CS
    Prashanth CS avatar
    3 posts
    Member since:
    Apr 2010

    Posted 01 Feb 2013 Link to this post

    Hi Dimiter Madjarov ..
    Thank you so much..
    I will try this and if I can make it work., I will mark it as answer.,
  5. Prashanth CS
    Prashanth CS avatar
    3 posts
    Member since:
    Apr 2010

    Posted 06 Feb 2013 Link to this post

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

    Thanks a ton again.

    Regards,
    Prashanth.
  6. Robert
    Robert avatar
    2 posts
    Member since:
    Feb 2011

    Posted 07 Feb 2013 Link to this post

    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
  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 11 Feb 2013 Link to this post

    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!
  8. Narender
    Narender avatar
    5 posts
    Member since:
    Jan 2013

    Posted 12 Feb 2013 Link to this post

    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
  9. Narender
    Narender avatar
    5 posts
    Member since:
    Jan 2013

    Posted 12 Feb 2013 Link to this post

    Dimiter, it was my mistake...its working fine
    Thanks for the post
  10. Robert
    Robert avatar
    2 posts
    Member since:
    Feb 2011

    Posted 12 Feb 2013 Link to this post

    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
  11. Mithun Prasath
    Mithun Prasath avatar
    5 posts
    Member since:
    Nov 2013

    Posted 30 Nov 2013 Link to this post

    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 
  12. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 02 Dec 2013 Link to this post

    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!
  13. Shashank
    Shashank avatar
    4 posts
    Member since:
    Aug 2014

    Posted 19 Aug 2014 in reply to Dimiter Madjarov Link to this post

    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
  14. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 21 Aug 2014 Link to this post

    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!
     
  15. DavidOBrien
    DavidOBrien avatar
    14 posts
    Member since:
    Sep 2012

    Posted 21 Aug 2014 Link to this post

    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
  16. DavidOBrien
    DavidOBrien avatar
    14 posts
    Member since:
    Sep 2012

    Posted 21 Aug 2014 Link to this post

    I meant manager6 in the POST data :\ not manager5

  17. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 22 Aug 2014 Link to this post

    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!
     
Back to Top
Kendo UI is VS 2017 Ready