PDA

View Full Version : [CLOSED] Multilevel Grid Panel



iansriley
May 25, 2014, 9:53 AM
Hi,

We are trying to load a multi level dynamic grid. While adding the grids, the grids are not taking the layout width.
Can you tell us what setting we are missing?



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="InvReport.aspx.vb" Inherits="Report.InvReport" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>




<!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>Inventory Report</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim dict As New Dictionary(Of String, String)
dict.Add("level", 1)
dict.Add("recId", "r0")
dict.Add("gridId", "g0")

Me.BuildLevel(dict)
End If
End Sub

<DirectMethod()> _
Public Function BuildLevel(ByVal params As Dictionary(Of String, String)) As String
Dim level As String = params("level")
Dim recId As String = params("recId")
Dim gridId As String = params("gridId")
' build store
Dim store As New Store()
Dim model As New Model()


model.Fields.Add("ID", "Name", "Description")
Dim rf As New ModelField
rf.Name = "Level"
rf.Convert.Handler = "return " & (level) & ";"
model.Fields.Add(rf)
store.Model.Add(model)
store.CustomConfig.Add(New ConfigItem("level", level.ToString(), ParameterMode.Raw))


' bind store
Dim data As New List(Of Object)()

If level = 1 Then

Dim iCount As Integer = 1
data.Add(New With { _
.ID = ("_R") & (iCount), _
.Name = "1", _
.Level = level _
})


iCount = iCount + 1
ElseIf level = 2 Then

Dim iCount As Integer = 1
data.Add(New With { _
.ID = ("_R") & (iCount), _
.Name = "2", _
.Level = level _
})
iCount = iCount + 1

ElseIf level = 3 Then
data.Add(New With { _
.ID = ("_R") & (2), _
.Name = "3", _
.Description = "Test", _
.Level = level _
})
End If
Dim grid As New GridPanel() With { _
.HideHeaders = True
}
grid.Store.Add(store)
'build columns
grid.EnableColumnMove = False
grid.EnableColumnHide = False


Dim nameColumn As Column
If level < 3 Then
'for the issue/date period and the adsize/position summary


nameColumn = New Column() With { _
.DataIndex = "Name", _
.ID = "Name", _
.Flex = 1, _
.Text = "Name"
}
grid.ColumnModel.Columns.Add(nameColumn)



Else
'for the insertion details


nameColumn = New Column() With { _
.DataIndex = "Description", _
.ID = "Name", _
.Resizable = False, _
.Text = "Name", _
.Flex = 1
}
grid.ColumnModel.Columns.Add(nameColumn)



End If

grid.ResizableConfig = New Resizer With {.Handles = ResizeHandle.All}



If level < 3 Then
Dim re As New RowExpander With {.Loader = New ComponentLoader With {.Mode = LoadMode.Component, _
.DirectMethod = "#{DirectMethods}.BuildLevel"}
}
re.Loader.LoadMask.ShowMask = True
re.Loader.Params.Add(New Ext.Net.Parameter With {.Name = "level", .Value = "parseInt(this.record.data.Level) + 1", .Mode = ParameterMode.Raw})
re.Loader.Params.Add(New Ext.Net.Parameter With {.Name = "recId", .Value = "this.record.id", .Mode = ParameterMode.Raw})
re.Loader.Params.Add(New Ext.Net.Parameter With {.Name = "gridId", .Value = "this.expander.grid.id", .Mode = ParameterMode.Raw})

grid.Plugins.Add(re)


End If


store.DataSource = data
store.DataBind()



If level = 1 Then
'grid.ForceFit = True
grid.Height = 600
grid.Title = ""


dvResults.Controls.Add(grid)
'TODO:grid.Plugins.Add(New PanelResizer())
Else


grid.ForceFit = True
'grid.Height = IIf(30 * data.Count > 400, New Unit(400, UnitType.Pixel), New Unit(30 * data.Count, UnitType.Pixel))
'grid.Height = 200
grid.EnableColumnHide = False
Return ComponentLoader.ToConfig(grid)

