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. Image for the cookie policy date
close icon

Add Syncfusion to an existing ASP.NET MVC 4 project

Dear,

I want to add Syncfusion controls (Grid and Tools to start, perhaps more later) to an existing project.

What I've done so far is:
Add references to:
  • Syncfusion.Core
  • Syncfusion.Grid.Mvc
  • Syncfusion.Linq.Base
  • Syncfusion.Shared.Base
  • Syncfusion.Shared.Mvc
  • Syncfusion.Tools.Mvc
In App_GlobalResources I have added the GridResource.XX-YY.resx files (each resx has 6 designer files) - These files are not found when starting a new Syncfusion project, so perhaps these are not needed?

In Content I have (Are these required, can I move them to Images instead of Content?)
  • SyncfusionImages
    • Common (icon-sprite.png)
    • GalleryView
      • FontColor16.png
      • Heading1-3.png
      • Intense.png
      • Sort16.png
    • Rotator (1 -> 7.jpg)
    • sfRibbon.png
    • sfToolbar.png
In Web.config I have:
<add assembly="Syncfusion.Core, Version=11.2040.0.25, Culture=neutral, PublicKeyToken=632609B4D040F6B4" />
        <add assembly="Syncfusion.Shared.Base, Version=11.2040.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Shared.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Linq.Base, Version=11.2040.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Theme.Base, Version=11.2040.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />
        <add assembly="Syncfusion.Tools.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

        <add assembly="Syncfusion.Grid.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" />

Also 2 additional httpHandlers
<add verb="*" path="sfgenerate_tools.axd" type="Syncfusion.Mvc.Tools.ImageHandler, Syncfusion.Shared.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false" />
      <add verb="GET,HEAD" path="MvcResourceHandler.axd" type="Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89" validate="false" />

Finally in the _Layout.cshtml:
@(Html.Syncfusion().StyleManager().Combine(false).Minify(false)
        .Register(component =>
        {
            component.Add(ComponentType.Grid);
            component.Add(ComponentType.GenericDropDown);
            component.Add(ComponentType.MultiColumnDropDown);
            component.Add(ComponentType.AutoCompleteTextBox);
            component.Add(ComponentType.Button);
            component.Add(ComponentType.DatePicker);
            component.Add(ComponentType.Dialog);
            component.Add(ComponentType.NumericTextBox);
            component.Add(ComponentType.Tabs);
        }))

and

@{Html.Syncfusion().ScriptManager().Combine(true).Minify(true).Render();}


Now:
I can generate a button with this setup.
However all other controls don't render:
- GenericDropDown just shows all possibilities without any "input" element whatsoever
- MultiColumnDropDown renders a button!???
- DateTimePicker doesn't show when clicking in the input field
- ...

I also added a reference to AjaxMin now but that doesn't seem to be doing the trick either.

I guess my question is:
What are the minimum steps/requirements for adding Syncfusion controls to an ASP.NET MVC project?


2 Replies

WV Wouter Van Schandevijl July 8, 2013 01:19 PM UTC

I get the following exception in Chrome console:
Uncaught TypeError: Cannot read property 'msie' of undefined

(MvcResourceHandler.axd:36)


ME Meena Syncfusion Team July 25, 2013 10:05 AM UTC

Hi Wouter,

 

Thanks for contacting Syncfusion forums.

 

Query1: I get the following exception in Chrome console:

Uncaught TypeError: Cannot read property 'msie' of undefined

 

The above issue occurred due to version mismatch of jquery library. As we mentioned earlier, our controls are tested till Jquery 1.7.2 version, our controls will be working fine until this version. If you are using any higher version of jquery library, you need to refer jquery migrate library in your application. It will help you to overcome the issues occurred due to jquery version mismatch. Please refer the below code snippet,

 

<code>

[_Layout.cshtml]

<script src="@Url.Content("http://code.jquery.com/jquery-migrate-1.2.0.min.js")" type="text/javascript"></script>

</code>

 

Query2: What are the minimum steps/requirements for adding Syncfusion controls to an ASP.NET MVC project?

 

Please find below steps for adding Syncfusion control to an application.

Things to be done in web.config:

1.             1. Add necessary assembly references in your web.config file.

<code>

<add assembly='AjaxMin, Version=4.57.4561.28951, Culture=neutral, PublicKeyToken=21ef50ce11b5d80f' />

