Telerik UI for Windows 8 HTML

The Data Storage component supports joining data from two or more tables and then executing operations on it, all using the component's fluent API. This article explains what a join operation is and how to perform it in Data Storage.

Join Operations

The logic of join operations in Data Storage is same as with the SQL join. The columns of the two tables are joined based on matches between the two provided fields. For example, consider you have these two tables:


The result from joining these two tables on the CategoryID field on both sides will be:


Joining Tables Using Data Storage API

To join two tables, use the join(tableName, tableFieldName, dataFieldName) method. The three arguments it takes are:

  • tableName: The string name of the table that should be joined to the current data.

  • tableFieldName: The field in the joined table which should be used to join the data.

  • dataFieldName: The field in the current table which should be used as a foreign key.

You can use the join(tableName, tableFieldName, dataFieldName) method multiple times if you need to get a view from multiple tables.

Once you join the tables, you can get only a specific subset of their fields, using the fields(fieldsObj) method. It receives an object listing all the fields that you need. To differentiate between the two tables, prefix the field name with its owner table name and a dot, e.g. "Categories.Description". Defining the fields that you want to fetch is especially important when there are fields with identical names in the tables that you join.

Following is an example of joining two tables – Categories and Products. After the join, the resulting table is sorted by CategoryName. Note that the operations in the method chain are performed on the data in the same order as defined but after the execute() method triggers them.

Join Products and Categories Copy imageCopy
db ="ProductsDB");
//select the Products table and then chain all operations
.join("Products", "CategoryID", "ID")
.sort("Categories.CategoryName", "asc")
    categoryName: "Categories.CategoryName",
    productName: "Products.ProductName",
    unitPrice: "Products.UnitPrice"

If you populate a RadGrid with the result from this query, it will look like this (using auto-generated columns):


See Also