End If
Return Nothing
End Function


</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
<div>
<ext:Window runat="server" Hidden="false" ID="WindowResults" Modal="true" HideBorders="true"
Closable="false" AutoScroll="true" BodyStyle="background-color: white;" Border="false"
Header="false" ButtonAlign="Center" Title="Search Criteria Summary Here" Height="400" Width="400" Layout="FitLayout">

<Content>
<ext:Panel ID="Panel1" runat="server" ButtonAlign="Center" Border="false" HideMode="Display" Height="400">
<Content>
<div runat="server" id="dvResults">
</div>
</Content>
<Buttons>
<ext:Button ID="Button2" runat="server" Text="New Search">
<Listeners>
<Click Handler="WindowResults.hide();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Panel>
</Content>
<Listeners>
<Show Handler="WindowResults.maximize();" />
</Listeners>
</ext:Window>
</div>
</form>
</body>
</html>

Daniil
May 26, 2014, 7:11 AM
Hi @iansriley,


While adding the grids, the grids are not taking the layout width.

I am not 100% sure what you mean. Please elaborate.

iansriley
May 27, 2014, 8:29 AM
1) The inner grids do not take the width of the main grid but is over the main grid width. So if we have a scroll bar for the inner grid, it is not visible. So we are not able to scroll through the inner grid data.

2) How can we automatically get the scroll enabled for the main grid when we expand the inner grids?

Hope I am clear.

Daniil
May 27, 2014, 6:39 PM
1) The inner grids do not take the width of the main grid but is over the main grid width. So if we have a scroll bar for the inner grid, it is not visible. So we are not able to scroll through the inner grid data.


Well, I can say that Ext.NET is not quite responsible for sizing where you use raw HTML like divs and put Ext.NET components into a div's Controls.

Just a few recommendations.

1. Use <Items> instead of <Content> where possible.

2. Remove the <div>.

3. Put a top level GridPanel into the Panel's Items.

4. Also you probably need to set Layout="FitLayout" for the Window and Panel.

Please feel free to post the updated test case if the original issue persists.

iansriley
May 28, 2014, 7:09 AM
We had initially tried only with Items instead of content. And also had directly added items to Panel instead of div.
Also tried FitLayout to both Windows and Panel still the same problem persists.

Daniil
May 28, 2014, 8:39 AM
Please review:

Please feel free to post the updated test case if the original issue persists.

iansriley
May 28, 2014, 1:28 PM
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="InvReport.aspx.vb" Inherits="Report.InvReport" %><%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>




<!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>Inventory Report</title>
<ext:ResourcePlaceHolder ID="ResourcePlaceHolder1" runat="server" Mode="Script" />
<script runat="server">
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim dict As New Dictionary(Of String, String)
dict.Add("level", 1)
dict.Add("recId", "r0")
dict.Add("gridId", "g0")

Me.BuildLevel(dict)
End If
End Sub

<DirectMethod()> _
Public Function BuildLevel(ByVal params As Dictionary(Of String, String)) As String
Dim level As String = params("level")
Dim recId As String = params("recId")
Dim gridId As String = params("gridId")
' build store
Dim store As New Store()
Dim model As New Model()


model.Fields.Add("ID", "Name", "Description")
Dim rf As New ModelField
rf.Name = "Level"
rf.Convert.Handler = "return " & (level) & ";"
model.Fields.Add(rf)
store.Model.Add(model)
store.CustomConfig.Add(New ConfigItem("level", level.ToString(), ParameterMode.Raw))


' bind store
Dim data As New List(Of Object)()

If level = 1 Then

Dim iCount As Integer = 1
data.Add(New With { _
.ID = ("_R") & (iCount), _
.Name = "1", _
.Level = level _
})


iCount = iCount + 1
ElseIf level = 2 Then

Dim iCount As Integer = 1
data.Add(New With { _
.ID = ("_R") & (iCount), _
.Name = "2", _
.Level = level _
})
iCount = iCount + 1

