local paging using http proxy and partialview

[craig2005]

Is it possible to do local paging with a grid using an http proxy being loaded into a partial view.

Sort is broken too.

If there is an example of this, can you please post it?

Criteria:

- http proxy
- data grid
- partial view
- local paging

For some reason, my code below keeps trying to send the paging to the http proxy. I have that set to false.

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(Object sender, EventArgs e)
    {
        string group_id = Session["group_id"].ToString();

        //Ext.Net.ParameterCollection paramc = new Ext.Net.ParameterCollection();
        //paramc.Add(new Ext.Net.Parameter("group_id", group_id.ToString(), ParameterMode.Raw));
        //paramc.Add(new Ext.Net.Parameter("start", "0", ParameterMode.Raw));
        //paramc.Add(new Ext.Net.Parameter("limit", "20", ParameterMode.Raw));
        //storeMessageBoard.AutoLoadParams.AddRange(paramc);
        //HttpProxy proxy = new HttpProxy();
        //proxy.Url = "/Group/MessageBoardDataExt";
        //storeMessageBoard.Proxy.Add(proxy);
        //storeMessageBoard.RemotePaging = false;
        
        storeMessageBoard.AutoLoadParams.Add(new Ext.Net.Parameter("group_id", group_id.ToString(), ParameterMode.Raw));
        storeMessageBoard.DataBind();
        
    }
</script>

    <style type="text/css">
        .x-grid3-td-topic b {
            font-family:tahoma, verdana;
            display:block;
        }
        .x-grid3-td-topic b i {
            font-weight:normal;
            font-style: normal;
            color:#000;
        }
        .x-grid3-td-topic .x-grid3-cell-inner {
            white-space:normal;
        }
        .x-grid3-td-topic a {
            color: #385F95;
            text-decoration:none;
        }
        .x-grid3-td-topic a:hover {
            text-decoration:underline;
        }
        
        .x-grid3-row-body p {
            margin:5px 5px 10px 5px !important;
        }
    </style>
   
    <script type="text/javascript">
        var template = function (value, metadata, record, rowIndex, colIndex, store) {
            return String.format('<b>{0}</b> - {1}', record.data.userName, record.data.sdate);
        };
    </script>

    
    <ext:Store runat="server" ID="storeMessageBoard" RemoteSort="false" RemotePaging="false">
        <Proxy>
            <ext:HttpProxy Url="/Group/MessageBoardDataExt" Method="POST" />
        </Proxy>
        <Reader>
            <ext:JsonReader Root="data" TotalProperty="totalCount" IDProperty="message_id">
                <Fields>
                    <ext:RecordField Name="message_id" />
                    <ext:RecordField Name="date" Type="Date" />
                    <ext:RecordField Name="sdate" />
                    <ext:RecordField Name="image" />
                    <ext:RecordField Name="post"  />
                    <ext:RecordField Name="userName" />
                </Fields>
            </ext:JsonReader>
        </Reader>
        <AutoLoadParams>
            <ext:Parameter Name="start" Value="0" Mode="Raw" />
            <ext:Parameter Name="limit" Value="20" Mode="Raw" />
        </AutoLoadParams>
        <SortInfo Field="date" Direction="DESC" />
    </ext:Store>
    
    <ext:GridPanel 
        ID="GridPanel1" 
        runat="server" 
        StoreID="storeMessageBoard" 
        Width="450" 
        Height="500" 
        DisableSelection="true" 
        Title="Group Message Board" 
        TrackMouseOver="false">
        <ColumnModel ID="ColumnModel1" runat="server">
		    <Columns>
                <ext:Column ColumnID="date" Header="Post" DataIndex="date" Width="430">
                    <Renderer Handler=" return String.format('<b>{0}</b> - {1}', record.data.userName, record.data.sdate);" />
                   <%-- <Renderer  Fn="template" />--%>
                </ext:Column>
            </Columns>
        </ColumnModel>
        <View>
            <ext:GridView ID="gvMessageBoard" ForceFit="true" EnableRowBody="true" runat="server">
                <GetRowClass Handler="rowParams.body = '<p>' + record.data.post + '</p>'; return 'x-grid3-row-expanded';" />
            </ext:GridView>
        </View>
        <LoadMask ShowMask="true" Msg="Loading Data..." />
        <BottomBar>
                <ext:PagingToolbar StoreID="storeMessageBoard" ID="pgMessageBoard"  runat="server" PageSize="20" />
        </BottomBar>
    </ext:GridPanel>

[craig2005]

any suggestions?

[Vladimir]

Hi,

Please see the following sample
https://examples1.ext.net/#/GridPane...h_Remote_Data/

[craig2005]

So your saying i can call the code below from a partialview? How do i do a page proxy from a partialview.

<script runat="server">
    protected void Store1_Refresh(object sender, StoreRefreshDataEventArgs e)
    {
        int start = int.Parse(e.Parameters["startRemote"]);
        int limit = int.Parse(e.Parameters["limitRemote"]);
        
        List<object> data = new List<object>(limit);
        
        for (int i = start; i < start + limit; i++)
        {
            data.Add(new {field = "Value" + (i + 1)});
        }

        e.Total = 8000;

        var store = this.GridPanel1.GetStore();
        store.DataSource = data;
        store.DataBind(); 
    }
</script>

[Vladimir]

Hi,

No, you cannot use PageProxy in the partial view. Just that sample shows structure, replace PageProxy by HttpProxy

[craig2005]

I had done all of that.

I took a closer look at that example and found the issue.

For anyone out there having issues, you need to use <BaseParams> and not <AutoLoadParams>

I guess <AutoLoadParams> ignores the RemotePaging = false and sends the request anyway which then breaks the store.

[Vladimir]

Hi,

Params should not take into account paging of store. If parameter is defined then it should be sent

sends the request anyway which then breaks the store.

How it breaks the store?

[craig2005]

maybe not the store, but it breaks the paging.

or maybe local paging on works with <BaseParams>. Without that, it bombs.

[Vladimir]

Hi,

maybe not the store, but it breaks the paging.

Please provide more details, i am not sure about what issue do you say

[craig2005]

It's fine, i fixed it. I was using AutoLoadParams and not BaseParams. This broke the paging. The code is posted above.