[ASP] DataGrid: pager bepaald breedte van eerste kolom*

[jandirks]

Ik heb een datagrid met daarbij de standaard numerieke pager. In de eerste kolom van de datagrid wordt een plaatje getoond dat 60 pixels breed is. De kolom is in werkelijkheid breder doordat hij de breedte van de pager (meer dan 10 pagina's) overneemt.

Ik heb al geprobeerd om in het e.item.cells.item(0) de columnspan of de width te zetten, maar zonder het gewenste resultaat.

Bijgaande afbeelding laat zien wat er gebeurd. Merk op dat de 1e kolom even breed is als de paging.



Dit is de datagrid definitie:

ASP:

<asp:DataGrid id="dtgSwarms"
           Cellpadding="5"
           Cellspacing="2"
           Gridlines="None"
           AllowPaging="True"
           runat="server" Width="640px" Font-Bold="False" 
           Font-Italic="False" Font-Overline="False" Font-Strikeout="False" 
           Font-Underline="False" >
           <PagerStyle Height="35px"
                       Width="70px"
                       HorizontalAlign="NotSet" 
                       VerticalAlign="Middle"
                       Font-Size="11"
                       Font-Bold="True"
                       Position="TopAndBottom"
                       Mode="NumericPages"
                       CssClass="postnavigation2" />
    </asp:DataGrid>

En op deze manier(en) heb ik geprobeerd de 1e kolom op 70 posities te krijgen:

code:

    Protected Sub dtgSwarms_ItemCreated(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) Handles dtgSwarms.ItemCreated
        If e.Item.ItemType = ListItemType.Pager Then
            'e.Item.Cells.Item(0).Width = 70
            'e.Item.Cells.Item(0).columnSpan = 4
        End If

    End Sub

Edit hieronder

Hier nog een afbeelding van hoe het er uit ziet als ik AllowPaging op 'False' zet (breedte 1e kolom ongeveer even breed als afbeelding).

[ Voor 61% gewijzigd door BtM909 op 09-05-2011 18:00 ]

[PdeBie]

je zou d.m.v. CSS de <th> tag kunnen stylen.

[MueR]

pdebie schreef op maandag 09 mei 2011 @ 16:29:
je zou d.m.v. CSS de <th> tag kunnen stylen.

Je kan met CSS stylen wat je wil, maar schijnbaar staat die pager in dezelfde tabel, binnen dezelfde kolom. Als jij instelt dat die kolom 60px breed moet zijn, maar de content is breder, gaat dat ofwel stretchen, ofwel collapsen. Zorg liever dat die pager buiten de tabel, of in een cel met colspan staat.

[PdeBie]

MueR schreef op maandag 09 mei 2011 @ 16:35:
[...]

Je kan met CSS stylen wat je wil, maar schijnbaar staat die pager in dezelfde tabel, binnen dezelfde kolom. Als jij instelt dat die kolom 60px breed moet zijn, maar de content is breder, gaat dat ofwel stretchen, ofwel collapsen. Zorg liever dat die pager buiten de tabel, of in een cel met colspan staat.

mja, het zou handig zijn als jandirks de gegenereerde html hier post. Dan kunnen we zien waar er mis gaat.

[jandirks]

Ik weet niet of het mogelijk is om de pager buiten de datagrid te halen. Ik heb de colspan geprobeerd, maar die komt niet in de html mee. Misschien doe ik het fout hoor (zie post 1)

Dit is de gegenereerde html, ik heb er wel een paar regels uitgehaald!

HTML:

<div id="divDatagrid">
    <table cellspacing="2" cellpadding="5" border="0" id="ctl00_cphBody_dtgSwarms" style="font-weight:normal;font-style:normal;text-decoration:none;width:640px;">
    <tr class="postnavigation2" valign="middle" style="font-size:11pt;font-weight:bold;height:35px;width:70px;">
        <td><span>1</span>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl01','')">2</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl02','')">3</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl03','')">4</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl04','')">5</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl05','')">6</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl06','')">7</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl07','')">8</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl08','')">9</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl09','')">10</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl01$ctl10','')">...</a></td>

    </tr><tr valign="top" style="height:35px;BACKGROUND-IMAGE:url(http://hk.rc-international.info/images/table-row-heading.jpg);background-repeat:no-repeat;">
        <td style="width:70px;"><h2>Image</h2></td><td style="width:230px;"><h2>&nbsp Item description</h2></td><td style="width:80px;"><h2>Buddy name</h2></td><td style="width:80px;"><h2>Until</h2></td><td style="width:50px;"><h2>Buddy<br />Price</h2></td><td style="width:70px;"><h2>Normal<br />Price +/-</h2></td>
    </tr><tr style="height:65px;BACKGROUND-IMAGE:url(http://hk.rc-international.info/images/table-row-middle.jpg);background-repeat:no-repeat;">
        <td align="left" valign="top" style="width:70px;"><img src="http://www.hobbyking.com/hobbyking/store/catalog/110BS-985.gif" height="60px" width="69px"></td><td align="left" valign="middle" style="width:230px;"><span class="navigation_swarm"><a href=buddy/spur-gear-110bs-2322 target=_blank onMouseOver="Show_Image('http://www.hobbyking.com/hobbyking/store/catalog/110BS-985.gif')" onMouseOut="Hide_Image('http://www.hobbyking.com/hobbyking/store/catalog/110BS-985.gif')">Spur Gear - 110BS</a></span></td><td align="left" valign="middle" style="width:80px;"><span class="navigation_swarm">tkostik&nbsp</span></td><td align="right" valign="middle" style="width:80px;"><span class="navigation_swarm">23-05-2011</span></td><td align="right" valign="middle" style="width:50px;"><span class="navigation_swarm">0,61</span></td><td style="width:70px;"><span class="navigation_swarm">0,85</span></td>

    </tr><tr style="height:65px;BACKGROUND-IMAGE:url(http://hk.rc-international.info/images/table-row-middle.jpg);background-repeat:no-repeat;">
        <td align="left" valign="top" style="width:70px;"><img src="http://www.hobbyking.com/hobbyking/store/catalog/110BS-101.gif" height="60px" width="69px"></td><td align="left" valign="middle" style="width:230px;"><span class="navigation_swarm"><a href=buddy/front-upper-lower-susarm-holder-110bs-2321 target=_blank onMouseOver="Show_Image('http://www.hobbyking.com/hobbyking/store/catalog/110BS-101.gif')" onMouseOut="Hide_Image('http://www.hobbyking.com/hobbyking/store/catalog/110BS-101.gif')">Front Upper/Lower Sus.arm Holder - 110BS</a></span></td><td align="left" valign="middle" style="width:80px;"><span class="navigation_swarm">tkostik&nbsp</span></td><td align="right" valign="middle" style="width:80px;"><span class="navigation_swarm">23-05-2011</span></td><td align="right" valign="middle" style="width:50px;"><span class="navigation_swarm">0,36</span></td><td style="width:70px;"><span class="navigation_swarm">0,51</span></td>
    </tr><tr style="height:65px;BACKGROUND-IMAGE:url(http://hk.rc-international.info/images/table-row-middle.jpg);background-repeat:no-repeat;">
        <td align="left" valign="top" style="width:70px;"><img src="http://www.hobbyking.com/hobbyking/store/catalog/DMDL-450FBL_t.jpg" height="60px" width="69px"></td><td align="left" valign="middle" style="width:230px;"><span class="navigation_swarm"><a href=buddy/high-quality-fbl-flybarless-head-for-t-rex-and-hk450-heli-2320 target=_blank onMouseOver="Show_Image('http://www.hobbyking.com/hobbyking/store/catalog/DMDL-450FBL.jpg')" onMouseOut="Hide_Image('http://www.hobbyking.com/hobbyking/store/catalog/DMDL-450FBL.jpg')">High-Quality FBL Flybarless Head for T-Rex and HK450 heli.</a></span></td><td align="left" valign="middle" style="width:80px;"><span class="navigation_swarm">tkostik&nbsp</span></td><td align="right" valign="middle" style="width:80px;"><span class="navigation_swarm">23-05-2011</span></td><td align="right" valign="middle" style="width:50px;"><span class="navigation_swarm">12,56</span></td><td style="width:70px;"><span class="navigation_swarm">14,95</span></td>

    </tr><tr style="height:65px;BACKGROUND-IMAGE:url(http://hk.rc-international.info/images/table-row-middle.jpg);background-repeat:no-repeat;">
        <td align="left" valign="top" style="width:70px;"><img src="http://www.hobbyking.com/hobbyking/store/catalog/TR2217_t.jpg" height="60px" width="69px"></td><td align="left" valign="middle" style="width:230px;"><span class="navigation_swarm"><a href=buddy/turnigy-2217-20turn-860kv-22a-outrunner-2299 target=_blank onMouseOver="Show_Image('http://www.hobbyking.com/hobbyking/store/catalog/TR2217.jpg')" onMouseOut="Hide_Image('http://www.hobbyking.com/hobbyking/store/catalog/TR2217.jpg')">Turnigy 2217 20turn 860kv 22A Outrunner</a></span></td><td align="left" valign="middle" style="width:80px;"><span class="navigation_swarm">dronebuilder&nbsp</span></td><td align="right" valign="middle" style="width:80px;"><span class="navigation_swarm">23-05-2011</span></td><td align="right" valign="middle" style="width:50px;"><span class="navigation_swarm">10,85</span></td><td style="width:70px;"><span class="navigation_swarm">13,72</span></td>
    </tr><tr class="postnavigation2" valign="middle" style="font-size:11pt;font-weight:bold;height:35px;width:70px;">
        <td><span>1</span>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl01','')">2</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl02','')">3</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl03','')">4</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl04','')">5</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl05','')">6</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl06','')">7</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl07','')">8</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl08','')">9</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl09','')">10</a>&nbsp;<a href="javascript:__doPostBack('ctl00$cphBody$dtgSwarms$ctl24$ctl10','')">...</a></td>

    </tr>
