Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
25
igHierarchicalGrid row not expanding in place after scroll
posted

Hi

After scrolling to a row with child data, clicking on the expand causes the grid to scroll back to the top.

If you expand one of the first rows in view, it works correctly and expands in place, but after scrolling through the grid and expanding a row it expands but does not remain in view.

Here is a JSFiddle of the behaviour based on one of the examples provided: http://jsfiddle.net/1g8225zv/5/

The data is something like this:

var testData = {
"results" : [
{
"isChecked":false,
"txnId":84021214,
"brand":"2821",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"2821",
"mortgageAccountNumber":"asdfadfs",
"poolCodeAccountNumber":"adfasdf",
"poolCodeSortcode":"asdfa",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":700,
"tlaCode":"REM",
"statementNarrative":"43DORCHESTER",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes": { "results": [
{
"noteid":11,
"txnId":84021214,
"text":"ASAFSDFASDFASDF",
"user":"aUser",
"timestamp":"2016-11-28T12:22:38.177"
},
{
"noteid":15,
"txnId":84021214,
"text":"asfadf asdf asdf",
"user":"aUser",
"timestamp":"2016-11-28T13:15:29.043"
},
{
"noteid":16,
"txnId":84021214,
"text":"a dsfas dfasd fasdf asdf",
"user":"aUser",
"timestamp":"2016-11-28T13:16:05.577"
},
{
"noteid":17,
"txnId":84021214,
"text":"afsd fasdf asdfasdf",
"user":"aUser",
"timestamp":"2016-11-28T13:19:15.863"
},
{
"noteid":18,
"txnId":84021214,
"text":" asdf asdf asdf",
"user":"aUser",
"timestamp":"2016-11-28T13:22:22.96"
},
{
"noteid":19,
"txnId":84021214,
"text":"asdfa sdfasdf",
"user":"aUser",
"timestamp":"2016-11-28T13:27:34.357"
},
{
"noteid":20,
"txnId":84021214,
"text":"sgjkkjgkjlgkjkgjkjlgjklfgjkkjflkjlfkjlfkjlkjl",
"user":"aUser",
"timestamp":"2016-11-28T13:27:50.127"
},
{
"noteid":21,
"txnId":84021214,
"text":"testing",
"user":"aUser",
"timestamp":"2016-11-28T13:28:12.24"
},
{
"noteid":22,
"txnId":84021214,
"text":"asdfasdf asdfasdf asdf greg",
"user":"aUser",
"timestamp":"2016-11-28T13:28:33.98"
},
{
"noteid":24,
"txnId":84021214,
"text":"dsfasd fasdf asdf",
"user":"aUser",
"timestamp":"2016-11-28T13:56:57.557"
},
{
"noteid":25,
"txnId":84021214,
"text":"another test",
"user":"aUser",
"timestamp":"2016-11-28T13:58:12.647"
},
{
"noteid":26,
"txnId":84021214,
"text":"asdf asdfasdf",
"user":"aUser",
"timestamp":"2016-11-28T13:59:09.273"
},
{
"noteid":27,
"txnId":84021214,
"text":"asdfa sdfasdfas this is a test",
"user":"aUser",
"timestamp":"2016-11-28T14:00:23.32"
},
{
"noteid":28,
"txnId":84021214,
"text":"asdfasdf",
"user":"aUser",
"timestamp":"2016-11-28T14:01:45.45"
},
{
"noteid":29,
"txnId":84021214,
"text":" asdf asdf asdf",
"user":"aUser",
"timestamp":"2016-11-28T14:02:40.2"
},
{
"noteid":44,
"txnId":84021214,
"text":"sdfasdf asdf",
"user":"aUser",
"timestamp":"2016-11-28T18:19:45.063"
}
]}
},
{
"isChecked":false,
"txnId":84021275,
"brand":"2521",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"2521",
"mortgageAccountNumber":"asdf",
"poolCodeAccountNumber":"asdf",
"poolCodeSortcode":"asdf",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":325,
"tlaCode":"REM",
"statementNarrative":"01LUTON STOPSLEY ",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": [
{
"noteid":30,
"txnId":84021275,
"text":"asdf",
"user":"aUser",
"timestamp":"2016-11-28T14:04:39.757"
},
{
"noteid":31,
"txnId":84021275,
"text":"tttttt",
"user":"aUser",
"timestamp":"2016-11-28T14:06:01.86"
},
{
"noteid":32,
"txnId":84021275,
"text":"asdfadf",
"user":"aUser",
"timestamp":"2016-11-28T14:06:55.523"
}
]}
},
{
"isChecked":false,
"txnId":84021072,
"brand":"2671",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"2671",
"mortgageAccountNumber":"gadfg",
"poolCodeAccountNumber":"sdfg",
"poolCodeSortcode":"sdfg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":450,
"tlaCode":"REM",
"statementNarrative":"01HORNCHURCH",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes": { "results": [
{
"noteid":35,
"txnId":84021072,
"text":"dfgsdfgsdfg",
"user":"aUser",
"timestamp":"2016-11-28T14:10:15.23"
},
{
"noteid":36,
"txnId":84021072,
"text":"adsfgsadfgsdfg",
"user":"aUser",
"timestamp":"2016-11-28T14:11:27.38"
},
{
"noteid":37,
"txnId":84021072,
"text":"dfgsdfg",
"user":"aUser",
"timestamp":"2016-11-28T14:11:54.84"
},
{
"noteid":38,
"txnId":84021072,
"text":"this is a note",
"user":"aUser",
"timestamp":"2016-11-28T14:12:05.473"
},
{
"noteid":39,
"txnId":84021072,
"text":"another note",
"user":"aUser",
"timestamp":"2016-11-28T14:12:33.013"
}
]}
},
{
"isChecked":false,
"txnId":84020309,
"brand":"2671",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"2671",
"mortgageAccountNumber":"dfgsfdg",
"poolCodeAccountNumber":"sdfgsdfg",
"poolCodeSortcode":"sdfg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":350,
"tlaCode":"REM",
"statementNarrative":"42PORTH",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": [

]}
},
{
"isChecked":false,
"txnId":84020192,
"brand":"2711",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"2711",
"mortgageAccountNumber":"sdfgsdfg",
"poolCodeAccountNumber":"sdfg",
"poolCodeSortcode":"sdfgsdfg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":350,
"tlaCode":"REM",
"statementNarrative":"43CASTLE BROMWICH",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": [
{
"noteid":33,
"txnId":84020192,
"text":"asdfasd fasdfasdf",
"user":"aUser",
"timestamp":"2016-11-28T14:07:16.83"
},
{
"noteid":34,
"txnId":84020192,
"text":"asdfasdfa",
"user":"aUser",
"timestamp":"2016-11-28T14:07:31.163"
},
{
"noteid":40,
"txnId":84020192,
"text":"a note",
"user":"aUser",
"timestamp":"2016-11-28T14:13:16.61"
},
{
"noteid":41,
"txnId":84020192,
"text":"another not",
"user":"aUser",
"timestamp":"2016-11-28T14:13:49.377"
}
]}
},
{
"isChecked":false,
"txnId":84020197,
"brand":"2711",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"2711",
"mortgageAccountNumber":"sdfgsdfg",
"poolCodeAccountNumber":"sdfgsdfg",
"poolCodeSortcode":"sdfgsdfg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":8000,
"tlaCode":"REM",
"statementNarrative":"45PETERBOROUGH",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": []}
},
{
"isChecked":false,
"txnId":84020963,
"brand":"2761",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"2761",
"mortgageAccountNumber":"sdfgsfdgsf",
"poolCodeAccountNumber":"sdfgsdfg",
"poolCodeSortcode":"sdfgsdfg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":335,
"tlaCode":"REM",
"statementNarrative":"42NORTH WEST CUMBR",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": []}
},
{
"isChecked":false,
"txnId":84021335,
"brand":"17",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"17",
"mortgageAccountNumber":"sdfgsdfg",
"poolCodeAccountNumber":"sdfgsfdg",
"poolCodeSortcode":"sdfgsdfg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":600,
"tlaCode":"REM",
"statementNarrative":"sdfgsfdgsdfgsfdg",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": []}
},
{
"isChecked":false,
"txnId":84021408,
"brand":"051",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"051",
"mortgageAccountNumber":"sdfgsdfg",
"poolCodeAccountNumber":"sfdgsdfg",
"poolCodeSortcode":"sdfgsfdg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":100,
"tlaCode":"REM",
"statementNarrative":"43WHITEHAVEN ",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": []}
},
{
"isChecked":false,
"txnId":84020100,
"brand":"062",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"062",
"mortgageAccountNumber":"sfdgsfdg",
"poolCodeAccountNumber":"sfdgsfdg",
"poolCodeSortcode":"sdfgsfdg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":320,
"tlaCode":"REM",
"statementNarrative":"42SWINTON",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": [
{
"noteid":4,
"txnId":84020100,
"text":"asdfasdfasdf",
"user":"aUser",
"timestamp":"2016-11-28T12:02:10.117"
},
{
"noteid":42,
"txnId":84020100,
"text":"asdfas dfasd fasd fasdf",
"user":"aUser",
"timestamp":"2016-11-28T17:17:33.43"
}
]}
},
{
"isChecked":false,
"txnId":84020954,
"brand":"062",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"062",
"mortgageAccountNumber":"sfdgsfdg",
"poolCodeAccountNumber":"sfgsfgs",
"poolCodeSortcode":"sfdgsfdg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":365,
"tlaCode":"REM",
"statementNarrative":"03SLOUGH TRADING",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": []}
},
{
"isChecked":false,
"txnId":84020500,
"brand":"071",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"071",
"mortgageAccountNumber":"sdfgsfdg",
"poolCodeAccountNumber":"sfdgsfdg",
"poolCodeSortcode":"sfdgsfdg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":600,
"tlaCode":"REM",
"statementNarrative":"41NEWPORT ISLE OF",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": []}
},
{
"isChecked":false,
"txnId":84020629,
"brand":"076",
"categoryId":3,
"categoryAlias":"Redemption ",
"poolCode":"076",
"mortgageAccountNumber":"sfdgsfdg",
"poolCodeAccountNumber":"sfdgsfdg",
"poolCodeSortcode":"sfdgsfdg",
"currency":"GBP",
"transactionDate":"Nov 17 2016 12:00AM",
"amount":150,
"tlaCode":"REM",
"statementNarrative":"43BILLINGHAM QUEEN",
"legacyPoolCode":null,
"summitProcessStatusID":null,
"notes":{ "results": []}
}
]};

