kendo grid will be load after button click

[Monir]

<script type="text/javascript">
<!--
$(document).ready(function () {
$('#btnGridview').click(function () {

var grid = $("#Grid").data("kendoGrid");
grid.dataSource.read();
grid.refresh();
HideProgressDialog();

});
});
//-->
</script>

@using (Html.BeginForm("IndexAjax", "Vendor"))
{

<button class="green" type="button" id="btnGridview" name="btnGridview">
<span>Gridview</span>
</button>
}

i want that this below code will run only when  i click on gridview button.

i want to add   this  action on  javascript .Read(read => read.Action("IndexAjax", "Vendor").Data("PassSearchParameter")).

because i want to load this grid only after button click. i do  not want to initialize this grid for the first time.

@(Html.Kendo().Grid<Vendor>()
.Name("Grid")

.Columns(columns =>
{
columns.Bound(c => c.DisplayId).Title("<input type='checkbox' name='chkAllVendorId' id='chkAllVendorId' />").Width("10px").Sortable(false).Groupable(false).Filterable(false).ClientTemplate("<input type='checkbox' name='chkVendorId' value='#= VendorID #' id='#= VendorID #' />");
columns.Bound(c => c.DisplayId).Title("Display ID").Width("5%").Sortable(true).Groupable(false).Filterable(false).ClientTemplate("<a name='lnkOverview' id='lnkOverview_#= VendorID #' href='/VMS/Vendor/Dashboard?vendorId=#= VendorID #' target='_blank' title='Overview'>#= DisplayId #</a>");
columns.Bound(c => c.Name).Title("Vendor Name").Width("20%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.IndustryName).Title("Industry Category").Width("20%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.City).Title("City").Width("10%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.StateName).Title("State").Width("10%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.CountryName).Title("Country").Width("10%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.EmailAddress).Title("Vendor Email Address").Width("20%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(c => c.VendorStatusCategoryName).Title("Vendor Status Category").Width("10%").Sortable(true).Groupable(true).Filterable(true);
columns.Bound(p => p.FancyBoxLink).ClientTemplate("<a name='lnkViewer' id='lnkViewer_#= VendorID #' rev='/VMS/Vendor/DetailsAjax/#= VendorID #' class='popups' href='#= FancyBoxLink #' title='Details'><img alt='Details' src='/content/images/details.jpg' /></a>&nbsp;<a name='lnkEditor' id='lnkEditor_#= VendorID #' rev='/VMS/Vendor/EditorAjax/#= VendorID #' class='popups' href='#= FancyBoxLink #' title='Edit'><img alt='Edit' src='/content/images/edit.png' /></a>&nbsp;<a name='lnkDelete' id='lnkDelete_#= VendorID #' href='/VMS/Vendor/DeleteAjax/#= VendorID #' title='Delete'><img alt='Delete' src='/content/images/delete.png' /></a>&nbsp;<a name='lnkVerify' id='lnkVerify_#= VendorID #' rev='/VMS/Vendor/VerificationAjax/#= VendorID #' class='popups' href='#= FancyBoxLink #' title='Verify'><img alt='Verify' src='/content/images/#= IsVerified #.png' /></a>").Width("10%").HtmlAttributes(new { @class = "grid-actions-content" }).HeaderTemplate("<center>Actions</center>").HeaderHtmlAttributes(new { @class = "grid-actions-content" });

})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("IndexAjax", "Vendor").Data("PassSearchParameter"))
.PageSize(50)

)
.Pageable()
.Sortable()
)

[Atanu]

You grid code is almost not readable

Have you tried setting the Autobind property of the grid to false as below
.AutoBind(false)

[Monir]

There is no autobind property on kendo for asp.net mvc.

autobind property is for html.



I want that kendo grid will be initialize after button click.