<add assembly='Syncfusion.Shared.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' />

 

<add assembly='Syncfusion.Linq.Base, Version=11.2040.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' />

<add assembly='Syncfusion.Theme.Base, Version=11.2040.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' />

<add assembly='Syncfusion.Tools.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' />

 

<add assembly='Syncfusion.Grid.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' />

</code>

2. Add <handlers> and <httpHandlers> in web.config

<code>

<httpHandlers>

<add verb='GET,HEAD' path='MvcResourceHandler.axd' type='Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' validate='false' />

 

// Handler for Capctha control

 

<add verb='*' path='sfgenerate_tools.axd' type='Syncfusion.Mvc.Tools.ImageHandler, Syncfusion.Shared.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' validate='false' />

</httpHandlers>

<handlers>

<add verb='GET,HEAD' name='MvcResourceHandler' path='MvcResourceHandler.axd' type='Syncfusion.Mvc.Shared.MvcResourceHandler, Syncfusion.Shared.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' />

 

// Handler for Capctha control

 

<add verb='*' path='sfgenerate_tools.axd' name='syncfusion_generatetools' type='Syncfusion.Mvc.Tools.ImageHandler, Syncfusion.Shared.Mvc, Version=11.2440.0.25, Culture=neutral, PublicKeyToken=3d67ed1f87d44c89' />

</handlers>

</code>

2.             3. Add necessary namespaces in web.config file. (Note: Namespaces should also be added in web.config which under Views folder (Views->web.config) for razor mode MVC ).

<code>

<namespaces>

<add namespace='Syncfusion.Mvc.Shared' />

<add namespace='Syncfusion.Mvc.Tools' />

<add namespace='Syncfusion.Mvc.Grid />

</namespaces>

</code>

        4. Refer necessary dlls in your application reference. Please refer the below link for more details on assemblies.

http://help.syncfusion.com/ug/asp.net%20mvc/tools/default.htm#!documents/deploymentrequirements.htm

Things to be done in Master page:

1.            5.  Scripts to be added: The below script files should be added to your application to render Syncfusion MVC controls.

· jquery 1.7.2.js (Note: You can also use your preferred version, we have tested our controls till jquery 1.7.2)

· MicrosoftAjax.js

· MicrosoftMvcAjax.js

<code>

<script src='@Url.Content('~/Scripts/jquery-1.7.2.min.js')' type='text/javascript'></script>

<script src='@Url.Content('~/Scripts/MicrosoftAjax.js')' type='text/javascript'></script>

<script src='@Url.Content('~/Scripts/MicrosoftMvcAjax.js')' type='text/javascript'></script>

</code>

3.               6.  Add Syncfusion StyleManager. (Note: It is not necessary to render StyleManager, CSS will be loaded by default from Theme.Base assembly)

<code>

@(Html.Syncfusion().StyleManager().Combine(true).Minify(true)

.Register(component =>

{

component.Add('~/Content/Site.css');

}))

</code>

4.               7. Add Syncfusion ScriptManager – All our controls scripts will be loaded only after rendering the ScriptManager.

5.      <code>

@{Html.Syncfusion().ScriptManager().Minify(true).Combine(true).Render();}

</code>

Please refer the below link for more details on these steps.

http://help.syncfusion.com/ug/asp.net%20mvc/common%20mvc/default.htm#!documents/howtoaddessentialtoo.htm

These are the minimum steps required for rendering a Syncfusion control.

 

Query3: In Content I have (Are these required, can I move them to Images instead of Content?)

 

These are the images used for the controls which are rendered by default in Syncfusion Project template sample creator. You can either remove the images or replace them wherever you want, if you do not want to make use of those controls.

 

The controls which are rendered using our Sample creator are just for the user’s references.

 

Query4:  Also 2 additional httpHandlers

 

The handler “sfgenerate_tools.axd” should be used if you are adding Syncfusion’s Captcha control in your application. Otherwise it can be removed, whereas the other handler “MvcResourceHandler.axd” must be used.

 

The issues reported with MultiColumn, Genericdropdown and Datepicker will be recovered after including this migrate library.

 

Kindly go through the above steps and let us know if you have any other concerns.

 

Regards,

Meena


Loader.
Live Chat Icon For mobile
Up arrow icon