Blazor UI Components

A Blazor app can invoke JavaScript functions from .NET methods and .NET methods from JavaScript functions. These scenarios are called JavaScript interoperability (JS interop). We are close to the final stage of our Blazor .NET components implementation. These components will internally use our Javascript components. In this blog, we will show you the future jqxGrid for Blazor component.


The Grid’s component implementation will have a file called (jqxGrid.razor). We can add that file within the Shared folder of our Blazor app.

The next step is to include the jqwidgets folder into the wwwroot folder. Its path should be like that: ./root/blazor-web/wwwroot/js/jqwidgets/

Inside the element of wwwroot/index.html (Blazor WebAssembly) or Pages/_Host.cshtml (Blazor Server), we add the grid javascript and css dependencies

<!DOCTYPE html>  
   <meta charset="utf-8" />  
   <meta name="viewport" content="width=device-width" />  
   <base href="/" />  
   <link href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />  
   <link href="css/site.css" rel="stylesheet" />  
   <link rel="stylesheet" href="./js/jqwidgets/styles/jqx.base.css" />  
   <link rel="stylesheet" href="./js/jqwidgets/styles/jqx.material.css" />  
   <script src="./js/jqwidgets/jqxcore.js"></script>  
   <script src="./js/jqwidgets/jqxbuttons.js"></script>  
   <script src="./js/jqwidgets/jqxdata.js"></script>  
   <script src="./js/jqwidgets/jqxscrollbar.js"></script>  
   <script src="./js/jqwidgets/jqxmenu.js"></script>  
   <script src="./js/jqwidgets/jqxgrid.js"></script>  
   <script src="./js/jqwidgets/jqxgrid.selection.js"></script>  
   <script src="./js/jqwidgets/jqxgrid.sort.js"></script>  
   <script src="./js/jqxBlazor.js"></script>  
   <script src="./js/example.js"></script>  
   <script src="_framework/blazor.webassembly.js"></script>  

Navigate to the Index.razor file which is in the Pages folder and add the grid initialization code.

@page "/"  
 @code {  
   private IDictionary<string, object> source;  
   private object columns;  
   protected override void OnInitialized()  
     source = buildSource();  
     columns = buildColumns();  
   private IDictionary<string, object> buildSource()  
     List<IDictionary<string, object>> localData = new List<IDictionary<string, object>>();  
     string[] firstNames = { "Andrew", "Nancy", "Shelley", "Regina", "Yoshi", "Antoni", "Mayumi", "Ian", "Peter", "Lars", "Petra", "Martin", "Sven", "Elio", "Beate", "Cheryl", "Michael", "Guylene" };  
     string[] lastNames = { "Fuller", "Davolio", "Burke", "Murphy", "Nagase", "Saavedra", "Ohno", "Devling", "Wilson", "Peterson", "Winkler", "Bein", "Petersen", "Rossi", "Vileid", "Saylor", "Bjorn", "Nodier" };  
     string[] productNames = { "Black Tea", "Green Tea", "Caffe Espresso", "Doubleshot Espresso", "Caffe Latte", "White Chocolate Mocha", "Cramel Latte", "Caffe Americano", "Cappuccino", "Espresso Truffle", "Espresso con Panna", "Peppermint Mocha Twist" };  
     float[] priceValues = { 2.25f, 1.5f, 3.0f, 3.3f, 4.5f, 3.6f, 3.8f, 2.5f, 5.0f, 1.75f, 3.25f, 4.0f };  
     Random random = new Random();  
     for (int i = 0; i < 200; i++) {  
       IDictionary<string, object> row = new Dictionary<string, object>();  
       row.Add("firstName", firstNames[random.Next(0, firstNames.Length)]);  
       row.Add("lastName", lastNames[random.Next(0, lastNames.Length)]);  
       row.Add("productNames", productNames[random.Next(0, productNames.Length)]);  
       row.Add("priceValues", priceValues[random.Next(0, priceValues.Length)]);  
     List<IDictionary<string, string>> dataFields = new List<IDictionary<string, string>>();  
     IDictionary<string, string> dataField1 = new Dictionary<string, string>();  
     dataField1.Add("name", "firstName");  
     dataField1.Add("type", "string");  
     IDictionary<string, string> dataField2 = new Dictionary<string, string>();  
     dataField2.Add("name", "lastName");  
     dataField2.Add("type", "string");  
     IDictionary<string, string> dataField3 = new Dictionary<string, string>();  
     dataField3.Add("name", "productNames");  
     dataField3.Add("type", "string");  
     IDictionary<string, string> dataField4 = new Dictionary<string, string>();  
     dataField4.Add("name", "priceValues");  
     dataField4.Add("type", "number");      
     IDictionary<string, object> source = new Dictionary<string, object>()  
       { "localdata", localData },  
       { "datatype", "array" },  
       { "datafields", dataFields }  
     return source;  
   private object buildColumns()  
     List<IDictionary<string, object>> columns = new List<IDictionary<string, object>>();  
     IDictionary<string, object> column1 = new Dictionary<string, object>();  
     column1.Add("text", "First Name");  
     column1.Add("datafield", "firstName");  
     column1.Add("width", 100);  
     IDictionary<string, object> column2 = new Dictionary<string, object>();  
     column2.Add("text", "Last Name");  
     column2.Add("datafield", "lastName");  
     column2.Add("width", 100);  
     IDictionary<string, object> column3 = new Dictionary<string, object>();  
     column3.Add("text", "Product");  
     column3.Add("datafield", "productNames");  
     column3.Add("width", 200);  
     IDictionary<string, object> column4 = new Dictionary<string, object>();  
     column4.Add("text", "Price");  
     column4.Add("datafield", "priceValues");  
     column4.Add("cellsformat", "c2");  
     column4.Add("align", "right");  
     column4.Add("cellsalign", "right");  
     return columns;  

The Final Result:

Blazor Grid

About admin

This entry was posted in Uncategorized and tagged , , . Bookmark the permalink.

Leave a Reply