ElseIf level = 3 Then
data.Add(New With { _
.ID = ("_R") & (2), _
.Name = "3", _
.Description = "Test", _
.Level = level _
})
End If
Dim grid As New GridPanel() With { _
.HideHeaders = True
}
grid.Store.Add(store)
'build columns
grid.EnableColumnMove = False
grid.EnableColumnHide = False


Dim nameColumn As Column
If level < 3 Then
'for the issue/date period and the adsize/position summary


nameColumn = New Column() With { _
.DataIndex = "Name", _
.ID = "Name", _
.Flex = 1, _
.Text = "Name"
}
grid.ColumnModel.Columns.Add(nameColumn)



Else
'for the insertion details


nameColumn = New Column() With { _
.DataIndex = "Description", _
.ID = "Name", _
.Resizable = False, _
.Text = "Name", _
.Flex = 1
}
grid.ColumnModel.Columns.Add(nameColumn)



End If

grid.ResizableConfig = New Resizer With {.Handles = ResizeHandle.All}



If level < 3 Then
Dim re As New RowExpander With {.Loader = New ComponentLoader With {.Mode = LoadMode.Component, _
.DirectMethod = "#{DirectMethods}.BuildLevel"}
}
re.Loader.LoadMask.ShowMask = True
re.Loader.Params.Add(New Ext.Net.Parameter With {.Name = "level", .Value = "parseInt(this.record.data.Level) + 1", .Mode = ParameterMode.Raw})
re.Loader.Params.Add(New Ext.Net.Parameter With {.Name = "recId", .Value = "this.record.id", .Mode = ParameterMode.Raw})
re.Loader.Params.Add(New Ext.Net.Parameter With {.Name = "gridId", .Value = "this.expander.grid.id", .Mode = ParameterMode.Raw})

grid.Plugins.Add(re)


End If


store.DataSource = data
store.DataBind()



If level = 1 Then
'grid.ForceFit = True
grid.Height = 600
grid.Title = ""


Panel1.Items.Add(grid)
'TODO:grid.Plugins.Add(New PanelResizer())
Else


grid.ForceFit = True
'grid.Height = IIf(30 * data.Count > 400, New Unit(400, UnitType.Pixel), New Unit(30 * data.Count, UnitType.Pixel))
'grid.Height = 200
grid.EnableColumnHide = False
Return ComponentLoader.ToConfig(grid)

End If
Return Nothing
End Function


</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ResourceManager ID="ResourceManager1" runat="server" Namespace="" />
<div>
<ext:Window runat="server" Hidden="false" ID="WindowResults" Modal="true" HideBorders="true"
Closable="false" AutoScroll="true" BodyStyle="background-color: white;" Border="false"
Header="false" ButtonAlign="Center" Title="Search Criteria Summary Here" Height="400" Width="400" Layout="FitLayout">

<Content>
<ext:Panel ID="Panel1" runat="server" ButtonAlign="Center" Border="false" HideMode="Display" Height="400" Layout="FitLayout">

<Buttons>
<ext:Button ID="Button2" runat="server" Text="New Search">
<Listeners>
<Click Handler="WindowResults.hide();" />
</Listeners>
</ext:Button>
</Buttons>
</ext:Panel>
</Content>
<Listeners>
<Show Handler="WindowResults.maximize();" />
</Listeners>
</ext:Window>
</div>
</form>
</body>
</html>




Done.

Daniil
May 28, 2014, 4:17 PM
Please use

<%@ Page Language="vb" %>
instead of

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="InvReport.aspx.vb" Inherits="Report.InvReport" %>
if post examples on the forums.

Otherwise, we have to remove it manually. Well, not a bid deal to remove that one time, but it gets more frustrating if you run a hundred samples per day.

Also I still see <Content> in your example. Please follow our recommendations more carefully.

Anyway, the problem persists. I will investigate further.

Daniil
May 30, 2014, 8:01 AM
The problem is here

.ID = "Name", _

You render several Columns with same IDs. They must be unique.

Also I would recommend to set this for the RowExpander.

.ScrollOffset = 10