Montag, 15. November 2010

Focus row in grouped Ext.Net GridPanel with DirectMethod Success Handler after new data binding

This Blog moved to http://webapps-in-action.com/

When you use the Grid Panel with a GroupField, the final grouping in the grid is made
by the ExtJS Client. Problem: Custom pre-sorting of your datasource doesn't matter any more.

If you bind now new data and want to focus the new added
record in the grid afterwards, you can either predict the row number (a bit difficult) or use another good
approach: The DirectMetods Success Handler.

In this Example a button fires a DirectMethod with a string parameter.
The called DirectMethod appends data to a session variable and updates the binding of the grid.
Finally the Method returns the new id to the defined success handler. The handler now checks
the grid/store for the id to set the focus.

ASPX
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Tests._Default" %>

<%@ Import Namespace="System.Collections.Generic" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    private List<object> MyData = new List<object>()
    {
        new { id="id1", group = "group1", test="test1" },
        new { id="id2", group = "group1", test="test2" },
        new { id="id3", group = "group1", test="test3" },
        new { id="id4", group = "group2", test="test1" },
        new { id="id5", group = "group2", test="test2" },
        new { id="id6", group = "group2", test="test3" },
    };

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = MyData;
            store.DataBind();
            this.Session["MyData"] = MyData;
        }
    }

    [DirectMethod(Namespace = "MyNamespace")]
    public string DataBindAndSelect(string message)
    {
        var myData = this.Session["MyData"] as List<object>;

        myData.Add(new { id = "id0", group = "group0", test = "test0" });

        Store store = this.GridPanel1.GetStore();
        store.DataSource = myData;
        store.DataBind();
        this.Session["MyData"] = myData;

        X.Msg.Notify("AjaxAction", message).Show();
        return "id0";
    }
</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 id="Head1" runat="server">
    <title>Ext.Net Example</title>
</head>
<body>
    <form id="Form1" runat="server">
    <ext:ResourceManager runat="server" />
    <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
        <Store>
            <ext:Store runat="server" GroupField="group">
                <Reader>
                    <ext:JsonReader IDProperty="id">
                        <Fields>
                            <ext:RecordField Name="id" />
                            <ext:RecordField Name="group" />
                            <ext:RecordField Name="test" />
                        </Fields>
                    </ext:JsonReader>
                </Reader>
            </ext:Store>
        </Store>
        <columnmodel runat="server">
            <Columns>
                <ext:Column Header="ID" DataIndex="id" />
                <ext:Column Header="Group" DataIndex="group" />
                <ext:Column Header="Test" DataIndex="test" />
            </Columns>
        </columnmodel>
        <SelectionModel>
            <ext:RowSelectionModel runat="server" SingleSelect="true" />
        </SelectionModel>
        <View>
            <ext:GroupingView runat="server" HideGroupedColumn="true" />
        </View>
    </ext:GridPanel>
    <ext:Button runat="server" Text="DataBind and Select">
        <Listeners>
            <click handler="MyNamespace.DataBindAndSelect('Added new data to Session', {
                success: function(id) {
                    var index = GridPanel1.getStore().indexOfId(id);
                    GridPanel1.getSelectionModel().selectRow(index);
                    GridPanel1.getView().focusRow(index);  
                }
            });" />
        </Listeners>
    </ext:Button>
    </form>
</body>
</html>

Keine Kommentare:

Kommentar veröffentlichen