Note that there are some explanatory texts on larger screens.

plurals
  1. POSelected row on top in Telerik MVC Grid
    primarykey
    data
    text
    <p>I have a Telerik MVC Grid and I want the selected to be forced on top of the list. I´m using DetailedView for the grid so it is collapse- and expandable. How would I force the selected row to the top of the list?</p> <p><strong>My Jquery:</strong></p> <pre><code>function unit_onDetailViewExpand(e) { // Select the Grid var grid = $(this).data('tGrid'); //Close all other rows grid.$rows().not(e.masterRow).each(function (index, row) { grid.collapseRow(row); }); /* TODO: move row to the top, this hasn´t worked for me so far grid.reorderColumn(0, grid.columnFromTitle("Name")); $.telerik.trigger(grid.element, 'repaint'); */ } </code></pre> <p>Thanx guys :)</p> <p><strong>#### EDITED ####</strong></p> <p>This is what I do now when selecting the row:</p> <pre><code>function onRowSelect(e) { $(e.row).prependTo($(e.row).parent()); var grid = $('#RentableUnits').data("tGrid"); // get the first master table row var tr = $("#RentableUnits tbody &gt; .t-master-row:eq(0)"); // use .t-master-row to select only the master rows // expand the row grid.expandRow(tr); } </code></pre> <p>Now I´m faced with the problem that the content of the DetailedView has not moved. Let´s say I select a row, the row moves to the top, expands the row, but the content of the previous row is still expanding.</p> <p>I´ve been looking at the <a href="http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html#OnDetailViewExpand" rel="nofollow noreferrer"><strong>documentation</strong></a> and found out that this has something to do with detailRow, but I can´t figure out how to move that along with my masterRow.</p> <p>Does anyone have any idea on how to move the content of the detailedview along with the row?</p> <p><strong>#### EDITED (AGAIN) ####</strong></p> <p>I´ve gotten so far, the table row is moved to the top of the list but every time that particular row is expanded I keep getting the content of the original top row (the content from the one which is in second place). From what I see in Firebug is that there are no .t-detail-row within the table until one of the .t-master-row is expanded. Should I move something else along with the selected row, I mean other that the masterRow and sometimes the detailRow?</p> <p>(I´ve also uploaded images along with the question showing HTML from Firebug)</p> <pre><code>function onRowSelect(e) { var grid = $('#RentableUnits').data("tGrid"); var selectedRow = $('#RentableUnits tbody&gt;.t-state-selected'); selectedRow.prependTo(selectedRow.parent()); if (selectedRow.next().is('.t-detail-row')) { selectedRow.next().prependTo(selectedRow.parent()); } selectedRow.prependTo(selectedRow.parent()); // get the first master table row var tr = $("#RentableUnits tbody &gt; .t-master-row:eq(0)"); // use .t-master-row to select only the master rows // expand the row grid.expandRow(tr); } </code></pre> <p>You´ve been a great help to me, maybe I can bug one more time? :)</p> # <p><img src="https://i.stack.imgur.com/VdrP6.png" alt="Page Load, the rows are correct"></p> # <p><img src="https://i.stack.imgur.com/MCw7L.png" alt="Row selected and the wrong detail-content is loaded (the same as the first row was)"></p> #
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload