Question DetailView Use Header Names Not DataFieldId

[cgountanis]

I have to use int id to uniquely identify the columns due to spaces and special char in field names.

data-id-field="id"

Is there a way to use the header names or specify the name when in detail view for the key? Maybe there is another var that is being passed? I tried data-title within the column thinking maybe detail view could pick that up, running out of ideas.

function detailFormatter(index, row) {
	console.log('detailFormatter()');
	var html = [];
	$.each(row, function (key, value) {
		html.push(`<div class="small text-muted"><span class="text-capitalize font-weight-bold">${key}:</span> ${value}</div>`);
	});
	return html.join('');
}

[cgountanis]

Just looking for a tip or some advice here before I have to disable the detail view.

[cgountanis]

Just saying it would be nice if it used the data-title or the TH name to match. Not many people want to see the raw field name or identifier.

[cgountanis]

If there is a variable easy to use for human readable header vs fieldname (key) labels let me know. I think we are just moving to a AJAX call in the formatter function itself and getting the data that way. More load time but should work and be easier to customize the output down the road.

[ckarmy]

@cgountanis Can you solve this? I need the same!

[cgountanis]

@cgountanis Can you solve this? I need the same!

I did not solve from any given solution. I did however lower case the JSON property names and simply used BootStrap class "text-capitalize" within a SPAN on the property name to make it look good enough for a dynamic display. Was good enough for us.

[cgountanis]

Hope this helps a little.

$table.on('expand-row.bs.table', function (e, index, row, $detail) {
	$detail.html(loadingMessage);
	var documentId = row[1];
	var url = '/api/data/' + documentId;
	$.get(url, function (data) {
		if (data !== null) {
			var html = [];
			html.push('<div class="row p-0 m-0">');
			$.each(data, function (k, v) {
				html.push('<div class="col-xl-3 small text-muted"><span class="text-capitalize font-weight-bold">' + k + ':</span> ' + v + '</div>');
			});
			html.push('</div>');
			$detail.html(html.join(''));
		}
	});
});

[ckarmy]

Great! Thanks a lot!!! @cgountanis Thats was looking for! 👍