.NET GENES

Hello, In this tutorial, I will demonstrate on how to integrate Bootstrap-Table created by Wenzhixin in an ASP.NET Core MVC 5 with Entity Framework Core and SQL Server. For this post, I'll be using Microsoft's free database called ContosoRetailDW. Most of the ASP.NET MVC 5 web project in our company use this widget for showing records to clients because this has tons of features like exporting, paging, searching, sorting by column names and a whole lot more and this awesome widget has been constantly improved by the product owner and some dedicated developers. Project Setup 1. Lets start by creating an ASP.NET Core MVC application targeting the latest framework which is .NET 5 using Visual Studio 2019. 2. Add these NuGet packages for Entity Framework Core and ASP.NET Core MVC Newtonsoft.Json 3. Next is to reverse engineer the ContosoRetailDW so that we can use it's tables. The bootstrap-table widget will load records from DimPromotions table. Scaffold-DbContext ...

Good morning fellow programmers! I was recently tackling a task of which to set the Bootstrap Table cell by Wenzhixin background width dynamically based on a given value. Given that a the value to be accounted for is 25, then the table cell's background color should span to 25 pixels or percent only and not fill the entire table cell. To do that you need to create a custom function that will be used as the data-cell-style of a table column. The function below will return the css formatting of a table cell by setting the attributes color, background-image, background-repeat and background-size using the referenced value. function PercentBarCellStyle(value, row, index) { var classes = [ 'active' , 'success' , 'info' , 'warning' , 'danger' ]; var size = row.value.toString() + "% auto" ; return { css: { "color" : "transparent" , "background-image" : "url('https://add_you...

Good afternoon. In one of my projects I had a requirement which is to export a hidden column or hidden columns in Bootstrap Table of Wenzhixin. This hidden column is a note field that contains long text of more than a hundred characters. The value of the hidden column is used in one of the column that contains an image icon and when hovered will show the value of the invisible column. The Bootstrap Table does not have this feature but a temporary solution was provided by lutol in the github issue How to export hidden column . However upon testing, the accepted solution does not work on my part since it cannot retrieve the hidden columns defined in the exportHiddenColumns property. So I made some changes in some of the logic to export the hidden column on my project. The changes are the following. 1. Create a data-hidden-columns attribute in the table and set it's value with the invisible column name. An example is the JobNotes column' data-visible property is set to false. ...

Good evening all! When working with checkboxes in Bootstrap Table created by Wenzhixin, you may have notice that on page load the checkboxes are checked by default. If you want to uncheck these checkboxes on page load of your ASP.NET MVC page, call the checkInvert method of the bootstrap table on document ready of the page such as the code below: $(document).ready( function () { UncheckShoppingCartTable(); }); function UncheckShoppingCartTable() { $( '#tblShoppingCart' ).bootstrapTable( 'checkInvert' ); }

Good Afternoon! I recently faced a minor bug in Bootstrap Table by Wenzhixin using a single data-footer-formatter for four columns. I expected that this will compute the column values but the expected result shows that all columns total are zero. Bootstrap Table <table id= "tblBillingReport" class= "TableBorderCollapse table-striped " data-toggle= "table" data-search= "true" data-show-columns= "false" data-advanced-search= "false" data-id-table= "advancedTable" data-show-export= "true" data-toolbar= "#toolbar" data-click-to- select = "true" data-unique-id= "objectID" data-cookie= "true" data-show-footer= "true" data-height= "700" data-cookie-id-table= "tblBillingReportID" > <thead> <tr style= "background-color: #FFFFFF;" > <th dat...

To add a footer row to the Bootstrap Table by Wenzhixin, set the data-show-footer attribute of that table to true. <table id= "tblInvoiceReport" data-show-footer= "true" > Next is to set the data-footer-formatter of the Amount column using a JavaScript function. <th data-field= "Amount" data-searchable= "true" data-class= "tdDetails" data-footer-formatter= "TotalFormatter" >Amount</th> And here's the JavaScript function to compute the total amount. function TotalFormatter (items) { var totalPrice = 0; items.forEach( function (item) { totalPrice = parseFloat(totalPrice) + parseFloat(item.Amount.replace( '$' , '' ).replace( ',' , '' )); }); return '$' + parseFloat(totalPrice).toLocaleString( undefined , { minimumFractionDigits: 2, maximumFractionDigits: 2 }); }; Output

