12 jsGrid Particularities

 1. Controller - loadData

To use controller loadData ensure that 

autoload: true,

autoload: true, 

controller: {
  loadData: function(filter) {return arrData},
  insertItem: $.noop,
  updateItem: $.noop
}

2. Creating custom options for every row

1. Create the headerTemplate with buttons "clean" and "execute".

2. Add a "select" with the options

3, Create the itemTemplate

4. Add a textbox (for every row)

fields: [
  {
     headerTemplate: function() {
        return $("<div>").append(
                            	
			$("<button/>")
				.attr("type", "button") //.text("Clean")
                .attr("data-bs-toggle","tooltip")
                .attr("data-bs-placement","top")
                .attr("title",cleanText)
                .addClass("text-danger")
                .append("<i class='fas fa-trash-can' aria-hidden='true'></i>")
                .on("click", function () {
                   	cleanSelection();
                }),
                                    
            $("<button>")
				.attr("type", "button")
                .attr("data-bs-toggle","tooltip")
                .attr("data-bs-placement","top")
                .attr("title",executeText)
                .addClass("text-primary")
                .width("5em")
                . append("<i class='fas fa-circle-play' aria-hidden='true'></i>")
                                
                .on("click", function () {
                   	executeSelectedItems();
                }),
                                    
            $("<select/>")
               	.append(arrAction.map(function(opt) {
                   	return $("<option />", {value: opt["idChar"] , text: opt["description"] })
                 }))	
                                
                .on("change", function(){
			defaultAction=$(this).val();
		})
            );
     },
     
     itemTemplate: function(_, item) {
		return $("<div>").append(
			$("<input>").attr("type", "text")
				.width("1.5em")
                .attr("maxlength","1")
                .attr("name", "myAct")	
                .attr("id", "myAct_"+item["id"])
                .on("blur", function(){
					if ($(this).val().trim().length>0) 
						selectItem(item,$(this).val())
					else unselectItem(item);	
				})
				.on("click", function( event ) {
    				if ( event.altKey ) {
						$(this).val(defaultAction);
        			} else {
        				//normal click
    				}
				})
            );
            },
     align: "center",
     width: 50
  }
].concat(arrFields)

5. Notice that every time the select changes or the option or the grid is sorted (when acting on the header of the grid) , the "onRefreshed" callback is called and the information from the texboxes of every row is cleaned!!!! So use must reassign the values.

//Responsible of erasing option fields!!!!!!!
onRefreshed: function() {
    if (!(selectedItems === undefined || selectedItems.length == 0)) {
	selectedItems.forEach(function(elem) {
    	    $("#myAct_"+elem["id"]).val(elem["myAct"]); //reassign values !!
	});
    };	
    //alert("refreshed 2");
},