All geek questions in one place

Kendo grid paging does not work when multiple header lines are present

enter image description here I posted this question on the kendo forum and was waiting for an answer.

I use the kendo grid to work with ui and paging / sorting until I add a few lines (tr: 2 and tr: 3) in my hell. How can i fix this? is there any way? I do not group only simple lines.

 <table>
 <thead>
            <tr>
                <th data-field="firstname">First Name</th>
                <th data-field="surname">Surname</th>
                <th>Class</th>
                <th>Current Age</th>
                @foreach (MapDetail geMapDetail in Model.mapDetails)
                {

                        <th id=@geMapDetail.MapDetailID>Growth</th>

                }
            </tr>
            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <!--get from mapdetails-->
                @foreach (MapDetail geMapDetail in Model.mapDetails)
                {

                    <th id="Year-Sem-Term">@geMapDetail.year</th>
                }
            </tr>

            <tr>
                <th></th>
                <th></th>
                <th></th>
                <th></th>
                <!--get from mapdetails-->
                @foreach (MapDetail geMapDetail in Model.mapDetails)
                {

                        <th>@geMapDetail.shortDescription</th>

                }
            </tr>
      </thead>
  <tbody></tbody>
<table/>

my jquery script

$("#MapDetails").kendoGrid(
   {

       sortable: true,
       dataSource: {
           pageSize: 5
       },
       pageable:true,
       resizable: true,
       columns: [{
           field: "firstname",
           width: 150,
           locked: false
           }
       ]
   }


   );
+4
source share
2 answers

What I did, I combined all 3/4 lines into one line and separated them with the 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>

            }
       }

The same goal is being fulfilled.

+3
source

, Grid ( ), . , JavaScript.

Grid. , .

<!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

Source: https://habr.com/ru/post/1672517/

More articles:


All Articles