Dependent dropdownlist jqgrid - asp.net-mvc

Question

I need to load a dropdownlist dependent using jqgrid. Here's part of my code (I'm using MVC)
{ name: 'parIDUnidadMedida', index: 'parIDUnidadMedida', width: 80, align: 'center', editable: true, edittype: "select",
editrules: { required: true },
editoptions: {
multiple: false,
size: 1,
dataUrl: '#Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarUnidadesMedida/',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
},
dataEvents: [{
type: 'change',
fn: function (e) {
var varIDUnidadMedida = e.currentTarget.value;
newOptions = '';
var arrPlazos = $.ajax({
url: '#Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/' + varIDUnidadMedida,
async: false
}).responseText;
var response = jQuery.parseJSON(arrPlazos);
for (var i = 0; i < response.length; i++) {
newOptions += '<option value="' + response[i].Value + '">' + response[i].Text + '</option>';
}
$('parPlazo').html(newOptions);
}
}]
}
},
{ name: 'parPlazo', index: 'parPlazo', width: 80, align: 'center', editable: true, edittype: "select",
editrules: { required: true },
editoptions: {
multiple: false,
size: 1
}
},
As you can see if the parIDUnidadMedida select control change then parPlazo must be updated...
Can you help me?? I don't know how to solve it.
Regards.

Answer 1

Ok... after looking for an answer I got it..
You see I made some minor fixes, but the main reason because it didn't work was because I've never loaded the second dropdownlist (parPlazo). So the select parPlazo didn't have id or name. Obviously it coudl never be reached
Here's the code. I hope this helps you.
Regards
{ name: 'parIDUnidadMedida', index: 'parIDUnidadMedida', width: 80, align: 'center', editable: true, edittype: "select",
editrules: { required: true },
editoptions: {
multiple: false,
size: 1,
dataUrl: '#Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarUnidadesMedida/',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
},
dataEvents: [{
type: 'change',
fn: function (e) {
var varIDUnidadMedida = e.currentTarget.value;
$.ajax({
url: '#Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/' + varIDUnidadMedida,
type: 'GET',
success: function (PlazosJson) {
var plazos = eval(PlazosJson);
var plazosHtml = "";
$(plazos).each(function (i, option) {
plazosHtml += '<option value="' + option.Value + '">' + option.Text + '</option>';
});
// Poblar los datos
if ($(e.target).is('.FormElement')) {
// En caso de se formulario de edicion, añadir
var form = $(e.target).closest('form.FormGrid');
$("select#parPlazo.FormElement", form[0]).html(plazosHtml);
} else {
// Edicion de una linea
var row = $(e.target).closest('tr.jqgrow');
var rowId = row.attr('id');
var rowId = jQuery("#grid").jqGrid('getGridParam', 'selrow');
jQuery("select#" + rowId + "_parPlazo").append(plazosHtml);
}
}
});
}
}]
}
},
{ name: 'parPlazo', index: 'parPlazo', width: 80, align: 'center', editable: true, edittype: "select",
editrules: { required: true },
editoptions: {
multiple: false,
size: 1,
dataUrl: '#Url.Content("~/")' + 'CertificadoGarantiaExtendidaOpciones/ListarPlazos/1',
buildSelect: function (data) {
var response = jQuery.parseJSON(data);
var s = '<select>';
if (response && response.length) {
for (var i = 0, l = response.length; i < l; i++) {
var ri = response[i];
s += '<option value="' + ri.Value + '">' + ri.Text + '</option>';
}
}
return s + "</select>";
}
}
},