Posts

Donate

Custom JavaScript Date Sorter Function For Bootstrap Table in ASP.NET MVC

Image
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

Passing Data From One Window To Another in WPF

Good afternoon everyone! When passing data from one window to another in WPF, the ideal approach is to set the both window's DataContext properties with the same ViewModel. In such a way, if a property in a View Model is updated in window1, window2 can access that property and the new value that has reflected. The snippet below show a child window and set's it's DataContext property using the main window's DataContext property. So whatever changes happen to a view model's property value, main window can also get a copy of that new value. public void ShowWindow(Window childWindow, bool isDialog) { //Application.Current.Windows[0] is the main window //set DataContext of child window with DataContext of main window var vm = Application.Current.Windows[0].DataContext; if (childWindow != null ) { childWindow.DataContext = vm; if (isDialog) childWindow.ShowDialog(); else childWindow.Show(); } }

jQueryUI Datepicker Works Only Once In ASP.NET MVC Partial View

Lately while working in an ASP.NET MVC project, i encountered a problem that when I load a partial view for the first time, the jQueryUI DatePicker shows up. However after loading the partial view for the second time and so on, the DatePicker does not show up. I've tried several approaches and solutions presented in the net. And the fix that worked on my end was to: 1. Change the id of the textbox control to which the DatePicker has been initialized to something unique.      txtAddHireDate for add partial view      txtEditHireDate for edit partial view 2. Remove the referencing of the jquery and jqueryUI library of each partial view and transferred them to Index.cshtml(Index.cshtml loads these partial views). That's it.

Data Annotation Validation Of TimeSpan Property In Model Using RegularExpression Attribute

Hello, To validate a model property of type TimeSpan using Data Annotation RegularExpression attribute, the expressions should check the hours, minutes and seconds since the corresponding database column in SQL Server that is mapped with this field has a Time data type. The example below validates a 23 hour format military time and does not allow minutes or seconds greater than zero. [RegularExpression(@"^(?:[01][0-9]|2[0-3]):[0-0][0-0]:[0-0][0-0]$ ", ErrorMessage =" Invalid time format and hh:mm:ss values. ")]

Bootstrap Table JavaScript Data-Sorter For Currency Column

Image
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

WPF Busy Overlay Or Busy Indicator Example In C#

Image
Greetings all! I've been doing some research on how to add an overlay feature similar to an Ajax busy modal to one of my WPF projects. A simple approach led me to this topic WPF: Simple "Busy" Overlay . Since I'm using the traditional MVVM and not Simon Cropp’s Notify Property Weaver, I made this work by creating a WPF project using Visual Studio 2017 (installed in my workstation) and then copied the codes specifically BoolToVisibilityConverter.cs , BusyViewModel.cs , DelegateCommand.cs and MainWindow.xaml from his example at BitBucket . I also changed the IsBusy property to implement the OnPropertyChanged event private bool _IsBusy; public bool IsBusy { get { return _IsBusy; } set { _IsBusy = value ; OnPropertyChanged( "IsBusy" ); } } and added the implementation of that event. protected void OnPropertyChanged ( string propertyName) { if (PropertyChanged != null ) PropertyChanged( this , new PropertyChangedEventArgs(propertyName)

How To Reference A Converter Class In A Resource Dictionary In WPF

Good evening all! Given that you have a Resource Dictionary file that has a Style property that will use a Converter class for Binding, the steps to reference that class are as follows. Assuming that you have a converter class such as an EmployeeTargetConverter: namespace EmployeeManagement { public class EmployeeTargetConverter : IValueConverter { public object Convert ( object value , Type targetType, object parameter, System.Globalization.CultureInfo culture) { //converter codes here..... } public object ConvertBack ( object value , Type targetType, object parameter, System.Globalization.CultureInfo culture) { throw new NotImplementedException (); } } } To reference that class, you must include the namespace of that project in the ResourceDictionary element. <ResourceDictionary xmlns= "http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x= "http://schemas.microsoft.com/winfx/2006/xaml"

Create A NuGet Package Using Visual Studio 2017

Image
Hello all! You may have noticed that the trend in adding components or dll's to a project is through a technology called NuGet Package and with that I'll demonstrate on how to create a simple C# Library NuGet package using Visual Studio 2017. Below are the steps to follow. 1. First is to create a C# class library project called StringLib and add a class with a single method to convert the first letter of a string to uppercase. public class ToUpperCase { /// <summary> /// Change first letter to uppercase /// </summary> public string ToUpperFirstLetter ( string s) { if ( string .IsNullOrEmpty(s)) { return string .Empty; } char [] a = s.ToCharArray(); a[ 0 ] = char .ToUpper(a[ 0 ]); return new string (a); } } 2. Build the project to generate a .dll file. 3. Copy the .dll or any files to be included

Filtering, Paging and Searching Bootstrap Table in ASP.NET MVC

Image
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

Sort Bootstrap Table Date Column By Using Moment.js In ASP.NET MVC

Image
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

Donate