What's New?

[CLOSED] By default select the first item in multiselect control

  1. #1
    Feb 28, 2012, 6:58 AM

    [CLOSED] By default select the first item in multiselect control

    Hi

    We are using a multiselect control bound to json store. On load of store, we want the first item to be selected by default (in multiselect). Please advise.

    Thanks
    Anulekha
    Last edited by Daniil; Mar 01, 2012 at 7:15 PM. Reason: [CLOSED]
  2. #2
    Feb 28, 2012, 8:48 AM
    Hi,

    Please populate the MultiSelect SelectedItems collection.

    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.MultiSelect1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "1", "item1" },
                new object[] { "2", "item2" },
                new object[] { "3", "item3" }
            };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:MultiSelect 
            ID="MultiSelect1" 
            runat="server" 
            DisplayField="description" 
            ValueField="id">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="id" />
                                <ext:RecordField Name="description" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <SelectedItems>
                <ext:SelectedListItem Index="0" />
            </SelectedItems>
        </ext:MultiSelect>
    </form>
</body>
</html>
  3. #3
    Feb 28, 2012, 9:51 AM
    Quote Originally Posted by Daniil View Post
    Hi,

    Please populate the MultiSelect SelectedItems collection.

    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.MultiSelect1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "1", "item1" },
                new object[] { "2", "item2" },
                new object[] { "3", "item3" }
            };
            store.DataBind();
        }
    }
</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:MultiSelect 
            ID="MultiSelect1" 
            runat="server" 
            DisplayField="description" 
            ValueField="id">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="id" />
                                <ext:RecordField Name="description" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <SelectedItems>
                <ext:SelectedListItem Index="0" />
            </SelectedItems>
        </ext:MultiSelect>
    </form>
</body>
</html>
    Hi Daniil,

    We are having accordion panel, and each accordion has a multiselect control. The above code worked fine for the first time. If we collapse and expand then the selection is lost.

    Thanks
    Anulekha
  4. #4
    Feb 28, 2012, 11:30 AM
    I was unable to reproduce the problem using the example below.

    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)
        {
            this.Store1.DataSource = new object[] 
            { 
                new object[] { "1", "item1" },
                new object[] { "2", "item2" },
                new object[] { "3", "item3" }
            };
            this.Store1.DataBind();
        }
    }
</script>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Ext.NET Example</title>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:Store ID="Store1" runat="server">
            <Reader>
                <ext:ArrayReader>
                    <Fields>
                        <ext:RecordField Name="id" />
                        <ext:RecordField Name="description" />
                    </Fields>
                </ext:ArrayReader>
            </Reader>
        </ext:Store>
        <ext:Panel 
            runat="server" 
            Width="200" 
            Height="400" 
            Layout="AccordionLayout">
            <Items>
                <ext:Panel runat="server" Title="MultiSelect1">
                    <Items>
                        <ext:MultiSelect
                            runat="server"
                            StoreID="Store1"
                            DisplayField="description"
                            ValueField="id">
                            <SelectedItems>
                                <ext:SelectedListItem Index="0" />
                            </SelectedItems>
                        </ext:MultiSelect>
                    </Items>
                </ext:Panel>
                <ext:Panel runat="server" Title="MultiSelect2">
                    <Items>
                        <ext:MultiSelect
                            runat="server"
                            StoreID="Store1"
                            DisplayField="description"
                            ValueField="id">
                            <SelectedItems>
                                <ext:SelectedListItem Index="0" />
                            </SelectedItems>
                        </ext:MultiSelect>
                    </Items>
                </ext:Panel>
            </Items>
        </ext:Panel>
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Getting drag source MultiSelect when dragging item from MultiSelect to MultiSelect
    By jwaite in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: May 09, 2012, 9:24 PM
  2. Load second MultiSelect when select item in First MultiSelect
    By khuc6 in forum 1.x Help
    Replies: 0
    Last Post: Mar 09, 2010, 7:28 AM
  3. How to add the item to use js in Multiselect control??
    By womoney7 in forum 1.x Help
    Replies: 0
    Last Post: Apr 15, 2009, 7:49 AM
  4. [CLOSED] MultiSelect Item CSS
    By Tbaseflug in forum 1.x Help
    Replies: 3
    Last Post: Apr 01, 2009, 7:42 AM
  5. ComboBox - Add Default Item
    By Tbaseflug in forum 1.x Help
    Replies: 0
    Last Post: Feb 03, 2009, 3:26 PM

Posting Permissions