/asp-net-mvc-grid-use-ajax-callbacks-to-switch-between-data-sources

Use the jQuery.ajax function to bind the grid to different data sources on a callback.

Primary LanguageVisual Basic .NETOtherNOASSERTION

Grid View for ASP.NET MVC - How to use Ajax callbacks to switch between different data sources (models)

This example demonstrates how to use the jQuery.ajax function to bind the grid to different data sources on a callback.

Bind the grid to different data sources

Overview

Add a RadioButtonList editor to your application and configure separate data sources. Handle the editor's ValueChanged event and use the jQuery.ajax function to bind the grid to the selected data source on a callback. To identify the data source, use its ID property in the corresponding Action method.

function OnValueChanged(s, e) {
    $.ajax({
        url: '@Url.Action("GridViewPartial", "Home")',
        type: "GET",
        data: { gridType: RadioButtonList.GetSelectedItem().text },
        success: function (data) {
            $('#dvContainer').html(data);
        },
        error: function (xhr, textStatus, errorThrown) {
            alert('Request Status: ' + xhr.status + '; Status Text: ' + textStatus + '; Error: ' + errorThrown);
        }
    });
}
public ActionResult GridViewPartial(GridType gridType = GridType.Categories) {
    IEnumerable model = null;

    switch (gridType) {
        case GridType.Categories:
            model = NorthwindDataProvider.GetCategories();
            ViewData["KeyFieldName"] = "CategoryID";
            break;
        case GridType.Products:
            model = NorthwindDataProvider.GetProducts();
            ViewData["KeyFieldName"] = "ProductID";
            break;
    }
    // ...
}

Files to Review

Documentation

More Examples

Does this example address your development requirements/objectives?

(you will be redirected to DevExpress.com to submit your response)