This is a migrated thread and some comments may be shown as answers.

[Solved] Hidden column messes up my grid layout

14 Answers 140 Views

Grid

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

Gerard Eikelboom asked on 24 Mar 2011, 05:11 PM

column-issue.zip

In our grid with detailview when I click on the detailview expand button it messes up the next rows beneath them.
This happens in FF, Chrome, Safari. Not in IE (see picture FF example)
This comes because the mastergrid has a hidden column.
Why do we use the hidden column.

I have a event

events.OnDetailViewExpand("onDetailViewExpand"))

function DetailViewExpand(e) {

var masterRow = e.masterRow;

var User_ID = masterRow.cells[3].innerHTML;

It's an ID column and need it for the rest of the Grid.
Per row the ID is different.

Is there a way I can do without the hidden column?
Regards,
Gerard

14 Answers, 1 is accepted

answered on 25 Mar 2011, 09:25 AM

GridApplication.zip

Atanas,
Hereby a test project.
Still my dataItem is undefined.
I can't use the data array of the grid because I need to know only the data of the row expanded.

Maybe you see what goes wrong.

In the FleuraProdcuctUserControl.ascx is a method

function onDetailViewExpand(e) {

var grid = $('#VoorraadGrid').data('tGrid');

var tr = $('#VoorraadGrid tbody tr:first');

var dataItem = grid.dataItem(tr);

}

Regards,
Gerard Eikelboom

answered on 25 Mar 2011, 02:37 PM

Atanas,

example: my Model: ID = 1
                                FirstName = Atanas
                                LastName = Korchev

Grid:                    column: FirstName
                            column: LastName

ClientEvents        column: CarType
                            column: Engine

So when i run the application I see in my Grid Column1: Atanas Column2: Korchev

.ClientEvents(events => events.OnDetailViewExpand(

"onDetailViewExpand"))

function onDetailViewExpand(e){
var test = e.masterRow
test1 = masterRow.cells[0].innerHTML = Atanas
test2 = masterRow.cells[1].innerHTML = Korchev
}

The ID is not in masterRow because it's not in a grid column, this while I fill it in my model
I can read the ID by doing:

var

grid = $('#mygrid').data('tGrid');

var gridData = grid.data;
var ID = gridData[0].ID = 1
var name = gridData[0].FirstName = Atanas

So when I have multiple items in my Grid I have to itterate throught it and compare

for (var i = 0; i < (gridData.length); i++) {
    var name = gridData[i].FirstName
    if( name = = test1 ){
    var myID = gridData[0].ID
    break;
    }
}
This is how I do it now
Now I have my ID and can go further.

Regards,
Gerard

answered on 25 Mar 2011, 02:54 PM

Hi Gerard Eikelboom,

I tried the following in your application and it worked:

function onDetailViewExpand(e) {
   var grid = $('#VoorraadGrid').data('tGrid');
   var tr = $('#VoorraadGrid .t-grid-content tbody tr:first');

   var dataItem = grid.dataItem(e.masterRow);
   alert(dataItem);
   }

This is what I meant by using the masterRow. As you can see you can retrieve the dataItem to which the row is bound and use all properties.

All the best,
Atanas Korchev
the Telerik team

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!