[CLOSED] [RAZOR] get selected item value from a combobox on special key or blur

[OriCoder]

Hi People

I have a few listeners on a combobox which is in an .editor with in a tab grid panel. I have implemented a custom search in this combo box and that is all working fine.

When you type is brings back the live filtered dropdown. What I am looking to do is pass the highlighed value from the combobox rather than the search text as is happening just now. I have tried SelectedItem.value but does not work.

below is the code for the column and the javascript functions that it calls.

column code

Html.X().Column()
                    .Text("Counterparty")
                    .Width(200)
                    .DataIndex("CounterpartyId")
                    .Renderer("renCounterParty")
                        .Editor(
                        Html.X().ComboBox()
                            .ID("cp" + TempData["tabNumber"])
                            .Listeners(l =>
                            {
                                l.BeforeQuery.Handler = "delete this.lastQuery;";
                                l.Focus.Handler = "if(this.getValue() == 0){this.setValue()}";
                                l.Blur.Handler = "getDefaultAccount(App." + "GridPanel_" + TempData["tabNumber"] + ",App." + "GridPanel_" + TempData["tabNumber"] + ".editingPlugin.getActiveRecord(),this.getValue(),App." + "GridPanel_" + TempData["tabNumber"] + ".editingPlugin.getActiveRecord().get('SettlementLocationId'));";
                                l.SpecialKey.Handler = "if(e.getKey() == e.TAB){getDefaultAccount(App." + "GridPanel_" + TempData["tabNumber"] + ",App." + "GridPanel_" + TempData["tabNumber"] + ".editingPlugin.getActiveRecord(),this.getValue(),App." + "GridPanel_" + TempData["tabNumber"] + ".editingPlugin.getActiveRecord().get('SettlementLocationId'));};if(e.getKey() == e.ENTER){getDefaultAccount(App." + "GridPanel_" + TempData["tabNumber"] + ",App." + "GridPanel_" + TempData["tabNumber"] + ".editingPlugin.getActiveRecord(),this.getValue(),App." + "GridPanel_" + TempData["tabNumber"] + ".editingPlugin.getActiveRecord().get('SettlementLocationId'));}";
                            }
                                            )

                        .MinChars(0)
                        .TypeAhead(false)
                        .ValueField("CounterpartyId")
                        .DisplayField("Name")
                        .ForceSelection(false)
                        .TriggerAction(TriggerAction.Query)
                            .Store(
                                Html.X().Store()
                                .ID("StoreCounterpartyList" + TempData["tabNumber"])
                                .AutoLoad(false)
                                .Model(Html.X().Model()
                                .IDProperty("CounterpartyId")
                                    .Fields(
                                        new ModelField("CounterpartyId", ModelFieldType.Int),
                                        new ModelField("Name", ModelFieldType.String)
                                            )
                                                        )
                            .Parameters(p => p.Add(new StoreParameter()
                            {
                                Name = "idcm",
                                Value = "App." + "GridPanel_" + TempData["tabNumber"] + ".editingPlugin.getActiveRecord().get('CounterpartyTypeId')",
                                //Value = "App." + "GridPanel_" + TempData["tabNumber"] + ".editingPlugin.getActiveRecord().get('CounterpartyId')",
                                Mode = ParameterMode.Raw
                            }
                                                                                      )
                                                                           )

                            .Proxy(
                            Html.X().AjaxProxy()
                            .Url(Url.Action("GetCounterpartyList"))
                            .ActionMethods(actions =>
                                {
                                    actions.Read = HttpMethod.POST;
                                }
                                          )

                            .Reader(
                                Html.X().JsonReader().Root("result")
                                   )
                                 )
                                )
                              )

javascript

var editNomOrPrice = function (grid,record) {
        var id = grid.store.indexOf(record);
        if(id == 0){
        //Activate Nom cell
        grid.editingPlugin.startEditByPosition({ row: id, column: 6 });
        }else{
        //Activate Price cell
        grid.editingPlugin.startEditByPosition({ row: id, column: 7 });
        }

    }

    var getDefaultAccount = function (ddid, grid, record, cpId, locId) {

        //var record = getRecord();
        //var cpId = cpId.SelectedItem.Value;
        if (ddid == null || ddid == 0) {
        return false;

        }
        cpId = record.set('CounterpartyId', ddid);

        Ext.net.DirectMethod.request({
            url: 'ExtNet/getDefaultAccount?counterpartyId=' + cpId + '&&settlementLocId=' + locId,
            success: function (result) {
                record.set('SettlementAccountId', result.data);
                //jump to cell
                editNomOrPrice(grid, record);
            }
        });

    };

