How to make it work with Bootstrap 4, and Jquery 3

[Megatron]

Hi,

While trying bootstrap 4, the rendering is not right in the ASP MVC Tree/Grid, Kanban, Schedule, diagram and Chart. Has this been tested with BS 4, and the new Jquery V2 and V3. I want to know the compatibilty, it does list it in the help section

How can I get it to work with Bootstrap, what files do I need to replace and include? In the Main _layout and the partial views.

The TextEditor also has a bug - indenting to the right, move to the left and vice versa. Its hard to format using the text editor.

thanks
Mega

[Prince Oliver]

Hi Megatron, 

Thanks contacting Syncfusion support. 

While trying bootstrap 4, the rendering is not right in the ASP MVC Tree/Grid, Kanban, Schedule, diagram and Chart. Has this been tested with BS 4, and the new Jquery V2 and V3. I want to know the compatibilty, it does list it in the help section  How can I get it to work with Bootstrap, what files do I need to replace and include? In the Main _layout and the partial views.	Currently we have not provided support for our controls in Bootstrap 4.0. We have provided support for JQuery 2.0 since volume 3 2015 and JQuery 3.0 since volume 3 2016.
The TextEditor also has a bug - indenting to the right, move to the left and vice versa. It’s hard to format using the text editor.	We are unable to reproduce the mentioned issue in Text Editor. Please provide us with an issue reproducing sample or get back to us with proper details of the issue, so that we will update you with a better solution.

Regards, 

Prince

[Megatron]

Thanks for the reply.

1. Can you inform me - what options do I have to set to switch to Jquery  2 or 3, or does this happen automatically.
2. Can you also share a timeline on Bootstrap 4 (not rushing you, just looking for which release will have it), and what options will I need to change.
3. If I am using 3rd party Bootstrap themes - where I am loading the 3rd party theme in _layout, but inside partial views I am loading Syncfusion ASP controls.
4. Here what order, and which libs should I load in the script section of the partial views, and what scope and classes for the div containers should be included in the views so the SF controls pick up the rendering, and in what order - my strategy was to pack all SF themes in one common themes section and load it at the bottom of the partial view page script section. Please help me make this work.
   

Thx
Mega

[Prince Oliver]

Hi Megatron,   

   

Thanks for your update.   

   

Query 1. Can you inform me - what options do I have to set to switch to JQuery  2 or 3, or does this happen automatically?   

   

In our last update, we had mentioned that if you are using volume 3 2015 Build version 13.3.0.7 or above, you can refer jQuery 2.0 in your page to render our controls and if you are using volume 3 2016 build version 14.3.0.49, you can use jQuery 3.0 to render our controls. No need to make any other changes for our controls.    

   

 Query 2. Can you also share a timeline on Bootstrap 4 (not rushing you, just looking for which release will have it), and what options will I need to change.   

   

 Currently. Bootstrap 4.0 is in alpha stage. Once it is released officially, we will provide support. We have already logged feature task regarding the bootstrap. We will let you know when we start support.   

   

   

Query 3. If I am using 3rd party Bootstrap themes - where I am loading the 3rd party theme in _layout, but inside partial views I am loading Syncfusion ASP controls. Here what order, and which libs should I load in the script section of the partial views, and what scope and classes for the div containers should be included in the views so the SF controls pick up the rendering, and in what order - my strategy was to pack all SF themes in one common themes section and load it at the bottom of the partial view page script section.   

 

You have to add our Syncfusion themes below 3^rd party Bootstrap themes and the same for the scripts too. You can use bundling to bundle our Syncfusion themes and scripts.    

   

In BundleConfig.cs file   

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"));   

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

                      "~/Content/ej/web/Bootstrap-theme/ej.web.all.min.css"));   

  

   

   

In _layout.cshtml page   

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

    @Styles.Render("~/bundles/ejstyles")   

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

    @Scripts.Render("~/Scripts/jquery-2.1.4.min.js")   

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

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

  

   

   

   

If you have referred the themes and scripts in _layout page, it will be available in every page. If you need to display only in partial view page, then refer to the themes and scripts after the loading other 3^rd party themes and script files in the page. For referring ej scripts, you can script manager at the bottom of the page.   

   

@Html.EJ().ScriptManager();   

  

   

   

Refer to the below documentation for further details on script manager and script section.   

https://help.syncfusion.com/aspnetmvc/getting-started   

   

We have included a sample for your reference in the following link:   

http://www.syncfusion.com/downloads/support/forum/126451/ze/Bootstrap39959157   

   

Regards,   

Prince