How to hide / show the Kendo grid

Question

So this is my grid, and I need it to be hidden when the page was displayed, and to show it when I click the search button. Any ideas?

    @Html.WebCore().LinkButton(ButtonType.Zoeken, cssClass: "myZoekenButton") 


    @(Html.Kendo().Grid<AanvragenZoekenViewModel.ZoekResultaat>()
        .Name("Grid")
        .Columns(columns =>
        {
...
            columns.Bound(zoekResultaat => zoekResultaat.Opmerkingomschrijving).ClientTemplate("#= Opmerkingomschrijving#").Hidden(Model.DossierLijst);
        })
...
        .AutoBind(false)
        .DataSource(dataSource => dataSource
            .Ajax()
            .Batch(true)
            .Events(e => e.Error("onErrorhandling"))
            .Model(model =>
            {
            })
            .Read(read => read.Action(MVC.Dashboard.ActionNames.ReadItems, MVC.Dashboard.Name).Data("onReadAdditionalData"))
            .PageSize(500)
        )    
    )

Answer 1

There is no HIDE / SHOW property in the Kendo grid. You need to do this in jQuery.

Runtime, the kendo grid is converted to a tag DIV.

you need to hide / show the div tag in jquery.

(Div id will be the name of the grid)

Hide the grid on the Download page

$(document).ready(function() {
$( "#Grid" ).hide();
});

Show grid at the touch of a button

$('#button').click(function(){
  $('#Grid').show();
});