As always I cannot post a full example there is to much going on, if I were to pick an example to work from it would be

http://mvc.ext.net/#/Form_ComboBox/Custom_Search/

say typing "c" then using the using the arrow keys to highlight "cowslip" then hitting tab which would then fill in a few column for me then jump to the third one after that.

[Daniil]

Hi @OriCoder,

If you set up a Delay for the SpecialKey listener:

l.SpecialKey.Delay = 1;

you should be able to get the ComboBox's value by this way:

comboBox.getValue();

[OriCoder]

Thanks dude, will give it a shot later today and get back to you.

[OriCoder]

Hi

Adding the delay in causes

TypeError: App.GridPanel_1.editingPlugin.getActiveRecord(...) is null
http://localhost:51863/extnet/extnet-all-js/ext.axd?v=33683/eval/seq/273
Line 1

and get combobox is undefined, but if I use

App.cp" + TempData["tabNumber"] + ".getValue()

Seam to work

[OriCoder]

Hi

Adding the delay in causes

TypeError: App.GridPanel_1.editingPlugin.getActiveRecord(...) is null
http://localhost:51863/extnet/extnet-all-js/ext.axd?v=33683/eval/seq/273
Line 1

and get combobox is undefined, but if I use

App.cp" + TempData["tabNumber"] + ".getValue()

Seam to work

Sorry!!! I miss typed, still have an error with the is null now when trying to pass the active record

[Daniil]

Yes, there is no "activeRecord" if specify Delay for the SpecialKey listener. So, Delay is not a solution.

Seems this call helps:

comboBox.listKeyNav.selectHighlighted(e);

Here is an example which emulates your scenario.

Example

<%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test", "test" },
                new object[] { "test", "test" },
                new object[] { "test", "test" }
            };

            store = this.ComboBox1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "1", "Item 1" },
                new object[] { "2", "Item 2" },
                new object[] { "3", "Item 3" }
            };
        }
    }
</script>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Ext.NET v2 Example</title>

    <script>
        var onSpecialKey = function (comboBox, e) {
            if (e.getKey() === e.TAB) {
                comboBox.listKeyNav.selectHighlighted(e);
                console.log(App.GridPanel1.editingPlugin.activeRecord);
                console.log(comboBox.getValue());
            }
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server">
            <Store>
                <ext:Store runat="server">
                    <Model>
                        <ext:Model runat="server">
                            <Fields>
                                <ext:ModelField Name="test1" />
                                <ext:ModelField Name="test2" />
                            </Fields>
                        </ext:Model>
                    </Model>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column runat="server" Text="Test 1" DataIndex="test1">
                        <Editor>
                            <ext:ComboBox 
                                ID="ComboBox1" 
                                runat="server" 
                                DisplayField="text" 
                                ValueField="value">
                                <Store>
                                    <ext:Store runat="server">
                                        <Model>
                                            <ext:Model runat="server">
                                                <Fields>
                                                    <ext:ModelField Name="value" />
                                                    <ext:ModelField Name="text" />
                                                </Fields>
                                            </ext:Model>
                                        </Model>
                                        <Reader>
                                            <ext:ArrayReader />
                                        </Reader>
                                    </ext:Store>
                                </Store>
                                <Listeners>
                                    <SpecialKey Fn="onSpecialKey" />
                                </Listeners>
                            </ext:ComboBox>
                        </Editor>
                    </ext:Column>
                    <ext:Column runat="server" Text="Test 2" DataIndex="test2">
                        <Editor>
                            <ext:TextField runat="server" />
                        </Editor>
                    </ext:Column>
                </Columns>
            </ColumnModel>
            <Plugins>
                <ext:CellEditing runat="server" />
            </Plugins>
        </ext:GridPanel>
    </form>
</body>
</html>

[OriCoder]

Hi Daniil

I got it working based on your example thanks!! although it was a lot more verbose since I was using a handler. Is there any way in RAZOR to pass extra parameters in when using FN instead of handler in a listener?

Regards

Steven

[Daniil]

I think no.

But it is not a problem to use Handler instead of Fn.

<SpecialKey Handler="if (e.getKey() === e.TAB) {
                         item.listKeyNav.selectHighlighted(e);
                         console.log(App.GridPanel1.editingPlugin.activeRecord);
                         console.log(item.getValue());
                     }" />