2 jawaban

Jawaban Terbaik

Apa yang telah saya lakukan adalah saya telah menggabungkan semua 3/4 baris dalam satu baris dan memberi spasi dengan tag "br".

<table class="table table-bordered table-striped table-bordered" id="MapDetails">

<thead>
    <tr class="">
        <th data-field="firstname">First Name</th>
        <th data-field="surname">Surname</th>
        <th data-field="class">Class</th>
        <th data-field="age">Current Age</th>
      @{

            foreach (MapDetail geMapDetailHead in Model.mapDetails)
            {
              string firstText, secText, thirdText, fourthText;
                //...set all 4 header row values in the above variables
              <th id=@geMapDetailHead.MapDetailID>@firstText<br /><b>@secText</b><br />@thirdText<br /><font size="1">@fourthText</font></th>

            }
       }

Melayani tujuan yang sama.

3
Samra 21 Mei 2017, 23:43

Saya tidak berpikir Grid mendukung beberapa baris tajuk (kecuali yang disebut multi-kolom header), terutama jika dibuat dari tabel yang sudah ada. Sejauh yang saya bisa lihat, kesalahan JavaScript terjadi dalam kasus seperti itu.

Yang bisa saya sarankan adalah menyuntikkan baris tabel tambahan di header setelah inisialisasi Grid. Atau, Anda dapat mencoba header multi-kolom dan hanya memiliki satu kolom anak per kolom induk.

<!DOCTYPE html>
<html>
  <head>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.common.min.css" />
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.504/styles/kendo.default.min.css" />

    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.504/js/kendo.all.min.js"></script>
  </head>
  <body>

    <div id="example">
      <table id="grid">
        <colgroup>
          <col />
          <col />
          <col style="width:110px" />
          <col style="width:120px" />
          <col style="width:130px" />
        </colgroup>
        <thead>
          <tr>
            <th data-field="make">Car Make</th>
            <th data-field="model">Car Model</th>
            <th data-field="year">Year</th>
            <th data-field="category">Category</th>
            <th data-field="airconditioner">Air Conditioner</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Volvo</td>
            <td>S60</td>
            <td>2010</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Audi</td>
            <td>A4</td>
            <td>2002</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>BMW</td>
            <td>535d</td>
            <td>2006</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>BMW</td>
            <td>320d</td>
            <td>2006</td>
            <td>Saloon</td>
            <td>No</td>
          </tr>
          <tr>
            <td>VW</td>
            <td>Passat</td>
            <td>2007</td>
            <td>Saloon</td>
            <td>No</td>
          </tr>
          <tr>
            <td>VW</td>
            <td>Passat</td>
            <td>2008</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Peugeot</td>
            <td>407</td>
            <td>2006</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Honda</td>
            <td>Accord</td>
            <td>2008</td>
            <td>Saloon</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Alfa Romeo</td>
            <td>159</td>
            <td>2008</td>
            <td>Saloon</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Nissan</td>
            <td>Almera</td>
            <td>2001</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Mitsubishi</td>
            <td>Lancer</td>
            <td>2008</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Opel</td>
            <td>Vectra</td>
            <td>2008</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Toyota</td>
            <td>Avensis</td>
            <td>2006</td>
            <td>Saloon</td>
            <td>No</td>
          </tr>
          <tr>
            <td>Toyota</td>
            <td>Avensis</td>
            <td>2008</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Toyota</td>
            <td>Avensis</td>
            <td>2008</td>
            <td>Saloon</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Audi</td>
            <td>Q7</td>
            <td>2007</td>
            <td>SUV</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Hyundai</td>
            <td>Santa Fe</td>
            <td>2012</td>
            <td>SUV</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Hyundai</td>
            <td>Santa Fe</td>
            <td>2013</td>
            <td>SUV</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Nissan</td>
            <td>Qashqai</td>
            <td>2007</td>
            <td>SUV</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Mercedez</td>
            <td>B Class</td>
            <td>2007</td>
            <td>Hatchback</td>
            <td>Yes</td>
          </tr>
          <tr>
            <td>Lancia</td>
            <td>Ypsilon</td>
            <td>2006</td>
            <td>Hatchback</td>
            <td>Yes</td>
          </tr>
        </tbody>
      </table>

      <script>
        $(document).ready(function() {
          $("#grid").kendoGrid({
            sortable: true,
            pageable: true,
            dataSource: {
              pageSize: 5
            }
          });
          
          $("#grid").data("kendoGrid").thead.append('<tr><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th><th class="k-header">Row 2</th></tr>');
        });
      </script>
    </div>

  </body>
</html>
4
dimodi 18 Mei 2017, 21:43