By design the ASPxNavBar supports binding only to hierarchical datasources (those that implement the IHierachicalDataSource interface - e.g. XmlDataSource, SiteMapDataSource) through its DataSourceID and DataSource properties.
Recently I wanted to build a FAQ page, I have done this before in other ways but this time I wanted to use the ASPxNavBar to display the FAQ page. I quickly found that I could not bind the ASPxNavBar to an Access or SQL datasource at design time and after searching Google and DevExpress I found many questions regarding this (Q201051 shows how to bind an ASPxMenu) but no definitive answers showing how to do it.
After a little research I found a quick simple way to bind an Access or SQL database to the ASPxNavbar control for use in a FAQ page or for other uses.
HTML:
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Example - FAQ Page Using ASPxNavbar</title>
<style type="text/css">
.heading { font-size: large; color: Blue; }
.divnb { padding-left: 10px; padding-top: 10px; }
.Question { color: Gray; font-size: 11pt; }
.Answer { font-size: 11pt; padding-left: 35px; padding-top: 8px; padding-bottom: 8px; }
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="min-height: 500px;">
<div class="heading">Frequently Asked Questions</div>
<div class="divnb">
<dx:ASPxNavBar ID="navFAQ" runat="server" EnableDefaultAppearance="False" ExpandButtonPosition="Left" AutoCollapse="True" GroupSpacing="5px" EncodeHtml="False">
<GroupHeaderStyle CssClass="Question" ImageSpacing="8px"></GroupHeaderStyle>
<ItemStyle CssClass="Answer" />
<CollapseImage url="~/Images/nbCollapse.png"></CollapseImage>
<ExpandImage url="~/Images/nbExpand.png"></ExpandImage>
</dx:ASPxNavBar>
</div>
</div>
</form>
</body>
</html>
Code behind VB:
Imports System.Data.OleDb
Imports DevExpress.Web.ASPxNavBar
Partial Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
If Not IsPostBack Then
Load_FAQ()
End If
End Sub
Public Sub Load_FAQ()
Dim SQL As String = "SELECT [Sort], [Question], [Answer] FROM [FAQ] ORDER BY [Sort], [Question]"
Dim Question, Answer As String
Dim i As Integer = 0
'// The connectionstring is defined in the web.config file //
'<connectionStrings>
' <add name="DB_Conn_DemoFAQ" connectionString="Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|demofaq.mdb" providerName="System.Data.OleDb" />
'</connectionStrings>
Dim conn As OleDbConnection = New OleDbConnection(ConfigurationManager.ConnectionStrings("DB_Conn_DemoFAQ").ConnectionString)
Dim SelectCommand As New OleDbCommand(SQL, conn)
Try
conn.Open()
Dim Reader As OleDbDataReader = SelectCommand.ExecuteReader()
While Reader.Read()
Question = If(Not IsDBNull(Reader.Item("Question")), Reader.Item("Question"), "")
If Not Question = "" Then
Question = Reader.Item("Question")
Answer = Reader.Item("Answer")
navFAQ.Groups.Add(Question)
navFAQ.Groups(i).Items.Add(Answer)
i += 1
End If
End While
Catch ex As Exception
Finally
conn.Close()
conn.Dispose()
SelectCommand.Dispose()
End Try
End Sub
End Class
If it helps anyone else I’ve got a sample FAQ project with downloadable code on my main website and a video below.
How to build a FAQ page using the DevExpress ASPxNavBar bound to an Access or SQL Datasource
Cool and I have a super supply: Who To Contact For House Renovation cost to remodel entire house
ReplyDelete