How can get Value by name in GridPanel Ext.net Razor

Question

I try to get value from GridPanel in Ext.net using Javascript, I use Hanlder to call gaSelectBind() in Javascript Function but it Return [object NodeList].

<script type="text/javascript">
    var nodelist;
    nodelist = document.getElementsByName('grid-device-name')
    function gaSelectBind() {
        App.ga_device_name.setValue(nodelist);
    };
</script>

This is My data Object:

DateTime now = DateTime.Now;
    var dataDevice = new object[]
            {
                new object[] {null, false , "35 RUTA", now, null , null },
                new object[] {null, false , "770SBW", now, null , null },
                new object[] {null, false , "CORSA", now, null , null },
                new object[] {null, false , "icon2010", now, null , null },
                new object[] {null, false , "MouGL", now, null , null },
                new object[] {null, false , "mt90", now, null , null },
                new object[] {null, false , "MT90-Renny", now, null , null },
                new object[] {null, false , "MVT600-Fuel1111", now, null , null }
            };

I use textfield to set value

itemchildpan1.Add(Html.X().TextField().FieldLabel("Device Name").ID("ga_device_name"));

My GridPanel:

.GridPanel().Title("Device")
.Store(store =>
{//Load store from Data Object----
    store.Add(Html.X().Store().ID("Storer1")
                    .AutoLoad(true)
                    .Model(model => model.Add(Html.X().Model()
                        .Fields(fields =>
                        {
                            fields.Add(Html.X().ModelField().Name("grid-alarm"));
                            fields.Add(Html.X().ModelField().Name("grid-check"));
                            fields.Add(Html.X().ModelField().Name("grid-device-name"));
                            fields.Add(Html.X().ModelField().Name("grid-lastupdate"));
                            fields.Add(Html.X().ModelField().Name("grid-status"));
                            fields.Add(Html.X().ModelField().Name("grid-retry"));
                        }
                        )))
                    .DataSource(dataDevice)
                    );
})

.ColumnModel(columnModel =>
{//Add Data Object from store to Column
    columnModel.Columns.Add(Html.X().Column().Text("").DataIndex("grid-alarm").Width(30));
    columnModel.Columns.Add(Html.X().CheckColumn().TdCls("td-non-img-checkcolum").DataIndex("grid-check").Width(30).Editable(true));
    columnModel.Columns.Add(Html.X().Column().Text("Devide Name").DataIndex("grid-device-name"));
    columnModel.Columns.Add(Html.X().Column().Text("Latest Update").DataIndex("grid-lastupdate").Width(120));
    columnModel.Columns.Add(Html.X().Column().Text("Status").DataIndex("grid-status"));
    columnModel.Columns.Add(Html.X().Column().Text("Retry").DataIndex("grid-retry"));
})
.SelectionModel(gaSelectModel =>
{//Listener Event Handler use to call "gaSelectBind()" Function
    gaSelectModel.Add(Html.X().RowSelectionModel().Listeners(garowSelectListen =>
    {
        garowSelectListen.Select.Handler = "gaSelectBind();";
    }));
})

I can't get Value from Grid, It show

[object NodeList]

Answer 1

You need to make two changes:

1. Replace the following line:

   // Old
   garowSelectListen.Select.Handler = "gaSelectBind();";
   
   // New
   garowSelectListen.Select.Fn = "gaSelectBind";
   

2. Replace your <script> with the following:

   <script type="text/javascript">
       var gaSelectBind = function (item, record, index) {
           App.ga_device_name.setValue(record.data.grid-device-name);
       };
   </script>
   

The following code can be removed from your sample, as it will not work:

// Remove this code...
var nodelist;
nodelist = document.getElementsByName('grid-device-name')

Hope this helps.