[CLOSED] How can I dynamically add grid filters in code behind?

[drizzie]

I need to add grid filters to my grid dynamically. How can I do this?

[Vladimir]

Hi

I am afraid that grid doesn't support it, if you want to add filters dynamically then you have to rerender the grid

[drizzie]

Is this supported directly in ExtJs? Do you know the corresponding javascript that could get this done?

[Vladimir]

You need to create a grid and render it
Please see the following sample
https://examples1.ext.net/#/XRender/Basic/New_Window/

[drizzie]

How can I force a grid that is rendered, to rerender then. After adding these filters? Can you give me an example of adding the filters and then rendering re-rendering a grid?

[Daniil]

Actually, the example that Vladimir has mentioned demonstrates it.

win.Render(this.Form);

That code line renders (or re-renders if the Window with the same id already exists on client) the Window.

So, you should do with a GridPanel the same thing. Add filters and call .Render().

[drizzie]

Okay here is what I have. I am getting the error

Failed to load viewstate. The control tree into which viewstate is being loaded must match the control tree that was used to save viewstate during the previous request. For example, when adding controls dynamically, the controls added during a post-back must match the type and position of the controls added during the initial request.

Can you help me resolve this so my grid will render when I click a button that calls Build().

In a user control:

<ext:Store 
    ID="ResultStore" 
    runat="server"
    AutoLoad="false"
    OnRefreshData="ResultGrid_RefreshData"
    SerializationMode="Complex"
    RemotePaging="true"
    RemoteSort="true">
    <Proxy>
        <ext:PageProxy />
    </Proxy>
    <Reader>
        <ext:JsonReader IDProperty="Result">
            <Fields>
            </Fields>
        </ext:JsonReader>
    </Reader>
</ext:Store>

<ext:PagingToolbar ID="ResultPager" PageSize="0" runat="server" HideRefresh="true" />

<ext:StatusBar ID="ResultStatus" runat="server" Hidden="true" />



<ext:FitLayout ID="fitLayout" runat="server">
    <Items>
        <ext:Panel id="pan" runat="server" Border="false">

        </ext:Panel>

            </Items>
</ext:FitLayout>

Code behind:

Private _grid As GridPanel
    Public Overrides ReadOnly Property Grid As Ext.Net.v1.GridPanel
        Get
            Return _grid
        End Get
    End Property

Protected Sub ResetStore()
        ' Clear fields from the store
        If Ext.Net.v1.X.IsAjaxRequest Then Store.RemoveFields()

        ' Add default fields
        Store.AddField(New RecordField("Result"))
        Store.AddField(New RecordField("ResultIcon"))
        Store.AddField(New RecordField("Description"))
        Store.AddField(New RecordField("HasNotes"))
        Store.AddField(New RecordField("HasTags"))
        Store.AddField(New RecordField("HasSummary"))
        Store.AddField(New RecordField("HasDetails"))
        Store.AddField(New RecordField("HasPopup"))
        Store.AddField(New RecordField("HasRelations"))
        Store.AddField(New RecordField("HasFavorites"))
    End Sub

Protected Sub AddDefaultColumns()
        Dim column = New Column
        With column
            .DataIndex = "ResultIcon"
            .Align = Alignment.Center
            .Fixed = True
            .Width = New Unit(30)
            .MenuDisabled = True
            .Header = "Type"
            .Tooltip = "Type"
            .Renderer.Fn = "renderResultIcon"
        End With
        Grid.ColumnModel.Columns.Add(column)

        column = New Column
        With column
            .DataIndex = "Description"
            .ColumnID = "Description"
            .Width = New Unit(100)
            .Header = "Description"
            .PrepareCommands.Fn = "prepareDataMiningCommands"
        End With
        Grid.ColumnModel.Columns.Add(column)
    End Sub

Protected Sub BuildGrid()
        ' Add default columns
        AddDefaultColumns()

        'Grid.StoreID = Store.ClientID
        Grid.TopBar.Add(Status)
        Grid.BottomBar.Add(Pager)
        Grid.StoreID = Store.ClientID

        ' Build the selection model
        Dim selmodel = New CheckboxSelectionModel()
        With selmodel
            .IgnoreTargets = {"a"}
            .HideCheckAll = True
            .Listeners.RowDeselect.Fn = "onResultGridRowDeselect"
            .Listeners.RowSelect.Fn = "onResultGridRowSelect"
        End With
        Grid.SelectionModel.Add(selmodel)

        ' Build the view
        Dim view As New Ext.Net.v1.GridView
        With view
            .EmptyText = "There are no results to display"
            .GetRowClass.Handler = "return record.id == this.selected_id ? 'selected' : '';"
        End With
        Grid.View.Add(view)

        ' Default AutoExpand column
        Grid.AutoExpandColumn = "Description"

        ' Prepare commands
        Dim descColumn As Column = Grid.ColumnModel.Columns.Single(Function(col) col.ColumnID = "Description")
        descColumn.PrepareCommands.Fn = "prepareDataMiningCommands"
    End Sub

Public Sub Build()
        _grid = New GridPanel With {.ID = "ResultGrid"}
        ResetStore()
        BuildGrid()

        ' Force the store to reconfigure
        Store.ClearMeta()
        Grid.Render(pan)
        pan.DoLayout()
    End Sub

[drizzie]

Actually, disable the viewstate fixed the issue...I think I've got it working now. Thanks for your assistance.

[drizzie]

Acutally, I need the viewstate. How can I get this to work with the viewstate?

[Daniil]

Acutally, I need the viewstate.

Could you, please, clarify why? We (and many others) recommend not to use it at all.

How can I get this to work with the viewstate?

Well, the Exception message tells where you should look to...