.NET GENES

Hello all, I was confronted with a minor issue in jsTree.js on how to uncheck a parent only if all it's child notes are unchecked. I checked on the documentation if there's an existing property or attribute that will be set to achieve this functionality. Since there is none, I decided to just do the coding stuff to solve this problem. The logic behind this is that get the parent node and it's direct descendants. If there are child nodes, loop through those elements and if one of them is still checked, the parent node remains checked. But to make this work, the properties cascade up and three_state should be set as 'up' and 'false'. $( '#jsEmployees' ).jstree({ 'checkbox' : { keep_selected_style: false , three_state: false , cascade: 'up' }, 'core' : { 'themes' : { 'icons' : false } }, 'plugins' : [ "defaults" , "checkbox" ], 'expand_selected_onload'...

Hello, I have a div inside a parent div that overlaps when rendered in Internet Explorer 11 browser. The parent div has a col-md-2 class. Other browsers such as Edge, Firefox and Chrome doesn't show this irregularity. After doing some spikes and testing, the solution for this is to set the child div's class to "row". <div class= "row" id= "chartReport" ></div> And in your css, remove the width and margin styles of the child div. #chartReport { border : 2px solid lightgray; background-color : white; /*width: 300px;*/ /*margin: 15px;*/ } Cheers!

Given the task at hand which is to show a chart report to customers inside the left menu div that has col-md-2 class, the chart isn't readable and small as reported by the users. The fix that I came up with was to the the height and width explicitly of the canvass element and adjust it's values to make the chart readable. <canvas id= "DeliveriesByDayCanvas" width= "600" height= "550" ></canvas>

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

I've been reading a post on working with Typography.Fraction and Typography.Capitals Enum on TextBlock controls and cannot get it to work as expected. After reading the Microsoft Docs, the solution was to set the FontFamily of the control to Palatino Linotype. <TextBlock Grid.Row= "0" FontSize= "32" FontFamily= "Palatino Linotype" Typography.DiscretionaryLigatures= "True" Typography.ContextualLigatures= "True" Typography.StandardLigatures= "True" > Quite effective find </TextBlock> <TextBlock Grid.Row= "1" FontSize= "32" FontFamily= "Palatino Linotype" Typography.Capitals= "AllSmallCaps" > Hello, World </TextBlock> <TextBlock Grid.Row= "2" FontSize= "32" ...

Good day all! Here's a snippet to collapse or exand a jstree node programmatically on page load based on the node id. The code below will collapse if node id is '45' while other nodes remain open. $( '#TreeRoles' ).bind( 'ready.jstree' , function (e, data) { var $tree = $( this ); $($tree.jstree().get_json($tree, { flat: true })).each( function (index, value) { var node = $tree.jstree().get_node( this .id); if (node.id === "45" ) { $tree.jstree().close_node({ "id" : node.id }); } else { $tree.jstree().open_node({ "id" : node.id }); } }); });

Hello, I'm currently working on a JavaScript Library jsTree that mimics the behavior and UI of a TreeView control in .NET. One of the issue that's bothering me was to disable the cascade down selection of jsTree Child Nodes On page load if a parent node is selected. The solution is to set the three_state attribute to false and cascade to empty or 'up as presented in the code below. $( '#TreeRoles' ).jstree({ 'checkbox' : { keep_selected_style: false , three_state: false , cascade: 'up' }, 'plugins' : [ "defaults" , "checkbox" ] });

Here's a function that will calculate the number of days excluding weekends. The parameters passed are the priority which contains number of days and the current date. Sample priorities are 'High[1 day]', 'Average [2 days]' and 'Low [5 days]'. The function then uses Regex to extract the whole numbers from the priority string to be used for incrementing the number of days. public DateTime RecalculateDueDate( string priority, DateTime Today) { int days; int count; DateTime dueDate; count = 0; dueDate = Today; days = int .Parse(Regex.Replace(priority, "[^0-9]" , "" )); while (count < days) { dueDate = dueDate.AddDays(1); if (( int )dueDate.DayOfWeek != 0 && ( int )dueDate.DayOfWeek != 6) count++; } return dueDate; } Source Code: How To Calculate Due Days Excluding Weekends In C#.NET

