Friday, April 29, 2016

Uncaught TypeError: Cannot read property 'allowDrag' of null

This error would appear in the console, alongside one for DXR.axd, when I attempted to drag a column, in attempting to make a DevExpress MVC GridView both use a Customization Window and an Adaptive Design like so:

@Html.DevExpress().GridView(
settings =>
{
   settings.Name = "grid";
   
more settings here... columns are defined, etc.
   settings.Settings.ShowFilterRow = true;
   settings.SettingsAdaptivity.AdaptivityMode =
         GridViewAdaptivityMode.HideDataCellsWindowLimit;
   settings.SettingsAdaptivity.HideDataCellsAtWindowInnerWidth = 800;
   settings.SettingsAdaptivity.AllowOnlyOneAdaptiveDetailExpanded = true;
   settings.EditFormLayoutProperties.SettingsAdaptivity.AdaptivityMode =
         FormLayoutAdaptivityMode.SingleColumnWindowLimit;
   settings.EditFormLayoutProperties.SettingsAdaptivity.
         SwitchToSingleColumnAtWindowInnerWidth = 600;
   settings.SettingsBehavior.AllowSelectByRowClick = true;
   settings.SettingsPopup.CustomizationWindow.Height = 200;
   settings.SettingsPopup.CustomizationWindow.Width = 200;
   settings.SettingsBehavior.EnableCustomizationWindow = true;
   settings.Settings.ShowGroupPanel = true;
   settings.ClientSideEvents.CustomizationWindowCloseUp =
         "grid_CustomizationWindowCloseUp";
}).Bind(Model).GetHtml()

 
 

OK, outside of the grid there is going to be a button with an id of btShowCustomizationWindow for showing and hiding the Customization Window. I stole its name and the JavaScript to get it to work from here and the JavaScript looks like this:

$(document).ready(function () {
   $("#btShowCustomizationWindow").click(
      function () {
         UpdateCustomizationWindowVisibility();
      }
   );
   UpdateCustomizationWindowVisibility();
});
function grid_CustomizationWin
dowCloseUp(s, e) {
   UpdateButtonText();
}
function UpdateCustomizationWindowVisibility() {
   if (grid.IsCustomizationWindowVisible())
      grid.HideCustomizationWindow();
   else
      grid.ShowCustomizationWindow();
   UpdateButtonText();
}
function UpdateButtonText() {
   var text = grid.IsCustomizationWindowVisible() ? "Hide" : "Show";
   text += " Customization Window";
   $("#btShowCustomizationWindow").val(text);
}

 
 

So what's wrong? Well, as it turns out, I can get the draggability and everything else to work by just getting rid of this line of code which isn't needed:

settings.ClientSideEvents.CustomizationWindowCloseUp =
      "grid_CustomizationWindowCloseUp";

 
 

Something else worth mentioning while I'm thinking of it is that you should note that I did not have to do ANYTHING to force the code side name of "grid" to materialize as "grid" on the HTML side as an id that one could lasso with JavaScript. The whole cast-the-client-side-id-as-static thing in the web forms way of doing DevExpress grids doesn't apply in their MVC paradigm.

SDET stands for Software Development Engineer in Test

See: this

Thursday, April 28, 2016

the Customization Window for DevExpress GridViews

This allows you to drag columns off to a side pane to remove them from what is shown. Some links:

confusing "Settings" within "settings" at MVC DevExpress GridViews

@Html.DevExpress().GridView(
settings =>
{
   settings.Name = "GridView";
   settings.Settings.ShowFilterRow = true;

Adaptive Layouts at DevExpress MVC Grid Views!

You can do this with version 15.2.9.0 but you must set up an MVC app as a Responsive Web Application to begin with. When setting up a new project in Visual Studio pick "DevExpress v15.1 Template Gallery" and then when the setup wizard appears pick "Responsive Web Application" from the options under "ASP.NET MVC" mkay?