jqxGrid.razor
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> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>blazor-web</title> <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" /> </head> <body> <app>Loading...</app> <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> </body> </html>
Navigate to the Index.razor file which is in the Pages folder and add the grid initialization code.
@page "/" <JqxGrid width="600" source="source" columns="columns" sortable="true" theme="material"> </JqxGrid> @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)]); localData.Add(row); } 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"); dataFields.Add(dataField1); dataFields.Add(dataField2); dataFields.Add(dataField3); dataFields.Add(dataField4); 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"); columns.Add(column1); columns.Add(column2); columns.Add(column3); columns.Add(column4); return columns; } }
The Final Result:
