.NET GENES

Hello and Good day! In this blog post I will demonstrate on how to add a select or dropdown control in Bootstrap-Table by Wenzhixin with an OnChange() event in ASP.NET Core MVC. For this tutorial, I will only fetch records from a List variable with fake information and not from a database for simplicity sake. To begin create an ASP.NET Core MVC using Visual Studio that targets the .NET 5 Framework and perform the rest of the steps below. I. Project Setup A. Add via libman the Bootstrap-Table by Wenzhixin using CDN as the option. B. Add via libman font-awesome using CDN as the option. C. Add the latest tableExport.js to bootstrap-table folder. D. Add Nuget Package Microsoft.AspNetCore.Mvc.NewtonsoftJson 5.x E. Add a new class in the Models folder called Product.cs Here's the project structure. II. Coding The Project A. Product.cs - Add properties that describe a product. The status property is where the Dropdown of the Boostrap-Table is bound to. public class Product {...

Good evening, When working with Detail View option in Bootstrap-Table by Wenzhixin, there's a possibility that you have to render the details information using a table element to the detail view with same number of columns and headers of the parent table as per client request. However, upon rendering the details view with the table element, the child table's columns are not aligned with the parent Bootstrap-Table such as the sample screen below. I tried different solutions such as CSS, jQuery/JavaScript and MutationObserver Pattern which work for a few details view and the rest would be in disarray. Before presenting the solution, here are the codes involved in this project. Bootrap Table With data-detail-view property enabled. <table id= "tblDetailsReport" class= "TableBorderCollapse table-striped" data-toggle= "table" data-sort-name= "JobNumber" data-sort-order= "asc" data-search= "t...

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 ...

Team, When working with the Bootstrap-Table by Wenzhixin in a specific project, I encountered an issue which is the value of input controls such as checkbox and textbox were lost when I performed searching, filtering or pagination of the Bootstrap-Table. I tried several solutions presented in github and the documentation such as setting the properties of data-maintain-meta-data or data-maintain-selected to true and much more. After a few hours, I did found the solution in the documentation which is Saving Row Data Using Input . The solution is to fetch the current value of the control and call Bootstrap-Table updateRow method to preserve the values. The entire page is shown below including it's JavaScript code. @{ ViewBag.Title = "Home Page"; } <div class= "row" > <div id= "divPeople" class= "col-md-12" > <div class= "table-responsive" > <table id= "tblPeople" ...

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. ...

Lately I was working on a project that requires the Bootstrap Table cell by Wenzhixin to be filled with background color based from dynamic values similar to Power BI Conditional Formatting. The color density will change based from a value. Example is if the value is 0%, then the cell background is white. If value is 50% yellow. If 100% then dark orange. Other values will be calculated based on range percent. In order to achieve the task, you need to set the data-cell-style of the bootstrap table. <th data-field= "PercentValue" data-sortable= "true" data-searchable= "true" data-cell-style= "PercentValueCellStyle" >Percent %</th> The function to set the background color is defined below. function PercentValueCellStyle(value, row, index) { var classes = []; var percent = 0; var backColor = '' ; if (value == 0) { percent = 0; } else { percent = (value / 100).toFixed(1); } backColor = GetCo...

Hello and good evening. Just sharing a snippet on how to get or retrieve the index of a selected row object given that you're working on the Bootstrap-Table developed by Wenzhixin. This assumes that you need to capture the index of the click-row.bs.table event. $( '#tblBillableSummary' ).on( 'click-row.bs.table' , function (e, row, $element) { var index = $element.data( 'index' ); }); Sample Fiddle: Get Index Of Selected Row Object In Bootstrap Table Cheers!