I'm working with JQGrid to manage some datas from database. I have a column which serve to edit or add new data. When i click on these buttons i want to have a popup with a form with all the field necessary.
I think with a picture it will be more clear :
So here the code of my grid :
if (gridCtrp.length) {
gridCtrp.jqGrid({
url: "{{ url('/') }}/contreparties/projet/{{ $ID_PROJET }}",
mtype: "GET",
datatype: 'json',
colNames: ["ID","Famille","Libellé","Détail","Précision","Valorisation","Tranche Mini","Tranche Maxi"],
colModel: [
{name: "ID_CONTREPARTIE", sortable: false, align:"center", hidden: true},
{name: "LIBCOD", align: "center",width: 100},
{name: "LIBEL_CTRPRT",align: "center", sortable: false, width: 100},
{name: "DETAIL_CTRPRT",align:"center", width: 100},
{name: "PRECISION_TRCH",align:"center",width: 150},
{name: "CORRES_MONETAIRE",align:"center", width: 150},
{name: "NUM_MINI", align:"center", width: 100},
{name: "NUM_MAXI", align: "center", width: 150}
],
loadtext: "Chargement...",
viewrecords: true,
emptyrecords: "Aucune contrepartie",
width: 850,
height: 300,
scrollerbar: true,
rowNum: 100,
sortable: true,
loadonce: true,
hidegrid: false,
multipleSearch: true,
shrinkToFit: false,
gridview: true,
autoencode: false,
gridComplete: function() {
var ids = gridCtrp.jqGrid('getDataIDs');
var tabData = gridCtrp.jqGrid('getRowData');
for (var i = 0; i < ids.length; i++) {
var id = ids[i];
var updateButton = "<a id='editButtonCtrp' rel='popover' data-toggle='popover' title='Popover Header'><i class='fa fa-pencil' aria-hidden='true'></i></a>";
var deleteButton = "<a href='' title='Supprimer'><i class='fa fa-trash' aria-hidden='true'></i></a>";
gridCtrp.jqGrid('setRowData',ids[i],{NUM_MAXI: tabData[i].NUM_MAXI + ' ' + updateButton + ' ' + deleteButton });
}
}
})
}
});
I have tried with Bootstrap 4 popover and JQuery-UI Dialog and nothing is working for me.... Also when i have noted that when i run console.log($('a[rel=popover]')) to recover all edit/add button where i want to implement popup, it return nothing...
Is there someone who have already implements something like that ? Thanks in advance.
In your code in gridComplete is missing the binding action to buttons - you should bind a action to it. Where is is this code and how you try to run it.
The code below is a very old but is working:
gridComplete: function() {
var ids = jQuery("#rowed2").jqGrid('getDataIDs');
for(var i=0;i < ids.length;i++){
var cl = ids[i];
be = "<input style='height:22px;width:20px;' type='button' value='E' onclick=\"jQuery('#rowed2').editRow('"+cl+"');\" />";
se = "<input style='height:22px;width:20px;' type='button' value='S' onclick=\"jQuery('#rowed2').saveRow('"+cl+"');\" />";
ce = "<input style='height:22px;width:20px;' type='button' value='C' onclick=\"jQuery('#rowed2').restoreRow('"+cl+"');\" />";
jQuery("#rowed2").jqGrid('setRowData',ids[i],{act:be+se+ce});
}
}
Moreover this is very old approach and to optimize your code I highly recommend you to use a custom formatter - this will speed you code 10 times.
For this purpose you will need to read some docs here: