Hi, I'd like to know based on a stored value (read from a json source) how can I set the initial value of a dropdownlist in a "select" type editor
I mean, you have a stored value and as soon as I click the cell to make the dropdown appear I'd like it to be selected with the element with the value that it's stored instead of the first element of the dropdown. The "key" column is "IdTipoAccion" and the "value" column is "GlsTipoAccion". If I select something on the dropdown editor it should change the "IdTipoAccion" value in that row. When I just click the "GlsTipoAccion" column in a row it should paint a dropdown with the "IdTipoAccion" value selected (not the first one always).
I know there's the init callback for the editor, but it doesn't even get fired. I couldn't do it in the getData callback since I'm using that to get the value chosen by the user to modify another cell in the same row, so setting the initial value there would break my selected value logic.
Here's a snippet of the grid I'm using (forget about the asp Literal tags, they're properly replaced by javascript arrays)
var obj = {
width: contentWidth,
height: 500,
wrap: false,
hwrap: false,
resizable: true,
rowBorders: false,
numberCell: { show: false },
track: true, //to turn on the track changes.
flexHeight: true,
toolbar: {
items: [
{
type: 'button', icon: 'ui-icon-plus', label: 'Nuevo Registro', listeners: [
{
"click": function (evt, ui) {
//append empty row at the end.
var rowData = { IdMenu: <%=ArbolMenu.SelectedNode == null ? "0" : ArbolMenu.SelectedNode.Value%>, IdAccion: 0, GlsAccion: "", GlsUriAccion : "" }; //empty row
var rowIndx = grid.pqGrid("addRow", { rowData: rowData, checkEditable: true });
grid.pqGrid("goToPage", { rowIndx: rowIndx });
grid.pqGrid("editFirstCellInRow", { rowIndx: rowIndx });
}
}
]
},
{
type: 'button', icon: 'ui-icon-cancel', label: 'Deshacer', listeners: [
{
"click": function (evt, ui) {
grid.pqGrid("rollback");
deshacerBorrar();
}
}
]
}
]
},
scrollModel: {
autoFit: true
},
selectionModel: { type: 'cell', mode: 'block' },
editor: {
select: true
},
trackModel: { on: true },
hoverMode: 'cell',
editModel: {
saveKey: $.ui.keyCode.ENTER
},
title: "<b>Lista de acciones del menú</b>",
colModel: [
{ title: "Id Menu", dataType: "integer", dataIndx: "IdMenu", editable: false , hidden: true},
{ title: "Id Accion", dataType: "integer", dataIndx: "IdAccion", editable: false },
{ title: "Id Tipo Accion", dataIndx: "IdTipoAccion", hidden: true},
{title: "Tipo Acción", width: 185, dataIndx: "GlsTipoAccion",
editor: {
type: "select",
/*,
valueIndx: "idRegistro",
labelIndx: "glsValor",
mapIndices: {"glsValor": "GlsTipoAccion", "idRegistro": "IdTipoAccion"},
*/
options: function(ui) { return <asp:Literal ID="literalJsonTiposAcciones" runat='server'/>; },
getData: function(ui) {
var clave = ui.$cell.find("select").val();
var rowData = grid.pqGrid("getRowData", {rowIndx: ui.rowIndx});
rowData["IdTipoAccion"]=clave;
//grid.pqGrid("refreshRow");
return ui.$cell.find("select option[value='"+clave+"']").text();
}
},
validations: [{ type: 'minLen', value: 1, msg: "Obligatorio"}]
},
{
title: "Acción", width: 185, dataType: "string", dataIndx: "GlsAccion",
validations: [
{ type: 'minLen', value: 1, msg: "Obligatorio" },
{ type: 'maxLen', value: 100, msg: "El largo no puede sobrepasar los 100 caracteres" }
],
editor: {
type: function (ui) {
//debugger;
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
width = ui.column.width,
cls = ui.cls;
var dc = $.trim(rowData[dataIndx]);
var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")
.width(width - 6)
.appendTo($cell)
.val(dc);
},
getData: function (ui) {
return $("input[name='" + ui.dataIndx + "']").val();
}
}
},
{
title: "URI Acción", width: 140, dataType: "string", dataIndx: "GlsUriAccion",
validations: [
{ type: 'minLen', value: 1, msg: "Obligatorio" },
{ type: 'maxLen', value: 100, msg: "El largo no puede sobrepasar los 100 caracteres" }
],
editor: {
type: function (ui) {
//debugger;
var $cell = ui.$cell,
rowData = ui.rowData,
dataIndx = ui.dataIndx,
width = ui.column.width,
cls = ui.cls;
var dc = $.trim(rowData[dataIndx]);
var $inp = $("<input type='text' name='" + dataIndx + "' class='" + cls + " pq-ac-editor' />")
.width(width - 6)
.appendTo($cell)
.val(dc);
},
getData: function (ui) {
return $("input[name='" + ui.dataIndx + "']").val();
}
}
},
{ title: "", editable: false, minWidth: 83, sortable: false, render: function (ui) {
return "<button type='button' class='delete_btn'>Borrar</button>";
}
}
],
pageModel: { type: "local", rPP: 11, rPPOptions: [10, 20, 50, 100] },
dataModel: {
dataType: "JSON",
location: "remote",
recIndx: "IdAccion",
url: "<%=ResolveUrl("~/json/AccionJson.aspx?idMenu=")+ArbolMenu.SelectedValue%>", //for ASP.NET
getData: function (response) {
return { data: response };
}
},
//save the cell when cell loses focus.
quitEditMode: function (evt, ui) {
if (evt.keyCode != $.ui.keyCode.ESCAPE) {
grid.pqGrid("saveEditCell");
}
},
refresh: function () {
$("#grid_json").find("button.delete_btn").button({ icons: { primary: 'ui-icon-scissors' } })
.unbind("click")
.bind("click", function (evt) {
var $tr = $(this).closest("tr");
var $trs = $tr.parent().children();
var obj = grid.pqGrid("getRowIndx", { $tr: $tr });
var rowIndx = obj.rowIndx;
//
$trs.removeClass("pq-grid-row");
//var ans = window.confirm("Está seguro que quiere borrar la fila " + (rowIndx + 1) + "?");
var hasClassDelete = grid.pqGrid( "hasClass",
{rowIndx: rowIndx, cls: 'pq-row-delete'}
);
if (hasClassDelete) {
grid.pqGrid("removeClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
$tr.removeClass("pq-row-delete");
}
else {
grid.pqGrid("addClass", { rowIndx: rowIndx, cls: 'pq-row-delete' });
$tr.addClass("pq-row-delete");
}
});
},
cellBeforeSave: function (evt, ui) {
//var grid = $("#grid_json");
var isValid = grid.pqGrid("isValid", ui);
if (!isValid.valid) {
evt.preventDefault();
return false;
}
}
};
grid.pqGrid(obj);
I hope it's not so hard to understand the problem.
Thanks in advance!
Greets!
