Declarative datasources

jqGrid for ASP.NET supports binding to all declarative datasources available in ASP.NET 3.5, including SqlDataSource, AccessDataSource, LinqDataSource, ObjectDataSource, etc. Same logic applies to all datasources. In this help topic we will use SqlDataSource to work with data in MS SQL Server and SQL Server express.

Note: Some datasources (SqlDataSource, AccessDataSource) will fetch all data from the datasource even if you only need to display just a certain page. This may prove slow for large number of rows. We strongly recommend using "smart" datasources (LinqDataSource or third-party datasources like NHibernate, LLBLGen, SubSonic, etc) - they will only pick the information you need to display and are much faster.

Typically, SqlDataSource is dragged onto the ASPX design surface in Visual Studio.NET from the ToolBox "Data" tab (screenshot below)

Then you can configure the SqlDataSource using Visual Studio, by clicking on the "Configure DataSource" link (screenshot below)

Once you have configured the SqlDataSource instance, you would have something similar to this (if you switch back to ASPX view)

<asp:SqlDataSource runat="server" ID="SqlDataSource1" 
        ConnectionString="<%$ ConnectionStrings:SQL2008_449777_fhsConnectionString %>" 
        SelectCommand="SELECT [ID], [Email], [Password], [Role], [RegistrationDate] FROM [User]"></asp:SqlDataSource>

Now, your SqlDataSource is configured. The only think you need to do at this point is to point the DataSourceID property of your jqGrid to the ID of the SqlDataSource. You can do so either by directly typing the ID of the datasource, or by using Visual Studio design time (screenshot below)

At this point, jqGrid will automatically reflect the columns of the datasource and serialize them in the grid instance, e.g.

<trirand:JQGrid runat="server" ID="AutomaticSortingGrid" 
        DataSourceID="SqlDataSource1">
        <Columns>
            <trirand:JQGridColumn DataField="ID" />
            <trirand:JQGridColumn DataField="Email" />
            <trirand:JQGridColumn DataField="Password" />
            <trirand:JQGridColumn DataField="Role" />
            <trirand:JQGridColumn DataField="RegistrationDate" />
        </Columns>
    </trirand:JQGrid>

Running the project will get you a fully functional grid showing the data with the default grid settings.