The initialisation looks like this:

$("#grid").igHierarchicalGrid({
width: "100%",
height: "500px",
autoGenerateColumns: false,
dataSource: testData,
virtualization: true,
virtualizationMode: 'continuous',

primaryKey: "txnId",
responseDataKey: "results",
dataSourceType: "json",
autofitLastColumn: false,
columns: [
{ headerText: 'ID', key: 'txnId', dataType: 'number', width: '100px'/*, hidden: true*/ },
{ headerText: "x", key: "search", dataType: "string", unbound: true, width: '30px', template: "<input type='button' onclick='NotesModule.showAddNoteDialog(\"${txnId}\");' value='?' class='lookup-button'/>" },
{ headerText: 'Brand', key: 'brand', dataType: 'string', width: '90px' },
{ headerText: 'Mortgage Acc No', key: 'mortgageAccountNumber', dataType: 'string', width: '90px' },
{ headerText: 'Description', key: 'statementNarrative', dataType: 'string', width: '400px' },
{ headerText: 'Amount', key: 'amount', dataType: 'number', format: "currency", width: '100px', columnCssClass: "numericAlignment" },
{ headerText: 'Curr', key: 'currency', dataType: 'string', width: '90px' },
{ headerText: 'Transaction Date', key: 'transactionDate', dataType: 'date', width: '150px' },
{ headerText: 'Pool Code', key: 'poolCode', dataType: 'string', width: '90px' },
{ headerText: 'Pool Acc No', key: 'poolCodeAccountNumber', dataType: 'string', width: '90px' },
{ headerText: 'Pool Sort Code', key: 'poolCodeSortcode', dataType: 'string', width: '90px' },
{ headerText: 'TLA', key: 'tlaCode', dataType: 'string', width: '90px' }
],
features: [
{
name: "Selection",
mode: "row",
multipleSelection: true
},
{
name: "Sorting",
type: "local"
}
],
childrenDataProperty: "notes",
autoGenerateLayouts: false,
columnLayouts: [
{
key: "notes",
autoCommit: true,
autoGenerateColumns: false,
autofitLastColumn: false,
responseDataKey: "results",
primaryKey: "noteid",
//foreignKey: 'txnId',
width: "100%",
columns: [
{ key: "noteid", headerText: "ID", dataType: "number", width: "100px" },
{ key: "timestamp", headerText: "When", dataType: "string", width: "20%" },
{ key: "user", headerText: "By", dataType: "string", width: "20%" },
{ key: "text", headerText: "Message", dataType: "string" },
]}]});

What I am doing wrong?

Greg