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>";
                        }
                    }
                },