Applying jQuery DataTable 1.10+ with ASP.Net MVC 5 Tutorial

jQuery DataTable is a jQuery plugin to show table of data.
Note jQuery DataTable had used old-style attribute names like "bProcessing" instead of new name "processing" for older version. Thus Google DataTable will get lots of results based on the old naming style.

Creating DataTable with Customized Columns

The Model part:

The Html part:

<table id="example">
    <thead>
      <tr><th>Sites</th></tr>
    </thead>
    <tbody>
      <tr><td>SitePoint</td></tr>
      <tr><td>Learnable</td></tr>
      <tr><td>Flippa</td></tr>
    </tbody>
</table>

The javascript part:

<script type="text/javascript" charset="utf-8">
    var myTable;
    $(document).ready(function() {
        myTable = $('#jobs-table').dataTable( {
            "destroy": true,
            "processing": true,
            "serverSide": true,
            "ordering": false,
            "info": true,
            "paging": false,
            "searching": false,
            "scrollX": true,
            "ajax": {
                "url": "/DataController/GetDataForTable",
                "type": "GET",
                "data": { "date": startDate}
            },
            "columnDefs": [ {
                "targets": 0, /*column index counting from the left*/
                "searchable": false,
                "className": "dt-right", /* Right align text in the header and body */
                "render": function ( data, type, row ) {
                    return data +' ('+ row[3]+')';
                },
                { "visible": false,  "targets": [ 3 ] }
            }],
            "columns": [
                { "data": "StartDate" },
                { "data": "Players" },
                { "data": "TotalSession" },
            ]
        })
    });
</script>

Note the above javascript will set the data table to align right which defined in the columnDefs for the 1st column.

In addition, the first column will also display the 4th column combined through render function. And it hides the 4th column. The render function has 3 parameters, data, type, and row. The data refers the data for the cell, and also the type.

Serverside DataTable

Note above dataTable define contains serverSide as true, which means the data source will come from server side.  Actually, above code contains ajax parameter, which refers a MVC controller method named GetDataForTable, which returned json data to loading the data table.

    public class DataController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }
        
        public JsonResult GetDataForTable(string startDate)
        {
            try
            {
                if (startDate == null)
                {
                    return Json(null, JsonRequestBehavior.AllowGet);
                }
                else
                {
                    MyDataModel model = (new MyDataModelService()).GetMyDataModel(startDate);
                    return Json(new {
                        draw = 1, 
                        recordsTotal = model.MyDataList.Count,
                        recordsFiltered = model.MyDataList.Count,
                        data = model.MyDataList }, JsonRequestBehavior.AllowGet);
                }
            }
            catch (Exception ex)
            {
                return Json(ex.Message, JsonRequestBehavior.AllowGet);
            }
        }
    }

Note the json data contained draw, recordsTotal, recordsFiltered, and data, which are needed for data table.

Reference:
http://www.codeproject.com/Tips/844403/jQuery-Datatables-For-Beginners
https://datatables.net/manual/styling/classes
https://datatables.net/manual/server-side
http://legacy.datatables.net/usage/columns
http://www.codeproject.com/Articles/155422/jQuery-DataTables-and-ASP-NET-MVC-Integration-Part
http://stackoverflow.com/questions/22737957/use-jquery-datatables-server-side-processing-with-mvc-serialize-criteria-form-a/22742742#22742742
https://www.echosteg.com/jquery-datatables-asp.net-mvc5-server-side

Apple Style JQuery Toggle Button

JQuery Toggle Button is an Apple style toggle button which has following very nice look and feel.

The light theme is very nice looking. To apply it in your web page, add following css  at first:

  <head>
    <title>My cool page</title>

    <link rel="stylesheet" href="css/toggles.css">
    <link rel="stylesheet" href="css/toggles-light.css">

    <!-- ALL OF THE THEMES -->
    <!-- <link rel="stylesheet" href="css/toggles-all.css"> -->

    <!-- ALL OF THE CSS AND THEMES IN ONE FILE -->
    <!-- <link rel="stylesheet" href="css/toggles-full.css"> -->

and javascript file at latter.

    <script src="js/toggles.js" type="text/javascript"></script>
    <!-- MINIFIED JS - recommended for production -->
    <!-- <script src="js/toggles.min,js" type="text/javascript"></script> -->
  </body>
</html>

Add following to your web page to place the toggle.

<div class="toggle toggle-light">

Add following javascript  to your web page javascript file.

// Simplest way:
$('.toggle').toggles();

