Themed grid and its JavaScript dependencies

Dec 3, 2014 at 1:54 PM
Edited Dec 3, 2014 at 1:54 PM
I have troubles to incroporate themed grid following RazorThemedGrid Mvc5 example into my application even into fresh empty MVC5 application created by VS2013.

I've sent question with detail problem description to SO, because I've missed this discussion.
Coordinator
Dec 4, 2014 at 8:17 AM
The Mvc Controls Toolkit works with jquery 1.9.x, however older versions of jQuery.validat.js doen't work with it. Thus be sure to use at least version 1.11.1 of jQuery.validate.js. Moreover, it appears you are missing jquery.validate.unobtrusive.
I advice installing the Mvc Controls Toolkit through its Nuget package, instead of doing it manually, in order to avoid js and css libraries mismatches.
Dec 4, 2014 at 9:51 AM
Edited Dec 4, 2014 at 1:21 PM
Hi Frank, thanks for you reply.
  1. The Mvc Controls Toolkit installation using NuGet was the first step I did after a new fresh MVC 5 application. This morning, I'm trying it again with new fresh app. After MVCCT installation, there is jquery-ui-interactions.min.js, but not jsquery-ui itself and jQuery-UI is not listed in dependecies of MVCCT in NuGet. Is it correct? It seems to me, that your RazorThemedGrid example uses jquery-ui and related .css styles. Currently I don't have any Content\Themes\Base*.css files and your example uses jquery-ui-1.8.9.custom.css ...
  2. ad missing jquery.validate.unobtrusive -> I've used wildcard validate* and I've checked generated HTML page: the file is there
  3. In this new app I use your _LayoutClient.css instead of porting _Layout from the example, but anyway, I have difficulties to build-up bundles e.g. with those jquery-ui.css files
  4. Using _LayoutClient and updating MVCCTBundleConfig, installing jQuery-UI using NuGet, I reach the same result as yesterday (easier way): Grid per se is shown correctly and works, pop-up window to edit details does not open - ordinary HTML page is shown instead.
  5. Imports in the generated HTML page look like
<link href="/Content/themes/base/all.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<link href="/Content/Themes/Test/Style.css" rel="stylesheet" type="text/css" />

<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/globalize/globalize.js"></script>
<script type='text/javascript' src='/Scripts/globalize/cultures/globalize.culture.cs-CZ.js'></script>
<script src="/Scripts/jquery-ui-1.11.2.js"></script>

<script src="/Scripts/knockout-3.0.0.js"></script>
<script src="/Scripts/knockout.mapping-latest.js"></script>

<script src="/Scripts/MVCControlToolkit.Controls.Core-3.0.0.js"></script>
<script src="/Scripts/MVCControlToolkit.Controls.Items-3.0.0.js"></script>
<script src="/Scripts/MVCControlToolkit.Controls.Grid-3.0.0.js"></script>
<script src="/Scripts/MVCControlToolkit.Controls.Datetime-3.0.0.js"></script>
<script src="/Scripts/MvcControlToolkit.Utils-2.4.5.js"></script>
<script src="/Scripts/MvcControlToolkit.Bindings-3.0.0.js"></script>
jQuery.validate version is 1.11.1
  1. I've downgraded jQuery & jQueryUI as I updated SO post from yesterday, and pop-up windows works. The rest of library has the same version as above. Imported scripts in working page look like these:
<link href="/Content/themes/base/all.css" rel="stylesheet" />
<link href="/Content/Site.css" rel="stylesheet" />
<link href="/Content/Themes/Test/Style.css" rel="stylesheet" type="text/css" />

<script src="/Scripts/jquery-1.7.2.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.js"></script>
<script src="/Scripts/jquery.validate.min.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.min.js"></script>
<script src="/Scripts/globalize/globalize.js"></script>
<script type='text/javascript' src='/Scripts/globalize/cultures/globalize.culture.cs-CZ.js'></script>
<script src="/Scripts/jquery-ui-1.10.4.js"></script>

<script src="/Scripts/knockout-3.0.0.js"></script>
<script src="/Scripts/knockout.mapping-latest.js"></script>

