1. Home
  2. Forum
  3. ASP.NET MVC
  4. Having problems integrating Syncfusion into existing MVC 5 project

Having problems integrating Syncfusion into existing MVC 5 project

Hi,

I'm trying to get Syncfusion Grid to work in an existing MVC 5 project but having all kinds of problems.

I've used the "Convert to Syncfusion MVC (Web) Application" option. However, the grid (a simple grid that I took from the documentation that just displays the column headers) doesn't display. It doesn't display any errors in the application.

At no point does it ask me for a license key either. I've tried setting up the SyncfusionLicenseProvider but whenever I add a reference to Syncfusion.License, it throws the following exception:

Could not load file or assembly 'Syncfusion.Licensing' or one of its dependencies. The located assembly's manifest definition does not match the assembly reference. (Exception from HRESULT: 0x80131040)

5 Replies
SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 23, 2018 11:54 AM UTC

Hi David,  
 
Thanks for contacting Syncfusion Support.  
 
Query #1: upgrading or conversion issue 
 
We are unable to reproduce the reported issue on our end after performing conversion. To reproduce the reported issue on our end, please share us the below mentioned details to us. It will be very helpful for us to sort out the issue and provide you the solution earlier.  
 
1. Proper steps to reproduce the issue. 
2. Error screenshot with clear details. 
3. Follow the steps suggested in the below KB article link and send us the zip file which consists of complete Syncfusion Installer logs generated by our tool. 
http://www.syncfusion.com/kb/2331 
 
Note: Please ensure the Syncfusion assembly versions are correct in both project reference section and web.config file. 
 
Query #2: Grid content not rendered 
 
Please ensure the application has been referred with jsrender.min.js. jsrender file is necessary to render the Grid content. If you are still facing any problem, please share the following details.  
 
  1. Complete code example of the Grid (complete view page)
  2. Master page of the application
  3. Stacktrace of browser console (if any error)
 
Regards,  
Seeni Sakthi Kumar S  


DD David Davies August 29, 2018 11:24 AM UTC

Finally got around to taking another look at it. I discovered that Syncfusion has a troubleshooter. I was able to fix the licensing issue with that.

My _Layout page has a reference to jsrender.min.js.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title>
    <link rel='nofollow' href="~/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel='nofollow' href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link rel='nofollow' href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/ej/web/default-theme/ej.web.all.min.css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Scripts/jquery-3.2.1.min.js")
    @Scripts.Render("~/Scripts/jsrender.min.js")
    @Scripts.Render("~/Scripts/ej/ej.web.all.min.js")
    <!-- Plugin CSS -->
    <link rel='nofollow' href="~/Content/magnific-popup.css" rel="stylesheet" type="text/css">
    @if (Request.IsAuthenticated && User.IsInRole("SuperUser"))
    {
        <!-- Custom styles for the dashboard template-->
        <link rel='nofollow' href="~/Content/sb-admin.css" rel="stylesheet">
    }
    else
    {
        <!-- Custom styles for this template -->
        <link rel='nofollow' href="~/Content/freelancer.min.css" rel="stylesheet">
    }
    @Styles.Render("~/Content/ej/web/bootstrap-theme/ej.web.all.min.css")
</head>
<body id="page-top">
        <!--RenderBody()-->
        <div class="container body-content">
            @RenderBody()
        </div>
    <!-- Plugin JavaScript -->
    <script src="~/Scripts/jquery.easing.1.3.js"></script>
    <script src="~/Scripts/jquery.magnific-popup.min.js"></script>
    <!-- Contact Form JavaScript -->
    <script src="~/Vendor/js/jqBootstrapValidation.js"></script>
    <script src="~/Vendor/js/contact_me.js"></script>
    <!-- Custom scripts for this template -->
    <!--<script src="~/Scripts/freelancer.min.js"></script>-->
    <!-- jQuery -->
    @Scripts.Render("~/Scripts/jquery-3.3.1.min.js")
    <!-- Bootstrap Core JavaScript -->
    <script src="~/Scripts/bootstrap.min.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="~/Scripts/metisMenu/metisMenu.min.js"></script>
    <script src="~/Scripts/sb-admin.js"></script>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Html.EJ().ScriptManager()
    @RenderSection("scripts", required: false)
</body>
</html>

And this is the section of the page trying to display the grid.

