What's New?

[CLOSED] Remember grid view settings for the user

Page 1 of 2 12 LastLast
  1. #1
    Aug 03, 2013, 10:59 AM

    [CLOSED] Remember grid view settings for the user

    I want to store these setting in database when any one applying filters or sorting

    Order of coloumns
    Sorting of coloumns
    Grouping of coloumns
    Any filters applied to the columns

    When a user changes the layout of the grids, eg. changes the coloumn order, or the sorting order, these settings will be stored in database and when he open later the grid, that settings should be applied

    Thanks
    Last edited by Daniil; Sep 03, 2013 at 4:39 AM. Reason: [CLOSED]
  2. #2
    Aug 05, 2013, 6:08 AM
    Hi @jesperhp,

    Please listen to respective events of a Store and a GridPanel. For example, a Store's DataChanged one. It is being triggered on sorting and filtering. Make a request to server via a DirectEvent, retrieve all the information about a GridPanel and send as an extra parameter.
  3. #3
    Aug 07, 2013, 5:51 AM
    Please can you provide sample or an example related to this issue which can help me for better understanding
  4. #4
    Aug 07, 2013, 1:22 PM
    This examples should help to understand better what I meant.

    Example
    <%@ Page Language="C#" %>
 
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>

<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!X.IsAjaxRequest)
        {
            Store store = this.GridPanel1.GetStore();
            store.DataSource = new object[] 
            { 
                new object[] { "test1", "test2", "test3" },
                new object[] { "test4", "test5", "test6" },
                new object[] { "test7", "test8", "test9" },
            };
            store.DataBind();
        }
    }

    protected void Save(object sender, DirectEventArgs e)
    {
        this.Session["ColumnsOrder"] = JSON.Deserialize<string[]>(e.ExtraParams["columnsOrder"]); // save to database
    }

    protected void Restore(object sender, DirectEventArgs e)
    {
        if (this.Session["ColumnsOrder"] != null)
        {
            string[] columnsOrder = this.Session["ColumnsOrder"] as string[]; // restore on initial load in Page_Load
            X.Msg.Alert("Restored", columnsOrder.Length).Show(); // just to demonstrate
        }
    }
</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 runat="server">
    <title>Ext.NET Example</title>

    <script type="text/javascript">
        var getColumnOrder = function (grid) {
            var cols = grid.getColumnModel().columns,
                order = [],
                i;
    
            for (i = 0; i < cols.length; i++) {
                order.push(cols[i].dataIndex);
            }

            return order;
        };
    </script>
</head>
<body>
    <form runat="server">
        <ext:ResourceManager runat="server" />
        <ext:GridPanel ID="GridPanel1" runat="server" AutoHeight="true">
            <Store>
                <ext:Store runat="server">
                    <Reader>
                        <ext:ArrayReader>
                            <Fields>
                                <ext:RecordField Name="test1" />
                                <ext:RecordField Name="test2" />
                                <ext:RecordField Name="test3" />
                            </Fields>
                        </ext:ArrayReader>
                    </Reader>
                </ext:Store>
            </Store>
            <ColumnModel runat="server">
                <Columns>
                    <ext:Column Header="Test1" DataIndex="test1" />
                    <ext:Column Header="Test2" DataIndex="test2" />
                    <ext:Column Header="Test3" DataIndex="test3" />
                </Columns>
            </ColumnModel>
        </ext:GridPanel>

        <ext:Button runat="server" Text="Save columns order">
            <DirectEvents>
                <Click OnEvent="Save">
                    <ExtraParams>
                        <ext:Parameter Name="columnsOrder" Value="getColumnOrder(GridPanel1)" Mode="Raw" Encode="true" />
                    </ExtraParams>
                </Click>
            </DirectEvents>
        </ext:Button>

        <ext:Button runat="server" Text="Restore columns order" OnDirectClick="Restore" />
    </form>
</body>
</html>
  5. #5
    Aug 16, 2013, 2:04 PM
    I could not use [CODE] tags in my code
    Last edited by jesperhp; Aug 16, 2013 at 2:11 PM.
  6. #6
    Aug 19, 2013, 1:26 PM
    That is my store 
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<script runat="server">
    protected override void OnInit(EventArgs e)
    {
        this.Store_Request.ID = this.ID + "_store";
        base.OnInit(e);
    }
    public string Url
    {
        get
        {
            return (this.Store_Request.Proxy.Proxy as HttpProxy).Url;
        }
        set
        {
            (this.Store_Request.Proxy.Proxy as HttpProxy).Url = value;
        }
    }
    public int UserId
    {
        get
        {
            if (this.Store_Request.BaseParams["UserId"] != null)
            {
                return int.Parse(this.Store_Request.BaseParams.GetParameter("UserId").Value);
            }
            else
            {
                return -1;
            }
        }
        set
        {
            this.Store_Request.BaseParams.Add(new Ext.Net.Parameter("UserId", value.ToString()));
        }
    }
    public string storeId
    {
        get { return this.Store_Request.ID; }
    }
</script>
<%--runat="server" AutoDataBind="true" RemoteSort="true" GroupOnSort="true" GroupField="PriorityDesc" RemoteGroup="false"--%>
<ext:Store ID="Store_Request" runat="server" IDMode="Static" GroupOnSort="true" AutoLoad="true"
    RemoteSort="true" RemoteGroup="false" GroupField="PriorityDesc" AutoDataBind="true">
    <Proxy>
        <ext:HttpProxy Method="GET" />
    </Proxy>
    <Reader>
        <ext:JsonReader IDProperty="Id" Root="rows" TotalProperty="total">
            <Fields>
                <ext:RecordField Name="Id" Mapping="Id" />
                <ext:RecordField Name="Subject" Mapping="Subject" />
                <ext:RecordField Name="CategoryName" />
                <ext:RecordField Name="CategoryId" />
                <ext:RecordField Name="Category2Id" />
                <ext:RecordField Name="Category3Id" />
                <ext:RecordField Name="PriorityId" />
                <ext:RecordField Name="PriorityDesc" />
                <ext:RecordField Name="Estimated" />
                <ext:RecordField Name="DeadLine" Mapping="DeadLine" Type="Date" DateFormat="M$" />
                <ext:RecordField Name="ExpectedDate" Mapping="ExpectedDate" Type="Date" DateFormat="M$" />
                <ext:RecordField Name="Reminder" Mapping="Reminder" Type="Date" DateFormat="M$" />
                <ext:RecordField Name="Completed" Mapping="Completed" />
                <ext:RecordField Name="ILocation" Mapping="ILocation" />
                <ext:RecordField Name="ResponsibleId" Type="Int" />
                <ext:RecordField Name="ResponsibleName" Type="String" />
                <ext:RecordField Name="StatusId" Type="Int" />
                <ext:RecordField Name="StatusDescription" Type="String" />
                <ext:RecordField Name="unitId" Type="Int" />
                <ext:RecordField Name="unitName" Type="String" />
                <ext:RecordField Name="UserName" Type="String" />
                <ext:RecordField Name="UserId" Type="Int" />
                <ext:RecordField Name="projectName" Type="String" />
                <ext:RecordField Name="projectId" Type="Int" />
                <ext:RecordField Name="problem" Mapping="Problem" />
                <ext:RecordField Name="Solution" Mapping="Solution" />
                <ext:RecordField Name="Update" Mapping="Update" />
                <ext:RecordField Name="Delete" Mapping="Delete" />
                <ext:RecordField Name="Type" Mapping="Type" />
                <ext:RecordField Name="Status_updates_assigned" />
                <ext:RecordField Name="Status_updates_opened" />
                <ext:RecordField Name="Status_updates_updated" />
                <ext:RecordField Name="Status_updates_onHold" />
                <ext:RecordField Name="Status_updates_closed" />
                <ext:RecordField Name="CreatedDate" Mapping="CreatedDate" Type="Date" DateFormat="M$" />
            </Fields>
        </ext:JsonReader>
    </Reader>
    <Listeners>
        <DataChanged Handler="console.log(gridfilters.store.data.items);console.log(this.getCount());" />
    </Listeners>
    <BaseParams>
        <ext:Parameter Name="limit" Value="24" Mode="Raw" />
        <ext:Parameter Name="start" Value="0" Mode="Raw" />
        <ext:Parameter Name="dir" Value="ASC" />
        <ext:Parameter Name="sort" Value="Id" />
        <ext:Parameter Name="gridfilters" Value="" />
    </BaseParams>
