Loading data in GridPanel from RefreshData event

**huzzy143** · Apr 08, 2012, 7:27 PM

Dear,

I have a DropDownField with GridPanel as component of DropDownField.
Now i loading data in the GridPanel on RefreshData event handler.

I have kept AutoLoad property of Store to false. So that it is loaded when user expands the DropDown

When expanding the DropDownField i see that RefreshData event is fired but the problem is that the Data isn't loaded on to form.

When i explicitly click the refresh button of grid then only the data gets loaded. Can anyone please tell me what i wld be doing wrong?

Thanks,
HUzefa

**Vladimir** · Apr 08, 2012, 7:34 PM

Hi,
Please provide a simple sample demonstrates the issue

**huzzy143** · Apr 08, 2012, 8:07 PM

Here is a sample.

In this i dont want to load data on page load but instead when user try's to expand the dropdownfield.
How can i achieve this?

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

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<!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></title>
</head>
<body>
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        public void Store_RefreshData(object sender, StoreRefreshDataEventArgs e)
        {
            var store = sender as Store;
            store.DataSource = Employee.GetAll();
            store.DataBind();
        }

        public class Employee
        {
            public int ID { get; set; }
            public string Name { get; set; }
            public string Surname { get; set; }

            public static List<Employee> GetAll()
            {
                return new List<Employee>
                       {
                           new Employee
                               {
                                   ID = 1,
                                   Name = "Nancy",
                                   Surname = "Davolio"
                               },
                           new Employee
                               {
                                   ID = 2,
                                   Name = "Andrew",
                                   Surname = "Fuller"
                               }
                       };
            }
        }
    </script>
    <form id="form1" runat="server">
    <div>
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:DropDownField runat="server" Width="300" TriggerIcon="SimpleArrowDown">
            <Component>
                <ext:GridPanel runat="server" Width="550" AutoHeight="true">
                    <Store>
                        <ext:Store runat="server" ID="Store1" OnRefreshData="Store_RefreshData" AutoLoad="false">
                            <Proxy>
                                <ext:PageProxy AutoDataBind="false">
                                </ext:PageProxy>
                            </Proxy>
                            <Reader>
                                <ext:JsonReader>
                                    <Fields>
                                        <ext:RecordField Name="ID" />
                                        <ext:RecordField Name="Name" />
                                        <ext:RecordField Name="Surname" />
                                    </Fields>
                                </ext:JsonReader>
                            </Reader>
                        </ext:Store>
                    </Store>
                    <ColumnModel runat="server">
                        <Columns>
                            <ext:Column ColumnID="ID" Header="ID" DataIndex="ID" Width="220" />
                            <ext:Column Header="Name" DataIndex="Name" Width="100" />
                            <ext:Column Header="Surname" DataIndex="Surname" Width="100">
                            </ext:Column>
                            <ext:CommandColumn>
                                <Commands>
                                    <ext:CommandFill />
                                    <ext:GridCommand Icon="Accept" CommandName="Pick">
                                        <ToolTip Title="Employee" Text="Click to choose this employee" />
                                    </ext:GridCommand>
                                    <ext:CommandSpacer Width="20" />
                                </Commands>
                            </ext:CommandColumn>
                        </Columns>
                    </ColumnModel>
                    <Listeners>
                        <Command Handler="this.dropDownField.setValue(record.data.ID);" />
                    </Listeners>
                    <LoadMask ShowMask="true" />
                    <SelectionModel>
                        <ext:RowSelectionModel runat="server" />
                    </SelectionModel>
                    <BottomBar>
                        <ext:PagingToolbar ID="pgEmplyee" runat="server" PageSize="10">
                        </ext:PagingToolbar>
                    </BottomBar>
                </ext:GridPanel>
            </Component>
        </ext:DropDownField>
    </div>
    </form>
</body>
</html>

Thanks,
Huzefa

**Daniil** · Apr 09, 2012, 10:10 AM

Hi,

Originally Posted by huzzy143

When expanding the DropDownField i see that RefreshData event is fired but the problem is that the Data isn't loaded on to form.

It's not fired in your example and it should not.

You can specify the following DropDownField Expand listener to achieve your requirement.

<Expand Handler="this.component.getStore().reload();" />

**huzzy143** · Apr 09, 2012, 4:26 PM

Thanx that did work out good on sample but not still in my actual live code.

One more thing i wanted to ask is that after the data has been loaded into the Grid then i want to keep the first row as selected so that user can go up/down with the keyboard keys.

On what event and how shall i select the first row of the grid.

Thanks,
Huzefa

**Daniil** · Apr 09, 2012, 4:46 PM

Originally Posted by huzzy143

One more thing i wanted to ask is that after the data has been loaded into the Grid then i want to keep the first row as selected so that user can go up/down with the keyboard keys.

On what event and how shall i select the first row of the grid.

Example

<ext:RowSelectionModel runat="server">
    <SelectedRows>
        <ext:SelectedRow RowIndex="0" />
    </SelectedRows>
</ext:RowSelectionModel>

**huzzy143** · Apr 09, 2012, 5:11 PM

Dear Danill,

The above did keep the first row selected but when i press Up/Down arrow keys then the selected row does not move along with it.
I want the track to move as i press Up and Down arrow keys.

How can i select the rows in such a manner that i am able to move the selection from my keyboard Up/Down arrow keys.

Thanks,
Huzefa

**Daniil** · Apr 10, 2012, 11:29 AM

Please use:

<Expand Handler="var field = this;
                    field.component.getStore().reload({
                        callback : function () { 
                        field.component.getView().focusRow(0);
                        }
                    });" />

instead of the previous one.

**huzzy143** · Apr 10, 2012, 11:39 AM

Thanks, that worked like a charm.

Thread: Loading data in GridPanel from RefreshData event

Thread Tools

Search Thread

Display

Loading data in GridPanel from RefreshData event

Not working

Worked

Similar Threads

GridPanel Data loading problem

[CLOSED] Error loading Gridpanel Data

[CLOSED] GridPanel Loading with Large Data Set

CommandColumn codebehind doesn't work during RefreshData event

[CLOSED] GridPanel - bind grid outside of RefreshData event

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Thread: Loading data in GridPanel from RefreshData event

Loading data in GridPanel from RefreshData event

Not working

Worked

Similar Threads

Tags for this Thread

Posting Permissions

Sitemap

Downloads

Resources

Stay connected with us