is it possible to add a new column when its rendering?
is it possible to add a new column when its rendering?
i have this:
for (i = 0; i < columnsDef.length; i++) {
columnEdit = clone(columnsDef[i]);
if (columnEdit.mData === "chk") {
let btnDisparador;
$('[id^="accion_"]').each(function () {
let title = $(this).attr("title");
if (title && title.toLowerCase().includes("editar")) {
btnDisparador = this;
}
});
if (response.EdicionAutomatica) {
if (response.EdicionAccionIndividual) {
columnEdit.mRender = function (data, type, full, meta) {
let sData = data;
sData = '<div style="display: flex;"> <input type="checkbox" name="id[]">'
+ '<button id="btnConfirmarEdicionIndiv_' + meta.row + '"title = "Confirmar edición de la fila"'
+ 'type = "button" class="btn btn-accion btn-block btn-flat btnConfirmarEdicionIndiv_"'
+ 'style = "height:23px;width:23px;font-size:small; font-weight:bold; background-color:white; display:inline;min-height:23px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;" disabled > '
+ '<img src="Imagenes/Globales/success.png" alt="" height="15px" width="15px"></button>'
+ '<button id="btnCancelarEdicionIndiv_' + meta.row + '"title = "Cancelar edición de la fila" onclick="cancelarEdicionIndividual(this,' + idVista + ')"'
+ 'type = "button" class="btn btn-accion btn-block btn-flat btnCancelarEdicionIndiv_"'
+ 'style = "height:23px;width:23px;font-size:small; font-weight:bold; background-color:white; display:inline;min-height:23px; margin-top: 5px; margin-right: 5px; margin-bottom: 5px; margin-left: 5px;" disabled > '
+ '<img src="Imagenes/Globales/cancelar.png" alt="" height="15px" width="15px"></button>'
+ '</div>'
$('[id^="btnConfirmarEdicionIndiv_"]').each(function () {
$(this).prop('onclick', null).off('click');
$(this).click({ btnAccion: btnDisparador.id, contexto: contexto }
, function (event) {
confirmarEdicion(document.getElementById(event.data.btnAccion), event.data.contexto, false, btnDisparador, true, $(this));
$('#panel_datos_' + idVista).data('editando', false);
});
});
return sData;
}
}
}
basically i'm just adding a couple of buttons in the column where the check is. The thing is, i dont like it. I'm trying to add a new column to put the buttons in, but i'm not sure how. These buttons are only used in very rare ocassions, so i wouldnt want them to be there always, that's why i'm trying to add them dynamically. Is it possible?
This question has an accepted answers - jump to answer
Answers
You are setting up the
columnDefs
variable to pass tocolumnDefs
on initialisation? That looks fine to me. I'd userender
anddata
rather than the legacymRender
andmData
, but otherwise, I think that is okay.Allan
i get columnDefs from a controller (i'm using MVC) and then i edit it and do this:
if (editarEnGrilla === true) columnsDef = columnsDefEdit;
a lot of this code isn't mine (i'm guessing someone at my work who doesn't work here anymore did it) and i need to modify it. In columnsDefEdit there are all of the edits made in mRender (i'm actually just guessing cause i dont really know how Data Table works, but i'm pretty sure the changes are all in mRender as shown in my question). The thing is, this is the result:
the buttons in the table are one of the edits made. I want to make a new column for them, cause right now they are "sharing" the column with the checkbox. I dont really know how to do this
I'd add it to the columnDefs array - e.g.
Note in particular the use of
target: columnsDef.length
- that will resolve to the length of the array before the new column is added, thus adding an extra column.Allan
thank you so much! it worked