1. Følg med
  2. Blog
  3. 2010
  • Publisert
  • 2 min

Manual implementation of Epinova FlexiGrid in a Visual Studio project

Sometimes, it is necessary to add FlexiGrid manually to a VS project, or to troubleshoot an existing implementation. This is a quick guide.

Av Arild Henrichsen

See also
Epinova FlexiGrid vs EPiServer Composer
 

Sometimes, it is necessary to add FlexiGrid manually to a VS project, or to troubleshoot an existing implementation.

Overview:

The FlexiGrid module by Epinova is a great tool allowing editors the creative freedom to arrange a frontpage, campaign page etc as needed on the fly.

The module is available for free at EPiCode:
https://www.coderesort.com/p/epicode/wiki/Flexigrid/Download#DownloadingtheFlexigridmodule

UPDATE: The information on the CodeResort site is undergoing changes and is currently outdated. In the mean time, the download package can be downloaded from:
http://www.epinova.no/Global/Moduler/Epinova_FlexiGrid_manual_install.rar

Normally, the best way to install FlexiGrid on your site is to download it as an EPiServer Manager/Deployment Center module package.
However, source code is also available for download (zip file or svn checkout).

This guide is a quick checklist for those cases where you need to manually implement the FlexiGrid module in your Visual Studio project, or troubleshoot the implementation.

Supported .NET versions

The FlexiGrid module currently supports up to .NET 3.5.

If you have .NET 4/Visual Studio 2010 installed it should be no problem, just don't let Visual Studio convert your project to use .NET 4. (For instance, if you are starting with a clean CMS6 site created by Deployment Center, VS2010 will ask this when you open the project file for the first time.)

 

1. Reference assemblies

Download the module package (see updated note above) and unzip anywhere. Copy the following DLLs to your site's \bin folder and then reference them in your VS project:

  • EPiCode.WebParts.Core.dll
  • Epinova.SpecializedProperties.Flexigrid.dll
  • Epinova.WebControls.dll
  • Epinova.WebParts.Providers.dll
  • Microsoft.Web.Preview.dll

 

2. Add WebParts folders

Create the following folders:

  • /Templates/WebParts/
    (this is where you will put the WebPart controls that you create for your project)
  • /Templates/WebParts/Util/
    (contains the logic for the FlexiGrid toolbar)

 

Copy the following files to the new folders:

/Templates/WebParts/Utils/

  • ManagementConsole.ascx
  • WebPartsLoader.ascx
  • WebPartsLoader.ascx.cs
  • WebPartsLoader.ascx.designer.cs

Include the added files and folders in your VS project.
Remember to update the namespace in WebPartsLoader.ascx.cs according to the namespace in your own project.
Do the same for the <%@ Control %> directive at the top of WebPartsLoader.ascx.

 

3. Modify Web.config

Paste the following into your Web.config file:

<system.web>
  <pages>
    <add tagPrefix="WebParts"  namespace="EPiServer.WebParts.WebControls" assembly="EPiServer" />
    <controls>  
      <!--Epinova-->                
      <add tagPrefix="epinova" namespace="Epinova.WebControls.WebControls" assembly="Epinova.WebControls"/>
      <add tagPrefix="epinova"  namespace="Epinova.SpecializedProperties.Flexigrid.WebControls" assembly="Epinova.SpecializedProperties.Flexigrid"/>
      <!--EPiCode-->
      <add tagPrefix="epicode" tagName="ManagementConsole"  src="~/Templates/WebParts/Util/ManagementConsole.ascx" />
      <add tagPrefix="epicode" namespace="EPiCode.WebParts.EPiChrome" assembly="EPiCode.WebParts.Core"/>
    </controls>
  </pages>
  <webParts>
    <personalization defaultProvider="EpinovaPageVersionedProvider">
      <providers>
        <clear />
        <add name="EpinovaPageVersionedProvider" type="Epinova.WebParts.Providers.PageDataPersonalizationProvider" connectionStringName="EPiServerDB"  applicationName="EpinovaTemplateApplication" />
      </providers>
      <authorization>
        <allow verbs="enterSharedScope"  roles="WebAdmins, WebEditors, Administrators"  />
      </authorization>
    </personalization>
  </webParts>
</system.web>

 

4. Modify MasterPage

Reference the jQuery library in the <head> section of your MasterPage:

<script src="http://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js" type="text/javascript"></script>

Also add the following directly after the <form> tag:

<asp:ScriptManager runat="server" EnablePartialRendering="true" />
<epicode:EpiWebPartManager ID="EpiWebPartManager1" runat="server"  Personalization-InitialScope="Shared" Personalization-Enabled="true"  />
<epicode:ManagementConsole runat="server" />

 

5. Add FlexiGrid to a page

To enable FlexiGrid on a page, add the following anywhere within the markup of the page's .aspx file:

<epinova:Flexigrid ID="Flexigrid1" runat="server" />


Optional: If you don't want to include jQuery globally in the MasterPage (see step 4), you can instead let FlexiGrid include jQuery where needed:

<epinova:Flexigrid ID="Flexigrid1" runat="server" IncludeJquery="true" />