</ext:Store>
    and that is my Grid 
    <%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<dynamic>" %>
<%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
<%@ Register Src="~/Views/HelpDeskCategories/HelpDeskCategoryDetail.ascx" TagPrefix="HD"
    TagName="Detail" %>
<%@ Register Src="../Shared/Controls_Store/Store_Request.ascx" TagName="Store_Request"
    TagPrefix="uc2" %>
<%@ Register Src="../Shared/menus/GeneralContextMenu.ascx" TagName="GeneralContextMenu"
    TagPrefix="uc2" %>
<%@ Register Src="~/Views/Shared/Controls_Store/Store_AdminSetting.ascx" TagName="Store_Setting"
    TagPrefix="ss" %>
<script runat="server">
    public enum RequestGridType
    {
        GeneralRequests,
        UserRequests
    }
    protected override void OnInit(EventArgs e)
    {
        if (this.Type == RequestGridType.GeneralRequests)
        {
            this.GeneralContextMenu1.AddButton = this.btnRequestAdd;
            this.GeneralContextMenu1.EditButton = this.btnRequestEdit;
            this.GeneralContextMenu1.DeleteButton = this.btnRequestDelete;
            this.GeneralContextMenu1.CloseButton = this.btnRequestClose;
        }
    }
    protected void Page_Load(object sender, EventArgs e)
    {
        this.Store_Request1.Url = this.storeUrl;
        this.GridPanel_Requests.StoreID = this.Store_Request1.storeId;
        if (this.Type == RequestGridType.GeneralRequests)
        {
            this.GridPanel_Requests.ResourceManager.Listeners.DocumentReady.Handler += "this." + this.GridPanel_Requests.ClientID + ".on('RowContextMenu',function(" + this.GridPanel_Requests.ClientID + ",rowIndex,e){Request.setIndex(" + this.GridPanel_Requests.ClientID + ",rowIndex);e.preventDefault();Request.showBtn(rowIndex,this);this.getSelectionModel().selectRow(rowIndex);#{" + GeneralContextMenu1.ContextMenuID.ToString() + "}.showAt(e.getXY());});";
            this.GridPanel_Requests.ColumnModel.Columns[6].Hidden = false;
            this.btnRequestAdd.Hidden = false;
            this.btnRequestDelete.Hidden = false;
        }
        else
        {
            this.GridPanel_Requests.ColumnModel.Columns[6].Hidden = true;
            this.btnRequestAdd.Hidden = true;
            this.btnRequestDelete.Hidden = true;
        }
    }


    public string storeUrl
    {
        get { return this.Store_Request1.Url; }
        set { this.Store_Request1.Url = value; }
    }
    public int UserId
    {
        get
        {
            return this.Store_Request1.UserId;
        }
        set
        {
            this.Store_Request1.UserId = value;
        }
    }
    public RequestGridType Type
    {
        get;
        set;
    }
</script>


<script type="text/javascript">
     
    Ext.applyIf(Request, {
        RequestDetailPanelId: function () {
            var j = '';
            j = '<%=this.div_Request_Detail.ClientID%>';
            var id = String(j);
            return id;
        },
        RequestGridId: function () {
            var j = '';
            j = '<%=this.GridPanel_Requests.ClientID%>';
            var id = String(j);
            return id;
        },
        getStatusId: function () {
            var GridId = Request.RequestGridId();
            var Grid = Ext.getCmp(GridId);
            var record = Request.getRecord(Grid);
            alert(record.data.StatusId);
            return record.data.StatusId;
        }
    });
     
</script>

<uc2:Store_Request ID="Store_Request1" runat="server" />
<uc2:GeneralContextMenu ID="GeneralContextMenu1" runat="server" />