Good evening fellow developers! Here's are solutions on how to obtain the Bootstrap-Table by Wenzhixin data if the check all event is fired. The first one loops through the table rows and then looks for the element in the row that holds the data either in the element attribute or innerText and retrieves it using jQuery methods. $( '#AttachmentsTable' ).on( 'check-all.bs.table' , function (e, rows) { var allrows = $( "#AttachmentsTable tr" ); downloadAttachmentsArray.length = 0 ; downloadAttachmentsArray = []; $.each(allrows, function (i, item) { if (i > 0 ) { var aElem = $(item).find( 'a' ).attr( 'file' ); downloadAttachmentsArray.push({ Filename : aElem }); } }); }); The better solution uses the built-in getData method of the bootstrap table which returns an array. And then you may then loop through that array to get the data. $( '#AttachmentsTable' ).o...

To apply word-break to a Bootstrap-Table <th> cell text by Wenzhixin, create a css style that set's the inner div of <th> white-space to normal !important and word-wrap to break-word. .tdOverviewTotalIllustrations div .th-inner { white-space : normal !important ; word-wrap: break-word; } Then in Bootstrap-Table's <th> element, set the data-class attribute to the defined style above. <th data-field= "totalIllustrations" data-sortable= "true" data-searchable= "true" data-class= "tdOverviewTotalIllustrations" >Total Illustrations</th>

Good evening! We've been requested by the client if we can freeze the column headers of the Bootstrap Table By Wenzhixin given the records loaded to the bootstrap-table is more than a hundred. I've tried using jQuery and CSS approaches and none of them work. Either they destroy the table layout or make a mess of the data. After scanning to the docs, the suggestion was to set the height of the table as mentioned by the author. So to mimic freeze table headers, you need to set the data-height of the bootstrap-table explicitly. Code: data-height="700" Output

Hello All, One of the issue that I had with Bootstrap Tables by Wenzhixin is that you can't set the width directly using data-width attribute given the code below. <th data-field= "description" data-sortable= "true" data-searchable= "true" data-width= "350px" > Description </th> After doing some research and experiments, the solution that worked for me is to set the Bootstrap Table table-layout style to fixed. Bootstrap Table CSS #tblEmployeeDependents { table-layout : fixed ; } And use data-class attribute instead of data-width property to set the column width. HTML Code <th data-field= "description" data-sortable= "true" data-searchable= "true" data-class= "tdDescription" > Description </th> Data-Class CSS Style .tdDescription { width : 350px ; word - break : break - word; }

