CODEWITHSUNDEEP
asp.net-mvc-4model-view-controllergridsyncfusion
user3428508
user3428508

Reputation: 73

syncfusion Grid is not displayed on screen

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

Answers (2)

JRA
JRA

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

Madhu
Madhu

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.

http://help.syncfusion.com/aspnetmvc/getting-started#to-enable-unobtrusive-option-in-your-application

Upvotes: 2

Related Questions