[CLOSED] Search an item and scroll to view in MultiSelect control

[Fahd]

[Baidaly]

Hello!

In Ext.NET 2.x you should use boundList for this purpose:

var keyUpProductHandler = function (field, e) {
	//lstProducts.view.clearSelections();
	var items = App.lstProducts.store.data.items,
			value = field.getValue(),
			i;
	for (i = 0; i < items.length; i++) {
		temp = items[i].data.Divname;
		str = temp.toLowerCase();
		if (str.match(value.toLowerCase()) == value.toLowerCase()) {
			App.lstProducts.store.data.items[i].selected = true;
			//alert("found match" + value);
			break;
		}
	}

	if (i < items.length)
		if (App.lstProducts.boundList.getNode(i) != 'undefined') {
			var node = App.lstProducts.boundList.getNode(i);
			node.scrollIntoView();
			var record = App.lstProducts.boundList.getRecord(node);
			App.lstProducts.boundList.select(record, false, true);
		}
}

[Fahd]

Thank you. Let me try it now.

Thanks!

Hello!

In Ext.NET 2.x you should use boundList for this purpose:

var keyUpProductHandler = function (field, e) {
	//lstProducts.view.clearSelections();
	var items = App.lstProducts.store.data.items,
			value = field.getValue(),
			i;
	for (i = 0; i < items.length; i++) {
		temp = items[i].data.Divname;
		str = temp.toLowerCase();
		if (str.match(value.toLowerCase()) == value.toLowerCase()) {
			App.lstProducts.store.data.items[i].selected = true;
			//alert("found match" + value);
			break;
		}
	}

	if (i < items.length)
		if (App.lstProducts.boundList.getNode(i) != 'undefined') {
			var node = App.lstProducts.boundList.getNode(i);
			node.scrollIntoView();
			var record = App.lstProducts.boundList.getRecord(node);
			App.lstProducts.boundList.select(record, false, true);
		}
}

[Fahd]

This one almost worked except for one issue that the below line of code is scrolling the entire page instead of scrolling just the control (ext:MultiSelect ID="lstProducts")on which it is bounded.

node.scrollIntoView();

[Baidaly]

You should provide required container by default it's document.getBody(): http://docs.sencha.com/extjs/4.2.1/#...scrollIntoView

[Fahd]

I added a Container around my MultiSelect control and have passed this Container as parameter to the scrollIntoView as below. But I get this error "htmlfile: Type mismatch."

<%@ Page Language="C#" %>

<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script type="text/javascript">
    // *********************************** Product Filtering ***********************************
    var keyUpProductHandler = function (field, e) {
        //lstProducts.view.clearSelections();
        var items = App.lstProducts.store.data.items,
            value = field.getValue(),
            i;
        for (i = 0; i < items.length; i++) {
            temp = items[i].data.Divname;
            str = temp.toLowerCase();
            if (str.match(value.toLowerCase()) == value.toLowerCase()) {
                App.lstProducts.store.data.items[i].selected = true;
                //alert("found match" + value);
                break;
            }
        }

        if (i < items.length)
            if (App.lstProducts.boundList.getNode(i) != 'undefined') {
                var node = App.lstProducts.boundList.getNode(i);
                node.scrollIntoView(conLocation);
                var record = App.lstProducts.boundList.getRecord(node);
                App.lstProducts.boundList.select(record, false, true);
            }
    }