In the event that you need to check a T-SQL field value if it's a GUID or UniqueIdentifier, the same procedure is used in applying the logic in a where clause. SELECT CartObjectID, CartName, CartQuantity, CASE When TDD.FieldData like REPLACE ( '00000000-0000-0000-0000-000000000000' , '0' , '[0-9a-fA-F]' ) Then ( Select CartValue From tblCartList where ListID = TDD.FieldData ) ELSE TDD.FieldData END As FieldData

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; }

Hello fellow developers! Normally, when closing a Bootstrap Modal, the black background also disappear. However, if the closing of Bootstrap Modal is triggered by a close or button event fired from a "Yes" button of jQuery UI dialog the bootstrap dialog is closed but the black background of the bootstrap modal is still visible. The solution that I came up with is to close the modal dialog before the call to submit the form in the Yes callback function of the jQuery UI Dialog. function fnOpenNormalDialog($form) { var form = $form; $( '<div id="divConfirm"></div>' ).dialog({ resizable: false , modal: false , title: "Confirm Shipping" , height: 150, width: 350, open: function () { $( this ).html( "Confirm that this part is ready to be shipped?" ); }, buttons: { "Yes" : function () { $( this ).dialog( 'close' ); Callback( true , form); }, "No" : function () {...

Good day! I have this requirement to show an overlay message using BlockUI on top of a jQuery UI Dialog. Assuming that these two are modals, I can't show the progress message on top of the jQuery UI Dialog. I found the solution in stackoverflow that is to set the z-index of BlockUI to 2000. $.blockUI({ message: '<h3>Saving of record in progress...</h3>' , baseZ: 2000 });

Hello, In data entry operations, we normally validate user input if they exist in the database, if yes we throw some kind of exception or error message that the data they entered already exists in the database. But in scenario like editing of existing information, we don't want this to happen. So to restrict the remote validation in ASP.NET MVC, I found the fix from stack Remote validation restrict for edit controller method but modified the logic in the controller which is to return a JSON rather than a bool value. The code modifications are as follows. Edit View or Edit Partial View: Add another HiddenField for Initial Product Code used for Comparison. @Html.Hidden("InitProductCode", Model.ProductCode) Model: Add AdditionalFields in Remote Attribute. [Display(Name = "Product Code")] [Required(ErrorMessage = "ProductCode is required")] [Remote("CheckProductCode", "Products", HttpMethod = "POST", ErrorMessage = ...

Good afternoon! I'm working on a ASP.NET MVC which uses the oldest version of Bootstrap which 3.0. Normally when working with modals, the hide() function works if using updated versions of the Bootstrap given the code below. The snippet should close the modal after a form has been submitted but this doesn't work as expected when working with the oldest version. $( "#modal-add" ).on( "submit" , "#form-add" , function (e) { e.preventDefault(); var form = $( this ); $.ajax({ url: form.attr( "action" ), method: form.attr( "method" ), data: form.serialize(), success: function (data) { $( "#modal-add" ).modal( 'hide' ); //close modal function $( "#tblEmployee" ).bootstrapTable( 'load' , data); showAlert( 'Saving of record successful!' , 'success' ); }, error: function (er) { showAlert( 'Error saving record. Please try again later.' , 'dan...

Given the sorting function below to sort dates, this doesn't add checking for invalid date values. In return, the sorting doesn't do any effect on the data provided. var DateSortWithValidation = function (a, b) { var dateA = new Date(a); var dateB = new Date(b); if (dateA < dateB) return -1; if (dateA > dateB) return 1; return 0; }; So I made a little modification to the function using isNan() for date validation which sorts the dates properly. var DateSortWithValidation = function (a, b) { var dateA = new Date(a); var dateB = new Date(b); if (isNaN(dateA)) { return 1; } else if (isNaN(dateB)) { return -1 } else { if (dateA < dateB) return -1; else if (dateA > dateB) return 1; else return 0; } }; Usage of the function. $(document).ready( function () { var dates = [ new Date( '08/25/2018' ), new Date( 'test' ), new Date( '09/15/2018' ), new Date( ...

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 })); };

I have this script below that will insert a dynamically defined script tag next to an existing script element in an ASP.NET MVC page. $(document).ready( function () { script.type = "text/javascript" ; script.src = '/Scripts/bootstrap3.2.0.js' ; $(script).insertAfter( 'script[src*="bootstrap.js"]' ); $( 'script[src*="bootstrap.js"]' ).attr( 'src' , '' ); }); Using the script above, I wasn't able to achieve the output since it can't locate the particular script tag. Upon investigating the production site, it appears that the scripts are bundled and the code above has no effect. With slight modification of the code to check if a script is bundled, I managed to get the inserting of script working. $(document).ready( function () { var script = document.createElement( 'script' ); script.type = "text/javascript" ; script.src = '@Url.Content("~/Scripts/bootstrap3.2.0.js")...

Hello all! When inserting local dates in MongoDB and retrieving them using C#, you might wonder why the date returned is inconsistent with the values stored in the database. Well, MongoDB treats those dates as UTC. So to display those dates as local, there are several solutions. Option one is to change the BsonElement attribute of a date property [BsonElement] [Required(ErrorMessage = "Activity Date required")] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] public DateTime ActivityDate { get ; set ; } to BsonDateTimeOptions and set it's kind to local. [BsonDateTimeOptions(Kind = DateTimeKind.Local)] [Required(ErrorMessage = "Activity Date required")] [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)] public DateTime ActivityDate { get ; set ; } Option two is to retain the BsonElement attribute of the date property. [BsonElement] [Required(ErrorMessage = "A...

Hello, Our team encountered this issue before when using jQuery.Validation in ASP.NET MVC and the solution that we have is to replace the jQuery Validation Plugin from version 1.8.0 to 1.11.1 . Until now, were still using this version. Cheers!

When passing a model to the Update action, you may notice that the id field contains series of zeroes instead of the GUID value given the action below. public ActionResult EditActivity (UserActivity userActivity) { if (userActivity != null ) { userRepository.Update(userActivity); } return RedirectToAction ( "Index" ); } I already have set the @Html.HiddenFor() in the page with the value of the ID. After doing some research, I came up with the solution which is to change the @Html.HiddenFor(model => model.Id) element to @Html.Hidden(). @using (Html.BeginForm("EditActivity", "Home", FormMethod.Post)) { @Html.AntiForgeryToken() @Html.Hidden("id", Model.Id) //your html form elements here... } And in the controller action, add another parameter for the id which is of type string. public ActionResult EditActivity (UserActivity userActivity, string id) { if (userActivity != null ) { userActivity.Id = ObjectId.Pars...

Good evening developers! The current project that I'm working with retrieves records from SQL Server and MongoDB. And it's my first time to use the NoSQL db in a real world project. I've attended training before but using the NoSQL db was not approved by the customer. Going back to the topic of this post, I was wondering if there's a similar approach in MongoDB to return the last inserted _id just like in C#'s code like this: int id = Convert.ToInt32(cmd.ExecuteScalar()); After experimenting and debugging, I can get the newly inserted record's id right after the insert statement by retrieving the id from the newly inserted BSONDocument itself. public void Add (UserActivity userActivity) { var activityDocument = new BsonDocument { { "ActivityUserName" , userActivity.ActivityUserName }, { "ActivityName" , userActivity.ActivityName }, { "ActivityModule" , userActivity.ActivityModule }, { "ActivityDate" , user...

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

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(); } }

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.

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. ")]

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

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

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

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

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