locked
Eliminate space between DetailsView's when data source empty RRS feed

  • Question

  • User-1090292501 posted

    ASP.Net DetailsView question:

    I have built an ASP.net page with Webforms and VB. I am passing a search parameter using a url value. On the results page I have multiple DetailView's. They are place one behind the other. Everything works fine but I want to eliminate the empty space when a data source connected to a DetailView is empty. Here is my example. The Header text says Behavior and Analysis:

    Behavior and Analysis:
    DetailView 1 - data source is not empty so display
    DetailView 2 - data source is not empty so display
    DetailView 3 - data source is empty
    (Empty Spacing) After DetailView 3 there is empty space here (Empty Spacing)
    DetailView 4 - data source is empty
    (Empty Spacing) After DetailView 4 there is empty space here (Empty Spacing)
    DetailView 5 - data source is not empty, display.

    In my ASPx page there is space between the records displaying for DetailView 2 and DetailView 5 because even though no records are returned the DetailView Control still takes up space. How can I eliminate the empty space if the data source for DetailView 3 & 4 are empty? Basically, I want to eliminate the space between DetailViews id the data source is empty.

    Monday, October 8, 2018 11:31 AM

All replies

  • User409696431 posted

    What is the HTML that shows for your empty DetailsView? Give the DetailsView a CSS class and style that to remove the spacing (margin, padding) before and after it.

    Monday, October 8, 2018 11:20 PM
  • User-893317190 posted

    Hi solutions_mylogic ,

    You could  make an if judgement, if the datasource you bind is not empty, you could bind data.If  your datasource is empty, please don't bind data.

    Below is my code. I have three detailsview, and the second detailsview's data is empty.

      <asp:DetailsView ID="DetailsView1" runat="server" Height="50px" Width="125px"></asp:DetailsView>
            <asp:DetailsView ID="DetailsView2" runat="server" Height="50px" Width="125px"></asp:DetailsView>
            <asp:DetailsView ID="DetailsView3" runat="server" Height="50px" Width="125px"></asp:DetailsView>

    Code behind.

     Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    
            Dim table As DataTable = New DataTable()
            table.Columns.AddRange(New DataColumn() {New DataColumn("key1"), New DataColumn("value1")})
            table.Rows.Add("1", "2")
            DetailsView1.DataSource = table
            If table.Rows.Count > 0 Then
                DetailsView1.DataBind()
            End If
    
            DetailsView3.DataSource = table
            If table.Rows.Count > 0 Then
                DetailsView3.DataBind()
            End If
            table = New DataTable()
            DetailsView2.DataSource = table
    
            If table.Rows.Count > 0 Then
                DetailsView2.DataBind()
               
            End If
    
        End Sub
    

    Or you could bind data and just set detailsview's height to 0 . It will make the view disappear if it is empty and it will have no effect if the view is not empty.

    Dim table As DataTable = New DataTable()
            table.Columns.AddRange(New DataColumn() {New DataColumn("key1"), New DataColumn("value1")})
            table.Rows.Add("1", "2")
            DetailsView1.DataSource = table
           
            DetailsView1.DataBind()
            
            DetailsView1.Height = 0
            DetailsView3.DataSource = table
           
            DetailsView3.DataBind()
            DetailsView3.Height = 0
           
            table = New DataTable()
            DetailsView2.DataSource = table
    
            
            DetailsView2.DataBind()
            DetailsView2.Height = 0
          

    The result.

    Best regards,

    Ackerly Xu


      

    Tuesday, October 9, 2018 6:44 AM