Bind WebGrid with dynamic Columns using jQuery AJAX and JSON in ASP.Net MVC

Last Reply 6 months ago By dharmendr

Posted 6 months ago

I have three buttons and a webgrid on my view page. I want to bind webgrid dynamically. On page load, this code is working fine but i want to populate records when specific button is clicked.

//my controller

using SmsMvc.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Helpers;
using System.Web.Mvc;

namespace SmsMvc.Controllers
{
    public class ReportController : Controller
    {
        SampleDataModel sdm = new SampleDataModel();

        [HttpPost]
        public JsonResult AssignmentReport()
        {
            string[] columnNames = typeof(Academics.AcademicAssignment).GetProperties().Select(property => property.Name).ToArray();

            List<WebGridColumn> columns = new List<WebGridColumn>();
            columns.Add(new WebGridColumn() { ColumnName = columnNames[1], Header = "Class" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[2], Header = "Stream" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[3], Header = "Section" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[6], Header = "Title" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[7], Header = "Issue Date" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[8], Header = "Deadline Date" });
            columns.Add(new WebGridColumn() { ColumnName = columnNames[10], Header = "Description" });

            ViewBag.Columns = columns;
            var resultAssignment = sdm.academicAssignment.ToList();
            return Json(resultAssignment, JsonRequestBehavior.AllowGet);
        }
        
    }
}

// my view 

@{
    ViewBag.Title = "AcadmicReport";
    Layout = "~/Views/Shared/_MyLayout.cshtml";
    WebGrid webGrid = new WebGrid(source: Model, canSort: false, canPage: true);
}

<!DOCTYPE html>

<html>

<head>
    <title>Report | Assignment</title>
</head>

<body>

    <div class="row">
        <div class="form-group">
            <div class="col-sm-4">
                <input type="submit" class="btn btn-sm btn-success" onclick="BindAssignment(); return false;" value="Assignment" style="width:100%" />
            </div>            
        </div>
    </div>    
    <div class="row">
        @if (Model != null)
        {
            @webGrid.GetHtml(htmlAttributes: new { @id = "WebGrid", @class = "table table-striped table-bordered table-hover" }, columns: ViewBag.Columns)
        }
    </div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
    <script>
        function BindAssignment() {
            $.ajax({
                url: '/Report/AssignmentReport',
                type: "POST",
                contentType: false,
                processData: false,
                dataType: "JSON",
                data: "",
                success: function (resultAssignment) {
                    var grid = $('#WebGrid').GetHtml();
                    grid.dataSource.data(resultAssignment);
                    grid.refresh();

                }
            });
        }
    </script>
</body>
</html> 
You are viewing reply posted by: dharmendr 6 months ago.
Posted 6 months ago
Shud says:
 var grid = $('#WebGrid').GetHtml();
                    grid.dataSource.data(resultAssignment);
                    grid.refresh();

You can't assign the dataSource to WebGrid.

To populate the WebGrid using JSON Ajax refer below article.

Populate (Bind) WebGrid from database using jQuery AJAX and JSON in ASP.Net MVC