// With options (defaults shown below)
$('.toggle').toggles({
  drag: true, // allow dragging the toggle between positions
  click: true, // allow clicking on the toggle
  text: {
    on: 'ON', // text for the ON position
    off: 'OFF' // and off
  },
  on: true, // is the toggle ON on init
  animate: 250, // animation time (ms)
  easing: 'swing', // animation transition easing function
  checkbox: null, // the checkbox to toggle (for use in forms)
  clicker: null, // element that can be clicked on to toggle. removes binding from the toggle itself (use nesting)
  width: 50, // width used if not set in css
  height: 20, // height if not set in css
  type: 'compact' // if this is set to 'select' then the select style toggle will be used
});


// Getting notified of changes, and the new state:
$('.toggle').on('toggle', function(e, active) {
  if (active) {
    console.log('Toggle is now ON!');
  } else {
    console.log('Toggle is now OFF!');
  }
});

Following Javascript code can be used to change toggle states:

// initiate a new Toggles class
$('.toggles').toggles({
  on: true
});

// the underlying Toggles class can be accessed
var myToggle = $('.toggles').data('toggles');

console.log(myToggle.active); // true
myToggle.toggle();
console.log(myToggle.active); // false

// set the state to 'false'
// will not do anything if the state is already false
myToggle.toggle(false);
console.log(myToggle.active); // false

// passing a boolean in place of options on an active toggle element
// will set the state
$('.toggles').toggles(true);
console.log(myToggle.active); // true

// the toggle-active data attribute stores the state too
console.log($('.toggles').data('toggle-active')); // true

// myToggle.toggle(state, noAnimate, noEvent)

// don't animate the change
myToggle.toggle(false, true);

// change the state without triggering an event 
myToggle.toggle(true, false, true);

Following javascript can be used to disable and enable your toggle control:

// your toggle element
var toggle = $('.toggle');

// initialise it
toggle.toggles();

// disable the toggle element (click + drag will no longer work)
toggle.toggleClass('disabled', true);

// setting the state via JS is NOT disabled, only user input
// toggle the toggle on
toggle.toggles(true);

// re-enable the toggle
toggle.toggleClass('disabled', false);

My own example:
Html part:

<div id="buttonAutoRefresh" class="toggle toggle-light"></div>

Javascript part:

    var autoRefresh;
    var SetAutoRefreshOnOff = function () {
        var button = $('#buttonAutoRefresh');
        var toggle = button.data('toggles');
        //alert(toggle.active);
        //button.Toggle(); //switch the states of the button
        if (toggle.active) {
            autoRefresh = setInterval(LoadPageContent, 15000); //only set one time
        }
        else if (typeof (autoRefresh) != "undefined") {
            clearInterval(autoRefresh); //clear autoRefresh
        }
    }

    // initiate a new Toggles class
    $('.toggle').toggles({ width: 50 });
    $('.toggle').on('toggle', SetAutoRefreshOnOff);

Reference:
https://github.com/simontabor/jquery-toggles
http://simontabor.com/labs/toggles/

Best Bootstrap Plugins for Web BI and Reporting

Bootstrap is the best web front end framework designed for responsive design and mobile first. Except for standard Bootstrap functionality, there are lots of popular Bootstrap Plugins you can apply for your Web Reporting and BI requirement.

Fuel UX

is an incredible collection of enhancements to Twitter Bootstrap. All the controls are clean and lightweight, and they fit naturally into the bootstrap look and feel. The collection includes controls like datagrids, custom select boxes, spinners, trees, multi-step form wizards and more.

1. Add the fueluxclass to a page wrapper (usually either <html> tag or <body> tag)
   

   <body class="fuelux">

2. Include the CSS on your page somewhere:
   

   <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
   <link href="//www.fuelcdn.com/fuelux/3.11.5/css/fuelux.min.css" rel="stylesheet"> 

3. Include the JS on your page somewhere:
   

   <!-- jQuery -->
   <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.js"></script>
   <!-- Include all compiled plugins (below), or include individual files as needed -->
   <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   <script src="//www.fuelcdn.com/fuelux/3.11.5/js/fuelux.min.js"></script>

Fuel UX has an excellent datepicker, repeater, and tree control,

Date Range Picker

is a component creates a drop down from which you can select a range of date. The component relies on Bootstrap, JQuery, and Moments.js. You need to add following scripts and links on your page:

<!-- Include Required Prerequisites -->
<script type="text/javascript" src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css" />
 
