Refreshing data in GridPanels ?

[Mohammad]

My Gridpanel is the following :

<ext:GridPanel ID="GridPanelRoles" runat="server" StoreID="StoreRoles" StripeRows="true"
    Title=" New Roles " AutoExpandColumn="Name" Collapsible="true" Height="350"
    Icon="GroupGear">
    <TopBar>
        <ext:Toolbar ID="Toolbar1" runat="server" Cls="LTR">
            <Items>
                <ext:Button ID="ButtonNew" runat="server" Text=" New " Icon="Add">
                    <DirectEvents>
                        <Click OnEvent="ShowNewWindow">
                            <EventMask ShowMask="true"></EventMask>
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button ID="ButtonEdit" runat="server" Text="Edit " Icon="ApplicationEdit">
                    <DirectEvents>
                        <Click OnEvent="ShowWindowEditRole">
                            <EventMask ShowMask="true"></EventMask>
                            <ExtraParams>
                                <ext:Parameter Name="id" Value="#{GridPanelRoles}.getSelectionModel().getSelected().data.RoleId"
                                    Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
                <ext:Button ID="ButtonDelete" runat="server" Text=" Delete " Icon="Delete">
                    <DirectEvents>
                        <Click OnEvent="DeleteRole">
                            <EventMask ShowMask="true"></EventMask>
                            <Confirmation ConfirmRequest="true" Title="" Message="Are u sure ?" />
                            <ExtraParams>
                                <ext:Parameter Name="id" Value="#{GridPanelRoles}.getSelectionModel().getSelected().data.RoleId"
                                    Mode="Raw" />
                            </ExtraParams>
                        </Click>
                    </DirectEvents>
                </ext:Button>
            </Items>
        </ext:Toolbar>
    </TopBar>
    <ColumnModel runat="server">
        <Columns>
            <ext:RowNumbererColumn />
            <ext:Column DataIndex="RoleId" Hidden="true" />
            <ext:Column ColumnID="Name" Header="Title" DataIndex="RoleName" Align="Right" />
        </Columns>
    </ColumnModel>
    <SelectionModel>
        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true" />
    </SelectionModel>
    <DirectEvents>
        <Command OnEvent="Command">
            <ExtraParams>
                <ext:Parameter Name="id" Value="record.data.RoleId" Mode="Raw" />
                <ext:Parameter Name="command" Value="command" Mode="Raw" />
            </ExtraParams>
        </Command>
    </DirectEvents>
    <BottomBar>
        <ext:PagingToolbar ID="PagingToolBar1" runat="server" PageSize="10" StoreID="StoreRoles"
            StyleSpec="direction:ltr;" DisplayInfo="false" HideRefresh="true">
        </ext:PagingToolbar>
    </BottomBar>
</ext:GridPanel>

Whenever I add or remove or edit a row with TopBar's command , the data added to database but teh GridPanel's data weren't change , and I have to refresh page to see new changes in the GridPanel.

I bind data to GridPanel with the following function :

void BindRolesData()
{
    StoreRoles.DataSource = "";

    KMSServiceClient ktsw = new KMSServiceClient();
    var roles = ktsw.GetAllRoles();

    List<Roles> roleList = roles.Select(role => new Roles { RoleId = role.Id, RoleName = role.Name }).ToList();

    StoreRoles.DataSource = roleList;
    StoreRoles.DataBind();
}

What's wrong with it and how I can fix it ?

[Mohammad]

My priblem solved by adding below line to the Page_Load fundtion :

if (!IsPostBack)
    BindRolesData();