<ext:Viewport ID="RequestActiviesGridViewPort" runat="server" Layout="Fit">
    <Items>
        <ext:Panel ID="PanelContent" runat="server" Layout="Fit" Region="Center">
            <Items>
                <ext:GridPanel ID="GridPanel_Requests" runat="server" IDMode="Explicit">
                    <TopBar>
                        <ext:Toolbar ID="Toolbar1" runat="server" IDMode="Client">
                            <Items>
                                 
                            </Items>
                        </ext:Toolbar>
                    </TopBar>
                    <ColumnModel ID="ColumnModel1" runat="server">
                        <Columns>
                            <ext:Column ColumnID="col_RequestID" DataIndex="Id" Header="ID" Groupable="false"
                                Width="50px">
                            </ext:Column>
                            <ext:Column ColumnID="col_Subject" DataIndex="Subject" Header="Subject" Width="200px"
                                Groupable="false">
                            </ext:Column>
                            <ext:Column ColumnID="col_Responsible" Groupable="true" DataIndex="ResponsibleName"
                                Header="Responsible" Width="150px">
                            </ext:Column>
                            <ext:Column ColumnID="col_User" DataIndex="UserName" Header="User" Width="150px">
                            </ext:Column>
                            <ext:Column ColumnID="col_Priority" DataIndex="PriorityDesc" Header="Priority" Width="100px">
                            </ext:Column>
                            <ext:Column ColumnID="col_Category" DataIndex="CategoryName" Header="Category" Width="100px">
                            </ext:Column>
                            <ext:Column ColumnID="col_Status" DataIndex="StatusDescription" Header="Status" Width="100px">
                            </ext:Column>
                            <ext:DateColumn ColumnID="col_CreateDate" DataIndex="CreatedDate" Header="CreatedDate"
                                Width="100px">
                            </ext:DateColumn>
                            <ext:DateColumn ColumnID="col_ExpectedDate" DataIndex="ExpectedDate" Header="ExpectedDate"
                                Width="100px">
                            </ext:DateColumn>
                            <ext:DateColumn ColumnID="col_DeadLineDate" DataIndex="DeadLine" Header="DeadLine"
                                Width="100px">
                            </ext:DateColumn>
                            <ext:DateColumn ColumnID="col_ReminderDate" DataIndex="Reminder" Header="ReminderDate"
                                Width="100px">
                            </ext:DateColumn>
                            <ext:Column ColumnID="col_Completed" DataIndex="Completed" Header="Completed %" Width="100px">
                            </ext:Column>
                            <ext:Column ColumnID="col_Project" DataIndex="projectName" Header="Project" Width="100px">
                            </ext:Column>
                            <ext:Column ColumnID="col_Units" DataIndex="unitName" Header="Unit" Width="100px">
                            </ext:Column>
                            <ext:CommandColumn ColumnID="col_Command" Width="25" Hideable="false">
                                <Commands>
                                    <ext:GridCommand CommandName="edit" Icon="ApplicationFormEdit">
                                        <ToolTip Text="Edit" />
                                    </ext:GridCommand>
                                </Commands>
                                <PrepareToolbar Handler="toolbar.setVisible(!record.newRecord);" />
                            </ext:CommandColumn>
                        </Columns>
                    </ColumnModel>
                    <View>
                        <ext:GroupingView ID="GroupingView1" HideGroupedColumn="false" EnableGrouping="true"
                            runat="server" ForceFit="true" StartCollapsed="true" GroupTextTpl='<span id="ColorCode-{[values.rs[0].data.ColorCode]}"></span>{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
                            EnableRowBody="true">
                            <Listeners>
                                <Refresh Fn="setGroupStyle" />
                            </Listeners>
                            <GetRowClass Fn="getRowClass" />
                        </ext:GroupingView>
                    </View>
                    <SelectionModel>
                        <ext:RowSelectionModel ID="RowSelectionModel1" runat="server" SingleSelect="true">
                        </ext:RowSelectionModel>
                    </SelectionModel>
                    <BottomBar>
                        <ext:PagingToolbar ID="PagingToolbar1" runat="server" PageSize="24">
                        </ext:PagingToolbar>
                    </BottomBar>
                    <Listeners>
                        <RowDblClick Handler="Request.setIndex(this,rowIndex);#{btnRequestEdit}.fireEvent('click',#{btnEdit})" />
                        <Command Handler="Request.setIndex(this,rowIndex);#{btnRequestEdit}.fireEvent('click',#{btnEdit})" />
                    </Listeners>
                    <Plugins>
                        <ext:GridFilters ID="gridfilters" runat="server" Local="false">
                            <Filters>
                                <ext:NumericFilter DataIndex="Id" />
                                <ext:StringFilter DataIndex="Subject" />
                                <ext:StringFilter DataIndex="ResponsibleName">
                                </ext:StringFilter>
                                <ext:StringFilter DataIndex="UserName">
                                </ext:StringFilter>
                                <ext:ListFilter DataIndex="PriorityDesc" Options="ASAP,High,Normal,Low,Very Low">
                                </ext:ListFilter>
                                <ext:StringFilter DataIndex="CategoryName">
                                </ext:StringFilter>
                                <ext:StringFilter DataIndex="unitName">
                                </ext:StringFilter>
                                <ext:StringFilter DataIndex="projectName">
                                </ext:StringFilter>
                                <ext:StringFilter DataIndex="StatusDescription">
                                </ext:StringFilter>
                            </Filters>
                            <DirectEvents>
                            </DirectEvents>
                        </ext:GridFilters>
                    </Plugins>
                </ext:GridPanel>
            </Items>
        </ext:Panel>
    </Items>
