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.

No comments:

Post a Comment