1. Home
  2. Forum
  3. ASP.NET MVC
  4. Bund-ling with Grid does not render

Bund-ling with Grid does not render

Hi, if I use bundling with _Layout, the grid does not render.


//BundleConfig Code
// EJ styles
            var EjStylesBundle = new Bundle("~/css/EjStyles");
            EjStylesBundle.Include(
                "~/Content/ej/web/ej.widgets.core.min.css",
                "~/Content/ej/web/bootstrap-theme/ej.theme.min.css");
            EjStylesBundle.Builder = nullBuilder;
            EjStylesBundle.Transforms.Add(styleTransformer);
            EjStylesBundle.Orderer = nullOrderer;
            bundles.Add(EjStylesBundle);
            
            
// EJ JS
            var syncfusionJsBundle = new Bundle("~/bundles/Ejs");
            syncfusionJsBundle.Include(
                 "~/Scripts/jquery.easing.1.3.js",
                 "~/Scripts/jquery.globalize.min.js",
                 "~/Scripts/jsrender.min.js",
                 "~/scripts/ej/ej.unobtrusive.min.js",
                 "~/Scripts/ej/ej.web.all.min.js");
            syncfusionJsBundle.Builder = nullBuilder;
            syncfusionJsBundle.Transforms.Add(scriptTransformer);
            syncfusionJsBundle.Orderer = nullOrderer;
            bundles.Add(syncfusionJsBundle);


<!-- View pagesource in HTML -->

Bundling  (Virtual Path, does NOT work)

<script src="/Scripts/jquery.easing.1.3.js?bundleVirtualPath=%7e%2fbundles%2fEjs"></script>
<script src="/Scripts/jquery.globalize.min.js?bundleVirtualPath=%7e%2fbundles%2fEjs"></script>
<script src="/Scripts/jsrender.min.js?bundleVirtualPath=%7e%2fbundles%2fEjs"></script>
<script src="/scripts/ej/ej.unobtrusive.min.js?bundleVirtualPath=%7e%2fbundles%2fEjs"></script>
<script src="/Scripts/ej/ej.web.all.min.js?bundleVirtualPath=%7e%2fbundles%2fEjs"></script>

<link rel='nofollow' href="/Content/ej/web/ej.widgets.core.min.css?bundleVirtualPath=%7e%2fcss%2fEjStyles" rel="stylesheet"/>
<link rel='nofollow' href="/Content/ej/web/bootstrap-theme/ej.theme.css?bundleVirtualPath=%7e%2fcss%2fEjStyles" rel="stylesheet"/>

NO-Bundling (directly included and it shows/work in the View)

<script src="/Scripts/jquery.easing.1.3.js"></script>
<script src="/Scripts/jquery.globalize.min.js"></script>
<script src="/Scripts/jsrender.min.js"></script>
<script src="/Scripts/ej/ej.web.all.min.js"></script>
<script src="/scripts/ej/ej.unobtrusive.min.js"></script>

<link rel='nofollow' href="/Content/ej/web/ej.widgets.core.min.css" rel="stylesheet" />
<link rel='nofollow' href="/Content/ej/web/bootstrap-theme/ej.theme.min.css" rel="stylesheet" />

thanks
Mega



5 Replies
VA Venkatesh Ayothi Raman Syncfusion Team February 15, 2016 12:58 PM UTC

Hi Megatron,
Thanks for contacting Syncfusion support.

We were unable to reproduce the error. Could you please share the more details:
1)      Are you confirmed jquery scripts are referred only once in _Layout.html page?
2)      Any script error in console? If yes, please provide a screenshot of them?
3)      share the issue reproducing sample.
It would be helpful for find the issue and provide a prompt solution.
For your Convenience, we have created a sample.
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication1-1860148935

Regards,
Venkatesh Ayothiraman.

ME Megatron February 15, 2016 08:18 PM UTC

Hi Venkatesh, I was able to download your sample it compiles and runs fine.

However, looking at the screenshot you can see its missing the paging, formatting etc from SF CSS.   Beyond this, its does not seem to work while I try to incorporate custom skinning other SASS/LESS checks.





thanks
Mega

VA Venkatesh Ayothi Raman Syncfusion Team February 16, 2016 09:52 AM UTC

Hi Megatron,

We deeply regret for the inconvenience caused.

Yes, you can use the custom CSS/LESS files in bundle configuration.
Note: If we refer the styles using bundle configuration, then we should use @Styles.Render("~/bundles/ejstyles”) in_Layout.html page. Refer to the following code sample,

<html>

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>@ViewBag.Title - My ASP.NET Application</title>

    @Styles.Render("~/Content/css")

    @Styles.Render("~/bundles/ejstyles")//ejstyles is bundle configuration name

    @Scripts.Render("~/bundles/modernizr")

    @Scripts.Render("~/bundles/jquery")

                

    @Scripts.Render("~/bundles/ejscripts")//ejscripts is bundle configuration name

    @Scripts.Render("~/Content/themes/base/css")

  

    

</head>


<Bundle configuration code>

bundles.Add(new StyleBundle("~/bundles/ejstyles").Include(

                    "~/Content/ej/web/flat-saffron/ej.widgets.all.min.css"                   

                    ));


           bundles.Add(new ScriptBundle("~/bundles/ejscripts").Include(

                       "~/Scripts/jsrender.min.js",

                       "~/Scripts/jquery.easing-1.3.min.js",

                       "~/Scripts/ej/ej.web.all.min.js",

                        "~/Scripts/ej/ej.unobtrusive.min.js"));



Please ensure that scripts and style files are referred correctly in bundle configuration and scripts or styles containing folder has all the referred scripts files in solution explorer like the following screenshot,




For your convenience we have created a sample.
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SyncfusionMvcApplication11162087645

Regards,
Venkatesh Ayothiraman.

ME Megatron February 16, 2016 09:55 PM UTC

Thanks, its working with bare BS, still some CSS issues when I use it with or change to other default themes.

thanks
Mega

VA Venkatesh Ayothi Raman Syncfusion Team February 17, 2016 09:42 AM UTC

Hi Megatron,
Thanks for the update.
We were unable to reproduce the issue. You can change the CSS or default-theme by add the new CSS bundle-configuration or by including the CSS file location. Refer to the code sample,
Code sample:

bundles.Add(new StyleBundle("~/bundles/ejstyles").Include(                   

                    "~/Content/ej/web/boostrap-theme/ej.theme.min.css",


                    "~/Content/ej/web/ej.widgets.core.min.css"

                   

                    ));


If you still face the same issue, please provide the issue reproduced details,

1)  Version of Essential studio that you are using?

      2)  Any server error in console? If yes, please provide a screenshot of them?

      3) Issue reproducing sample.
It would be helpful for find the issue and provide a prompt solution.
Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/SampleBundleConfig1-111781769


Regards,
Venkatesh Ayothiraman.


Loader.
Up arrow icon