Normally, exporting a Bootstrap-Table by Wenzhixin using Bootstrap-Table-Export.js plugin works. But in my case, it's returning an empty document whether Excel,CSV, XML or JSON format. I did some debugging on the plugin itself and found out that it doesn't export if the main table contains child table(s). A fix that I came up was to remove the child tables from the table object before passing it to the tableExport.js plugin. The solutions is applied in the doExport() function of Bootstrap-Table-Export.js plugin. doExport = function () { //remove child table elements. var length = that.$tableBody.children( 'table' ).find( 'table' ).length; if (length > 0) { that.$tableBody.children( 'table' ).find( 'table' ).remove(); } that.$el.tableExport($.extend({}, that.options.exportOptions, { type: type, escape: false })); };

Good evening gents! Doing some refactoring to one of my projects using the JavaScript prototype pattern, I encountered issues while calling the functions in prototype through the Bootstrap Table by Wenzhixin specifically in the data-sorter property. In document ready, I created an object of an EmployeeModel class that contains the function. $(document).ready( function () { EmployeeObj = new EmployeeModel(); }); And in the data-sorter property, I called the custom function to sort dates. <th data-field= "signout_time" data-sortable= "true" data-searchable= "true" data-sorter= "EmployeeObj.DateSorter" > @Html.DisplayNameFor(model => model.EmployeeList[0].SignOutTime) </th> Doing so, throws an exception "Cannot read property 'DateSorter' of undefined". After further investigation, the table has set values for data-sort-name and data-sort-order properties. <table id= "" data-sort-name=...

While working on a project that implements Bootstrap Table by Wenzhixin, one column returns a date value with the format of MMM-YYYY and this column is sortable. A solution I've come up is to use the flexibility of Moment.js. Here's to date sorter function for the column. function DateSorter(a, b) { var dateA = new Date(moment(a).format( 'MMM-YYYY' )); var dateB = new Date(moment(b).format( 'MMM-YYYY' )); if (dateA < dateB) return -1; if (dateA > dateB) return 1; return -0; } Then set the data-sorter property of the table column with the function name. <th data-field= "BillingMonth" data-sortable= "true" data-sorter= "DateSorter" >Billing Month</th> Output Sample Fiddle: Custom JavaScript Date Sorter Function For Bootstrap Table Using Moment.JS

If your Bootstrap Table by Wenzhixin has a string currency column with a dollar sign and you want to sort the amount which disregards the currency symbol, a solution would be to remove the currency symbol and comma using Regex in JavaScript. function AmountSorter(a, b) { var billA = Number (a.replace( /(^\$|,)/g , '' )); var billB = Number (b.replace( /(^\$|,)/g , '' )); if (billA < billB) return - 1 ; if (billA > billB) return 1 ; return - 0 ; } And in your Bootstrap Table column, set the data-sorter property with the name of your currency sorter function. <th data-field= "RegistrationFee" data-sortable= "true" data-sorter= "AmountSorter" > Registration Fee </th> Output Sample Fiddle: Bootstrap Table JavaScript Data-Sorter For Currency Column

Good afternoon! The previous two articles on using Bootstrap Tables by Wenzhixin were simply displaying, sorting and paging records. This tutorial will demonstrate on how apply filtering features to the table. First is to create an ASP.NET MVC project and then add an ADO.NET Entity Data Model that will use the Northwind Database Employees table. Next is to add an EmployeeView model that will be used as field names by the Bootstrap Table. The source code for the View Model and the EmployeeController is presented can be copied from this article Sort Bootstrap Table Date Column By Wenzhixin Using Moment.js In ASP.NET MVC . To enable filtering of the table, obtain the bootstrap-table-filter-control.js from the Bootstrap Table source code at github and reference it in your page as presented below: <link href= "~/Content/bootstrap.min.css" rel= "stylesheet" /> <link href= "~/Content/bootstrap-table.css" rel= "stylesheet" /> <script...

Hello, In this tutorial, I'll demonstrate on how to sort a date column of a Bootstrap Table by Wenzhixin using Moment.js. First is to create an empty ASP.NET MVC project and then add an ADO.NET Entity Model that references the Employee table of Northwinds database. Next is to define an Employee ViewModel class that will hold the information to be utilized by the Bootstrap table. public class EmployeeViewModel { public int EmployeeID { get ; set ; } public string EmployeeName { get ; set ; } public DateTime BirthDate { get ; set ; } public DateTime HireDate { get ; set ; } public string Address { get ; set ; } public string PostalCode { get ; set ; } public string Country { get ; set ; } } Then add a new controller called Employee that declares a Northwind context object, queries the database and returns the model object as JSON. public class EmployeeController : Controller { private NorthwindEntities _context; public EmployeeController() { _con...

Good evening guys and gals! In this tutorial, I will show you on how to display records in tabular format using Bootstrap Table created by Wenzhixin in ASP.NET MVC. First, you need to have AdventureWorks Database since this is the database used in the demo. Next is to create an ASP.NET MVC project and then add an ADO.NET Entity Model that targets the AdventureWorks DB specifically the tables People , EmployeeDepartmentHistories , Departments , Shifts , BusinessEntityAddresses and Addresses . Proceed by adding an EmployeeViewModel class that contains properties of the Employee. This class will be used by the Bootstrap Table's columns property. public class EmployeeViewModel { public int BusinessEntityId { get ; set ; } public string EmployeeName { get ; set ; } public string Address { get ; set ; } public string PostalCode { get ; set ; } public string DepartmentName { get ; set ; } public string DepartmentGroupName { get ; set ; } public string Shif...