We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

Grid in Nested Layouts does not render data , which scripts do I need

Thread ID:

Created:

Updated:

Platform:

Replies:

121628 Jan 10,2016 07:34 PM Jan 18,2016 09:52 AM ASP.NET MVC 7
loading
Tags: Gantt
Megatron
Asked On January 10, 2016 07:34 PM

Hi, I've a ASP MVC project with _Layout page and -> nested Views, I am using 2 controls

 

_Layout page:

    1->   GridViewpage:           Grid With Master Details View

    2->   GanttwithGridViewPage:  Gantt with Grid. (Grid shows but Gantt does not Render, there is a frame, but data source says 0)

 

I am getting errors from the scripts as widgets not defined ej not defined. Or, some of the controls not showing data. I would like to configure the UI side correctly with the page structure. The installs have older versions of JS

 

I have the following questions:

1.    Can you tell me what all files should be included in the Head section? of the _Layout

2.    What files should be included in the child views?

3.    What Order should these files be in?

 

 

4.    What does Scriptmanager do, how are they helping me?

5.    Should I put it after every control? or only once at the end of the page?

6.    Should I include both the scripts and script manager or only one.

 

7.    What is the difference between ej.widgets.js and ej.web.all.js; and do we include both

8.    In the custom Js script generator, if I choose just grid script, will it include all the dependent JS files, or will I need to include the other dependent files.

9.    What does the Grid.render function do, it exists on some help pages and not the other?

 

 

10. Should I include core files, if I include all

11. Should I include core files, if I include custom files

12. What is unobtrusive used for? (I have included this as true in web config with the corresponding js file)



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On January 11, 2016 04:57 AM

Hi Megatron,

Thanks for contacting Syncfusion Support.

Query #1, #2, #3: Can you tell me what all files should be included in the Head section? of the _Layout, What files should be included in the child views?, What Order should these files be in?

Please refer to the following code example and Help Document for control dependencies.

<head>

    <link rel='nofollow' href="~/Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />

    <script src="~/Scripts/jquery-1.8.2.min.js"></script>

    <script src="~/Scripts/jsrender.min.js"></script>

    <script src="~/Scripts/jquery.globalize.min.js"></script>

    <script src="~/Scripts/jquery.easing.1.3.js"></script>

    <script src="~/Scripts/ej/ej.web.all.min.js"></script>
</head>


http://help.syncfusion.com/js/control-initialization#adding-the-required-javascript-files

Follow the above order to refer the scripts within the _Layout.cshtml and there is no need to refer each scripts file again in every view pages.

If the individual control files were included in the application, do not need to include ej.widgets.min.js or ej.web.all.min.js scripts.

If you are referring custom scripts for the MVC Grid, you have to include ej.core.min.js, ej.data.min.js, ej.grid.min.js and other sub-controls of Grid like, ej.waitingpopup.min.js, ej.pager.min.js. Refer to the Help document for custom script dependencies.

http://help.syncfusion.com/aspnetmvc/grid/grid-dependencies

Query #4, #5, #6: What does Scriptmanager do, how are they helping me? Should I put it after every control? or only once at the end of the page? Should I include both the scripts and script manager or only one.

The main reason for referring the ScriptManager in _Layout file is that, it can be referred as common by all the View files present within your application and it should be included in the _Layout.cshtml.

While rendering the Grid in partial view, unobtrusive javascript plays a vital role. The ASP.Net MVC Controls will render in two modes Unobtrusive mode and Non-unobtrusive mode. The mode of rendering can be controlled by setting the UnobtrusiveJavascriptEnabled key of the appSettings in web.config.

Unobtrusive Mode

In Unobtrusive mode, we can define the ScriptManager in the _Layout page alone and there is no need to define them in partial view.

Non-unobtrusive Mode

In Unobtrusive mode, provide the @(Html.EJ().ScriptManager()) in the partial view as well as in the _Layout page.

[Webconfig]

<appSettings>

    . . . .

    <add key="UnobtrusiveJavaScriptEnabled" value="false" />

  </appSettings>

(Partial view)

 

@(Html.EJ().Grid< object >("Grid")

.Datasource((IEnumerable<object>)ViewData["datasource"])

. . .

 

)
@Html.EJ().ScriptManager()



Query #6, #7: What is the difference between ej.widgets.js and ej.web.all.js; and do we include both In the custom Js script generator, if I choose just grid script, will it include all the dependent JS files, or will I need to include the other dependent files.

ej.widgets.min.js will include the mobile controls along with web controls whereas ej.web.all.min.js will include only web controls of Syncfusion.

On selecting any individual controls in the Custom Script Generator, it will include other dependent script files too. So don’t need to select the dependency files explicitly.

Query #8: What does the Grid.render function do, it exists on some help pages and not the other?

Render() is renders the control. If you are rendering a Grid with regular C# code block, i.e. with @{Html.EJ()}, it must use Render(). For the Html helper (@(Html.EJ) an explicit expression, doesn’t need Render(). Refer to the following code examples.

@{Html.EJ().Grid<object>("Grid")

           . . ..

        .Columns(col =>

        {

            . . .

        }).Render();
}


@(Html.EJ().Grid<object>("Grid")

            . . . .  . .

        .Columns(col =>

        {

            . . .  . . ..  

        })
)



Query #9, #10: Should I include core files, if I include all, Should I include core files, if I include custom files

If you included the ej.web.all.js in your application, there is no need of ej.core.js. But for the custom/individual scripts, ej.core.js is necessary.

Query #11: What is unobtrusive used for? (I have included this as true in web config with the corresponding js file)

To avoid some uncertainties and difficulties in a usual Javascript environment, Unobtrustive Javascript support has been introduced. It is easier for the users to create Syncfusion components with basic level HTML tag-like structure.

When the UnobtrusiveJavaScriptEnabled option is set to true in the web.config file, the control usually renders with the HTML5 data attributes and also the reference to the ej.unobtrusive.min.js file needs to be included in the application.

If you explicitly set this option to false, then the control rendering takes place through scripts, which requires the usage of script manager in your application.

Refer to the Help Document for unobtrusive support.

http://help.syncfusion.com/js/unobtrusive-support

Regards,
Seeni Sakthi Kumar S.

Megatron
Replied On January 12, 2016 08:31 PM

Hello, its working fine for Grid, but its now working for Gantt and schedule when I use other BS theme. Can you also specify what I need to add for Gantt, and why the Grid is working but not the Gantt.

thanks

Mahalakshmi Karthikeyan [Syncfusion]
Replied On January 13, 2016 12:14 PM

Hi Megatron,

We can render the Gantt Control with the same reference list and in the same order as we described in the previous update. And we were not able to reproduce any issue while rendering the Gantt with Grid control in the Bootstrap theme. Please find the sample below,

Sample: http://www.syncfusion.com/downloads/support/directtrac/general/ze/GanttAndGrid-1104744961

If you still face any issue then please get back to us by modifying the attached sample to reproduce it.

Regards,

Mahalakshmi K.


Megatron
Replied On January 14, 2016 04:24 PM

Thanks I am trying it out, but with any 3rd party theme BS, the schedul and gant do not show context or scroll bars. Can you tell me what should I look for to debug it

Mahalakshmi Karthikeyan [Syncfusion]
Replied On January 15, 2016 09:31 AM

 

Hi Megatron,

Gantt Control:

We have rendered Gantt and Grid in the boostrap container, but still we couldn’t reproduce any issue, can you please share us how you are using third party Boostrap in your project? It will be helpful for us to provide you better solution. Please find the code example for details,

<div class="container">

        <div class="row">

            <div class="col-lg-12 col-sm-12 col-xs-12">             

                <div>

                    @(Html.EJ().Grid<object>("LinkedGrid")

                   //…

                    )

                </div>

            </div>

        </div>

        <div class="row">

            <div class="col-lg-12 col-sm-12 col-xs-12">

               <div>

                    @(Html.EJ().Gantt("Gantt").

                    //…

                    )

                </div>

            </div>

        </div>

</div>

If you still facing any issue please get back to us by modifying this sample to reproduce the issue.

Schedule Control:

We were unable to reproduce the issue “Scrollbars are not shown” at our end and the same have prepared a sample which can be downloaded from the following location,
http://www.syncfusion.com/downloads/support/forum/121628/ze/GanttSample1712473569
If you still face any issue then please get back to us by modifying the attached sample to reproduce it.
Note: We have removed the packages in the above sample kindly restore it before running the sample.

Regards,

Mahalakshmi K.



Trav
Replied On January 15, 2016 03:26 PM

Hello, I am new to your components and  I am excited to try this out.

I am also interested in this, because I am using my own BS theme. The picture in the question has helped me, but the solution does not work for me. The reply/sample given is not helpful, its a copy and paste from a very old outdated solution old libs, like EF 5 in 2016. As a developer I am working with ASP MVC 5, JSON 8, Jquery 1.11.3, EF 6.1 and EF 7 are getting ready to come out. I spent a lot of time trying to fix this solution. 

From the sample ....
<?xml version="1.0" encoding="utf-8"?>
<packages>
  <package id="bootstrap.v3.datetimepicker.TypeScript.DefinitelyTyped" version="0.0.5" targetFramework="net45" />
  <package id="EntityFramework" version="5.0.0" targetFramework="net45" />
  <package id="jQuery" version="1.8.2" targetFramework="net45" />
  <package id="jquery.TypeScript.DefinitelyTyped" version="2.3.3" targetFramework="net45" />
  <package id="jQuery.UI.Combined" version="1.8.24" targetFramework="net45" />
  <package id="jQuery.Validation" version="1.10.0" targetFramework="net45" />
  <package id="knockoutjs" version="2.2.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.Mvc" version="4.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.Mvc.FixedDisplayModes" version="1.0.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.Providers.Core" version="1.2" targetFramework="net45" />
  <package id="Microsoft.AspNet.Providers.LocalDB" version="1.1" targetFramework="net45" />
  <package id="Microsoft.AspNet.Razor" version="2.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.Web.Optimization" version="1.0.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.WebApi" version="4.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.WebApi.Client" version="4.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.WebApi.Core" version="4.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.WebApi.WebHost" version="4.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.AspNet.WebPages" version="2.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.jQuery.Unobtrusive.Ajax" version="2.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.jQuery.Unobtrusive.Validation" version="2.0.30506.0" targetFramework="net45" />
  <package id="Microsoft.Net.Http" version="2.0.20710.0" targetFramework="net45" />
  <package id="Microsoft.Web.Infrastructure" version="1.0.0.0" targetFramework="net45" />
  <package id="Modernizr" version="2.6.2" targetFramework="net45" />
  <package id="moment.TypeScript.DefinitelyTyped" version="1.1.8" targetFramework="net45" />
  <package id="Newtonsoft.Json" version="4.5.11" targetFramework="net45" />
  <package id="WebGrease" version="1.3.0" targetFramework="net45" />
</packages>


Main issue for me, I cannot get the control to render correctly with other BS themes. With the default bootstrap 3.3.6 in house yes this works, but when I try the bigger controls like gant inside any of the other custom bootstrap themes they stops working. The point of Bootstrap was compatibility, and many css namespaces from syncfusion controls are overlapping.

BTW, in your rich text editor there is not way to reset the back ground color to transparent or white, and very hard to do ordered list alignments.

thanks
Taz




Mahalakshmi Karthikeyan [Syncfusion]
Replied On January 18, 2016 09:52 AM

Hi Taviz,

Gantt Control:

Query1: but when I try the bigger controls like gant inside any of the other custom bootstrap themes they stops working. The point of Bootstrap was compatibility, and many css namespaces from syncfusion controls are overlapping.

Solution: Still we were not able to reproduce the issue in Gantt control rendering when we run the control with other 3rd party bootstrap theme. We have tried with some open source custom bootstrap theme and we can successfully render the Gantt and Grid in the same page. Please find the below screen shot for details.


Can you please share us more details about the custom boostrap theme you are using in your project exactly?

That will be helpful for us to provide you appropriate solution.

Rich Text Editor control:

Query:” in your rich text editor there is not way to reset the back ground color to transparent or white”
RTE has inbuilt support to Clear formats which is integrated with RTE toolbar . please find the below code snippet to include the clearformat in toolbar.
<code>
List<String> clear = new List<string>() { "clearFormat", "clearAll" };
.....
@{Html.EJ().RTE("rteSample").ShowHtmlSource(true).Width("100%").ContentTemplate(@<div>
        &lt;p&gt;&lt;b&gt;Description:&lt;/b&gt;&lt;/p&gt;
……
</div>).ShowFooter(true).IsResponsive(true).MinWidth("20px").ToolsList(toolsList).Tools(tool =>tool.Clear(clear).FormatStyle(formatStyle).Tables(tables).Links(links).Images(images).Effects(effects).Casing(casing).Font(font).Styles(style).Media(media).Alignment(alignment).Lists(lists).Clipboard(clipboard).DoAction(doAction).Indenting(indenting).View(view)).Render();}
</code>

Please find the alltools sample in the following link.
http://jsplayground.syncfusion.com/Sync_pcbpuprh
Query:”And very hard to do ordered list alignments.”

We are unable to get the exact problems which you have faced on ordered list from the above shared information. Please use the above sample to reproduce your problem or share us the video or screenshots, so that it would help us to assist you further.

Regards,
Mahalakshmi K.


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;