Reputation: 73
I am trying to build my Data set on a syncfusion Grid using an MVC app. The code is executed properly without any errors but the Grid is not displayed on the screen.
My Controller will look like as below:
public ActionResult PieT(FormCollection form)
{
MvcApplication2.Models.FMSData FMS1 = new MvcApplication2.Models.FMSData("100", "200");
MvcApplication2.Models.FMSData FMS2=new MvcApplication2.Models.FMSData("10", "20");
MvcApplication2.Models.FMSDatas FMSCollection = new MvcApplication2.Models.FMSDatas();
FMSCollection.add(FMS1);
FMSCollection.add(FMS2);
ViewBag.DataSource = FMSCollection.FMSArray.ToList();
return View();
}
The view looks like as below:
@{
Layout = null;
}
@using MvcApplication2.Models
@using MvcApplication2.ViewModels
@using Syncfusion.JavaScript.DataVisualization
@using System.Collections
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>PieT</title>
</head>
<body>
<div>@using (Html.BeginForm("PieT", "Pie", FormMethod.Post))
{
<table>
<tr>
<td>Month</td>
<td> @Html.DropDownList("Months", ViewData["Months"] as SelectList, "--Select Months--") </td>
<td>
Year</td>
<td>
@Html.DropDownList("Year") </td>
<td>
<input type="submit" value="Submit" />
</td>
</tr>
</table>
}
</div>@(Html.EJ().Grid<FMSData>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.SelectionType(SelectionType.Single)
.Columns(col =>
{
col.Field("TotalDistance").HeaderText("Total Distance Travelled").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("TotalFuelConsumed").HeaderText("Total Fuel Consumed").Width(90).Add();
}))
</body>
</html>
Upvotes: 2
Views: 3187
Reputation: 487
You need to Render Syncfusion grid to you view page.See the code below
@(Html.EJ().Grid<FMSData>("FlatGrid")
.Datasource((IEnumerable<object>)ViewBag.datasource)
.SelectionType(SelectionType.Single)
.Columns(col =>
{
col.Field("TotalDistance").HeaderText("Total Distance Travelled").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add();
col.Field("TotalFuelConsumed").HeaderText("Total Fuel Consumed").Width(90).Add();
})).Render();
Upvotes: 0
Reputation: 2551
The code is executed properly without any errors but the Grid is not displayed on the screen.
I suspect the ej.unobtrusive.min.js
files is not referred in your application.
When the UnobtrusiveJavascriptEnabled
key of the appSettings
in web.config is enabled then we should refer the ej.unobtrusive.min.js
in your layout page to render the Syncfusion MVC controls.
<appSettings>
<add key="UnobtrusiveJavaScriptEnabled" value="true" />
</appSettings>
Please refer to the below help links for the dependent files to render grid.
Upvotes: 2