@using Syncfusion.JavaScript.Models
@{
    ViewBag.Title = "My Account";
}
<div id="content-wrapper">
    <!-- Breadcrumbs -->
    <div class="container-fluid">
        <ol class="breadcrumb">
            <li class="breadcrumb-item">
                <a rel='nofollow' href="#">Dashboard</a>
            </li>
            <li class="breadcrumb-item active">My Account</li>
        </ol>
        <div class="row">
        @(Html.EJ().Grid<object>("FlatGrid")
                    .Columns(col =>
                    {
                        col.Field("OrderID").HeaderText("Order ID").TextAlign(TextAlign.Right).Width(75).Add();
                        col.Field("CustomerID").HeaderText("Customer ID").Width(80).Add();
                        col.Field("ShipName").HeaderText("Ship Name").Width(100).Add();
                        col.Field("ShipCity").HeaderText("Ship City").Width(100).Add();
                        col.Field("Freight").Format("{0:c3}").HeaderText("Freight").Width(80).TextAlign(TextAlign.Right).Add();
                    })
        )
        </div>
    </div>
</div>

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 29, 2018 11:46 AM UTC

Hi David,  
 
We could see you are referring the jQuery reference multiples times which is the cause of the problem. Refer to the highlighted statements. Refer the jQuery scripts only once in the application and followed by that refer the jsrender.min.js and ej.web.all.min.js. 
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title</title> 
    <link rel='nofollow' href="~/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link rel='nofollow' href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet" type="text/css">
    <link rel='nofollow' href="https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic" rel="stylesheet" type="text/css">
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/ej/web/default-theme/ej.web.all.min.css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/Scripts/jquery-3.2.1.min.js")
    @Scripts.Render("~/Scripts/jsrender.min.js")
    @Scripts.Render("~/Scripts/ej/ej.web.all.min.js")
    <!-- Plugin CSS -->
    <link rel='nofollow' href="~/Content/magnific-popup.css" rel="stylesheet" type="text/css">
    @if (Request.IsAuthenticated && User.IsInRole("SuperUser"))
    {
        <!-- Custom styles for the dashboard template-->
        <link rel='nofollow' href="~/Content/sb-admin.css" rel="stylesheet">
    }
    else
    {
        <!-- Custom styles for this template -->
        <link rel='nofollow' href="~/Content/freelancer.min.css" rel="stylesheet">
    }
    @Styles.Render("~/Content/ej/web/bootstrap-theme/ej.web.all.min.css")
</head>
<body id="page-top">
        <!--RenderBody()-->
        <div class="container body-content">
            @RenderBody()
        </div>
    <!-- Plugin JavaScript -->
    <script src="~/Scripts/jquery.easing.1.3.js"></script>
    <script src="~/Scripts/jquery.magnific-popup.min.js"></script>
    <!-- Contact Form JavaScript -->
    <script src="~/Vendor/js/jqBootstrapValidation.js"></script>
    <script src="~/Vendor/js/contact_me.js"></script>
    <!-- Custom scripts for this template -->
    <!--<script src="~/Scripts/freelancer.min.js"></script>-->
    <!-- jQuery -->
    @Scripts.Render("~/Scripts/jquery-3.3.1.min.js")
    <!-- Bootstrap Core JavaScript -->
    <script src="~/Scripts/bootstrap.min.js"></script>
    <!-- Metis Menu Plugin JavaScript -->
    <script src="~/Scripts/metisMenu/metisMenu.min.js"></script>
    <script src="~/Scripts/sb-admin.js"></script>
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/bootstrap")
    @Html.EJ().ScriptManager()
    @RenderSection("scripts", required: false)
</body> 
 
 
Refer to the following Document for the Grid dependency.  
 
 
Regards,  
Seeni Sakthi Kumar S. 


DD David Davies August 29, 2018 02:10 PM UTC

I've deleted Syncfusion MVC from the project. It was turning out to be impossible to set up correctly. It was even causing issues with NuGet.

But I am wondering whether or not it relies upon Bootstrap. The project uses Bootstrap 4 but I had been using the JS1 version of the MVC controls. I set up a test project and discovered that the JS1 projects have Bootstrap 3 included.

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team August 30, 2018 11:07 AM UTC

Hi David, 
 
We have prepared a video demo of the working sample and attached the sample. Please refer the below link for the sample and video. 
 
 
 
If you have any face any difficulties again, please get back to us with the following details. 
 
  1. If possible modify the attached sample and reproduce the issue.
  2. You can also present the video demo of the issue.
 
 Please make a note that the ejGrid is not dependent to the bootstrap CSS. 
 
Regards, 
Seeni Sakthi Kumar S. 


Loader.
Up arrow icon