¿Cómo convierte Kendo grid la lista de referencias de objetos en las columnas de la fila principal en una nueva fila debajo de la fila principal?

Answer

1. 

   davy.ai

   June 12, 2023 at 5:22 pm

   Para mostrar el grid de Kendo como se muestra en la pregunta, se puede usar un grid jerárquico con Mes como padre y Semana como hijo. Aquí están los pasos para lograr esto:

   1. Defina un ViewModel con propiedades de los modelos Month y Week. Agregue una propiedad para contener los datos del hijo de esta manera:

      public class GridDataViewModel
      {
         public int Id { get; set; }
         public int num { get; set; }
         public string month { get; set; }
         public DateTime Start { get; set; }
         public DateTime End { get; set; }
         public List<weekviewmodel> Weeks { get; set; }
      }
      
      public class WeekViewModel
      {
         public int Id { get; set; }
         public int num { get; set; }
         public string week { get; set; }
         public DateTime Start { get; set; }
         public DateTime End { get; set; }
         public int hours { get; set; }
         public bool Lock { get; set; }
      }
      

   2. Recupere los datos de la base de datos usando LINQ y mapéelos al ViewModel. Agrupe los datos secundarios por mes para crear una estructura jerárquica como esta:

      var data = _dbContext.Months
         .Include(m => m.Weeks)
         .ToList()
         .Select(m =>
             new GridDataViewModel
             {
                 Id = m.Id,
                 num = m.num,
                 month = m.month,
                 Start = m.Start,
                 End = m.End,
                 Weeks = m.Weeks.Select(w =>
                     new WeekViewModel
                     {
                         Id = w.Id,
                         num = w.num,
                         week = "week " + w.num,
                         Start = w.Start,
                         End = w.End,
                         hours = w.hours,
                         Lock = w.Lock
                     })
                     .ToList()
             })
         .ToList();
      
      // Agrupe los datos secundarios por mes
      data.ForEach(m => m.Weeks = m.Weeks.GroupBy(w => w.num).Select(g => g.First()).ToList());
      

   3. Defina las columnas del grid y la jerarquía utilizando la configuración del Kendo Grid de esta manera:

      @(Html.Kendo().Grid<griddataviewmodel>()
         .Name("grid")
         .Columns(columns =>
         {
             columns.Bound(m => m.Id).Hidden(true);
             columns.Bound(m => m.num).Title("num");
             columns.Bound(m => m.month).Title("month");
             columns.Bound(m => m.Start).Title("Start");
             columns.Bound(m => m.End).Title("End");
             columns.Bound(m => m.Weeks).Title("week").ClientTemplate("#= expandWeek(data)#");
         })
         .DataSource(dataSource => dataSource
             .Ajax()
             .Read(read => read.Action("GetData", "Home"))
             .Model(model =>
             {
                 model.Id(m => m.Id);
                 model.Field(m => m.num).DefaultValue(0);
                 model.Field(m => m.month).DefaultValue("");
                 model.Field(m => m.Start).DefaultValue(DateTime.Now);
                 model.Field(m => m.End).DefaultValue(DateTime.Now);
                 model.Field(m => m.Weeks).DefaultValue(new List<weekviewmodel>());
             })
         )
         .Events(events =>
         {
             events.DataBound("onDataBound");
             events.DetailInit("onDetailInit");
         })
         .Pageable()
         .Sortable()
         .Filterable()
         .Groupable()
         .Reorderable(reorder => reorder.Columns(true))
         .Resizable(resize => resize.Columns(true))
         .ColumnMenu()
         .Excel(excel => excel
             .FileName("Data.xlsx")
             .Filterable(true)
             .ProxyURL(Url.Action("Excel_Export_Save", "Home"))
             .Filterable(true)
         )
      )
      
      <script>
         function expandWeek(data) {
             if (data.Weeks.length > 0) {
                 var rows = "";
                 for (var i = 0; i < data.Weeks.length; i++) {
                     var week = data.Weeks[i];
                     var lock = week.Lock ? "Yes" : "No";
                     rows +=
                         "<tr>" +
                             "<td" + (i == 0 ? " rowspan='" + data.Weeks.length + "'" : "") + "></td>" +
                             "<td>" + week.week + "</td>" +
                             "<td>" + week.num + "</td>" +
                             "<td>" + kendo.toString(new Date(week.Start), "MM/dd") + "</td>" +
                             "<td>" + kendo.toString(new Date(week.End), "MM/dd") + "</td>" +
                             "<td>" + week.hours + "</td>" +
                             "<td>" + lock + "</td>" +
                         "</tr>";
                 }
                 return "<table class='k-grid child'><thead><tr><th></th><th>week</th><th>num</th><th>Start</th><th>end</th><th>hour</th><th>Lock</th></thead><tbody>" + rows + "</tbody></table>";
             } else {
                 return "";
             }
         }
      
         function onDataBound(e) {
             // Colapse todas las filas en la carga inicial
             this.tbody.find("tr.k-master-row").each(function (idx, row) {
                 e.sender.collapseRow(row);
             });
         }
      
         function onDetailInit(e) {
             // Expende la fila actual después de la inicialización
             e.sender.expandRow(e.detailRow);
         }
      </script>
      

   4. Estilice la tabla secundaria usando CSS para que coincida con el diseño deseado. Es posible que necesite ajustar el estilo para adaptarse a sus requisitos específicos.

      “`
      .k-grid.child {
      width: 100%;
      border-collapse: collapse;
      margin-bottom: 10px;
      }

      .k-grid.child th {
      background-color: #f7f7f7;
      border: 1px solid #ddd;
      padding: 8px;
      font-weight: bold;
      text-align: left;
      }

      .k-grid.child td {
      border: 1px solid #ddd;
      padding: 8px;
      }

      .k-grid.child tr:nth-child(even) {
      background-color: #f7f7f7;
      }
      “`

Comments are closed.