Posts

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= "

Custom JavaScript Date Time Sorter and Date Time Formatter Function For Bootstrap Table in ASP.NET MVC Using Moment.JS

 Hello Fellow Developers, Here's how to format and sort dates with time values using Bootstrap Table by Wenzhixin in ASP.NET MVC. Assuming that the values returned from the database have hours, minutes and seconds. DateTimeFormatter function DateTimeFormatter(value, row, index) { if (value === null || value === undefined || value === "" ) { return "" ; } else { return moment(value).format( 'YYYY-MM-DD HH:mm:ss' ); } } DateTimeSorter function DateTimeSorter(a, b) { var dateA = new Date(moment(a).format( 'YYYY-MM-DD HH:mm:ss' )); var dateB = new Date(moment(b).format( 'YYYY-MM-DD HH:mm:ss' )); if (dateA < dateB) return -1; if (dateA > dateB) return 1; return -0; } Usage <th data-field= "LastLogin" data-sortable= "true" data-sorter= "DateTimeSorter" data-formatter= "DateTimeFormatter" data-searchabl

Power BI Hierarchy Slicer Last Item Cut Off In Power BI Service

Image
Good evening Gents. I have been using the hierarchy slicer for quite some time and this has helped me solve the grouping mechanism of our reports. Lately, we have found issues such as the slicer is not working on Firefox and today, the last item of the slicer is cut-off/not visible even when you scroll. The issue appears on both Google Chrome and Microsoft Edge browsers. See screenshot below: When I checked on the docs,there's an open issue about the slicer's last item is cut-off if the search box is enabled. Don't know if this issue is related to that. See details here:  https://github.com/liprec/azurebi-docs/issues/124 . Even if I replaced the slicer with the recent version (2.1.4) still the issue appears. Upon doing some experiments, I came up with a solution and presented it to our Software Architect for approval.  Note that this is not the best solution, this is just a temporary workaround. I still recommend for the bug to be fixed and release a version that solves t

How To Combine Specific Columns Per Table Using DAX Union

Guys, Here's a DAX formula that will perform union of two tables given their specific column names in Power BI. The trick is to use SELECTCOLUMNS () function for each table. Countries = UNION ( SELECTCOLUMNS ( 'Main Location' , "Countries" , 'Main Location' [Countries] ), SELECTCOLUMNS ( 'Sales' , "Countries" , 'Sales' [Countries] ) )

Line Chart X-Axis Month Values Not Sorting Correctly In Power BI LineChart

Image
Gents, Today, I had an issue with month values in my line chart visual not sorting correctly. The month values were plainly text in type and it seems the line chart does not recognize it's order. In order for these to work, I need to create a month column to explicitly include the year and retrieve the value using DateValue() function. If the measure is added in the visual, set the proper date format in Power BI desktop for the line chart to recognize the proper sequence. MonthYear = var monthName = TRIM (GrossProfitTrend[MonthName]) Return SWITCH(monthName, "Jan" , DATEVALUE( MONTH ( DATE ( YEAR (NOW()), 1 , 1 )) & " " & YEAR (NOW())) , "Feb" , DATEVALUE( MONTH ( DATE ( YEAR (NOW()), 2 , 1 )) & " " & YEAR (NOW())) , "Mar" , DATEVALUE( MONTH ( DATE ( YEAR (NOW()), 3 , 1 )) & " " & YEAR (NOW())) , "Apr" , DATEVALUE( MONTH ( DATE ( YEAR (NOW()), 4 , 1 )

Add Row Number Dynamically To Query Results In T-SQL

Image
Aloha fellow developers! I have this scenario wherein I need to display row numbers in my result set given that the rows don't have a ID column and each row number represents the month number of a specific month. SELECT A.fsyear_num as 'Fiscal Year' , [MonthName] FROM CTE_GrossProfit_SalesByClass_Current_FSYear A I know that row number is the solution but I need to tweak this to handle my requirement. After reading the forums and docs, I found out that adding a select statement with COUNT() inside the Over By clause is the solution. SELECT A.fsyear_num as 'Fiscal Year' , ROW_NUMBER() Over( Order BY ( Select Count ( * ))) AS MonthNum, [MonthName] FROM CTE_GrossProfit_SalesByClass_Current_FSYear A ORDER BY MonthNum ASC

Donate