Posts

Showing posts from October, 2020

Donate

Bootstrap Table Cell Background Conditional Formatting

Image
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

How To Check If Two Arrays Are Equal Using JavaScript

Good afternoon fellow developers, I've been doing some checking if two arrays with same data types are equal in my client-side validation. A popular solution presented in stackoverflow is the function below. function CheckArrayEqualSort (arr1, arr2) { if (arr1.length !== arr2.length) { return false ; } var ar1 = arr1.concat().sort(); var ar2 = arr2.concat().sort(); for ( var i = 0; i < arr1.length; i++) { if (ar1[i] !== ar2[i]) { return false ; } } return true ; }; This does fulfill the requirement but performs sorting of elements first which tends to slow the comparison. So, I tend to modify the function to use indexOf() function which will check if an element in the first array object exists on the second array. Thus eliminate the sorting mechanism. function CheckArrayEqual (arr1, arr2) { if (arr1.length !== arr2.length) { return false ; } for ( var i = 0; i < arr1.length; i++) { if (arr2.indexOf(arr1[i]) < 0) {

Set jQuery UI DatePicker To Current Month And Below

Image
Hi All, Here's how to set the jQuery UI DatePicker calendar dates to current month and below it. Future months are disregarded. The fix is to set the maxDate property with the current year, next month (current month + 1) and 0 for the day to get the last date of current month. var date = new Date(); $( "#datepicker" ).datepicker({ dateFormat: 'yy-mm-dd ' , changeMonth: true , changeYear: true , maxDate: new Date(date.getFullYear(), date.getMonth() + 1, 0) }); Output Note: As you can see from the image above, the next month button is disabled. Cheers!

How To The Get Index Of Selected Row Object In Bootstrap Table

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!

Bootstrap Table Format Numbers With Comma And Decimal Places In ASP.NET MVC

Image
Hello and Good Evening. Here's how to format numbers with comma and decimal places in Bootstrap Table columns by Wenzhixin using data-formatter tag. Simple set the data-formatter property of the tag. <table id= "tblBilling" data-toggle= "table" data-search= "true" data-advanced-search= "true" data-id-table= "billingTable" data-show-export= "true" data-toolbar= "#toolbar1" data-click-to-select= "true" data-height= "500" data-url= '@Url.Action("GetBillingInformation", "BillingDashboard")' data-cookie-id-table= "tblBillableID" > <thead> <tr style= "background-color: #FFFFFF;" > <td data-field= "CustomerID" data-sortable= "false" data-searchable= "false" data-visible= "false" >Customer ID</td> <td data-field= "

Donate