<script src="/Scripts/MVCControlToolkit.Controls.Core-3.0.0.js"></script>
<script src="/Scripts/MVCControlToolkit.Controls.Items-3.0.0.js"></script>
<script src="/Scripts/MVCControlToolkit.Controls.Grid-3.0.0.js"></script>
<script src="/Scripts/MVCControlToolkit.Controls.Datetime-3.0.0.js"></script>
<script src="/Scripts/MvcControlToolkit.Utils-2.4.5.js"></script>
<script src="/Scripts/MvcControlToolkit.Bindings-3.0.0.js"></script>
  1. I've no idea how to arrange ependecies to make MVCCT Themed grid running with newer/latest jQuery version.
  2. when jQuery version is great than 1.7.2, dialog does not pop-up and is shown as plain ordinary HTML page
  3. when jQuery-UI is great than 1.10.4, dialog pops-up, but has (Left,Top) = (0,0)
Coordinator
Dec 4, 2014 at 3:46 PM
I don't see the jquery ui css in your solution., maybe this is the problem. I tested the themed grid examples with jquery-1.11.1 (the latest version) and jquery-ui 1.10.2 and it works perfectly.
As for the problem you have with the dialog in jquery ui 1.10.4 (it displays in the upper left corner), this is due to the to the fact that the jquey ui dialog changed the way the position is represented. You may fix this quickly by passing in the dialog options a position in the new format. For instance something like:

new MVCControlsToolkit.Controls.DataGrid.Dialog
           {
               Title = "prova dialogo",
               Show = "slide",
               Hide = "slide",
               MinWidth=800,
               Position= "{ my: 'center', at: 'center', of: window }"

           });
If you contact me with the contact form of my blog I can send you the working solution to your email.
Dec 4, 2014 at 6:36 PM
jQuery UI .CSS files are imported via (i don't care about minification & performance now):
<link href="/Content/themes/base/all.css" rel="stylesheet" />
I followed your advice and add Position parameter and it works with the latest jQuery-UI 1.11.2

But the problem with jQuery persists: I have to use version 1.7.2 to achieve dialog pop-up.

You wrote that you did not meet any problem with jQuery 1.11.1: did you check whether you use {version} in the bundle composition and you don't have in the Script folder multiple versions of jQuery files? If this would be the case, all jQuery files would be rendered into HTML page and if you would have one <= 1.7.2, it could shed light on...
Coordinator
Dec 4, 2014 at 6:52 PM
Edited Dec 4, 2014 at 6:54 PM
no I dont use bundling I just modified the same example that is available now on line and I substituted the jquery, jquery.validate and jquery ui files and references. After that everything works perfectly. Again I can send you this project.
Dec 8, 2014 at 9:27 PM
Hi Frank,
I've replaced my script folder & _layout.cshtml by files from your example and it work correctly. Then I replaced individual script/style reference by bundles file-by-file striving for problem isolation, but unsuccessfully: after refactoring everything worked as well and I've no idea, what problem(s) was behind :-( (perhaps multiple reasons: finally I omitted wildcards from bundle definitions, debug automatic generation of minimized scripts in dependence of Debug settings etc...)
Also, I've created a new fresh MVC5 app and incorporated themed grid from the scratch and it works as well with the latest scripts.

Maybe I shook off my odd expectation, that I could install/update MVCC & required jQuerry packages using nuGet and everything will work smoothly and in the mean time I learned (hopefully) how to constitute a new MVC5 application using themed grid manually.
Coordinator
Dec 9, 2014 at 5:26 PM
Yoo should get everything working, simply:
  1. Preparing an Mvc 5 Project
  2. Installing the Mvc Controls Toolkit Package.
  3. Using the _LayoutServer (the _LayourClient is using the client blocks feature...you don't need this all)
  4. Installing jQuery UI
  5. adding the jquery ui references in the Layout page and in the bundling file
  6. Copying the example specific files (themed grid)
Unluckly the jQuery UI Nuget package doesnt conform with the Asp.net bundling features, since the minimized css files and js files versions are in different folder,. This way if you select the minimized files features the budler fails inserting the not minimized version when you run the VS 2013 project in debug mode. The simples solution is always selecting the not minimized version folders.

trying to update all nuget packages of the Themed grid example simply doesn't work, since all themed grid js and css files were not installed with Nuget.