</table>
</div>

[ Voor 0% gewijzigd door BtM909 op 09-05-2011 17:59 ]

[BtM909]

Tja, je was er al achter gekomen dat je pager in een tabelcel is. Mooiste is om die erbuiten te laten renderen of als laatste redmiddel een colspan te gebruiken. Wat heb je zelf geprobeerd om het probleem op te lossen?

[jandirks]

BtM909 schreef op maandag 09 mei 2011 @ 17:59:
Tja, je was er al achter gekomen dat je pager in een tabelcel is. Mooiste is om die erbuiten te laten renderen of als laatste redmiddel een colspan te gebruiken. Wat heb je zelf geprobeerd om het probleem op te lossen?

Is het mogelijk om een pager cell buiten de tabel te renderen dan? Nooit eerder gezien, zou wel de oplossing zijn..

Wat ik zelf heb geprobeerd? Staat al in eerste post, maar onder andere geprobeerd de colspan (columnspan) voor de betreffende cell te zetten (3 columns), maar die vind je niet terug in de gegenereerd html

[jandirks]

Nog een stukje code die geen soelaas biedt:

code:

    Protected Sub dtgSwarms_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dtgSwarms.PreRender
        Dim tb As Table = dtgSwarms.Controls(0)
        Dim pagerRow As TableRow = tb.Rows(tb.Rows.Count - 1)  'last row in the table is for bottom pager
        pagerRow.Cells(0).Attributes.Add("colspan", tb.Rows(1).Cells.Count.ToString())
    End Sub

[jandirks]

Het lijkt er op dat ik de oplossing gevonden heb. Voor het nageslacht, hieronder de code:

code:

    Protected Sub dtgSwarms_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles dtgSwarms.PreRender
        Try
            Dim dgSidDetails As DataGrid = sender

            'If (dgSidDetails.AllowPaging = True And dgSidDetails.AutoGenerateColumns = False) Then
            If dgSidDetails.AllowPaging = True Then
                Dim tab As System.Web.UI.WebControls.Table = dgSidDetails.Controls(0)


                If dgSidDetails.PagerStyle.Position = PagerPosition.Bottom Or dgSidDetails.PagerStyle.Position = PagerPosition.TopAndBottom Then
                    tab.Rows(tab.Rows.Count - 1).Cells(0).Attributes.Add("colspan", tab.Rows(1).Cells.Count.ToString)
                End If

                If dgSidDetails.PagerStyle.Position = PagerPosition.Top Or dgSidDetails.PagerStyle.Position = PagerPosition.TopAndBottom Then
                    tab.Rows(0).Cells(0).Attributes.Add("colspan", tab.Rows(1).Cells.Count.ToString)
                End If
            End If

        Catch ex As Exception

        End Try

    End Sub