1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. Most minimal code for grid using EntityFramework database first in VB.Net

Most minimal code for grid using EntityFramework database first in VB.Net

Hello,
I am having a problem similar to this one, but I don't understand the solution, or maybe I'm missing something in the translation to VB.net.
https://www.syncfusion.com/forums/119515/a-circular-reference-was-detected-while-serializing-an-object-of-type
I have a data model, TT.edmx, and from that I created scaffolded views for Contracts, and the constructor for Contracts looks like this:
Public Class ContractsController
Inherits System.Web.Mvc.Controller
Private db As New TrackingEntities
' GET: Contracts
Function Index() As ActionResult
Dim contracts = db.Contracts.Include(Function(c) c.Customer)
Return View(contracts.ToList())
End Function
In Views/Contracts/Index.vbhtml I cannot figure out how to assign that data source to the grid.
I've been playing with something like this, just trying to find the least amount of code possible to get it to work, so that I can try to understand more about it.
@Html.EJS().Grid("LocalData").DataSource(Model).Render()
What is the correct construction to bind the EF datasource directly to an SF object?
Please advise.
--Jon

4 Replies
MF Mohammed Farook J Syncfusion Team October 18, 2018 08:53 AM UTC

Hi Jon, 
 
Thanks for contacting Syncfusion support. 
 
We have analyzed your query. We have prepared a Syncfusion EJ2 Grid sample for your convenience. Please download the sample from the link below, 
 
We have prepared the above sample by following the steps below, 
 
  1. Create a VB MVC sample.
  2. Install the Syncfusion MVC package (Syncfusion.EJ2.MVC5) by using the nuget. Please refer the screenshot below,
 
 
 
  1. Now add the following scripts and styles cdn links and ScriptManager in the “_Layout.vbhtml” file.
 
@Imports Syncfusion.EJ2 
<!DOCTYPE html> 
<html> 
<head> 
    ... 
    <!-- Syncfusion Essential JS 2 Styles --> 
   <link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" /> 
 
    <!-- Syncfusion Essential JS 2 Scripts --> 
    <script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script> 
</head> 
<body> 
    ... 
    @Html.EJS().ScriptManager() 
</body> 
</html> 
 
 
  1. Add the “Syncfusion.EJ2” Assembly reference to the “Web.config” file.’
 
    <pages pageBaseType="System.Web.Mvc.WebViewPage"> 
      <namespaces> 
        ... 
       <add namespace="VBSample" /> 
        <add namespace="Syncfusion.EJ2" /> 
      </namespaces> 
    </pages> 
 
We have used the following code to set the DataSource to the Grid. Please refer the code example below, 
 
[Index.vbhtml] 
                 
                @Imports Syncfusion.EJ2 
        @Html.EJS().Grid("Grid").DataSource(Model).AllowPaging().Render() 
 
[HomeController.vb] 
 
    Function Index() As ActionResult 
        BindDataSource() 
        Dim contracts = order 
        Return View(contracts.ToList()) 
    End Function 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
J Mohammed Farook. 
 


JO Jon October 19, 2018 04:19 PM UTC

Hello,

Thank you for your reply, but specifically, I need the code modifications for reading the data from EntityFramework.

This function needs to be modified:

    Function Index() As ActionResult 
        BindDataSource() 
        Dim contracts = order 
        Return View(contracts.ToList()) 
    End Function 

Currently, I have this, but it does not work:

Function Index() As ActionResult
    Dim contracts = db.Contracts.Include(Function(c) c.Customer)
    Return View(contracts.ToList())
End Function


JO Jon October 20, 2018 02:30 PM UTC

Aha! I found that this works!

Function Index() As ActionResult
    Dim contracts = db.Contracts
    Return View(contracts.ToList())
End Function

@Html.EJS().Grid("Contracts").DataSource(Model).AllowSorting.AllowPaging.Render()

Now I need to see an example that shows the VB method of assigning the columns.



MF Mohammed Farook J Syncfusion Team October 22, 2018 07:01 AM UTC

Hi Jon, 
 
To assign the columns of Grid using VB method we suggest you to give the columns as sub items of “Columns” property of Grid by using “Sub()” method.  
 
Please refer the code example below, 
 
[Index.vbhtml] 
 
    @Imports Syncfusion.EJ2 
    @Html.EJS().Grid("Grid").DataSource(Model).AllowPaging() 
         .Columns(Sub(col) 
             col.Field("OrderID").HeaderText("Order ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add() 
             col.Field("CustomerID").HeaderText("Customer Name").Width("150").Add() 
             col.Field("Freight").HeaderText("Freight").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Format("C2").Add() 
         End Sub).Render() 
 
 
We have also modified the sample by assigning the columns to Grid with VB method. Please download the sample from the link below, 
 
Please get back to us if you need further assistance. 
 
Regards, 
J Mohammed Farook 
 


Loader.
Up arrow icon