State Maintenance

State Persistence

DropDownList stores its model is local storage by defining the property EnablePersistence).
You can sustain the below given functionalities in DropDownList by enabling persistence property,

  • Selected items value in the textbox
  • Item’s selection state in the popup list

Control model will be stored in local storage / cookies of browser before page refreshes and reinitialized with the restored model after refresh.
The following properties are not included while maintaining DropDownList’s state in local storage to keep localStorage compact.

  • Fields
  • Data source
  • Query
<ej:DropDownList ID="DropDownList1" runat="server" DataTextField="Text" DataValueField="Value" EnablePersistence="true" ></ej:DropDownList>
protected void Page_Load(object sender, EventArgs e)
        {
            List<Data> DropDownData = new List<Data>();
            DropDownData.Add(new Data { Value = "item1", Text = "ListItem 1" });
            DropDownData.Add(new Data { Value = "item2", Text = "ListItem 2" });
            DropDownData.Add(new Data { Value = "item3", Text = "ListItem 3" });
            DropDownData.Add(new Data { Value = "item4", Text = "ListItem 4" });
            DropDownData.Add(new Data { Value = "item5", Text = "ListItem 5" });
            DropDownList1.DataSource = DropDownData;
            
        }
        public class Data
        {
            public string Value { get; set; }
            public string Text { get; set; }
        }

Accessing currently stored state

Persisted state can be accessed through local storage using corresponding key name. Key name formation would be in below order. It is combination of plugin name and control id.

  • js
  • // DropDownList state as string
    	var dropdownlistStateString = window.localStorage.ejDropDownListDropDown;
    
    	//DropDownList state as object
    	var dropdownlistStateObject = JSON.parse(window.localStorage.ejDropDownListDropDown);

    NOTE

    In the above example, ‘ejDropDownList’ is plugin name and ‘DropDown’ is control id.

    Maintain data bound values after post back

    By default behavior of Syncfusion DropDownList, if DataSource is bound from code behind once on rendering the control. Then the control will lose its data binding on any post back actions. Because on postback control will be reinitialized and the datasource will not be set if it is bind page load event when postback is false. If you need to maintain the DataSource bound after postback, you have to use DataSourceCachingMode property with enum value ViewState or Session. This will maintain the data bound values in our controls after post back.

    Value Description
    None DataSource object will not be maintained
    ViewState DataSource object will be maintained using view state in client side
    Session DataSource object will be maintained using session variable in server
  • html
  • <ej:DropDownList ID="DropDownList1" runat="server" DataTextField="Text" DataValueField="ID" DataSourceCachingMode="ViewState" >
        </ej:DropDownList>
        <asp:Button runat="server" ID="button1" Text="Submit" />

    Here data is bound only on initial page load and not on every post back.

  • c#
  • protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownList1.DataSource = new DropDownData().GetItems();
            }
        }
        public class DropDownData
        {
    
            public DropDownData(int _id, string _text)
            {
    
                this.ID = _id;
                this.Text = _text;
    
            }
    
            public DropDownData() { }
    
            [Browsable(true)]
            public int ID
            {
    
                get;
                set;
    
            }
    
            [Browsable(true)]
            public string Text
            {
                get;
                set;
            }
    
            public List<DropDownData> GetItems()
            {
    
                List<DropDownData> data = new List<DropDownData>();
                data.Add(new DropDownData(1, "Railways"));
                data.Add(new DropDownData(2, "Roadways"));
                data.Add(new DropDownData(3, "Airways"));
                data.Add(new DropDownData(4, "Waterways"));
                data.Add(new DropDownData(5, "Electric Trains"));
                data.Add(new DropDownData(6, "Diesel Trains"));
                data.Add(new DropDownData(7, "Heavy Motor Vehicles"));
                data.Add(new DropDownData(8, "Light Motor Vehicles"));
                data.Add(new DropDownData(9, "Aero planes"));
                data.Add(new DropDownData(10, "Helicopters"));
                data.Add(new DropDownData(11, "Ships"));
                data.Add(new DropDownData(12, "Submarines"));
                return data;
    
            }
    
        }