Hello i have beenn trying to develop something wich behaves like a igHierarchicalGrid in that it can be colapsed but show's extra data about the object and not a collection of related object's has it seems to be the general use of igHierarchicalGrid.

Above i have an image that show's what i'm trying to achieve, i'm not sure igHierarchicalGrid is the tool for the job, i will also include some data to show what kid of aproach i was taking.

<div id="hierarchicalGrid"></div>

<!-- Template da Coluna Favoritos -->
<script id="colServico" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${Servico}</div>
</div>
</script>

<script id="colMarcadoPara" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${MarcadoPara}</div>
</div>
</script>

<script id="colSenha" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${Senha}</div>
</div>
</script>

<!-- Template da Coluna Doentes -->
<script id="colNumero" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${Numero}</div>
</div>
</script>

<!-- Template da Coluna Especialidade/Ato/Medico -->
<script id="colDoente" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${Doente}</div>
</div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colAto" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${Ato}</div>
</div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colEstado" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${Estado}</div>
</div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="col1Vez" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${1Vez}</div>
</div>
</script>

<!-- Template da Coluna Marcacao -->
<script id="colData" type="text/x-jquery-tmpl">
<div class="text-center">
<div class="g-text g-text-12">${Data}</div>
</div>
</script>

var jsonData = {
"d": [{
"Numero": "HS-444702",
"Doente": "José António Carvalho Melo",
"Ato": "Consulta Pré-Operatório (17010)",
"Estado": "MARCADO",
"1Vez": "S",
"Data": "2016-07-01",
"Servico": "40031",
"MarcadoPara": "Adilia Rebelo",
"Senha": "",
"Servico": "Cardiologia",
"Responsavel": "935601 Serviço Nacional de Saúde",
"Observações": "*Marcação Automática na sequência de marcação médica*",
"Quantidade": "1",
"ServicoInternamento": "Cro - Piso 2 - Int."
}, {
"Numero": "HS-444702",
"Doente": "José António Carvalho Melo",
"Ato": "Consulta Pré-Operatório (17010)",
"Estado": "MARCADO",
"1Vez": "S",
"Data": "2016-07-01",
"Servico": "40031",
"MarcadoPara": "Adilia Rebelo",
"Senha": "",
"Servico": "Cardiologia",
"Responsavel": "935601 Serviço Nacional de Saúde",
"Observações": "*Marcação Automática na sequência de marcação médica*",
"Quantidade": "1",
"ServicoInternamento": "Cro - Piso 2 - Int."
}, {
"Numero": "HS-444702",
"Doente": "José António Carvalho Melo",
"Ato": "Consulta Pré-Operatório (17010)",
"Estado": "MARCADO",
"1Vez": "S",
"Data": "2016-07-01",
"Servico": "40031",
"MarcadoPara": "Adilia Rebelo",
"Senha": "",
"Servico": "Cardiologia",
"Responsavel": "935601 Serviço Nacional de Saúde",
"Observações": "*Marcação Automática na sequência de marcação médica*",
"Quantidade": "1",
"ServicoInternamento": "Cro - Piso 2 - Int."
}]
};

$("#hierarchicalGrid").igHierarchicalGrid({
dataSource: jsonData,
dataSourceType: "json",
responseDataKey: "d",
width: "100%",
height: "100%",
localSchemaTransform: false,
autoGenerateColumns: false,
autoGenerateLayouts: false,
primaryKey: "Numero",
odata: true,
features: [{
name: "RowSelectors",
inherit: true,
enableCheckBoxes: true,
enableRowNumbering: false
}, {
name: "Selection",
mode: "row",
multipleSelection: true
}],
rowExpanding: function (evt, args) {
evt.preventDefault();
},
rowCollapsing: function (evt, args) {
evt.preventDefault();
},
columns: [{
headerText: 'Numero',
key: "Numero",
width: "6%",
dataType: "string",
template: $("#colNumero").html()
}, {
headerText: "Doente",
key: "Doente",
width: "34%",
dataType: "string",
template: $("#colDoente").html()
}, {
headerText: 'Ato',
key: "Ato",
width: "24%",
dataType: "string",
template: $("#colAto").html()
}, {
headerText: 'Estado',
key: "Estado",
width: "6%",
dataType: "string",
template: $("#colEstado").html()
}, {
headerText: '1Vez',
key: "1Vez",
width: "3%",
dataType: "string",
template: $("#col1Vez").html()
}, {
headerText: 'Data',
key: "Data",
width: "6%",
dataType: "string",
template: $("#colData").html()
}, {
headerText: 'Servico',
key: "Servico",
width: "6%",
dataType: "string",
template: $("#colServico").html()
}, {
headerText: 'MarcadoPara',
key: "MarcadoPara",
width: "13%",
dataType: "string",
template: $("#colMarcadoPara").html()
}, {
headerText: 'Senha',
key: "Senha",
width: "6%",
dataType: "string",
template: $("#colSenha").html()
}],
columnLayouts: [{
key: "Numero",
width: "100%",
height: "100%",
showHeader: false,
childrenDataProperty: "Numero",
localSchemaTransform: false,
autoGenerateColumns: false,
primaryKey: "Numero",
columns: [
{
headerText: '',
key: "Doente",
width: "50%",
dataType: "string",
template: $("#colDoente").html()
},
{
headerText: '',
key: "Servico",
width: "50%",
dataType: "string",
template: $("#colServico").html()
}]
}]
});

My question is:

Is igHierarchicalGrid the right tool for the job, and if not what do you recomend I use?