</ext:Viewport>
    Last edited by jesperhp; Aug 19, 2013 at 1:31 PM.
  7. #7
    Aug 19, 2013, 1:34 PM
    So how to use direct event and then apply sorting, filtering and grouping of column because when I click to apply filter every time that Listeners is called 
     <Listeners>
        <DataChanged Handler="console.log(gridfilters.store.data.items);console.log(this.getCount());" />
 </Listeners>
  8. #8
    Aug 19, 2013, 5:53 PM
    Quote Originally Posted by jesperhp View Post
    So how to use direct event and then apply sorting, filtering and grouping of column because when I click to apply filter every time that Listeners is called 
     <Listeners>
        <DataChanged Handler="console.log(gridfilters.store.data.items);console.log(this.getCount());" />
 </Listeners>
    Sorry, I do not understand the question. Please elaborate.
  9. #9
    Aug 20, 2013, 3:22 AM
    When data load in GridPanel the listener of store called every time 
    <Listeners>
       <DataChanged Handler="console.log(gridfilters.store.data.items);console.log(this.getCount());" />
</Listeners>
    How to make a request to server via a DirectEvent, retrieve all the information about a GridPanel and send as an extra parameter???

    That was my question
  10. #10
    Aug 20, 2013, 5:12 AM
    Quote Originally Posted by jesperhp View Post
    When data load in GridPanel the listener of store called every time 
    <Listeners>
       <DataChanged Handler="console.log(gridfilters.store.data.items);console.log(this.getCount());" />
</Listeners>
    I think you should use Sucess property of your DirectEvent:

    <DirectEvents>
    <Load Success="alert('DirectEvent successfully executed');"></Load>
</DirectEvents>
    Quote Originally Posted by jesperhp View Post
    How to make a request to server via a DirectEvent, retrieve all the information about a GridPanel and send as an extra parameter???

    That was my question
    What information do you want to send as an extra parameter? Please, look at this sample: https://examples2.ext.net/#/Events/D...ts/WebService/
    Last edited by Daniil; Aug 20, 2013 at 7:16 AM.
Page 1 of 2 12 LastLast

Similar Threads

  1. [CLOSED] grid.view.refreshRow calls grid.view.refresh(false) - HUGE PERF ISSUE
    By jchau in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Mar 27, 2013, 6:07 AM
  2. [CLOSED] Remember User name and Password
    By vedagopal2004 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 12, 2011, 1:52 PM
  3. [CLOSED] Save Grid settings
    By Raynald_Fontaine in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Jul 19, 2010, 5:44 PM
  4. Saving control layout and settings to user profile
    By quasimidi in forum 1.x Help
    Replies: 1
    Last Post: Jul 01, 2010, 1:52 PM
  5. [CLOSED] Grid settings
    By Raynald_Fontaine in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Apr 14, 2010, 9:58 AM

Tags for this Thread

Posting Permissions