</script>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            this.stLocation.DataSource = new object[]
            {
                new object[] { "12345 - 3m Co", 12345},
                new object[] { "29345 - Alcoa Inc",29345},
                new object[] { "28345 - Altria Group Inc", 28345 },
                new object[] { "American Express Company", 27345 },
                new object[] { "American International Group, Inc.", 26345},
                new object[] { "AT&T Inc.", 312345},
                new object[] { "Boeing Co.", 25345},
                new object[] { "Caterpillar Inc.", 24345 },
                new object[] { "Citigroup, Inc.", 232345},
                new object[] { "E.I. du Pont de Nemours and Company", 222345},
                new object[] { "Exxon Mobil Corp", 212345 },
                new object[] { "General Electric Company", 192345},
                new object[] { "General Motors Corporation", 182345 },
                new object[] { "Hewlett-Packard Co.", 172345 },
                new object[] { "Honeywell Intl Inc", 162345},
                new object[] { "Intel Corporation", 152345 },
                new object[] { "International Business Machines", 142345 },
                new object[] { "Johnson & Johnson", 132345},
                new object[] { "JP Morgan & Chase & Co", 12345 },
                new object[] { "McDonald\"s Corporation", 112345 },
                new object[] { "Merck & Co., Inc.", 102345 },
                new object[] { "Microsoft Corporation", 92345 },
                new object[] { "Pfizer Inc", 82345 },
                new object[] { "The Coca-Cola Company", 72345},
                new object[] { "The Home Depot, Inc.", 62345},
                new object[] { "The Procter & Gamble Company", 52345 },
                new object[] { "United Technologies Corporation",42345 },
                new object[] { "Verizon Communications", 32345 },
                new object[] { "Wal-Mart Stores, Inc.", 22345 }
            };

            this.stLocation.DataBind();
        }
    }
</script>
<!DOCTYPE html>
<html>
<head id="Head1" runat="server">
    <title>Multi Listbox</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager ID="ResourceManager1" runat="server" />
    <ext:Panel runat="server" Title="multi list test">
        <TopBar>
            <ext:Toolbar ID="Toolbar1" runat="server">
                <Items>
                    <ext:ToolbarTextItem ID="ToolbarTextItem1" runat="server" Text="Find:" />
                    <ext:TriggerField ID="productFilterField" runat="server" EnableKeyEvents="true">
                        <Triggers>
                            <ext:FieldTrigger Icon="Clear" Qtip="Clear filter" />
                        </Triggers>
                        <Listeners>
                            <KeyUp Fn="keyUpProductHandler" />
                            <TriggerClick Handler="clearProductFilter();" />
                        </Listeners>
                    </ext:TriggerField>
                </Items>
            </ext:Toolbar>
        </TopBar>
        <Items>
              <ext:Container ID="conLocation" runat="server">
                <Items>
                    <ext:MultiSelect ID="lstProducts" runat="server" Height="130" DisplayField="Divname"
                        ValueField="LocationKey" Note="<span Style='font-size: x-small'>Select nothing to include all Products</span>"
                        AutoDataBind="true">
                        <Store>
                            <ext:Store ID="stLocation" runat="server">
                                <Model>
                                    <ext:Model ID="mdLocation" runat="server">
                                        <Fields>
                                            <ext:ModelField Name="Divname" Type="String" />
                                            <ext:ModelField Name="LocationKey" Type="String" />
                                        </Fields>
                                    </ext:Model>
                                </Model>
                            </ext:Store>
                        </Store>
                    </ext:MultiSelect>
                </Items>
            </ext:Container>
        </Items>
    </ext:Panel>
    </form>
</body>
</html>

[Daniil]

The example appears to be working for me in FireFox with the latest Ext.NET from the SVN trunk.

Please tell us your browser and Ext.NET version.

[Fahd]

I am using IE8.0. and have no liberty in going for any browser. But I also tried in FireFox and see the same issue. Attaching here two screen shots: One before entering any thing and one as soon as I start typing in.

The only difference in the code that I sent here is it is missing the Master Page. In my actual project, this page is a content page on the Master Page.
My main problem is that node.scrollIntoView() is scrolling the entire screen including the master page. There by causing my Master Page to disappear.
I tried passing the container that holds the MultiSelect control but it fails too. e.g: node.scrollIntoView(App.conLocation);

Screen Shot before I enter anything. We can see the complete screen including the menu items from the Master page.


Screen Shot after I start entering a text. The menu items from the Master page have scrolled up and not visible any more.


Thanks for your help
Fahd

[Baidaly]

I could reproduce with any IE8 and in IE10 in IE8 mode.

Try to pass id of the container:

node.scrollIntoView("conLocation");

[Fahd]

If you look into my code posted earlier, you should find that I am indeed passing the container. I am pasting the code snippet here again.

if (i < items.length)
            if (App.lstProducts.boundList.getNode(i) != 'undefined') {
                var node = App.lstProducts.boundList.getNode(i);
                node.scrollIntoView(conLocation);
                var record = App.lstProducts.boundList.getRecord(node);
                App.lstProducts.boundList.select(record, false, true);
            }