Jak pozbyć się pustego elementu div zawierającego GridView

Question

W ASP.NET Gridviews generuje tabelę, która generuje kontener rodzica div. Może to spowodować uszkodzenie układów CSS, ponieważ nie ma sposobu na dołączenie stylów do wygenerowanego elementu div. Czy istnieje sposób, aby zapobiec generowaniu elementu div lub sposobowi zastosowania stylu?

Zostało to zadane i oznaczone jako rozwiązane here, ale MS właśnie powiedział, że element div jest potrzebny do funkcji stronicowania i sortowania. Czy mam zrozumieć, że jeśli chcę korzystać z funkcji stronicowania i sortowania, nie mogę zawinąć mojego diva i zastosować stylu? Dzięki

Answer 1

Nigdy nie robiłem tego, ale moje pierwsze przypuszczenie byłoby można chwycić wyjściowy kod HTML tuż przed pobiera do przeglądarki, usunąć zewnętrzny div, a następnie htmltextwrite nowy renderowany html w zdarzeniu prerender lub utwórz użytkownika lub niestandardową kontrolę, aby to zrobić.

Ale wtedy ryzykujesz przerwaniem funkcjonalności widoku siatki, ale jeśli wiesz, że nie będziesz korzystać z funkcji, które używają div, możesz sobie z tym poradzić.

Answer 2

Możesz umieścić go wewnątrz asp: Panel i ustawić właściwość Visible na panelu na wartość false, jeśli tabela jest pusta.

Answer 3

Możesz zdefiniować jawny CssClass dla swoich Gridviews do użycia.

<asp:GridView ... CssClass="nameOfStyleClass" ... /> 

Następnie zdefiniować klasę CSS:

.nameOfStyleClass 
{ 
    < Style stuff > 
} 

Answer 4

W tym samym numerze, OMG, jest to , więc irytujące jest. Glitch w renderowaniu w IE6/7 podczas wpychania div do wierzchołka widoku siatki - macierzysty DIV powoduje spację między dwoma elementami.

ja wykutych w kodzie GridView przy użyciu reflektora i znaleźć problem:

Private Sub Render(ByVal writer As HtmlTextWriter, ByVal renderPanel As Boolean) 
    If (Not Me.Page Is Nothing) Then 
     Me.Page.VerifyRenderingInServerForm(Me) 
    End If 
    Me.PrepareControlHierarchy 
    If renderPanel Then 
     Dim clientID As String = Me.ClientID 
     If Me.DetermineRenderClientScript Then 
      If (clientID Is Nothing) Then 
       Throw New HttpException(SR.GetString("GridView_MustBeParented")) 
      End If 
      Dim builder As New StringBuilder("__gv", (clientID.Length + 9)) 
      builder.Append(clientID) 
      builder.Append("__div") 
      writer.AddAttribute(HtmlTextWriterAttribute.Id, builder.ToString, True) 
     End If 
     writer.RenderBeginTag(HtmlTextWriterTag.Div) 
    End If 
    Me.RenderContents(writer) 
    If renderPanel Then 
     writer.RenderEndTag 
    End If 
End Sub 

ten nazywany jest od render:

Protected Friend Overrides Sub Render(ByVal writer As HtmlTextWriter) 
    Me.Render(writer, Not MyBase.DesignMode) 
End Sub 

Więc nie == 'renderPanel' designMode. DIV służy do przywoływania i sortowania, gdy następnie przeglądanie siatki nie jest w UpdatePanel. Na mojej stronie, wszystkie GridViews są w UP Plus one dziedziczą z klasy zwyczaj gridview, więc moje rozwiązanie było nadpisać powyższą funkcję z następujących czynności:

Protected Overrides Sub Render(ByVal writer As System.Web.UI.HtmlTextWriter) 
     Me.PrepareControlHierarchy() 
     Me.RenderContents(writer) 
    End Sub 

Innym rozwiązaniem mogłoby być skopiować metodę renderowania z powyżej i zmienić w razie potrzeby.

To pachnie HACK-zostałem ostrzeżony, ale może pracować dla ciebie, szczególnie jeśli nie używasz stronicowania/sortowania.

Answer 5

Łatwym rozwiązaniem bez renderowania modyfikacji:

muszę zastosować styl do div generowanego przez GridView, ponieważ łamie mi układ, więc stworzyłem div z id „myContainerDiv” i przeniósł mojego GridView do niego i przy użyciu jQuery stosuję niektóre style.

przykład:

$("#myContainerDiv > div").css("display", "inline"); 

Ja to JavaScript $ (dokument) .ready (funkcja ({})) ;. Ale jeśli używasz UpdatePanel, tak jak muszę użyć w tym konkretnym przypadku, wykonuję tę $(). Css() w każdym asynchronicznym ogłaszaniu zwrotnym. Bez tego styl zostanie utracony, jeśli wykonasz aktualizację, w której znajduje się gridview. Ale wykonać to $() css() tylko wtedy, gdy dana UpdatePanel jest zwolniony (nie ma potrzeby wykonywania tej instrukcji javascript w każdym każdym każdym async odświeżenie strony)

. Przykład:

<script type="text/javascript"> 

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

function EndRequestHandler(sender, args) { 
    if (args.get_error() == undefined && sender._updatePanelClientIDs != null && 
      sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") { 
      $("#myContainerDiv > div").css("display", "inline"); 
     } 
    } 

</script> 

rozstrzygnięte!

Cała strona będzie wyglądać tak:

<script type="text/javascrcipt" src="jquery.js"></script> 

<script type="text/javascript">  

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); 

function EndRequestHandler(sender, args) { 
    if (args.get_error() == undefined && sender._updatePanelClientIDs != null && 
      sender._updatePanelClientIDs.length > 0 && sender._updatePanelClientIDs[0] == "<%= MyParticularUpdatePanel.ClientID %>") { 
      $("#myContainerDiv > div").css("display", "inline"); 
     } 
    } 

</script> 

<asp:UpdatePanel runat="server" ID="MyParticularUpdatePanel" UpdateMode="Conditional" RenderMode="Inline"> 
<Triggers> 
// Your triggers here... 
</Triggers> 
<ContentTemplate> 
<div id="myContainerDiv" style="display:inline;"> 
    <asp:GridView runat="server" ID="MyGridView" AutoGenerateColumns="false" Height="150px" EmptyDataText="No data."> 
    <Columns> 
     <asp:BoundField DataField="ID" HeaderText="My ID" /> 
    </Columns> 
    </asp:GridView> 
</div> 
</ContentTemplate> 
</asp:UpdatePanel> 

ja nie wiem, czy ten kod zostanie skompilowany dokładnie tak jak napisałem bo napisałem go za pomocą notatnika.

Przepraszamy za mój słaby angielski, pochodzę z Brazylii.

Christophe Trevisani Chavey. http://www.christophetrevisani.com

Answer 6

Jeśli utkniesz z pierwotnych ustawień owijki (co wydaje się, że jesteś) ale chce wymusić styl, nadać mu inny opakowanie i zastosować styl do kombinacji. Jeśli zwykły div ma pewne dopełnienie chcesz pozbyć się (na przykład), to w aspx:

<div id="crushGvDiv"> 
<asp:GridView ... > 
</div> 

a to dla CSS:

div#crushGvDiv, div#crushGvDiv div { padding: 0; margin: 0; } 

Answer 7

miałem ten sam problem przy użyciu bootstrap reaguje tabele z kontrolką GridView. Byłem w stanie łatwo naprawić (niektórzy mogą powiedzieć Hack) problem przez dodanie tej linii do gotowego funkcję:

$("div.table-responsive > div").addClass('table-responsive'); 

Spowoduje to coś jak następuje:

<div class=table-responsive> 
    <div class=table-responsive> 
     <table ..... 

To powinno działać dość dobrze, ale nie jest to idealne rozwiązanie.

Answer 8

Najprostsze i najlepsze rozwiązanie przy użyciu klasy CSS "gridViewWrapperFix".

ASPX:

<div class="gridViewWrapperFix"> 

    <asp:GridView> 
    <%--the full gridview would go here--%> 
    </asp:GridView> 

</div> 

CSS:

/* styles the div that gets auto generated around and asp.net gridview */ 

.gridViewWrapperFix > div { 
    padding: 0; 
    margin: 0; 
    border: 3px solid red; 
}