text: ﻿@{
      ViewData["Title"] = "Multi Column Responsive Dialog";
  }
  
  @section ContentHeader {
      <h1>@ViewData["Title"]<small></small></h1>
  }
  
  <div class="alert alert-info alert-dismissable">
      <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
      <p>This sample demonstrates how to design responsive forms with multiple columns.</p>
      <p>A subclass of order dialog is styled with CSS to make it more compact.</p>
      <p>Open dialog then try resizing / maximizing dialog and window.</p>
      <p>This example uses flex box. See Responsive Dialog sample for more info.</p>
  
      <p style="text-align: right;"><b>Source Files:</b> 
          @Html.AppSourceFile("Index.cshtml"), 
          @Html.AppSourceFile("MultiColumnResponsiveDialog.ts")
          @Html.AppSourceFile("MultiColumnResponsiveGrid.ts")
      </p>
  </div>
  
  <div id="GridDiv"></div>
  
  <script type="text/javascript">
      jQuery(function () {
          new Serene.BasicSamples.MultiColumnResponsiveGrid($('#GridDiv'), {}).init();
  
          Q.initFullHeightGridPage($('#GridDiv'));
      });
  </script>