Columns order - Scheme ID

3 posts, 0 answers
  1. Y
    Y avatar
    2 posts
    Member since:
    Jan 2021

    Posted 31 Jan Link to this post

    HI, 

    I have a strange problem.
    I create a grid with data from AJAX.

    I set the schema ID in the list of columns in position [0].
    I also give it a HIDDEN: TRUE value to keep it hidden.

    The problem is that for some reason the actual column of the ID is at the end of the columns and not at the beginning (*not* in position [0]).

    I do not understand why this is happening.

    can you please help me?

     

    tnks!

  2. Y
    Y avatar
    2 posts
    Member since:
    Jan 2021

    Posted 31 Jan in reply to Y Link to this post

    P.S. 

    this is the columns:

    var columns = [
        { field: "ID", title: "ID", width: "0", hidden: true }, // **this is in position [0]**
        { field: "name", title: "name" },
        { field: "age", title: "age" },
        { field: "phone", title: "phone" }
    ];

     

    butin the HTML in the browser  - the ID column is appear in the end of the columns.. 

    (its prblm for me because when i print the grid - its make some issuse..).

     

  3. Aleksandar
    Admin
    Aleksandar avatar
    282 posts

    Posted 02 Feb Link to this post

    Hi,

    I tested the behavior you report, but it seems I am missing something in the scenario you have, as I failed to achieve a similar result. Using the Remote Data binding Demo for the Grid I set the OrderID column hidden configuration, but the table header and rows are in the first position.

    columns: [{
                  field:"OrderID",
                  filterable: false,
                  hidden:true
                },{
                  field: "Freight",
                  title: "Freight"
                },{
                  field: "OrderDate",
                  title: "Order Date",
                  format: "{0:MM/dd/yyyy}"
                }, {
                  field: "ShipName",
                  title: "Ship Name"
                }, {
                  field: "ShipCity",
                  title: "Ship City"
                }]

    Here is part of the generated HTML, as an example of what I observe:

    <thead role="rowgroup">
       <tr role="row">
          <th scope="col" role="columnheader" data-field="OrderID" aria-haspopup="true" rowspan="1" data-index="0" id="gbb6b8bc-86c4-4925-bede-131750358bbf" style="display:none" class="k-header" data-role="columnsorter"><a class="k-link" href="#">OrderID</a></th>
          <th scope="col" role="columnheader" data-field="Freight" aria-haspopup="true" rowspan="1" data-title="Freight" data-index="1" id="z6ae51d5-3b12-4b8b-85e5-3322c6d5e4b2" class="k-header k-with-icon k-filterable" data-role="columnsorter"><a class="k-grid-filter" href="#" title="Filter" aria-label="Filter" tabindex="-1"><span class="k-icon k-i-filter"></span></a><a class="k-link" href="#">Freight</a></th>
          <th scope="col" role="columnheader" data-field="OrderDate" aria-haspopup="true" rowspan="1" data-title="Order Date" data-index="2" id="n2fe81b6-9897-40b3-b63c-5be97c042465" class="k-header k-with-icon k-filterable" data-role="columnsorter"><a class="k-grid-filter" href="#" title="Filter" aria-label="Filter" tabindex="-1"><span class="k-icon k-i-filter"></span></a><a class="k-link" href="#">Order Date</a></th>
          <th scope="col" role="columnheader" data-field="ShipName" aria-haspopup="true" rowspan="1" data-title="Ship Name" data-index="3" id="yd9d8484-6cb2-461a-bfa3-55920515ae95" class="k-header k-with-icon k-filterable" data-role="columnsorter"><a class="k-grid-filter" href="#" title="Filter" aria-label="Filter" tabindex="-1"><span class="k-icon k-i-filter"></span></a><a class="k-link" href="#">Ship Name</a></th>
          <th scope="col" role="columnheader" data-field="ShipCity" aria-haspopup="true" rowspan="1" data-title="Ship City" data-index="4" id="j127a457-2998-48a5-826c-5d21abb79cf0" class="k-header k-with-icon k-filterable" data-role="columnsorter"><a class="k-grid-filter" href="#" title="Filter" aria-label="Filter" tabindex="-1"><span class="k-icon k-i-filter"></span></a><a class="k-link" href="#">Ship City</a></th>
       </tr>
    </thead>

    Can you please update this dojo, so the behavior experienced is reproducible and send it back to me for further review? If easier, you can provide a sample of your own where I can observe the behavior. This way I can provide a better suggestion on how to handle the scenario.

    Regards,
    Aleksandar
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top