<!-- Include Date Range Picker -->
<script type="text/javascript" src="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/bootstrap.daterangepicker/2/daterangepicker.css" />

The Date Range Picker is attached to a text input. It will use the current value of the input to initialize, and update the input if new dates are chosen.

<input type="text" name="daterange" value="01/01/2015 - 01/31/2015" />
<script type="text/javascript">
$(function() {
    $('input[name="daterange"]').daterangepicker();
});
</script>

Clock Picker

is a unique clock style time picker for Bootstrap.

ClockPicker was designed for Bootstrap in the beginning. So Bootstrap and JQuery are the only dependencies.

The component only used .popover and some of .btn styles of Bootstrap.

<div class="input-group clockpicker">
    <input type="text" class="form-control" value="09:30">
    <span class="input-group-addon">
        <span class="glyphicon glyphicon-time"></span>
    </span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>

metisMenu

Stylish menu will give your website a perfect weapon to attract visitors. metisMenu can be a solution for this, it’s a JQuery based menu plugin for twitter Bootstrap 3. Here in this menu, you can give effects like animated accordion and supported with auto collapse system.

<script 
src="metisMenu.js"></script>
<script>
  $(function () {
    $('#menu').metisMenu();
  });
</script>

Bootstrap WYSIHTML5

A Javascript plugin that makes it easy to create simple WYSIWYG editors.

JQuery File Uploader

A file upload widget which features multiple file selection, drag and drop, progess bars, validation and preview images.

BootstrapValidator

A JQuery plugin for validating forms within Bootstrap.

JQuery Pagination

A plugin that simplifies the usage of Bootstrap's Pagintion by using appropriate classes: .pagination, .active and .disabled.

Bootstrap Star Rating

A jQuery star rating plugin for Bootstrap that supports fractional star fill and RTL input support.

Bootstrap Multiselect

A JQuery based plugin for using select inputs with the multiple attributes.

Bootstrap Video Player

A customizable HTML5 video player plugin for jQuery based on Bootstrap's UI.

Data Tables

Data Tables is the most popular table enhancing add on for Bootstrap. This plugin not only makes your tables sort-able, but it also makes use of the framework’s pagination controls and makes the data searchable. This component is Web BI/Reporting must have tool.

Bootstrap Datagrid

bs_grid is a Bootstrap based jQuery Datagrid plugin. It comes with advanced row selection, pagination, sorting as well as filtering. This bs_grid is fully customizable, responsive, localization and Works sound with Bootstrap or individual.

Social Buttons

Chart.js

Chart.js (github) is a new charting library that uses the HTML5 canvas element and provides fallbacks for IE7/8. The library supports 6 chart types that are animated and fully customizable. Chart.js doesn’t have any dependencies and is less than 5kb in size. Say goodbye to flash!

Bootstrap Image Gallery

Bootstrap Image Gallery is a customizable image & video gallery extension to blueimp Gallery, a touch-enabled, responsive extension for images and videos in the modal dialog of the Bootstrap framework. It features swipe, mouse as well as navigation to keyboard, transition effects, fullscreen support and on-demand content loading. Bootstrap Image Gallery can be extended to display supplementary content types.

Source:
http://tutorialzine.com/2013/07/50-must-have-plugins-for-extending-twitter-bootstrap/
http://speckyboy.com/2014/06/16/plugins-for-extending-bootstrap/
https://medium.com/@themefisher/40-new-must-have-plugins-for-extending-twitter-bootstrap-possibilities-e2a79592c90b#.coqlx2gc7
http://tutorialzine.com/2013/04/50-amazing-jquery-plugins/

How to set Knockout Radio Button with a Default Value

If you want to set default value for radio button checked, you need to use an observable attribute with variable values, and each one is a real value for one radio button.

within  data-bind = "checked: TransferType"

TransferType: ko.ovservible("room")  <== Init value

for radiobutton's onchange() event, within the c# code:

ViewModel.TransferType("floating");

Kendo Invisible Control Tips

If you want to make Kendo control such as dropdown list invisible, you should put them within <div></div> and put the <div> invisible, so that the dropdown list still be accessible through JQuery.

Knockout Binding

Textbox Binding

<input type="text" id ="txtFirstName" data-bind="value: Employee.FirstName"/>

Textbox Binding

<input type="radio" id="rdoMale" data-bind="checked: Employee.Gender" name="gender" value="0" />

<input type="radio" id="rdoMale" data-bind="checked: Employee.Gender" name="gender" value="1" />