Sunday, October 16, 2016

another generic example of a DevExpress MVC GridView with a lot of the functionality wired up

@{
   Html.DevExpress().GridView<Foo>(
      settings =>
      {
         settings.Columns.Add(m => m.Bar, column =>
         {
            column.Width = Unit.Percentage(25);
         });
         settings.Name = "Whatever";
         settings.Styles.Header.CssClass = "myHeader";
         settings.Styles.PagerBottomPanel.CssClass = "gridPager";
         settings.Styles.AlternatingRow.CssClass = "meh";
         settings.Settings.ShowFilterRow = true;
         settings.Settings.ShowFilterRowMenu = true;
         settings.Settings.AutoFilterCondition = AutoFilterCondition.Contains;
         settings.SettingsBehavior.AllowGroup = false;
         settings.SettingsBehavior.AllowSort = false;
         settings.SettingsPager.AlwaysShowPager = true;
         settings.SettingsPager.PageSizeItemSettings.Visible = true;
         settings.SettingsAdaptivity.AdaptivityMode =
               GridViewAdaptivityMode.HideDataCells;
         settings.SettingsAdaptivity.AllowOnlyOneAdaptiveDetailExpanded = true;
         settings.EditFormLayoutProperties.SettingsAdaptivity.AdaptivityMode =
               FormLayoutAdaptivityMode.SingleColumnWindowLimit;
         settings.EditFormLayoutProperties.SettingsAdaptivity
               .SwitchToSingleColumnAtWindowInnerWidth = 600;
         settings.SettingsPager.PagerSizeItemSettings.Items = new string[] { "10", "25",
               "50" };
      }
   ).Bind(Model).GetHtml();
}

 
 

A few things about this:

  1. This markup really needs to go in a partial all by itself. It's OK if there is some other Razor markup in there to loop in a List of Foo as the Model for example, but there cannot be another bit of markup in the partial which makes other HTML that sits side by side with our princess as otherwise princess will misbehave.
  2. That which is in yellow is our List of Foo.
  3. That which is in purple is a needed note to suggest that in contrast to what the collection might be hydrating the whole list, an individual line item is of Foo. Doesn't this seem silly? It sure does to me. It seems like DevExpress could just figure this out for you. It makes me think of .min.js.map, but I digress.
  4. That which is in purple must be there in order for that which is in teal to work.
  5. That which is in white may be crafted in an alternative way as shown below. Choose wisely.

@(
   Html.DevExpress().GridView<Foo>(
      settings =>
      {
         settings.Columns.Add(m => m.Bar, column =>
         {
            column.Width = Unit.Percentage(25);
         });
         settings.Name = "Whatever";
         settings.Styles.Header.CssClass = "myHeader";
         settings.Styles.PagerBottomPanel.CssClass = "gridPager";
         settings.Styles.AlternatingRow.CssClass = "meh";
         settings.Settings.ShowFilterRow = true;
         settings.Settings.ShowFilterRowMenu = true;
         settings.Settings.AutoFilterCondition = AutoFilterCondition.Contains;
         settings.SettingsBehavior.AllowGroup = false;
         settings.SettingsBehavior.AllowSort = false;
         settings.SettingsPager.AlwaysShowPager = true;
         settings.SettingsPager.PageSizeItemSettings.Visible = true;
         settings.SettingsAdaptivity.AdaptivityMode =
               GridViewAdaptivityMode.HideDataCells;
         settings.SettingsAdaptivity.AllowOnlyOneAdaptiveDetailExpanded = true;
         settings.EditFormLayoutProperties.SettingsAdaptivity.AdaptivityMode =
               FormLayoutAdaptivityMode.SingleColumnWindowLimit;
         settings.EditFormLayoutProperties.SettingsAdaptivity
               .SwitchToSingleColumnAtWindowInnerWidth = 600;
         settings.SettingsPager.PagerSizeItemSettings.Items = new string[] { "10", "25",
               "50" };
      }
   ).Bind(Model).GetHtml()
)

No comments:

Post a Comment