How to dynamically add either Combobox or DateField to Gridpanel Column Editor from code behind in MVC

[jogave]

Hi Guys,
I am Trying to create a grid with control created dynamically I used some code from this post

http://forums.ext.net/showthread.php?17200-CLOSED-How-to-dynamically-add-either-Combobox-or-DateField-to-Gridpanel-Column-Editor-from-code-behind

this is my code

 X.GridPanel()
            .ID("gpInteractivo")
            //.Width(800)
            .Height(400)
            .Frame(true)
            .Store(X.Store()
                .ID("stIterativo")
                .Model(X.Model()
                    .Fields(

                        X.ModelField().Name("nroseq").Type(ModelFieldType.Float),
                        X.ModelField().Name("nroitem").Type(ModelFieldType.Int),
                        X.ModelField().Name("idcampo").Type(ModelFieldType.String),
                        X.ModelField().Name("valor").Type(ModelFieldType.String),
                        X.ModelField().Name("tipocontrol").Type(ModelFieldType.String),
                        X.ModelField().Name("etiqueta").Type(ModelFieldType.String),
                        X.ModelField().Name("tipodato").Type(ModelFieldType.String),
                        X.ModelField().Name("formato").Type(ModelFieldType.String),
                        X.ModelField().Name("desconcepto").Type(ModelFieldType.String)
                    )
                )

            )
            .ColumnModel(

                X.Column().Text("Nro Seq").DataIndex("nroseq").Hidden(true),
                X.Column().Text("Nro Item").DataIndex("nroitem").Hidden(true),
                X.Column().Text("Id Campo").DataIndex("idcampo").Hidden(true),
                X.Column().Text("Concepto").DataIndex("desconcepto").Width(200),
                X.Column().Text("Etiqueta").DataIndex("etiqueta").Width(120),
                X.Column().Text("Valor").DataIndex("valor").Width(120).ID("cEditable").Editor(X.TextField())
            )
            .SelectionModel(X.CellSelectionModel())
            .Plugins(
                X.CellEditing().Listeners(ls => ls.BeforeEdit.Fn = "edit")
            )

and JS code

var edit = function (editor, e) {
       
        var column = e.column;
       
        ed = editor;
       
        var tipocampo = e.record.data.tipocontrol;

        switch (tipocampo) {

            case "DAT":
               
                column.setEditor(new Ext.form.DateField());
                break

            case "CBX":
              //  console.log('CBX');
                column.setEditor(new Ext.form.ComboBox({
                    ID : "combod",
                    displayField: "value",
                    valueField: "id",
                    triggerAction: "all",
                    store: ComboBoxStore
                }));
                

                ComboBoxStore.on(
                        "beforeload",
                        function (recuperarData, options) {
                            options.params = {
                                urlgetlista: e.record.data.urlgetlista
                            }
                        },
                        null,
                        {
                            single: true
                        });

               
                break;
        }

       

    };



    var recuperarData = function (listaID) {
        var bError = true;
        console.log(listaID);
        Ext.net.DirectMethod.request({
            url: '/general/getData',
            params: { urlgetlista: listaID },

            success: function (result) {
                console.log(result.data);
                bError = false;
            }

        });

        if (!bError) {
            return result.data;
        }
        else {
            return null;
        }
    }

and get this error
Uncaught ReferenceError: ComboBoxStore is not defined

I can see the control created but with de combobox I can't to set store or data.

Some body can help me with the dynamically creation of control,

Thanks

[fabricio.murta]

Hello @jogave!

I believe this thread covers the subject you raised:

Dynamically change column editor with row editor plugin.

Additionally, this example show in a TreePanel, how to dynamically change editor. Although here's shown in a TreePanel there's not much difference from the approach you'd take in the GridPanel: Tree Panel - Editors.

This thread also provides an insightful discussion on the subject: Dynamic editor in GridPanel.

If this still don't help, give the forum search a try. There are several threads discussing this feature.

Hope this helps!

[jogave]

Hi Fabricio, thanks for reply me

I changed my JS

 switch (tipocampo) {

            case "DAT":
               
                column.setEditor(new Ext.form.DateField());
                break

            case "CBX":
                console.log('CBX');
                column.setEditor(new Ext.form.ComboBox({
                    id: "field3",
                    mode: "local",
                    triggerAction: "all",
                    displayField: "valor",
                    valueField: "id",
                    store: new Ext.data.SimpleStore({
                        fields: ['id', 'valor'],
                       // data : [['1':'Uno'],['2':'Dos'],['3':'Tres']]
                        data: recuperarData(e.record.data.urlgetlista)
                    })
                }));
                

               
               
                break;
        }


 var recuperarData = function (listaID) {
        var resultado = new Array();
       
        Ext.net.DirectMethod.request({
            url: '/general/getData',
            params: { urlgetlista: listaID },

            success: function (result) {
               

                result.data.forEach(function (entry) {
                   
                    var reg = new Array();

                    reg.push(entry.id);
                    reg.push(entry.valor);

                    
                    resultado.push(reg);
                    reg = [];
                });
                
                
                console.log(resultado);
                return resultado;
            },
            failure: function () {
                return null;
            }

        });

       
    }

but the data no show in te control :(



You can see the array created from de database in the function recuperarData in this image

[fabricio.murta]

Hello!

The success: callback you are setting there is, well, a callback. It is called asynchronously as the direct request (ajax call) returns a value.

So, what you can do (simplest, in my opinion), is call the direct method, passing a reference to the combo box's store. Then the callback inputs the data directly to the store and refreshes the combo box.

As the data is pulled out from the server, suppose the user loads your page and then plugs out the internet cable. Then click to edit the field. You will see the field will get defined, but no data will fill it whatsoever. In fact, you are currently returning nothing from your recuperarData() method, so the data the comobo box's store gets is always empty.

Yes, in this case you are actually dealing with parallel programming, not sequential.

I hope these directions enlight you on how to populate the combo box correctly with the options. If the combo box options is constant, I advise you towards either setting them once on page load or statically on the page source (during the tipoCampo switch, for example), without pulling data from server every time.

[jogave]

Do you have an example?
Thanks again

[fabricio.murta]

Hi!

The following example shows you how asynchronous events can interact with the page:

Events - Direct Method.

Notice on the second case of the example, it calls the function to show an Ext.NET dialog with the result of the direct method.

The third case on the example shows how it can update an HTML content from the server-side (it does not actually use any result, it just results in scripts to update the label right below the form).

Once you understand this concept, you can then study this one, which populates a combo box with data from the server:

Form - ComboBox - Ajax Linked combos.

So, while we don't have exactly your test case written among our examples, I am pretty confident we have both cases you need to attain this. There are many more examples there that might just help you. You may also want to browse our WebForms Examples Explorer for further examples.