CODEWITHSUNDEEP
javascriptrazortelerik-gridtelerik-mvc
Brian
Brian

Reputation: 1894

Telerik MVC Grid Populate on demand

I'm trying to build a wizard like data entry form and I have a grid on the "2nd page" that is populated based on values on the 1st page.

Ex:

Page 1: Drop Down of Companies, Select CompanyId

Page 2: Grid populated based on CompanyId from Page1

Both Page1 and Page2 are really 2 div tags on the same page. I'm trying to figure out how not to get the grid to load until I go to Page2 or have a valid CompanyId.

How do I get the MVC Ajax grid to 1. Not have the grid perform the Select() Ajax call on load? 2. Get the grid to call Select on demand using jquery?

Upvotes: 1

Views: 3438

Answers (1)

Igorrious
Igorrious

Reputation: 1618

Try the following:

Add this javascript to the page:

<script type="text/javascript">
var initialLoad = true;
function Grid_onDataBinding(e) {
    if (initialLoad) {
        e.preventDefault();
        initialLoad = false;
    }
}

function RefreshGrid() {
    var grid = $("#TestGrid").data("tGrid");  // Modify the grid ID to your own!!!
    grid.ajaxRequest();
}
</script>

Register the following client side event, to prevent the grid from databinding on initial load.

.ClientEvents(events => events.OnDataBinding("Grid_onDataBinding"))

Then Call the RefreshGrid() function somewhere on the page, to rebind the grid.

<input type="button" value="Refresh Grid" onclick="RefreshGrid()" />

More can be found on the Telerik documentation site. http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html

Upvotes: 5

Related Questions