Development Simply Put

"If you can't explain it simply, you don't understand it well enough" -Albert Einstein

  • Development Simply Put

    If you can't explain it simply, you don't understand it well enough.

    Read More
  • ITWorx

    ITWorx is a global software professional services organization. Headquartered in Egypt, the company offers Portals, Business Intelligence, Enterprise Application Integration and Application Development Outsourcing services to Global 2000 companies.

    Read More
  • Information Technology Institute

    ITI is a leading national institute established in 1993 by the Information and Decision Support Centre.

    Read More

2015-02-08

Knockout Advanced Tree Library & Control





http://knockoutadvancedtree.byethost10.com


All code samples used on this post can be downloaded from here


This post shows you how to fully implement a tree control using knockout. It was taken into consideration while writing the code to separate the business-related code from the core implementation as far as possible without adding too much complexity to the whole solution.

You can take this library as a base which you can modify to be adapted to your needs. Feel free to do it and for sure if you have any comments or ideas I am all ears.


Supported Features
  1. Flat input data
  2. Dynamic node object properties
  3. Sorting by node object properties
  4. Searching by node object properties
    1. By like patterns (case sensitive/insensitive) or whole words
    2. By regular expressions
    3. Expanding to matching nodes
    4. Highlighting matching nodes
  5. Expand/Collapse
  6. Adding nodes
  7. Extensibility

Note:
The demo page may take quite time to fully load and the tree to appear because I meant to load a quite number of nodes to test the tree under such conditions and not only happy scenarios. The tree in the demo will load 1230 nodes.


Note:
This post is not meant to be a knockout tutorial. It assumes that you have experience with knockout and that's why I am not going to explain every line of code. Most of the code is business irrelative and dependent except for a few lines which will be highlighted with inline comments on the code.

Note:
The tree structure and styling used in this solution is built on the jsTree plugin. jsTree is jquery plugin, that provides interactive trees. It is absolutely free, open source and distributed under the MIT license. jsTree is easily extendable, themable and configurable, it supports HTML & JSON data sources and AJAX loading. It has several great features but in this solution we just used its themes.


Due to the huge amount of code I will not post the code here but you have download the code from this link.
You can also check the live demo on this link.


That's it. Hope you find this useful.


http://knockoutadvancedtree.byethost10.com



2015-02-02

Knockout Datagrid With Sorting, Paging And Searching




www.googledrive.com/host/0BxGPghTC6VdBfmVlRzg3d0xuSW1lVVRReXUwYlZDbFl6dTdhaUdRazJwb2kxNzVDRllVbTg


All code samples used on this post can be downloaded from here.


If you are interested into having a quick recap on the paging concept you can check the post Paging Concept - The Main Equations To Make It Easy first.


This post shows you how to fully implement a data grid with sorting, paging and searching features. It was taken into consideration while writing the code to separate the business-related code from the core implementation as far as possible without adding too much complexity to the whole solution.

You can take the code below as a base which you can modify to be adapted to your needs. Feel free to do it and for sure if you have any comments or ideas I am all ears.


Note:
This post is not meant to be a knockout tutorial. It assumes that you have experience with knockout and that's why I am not going to explain every line of code. Most of the code is business irrelative and dependent except for a few lines which will be highlighted with inline comments on the code.


index.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>Development Simply Put | DataGrid With Sorting, Paging And Searching</title>
  
  <link rel="stylesheet" type="text/css" href="css/layout.css"/>
  <link type="text/css" rel="stylesheet" href="js/jtable.2.4.0/themes/metro/green/jtable.min.css"/>
  
  <script type="text/javascript" src="js/Vendor/jquery-1.11.0.min.js"></script>
  <script type="text/javascript" src="js/Vendor/jquery-ui-1.9.2.js"></script>
  <script type="text/javascript" src="js/Vendor/jquery.layout-1.3.0.js"></script>
  <script type="text/javascript" src="js/Vendor/jquery.paginate.js"></script>
  <script type="text/javascript" src="js/Vendor/KO/knockout-3.2.0.js"></script>
  <script type="text/javascript" src="js/Vendor/KO/knockout.mapping-latest.js"></script>
  <script type="text/javascript" src="js/DecimalSignedTextBoxWithLimit.js"></script>
  <script type="text/javascript" src="js/Common.js"></script>
  <script type="text/javascript" src="js/CommonViewModelsDefinitions.js"></script>
  <script type="text/javascript" src="js/Employees.js"></script>
    </head>
 
 <body>
  <div id="EmployeesMainDiv"></div>
 </body>
</html>

Employees_Template.html
<div class="jtable-main-container">
 <div class="jtable-title">
  <div class="jtable-title-text">
            Employees
  </div>
     <div class="jtable-toolbar">
   <span class="jtable-toolbar-item jtable-toolbar-item-add-record" style="vertical-align:middle!important;">
    <span class="jtable-toolbar-item-text">
     Highlight  
     <input type="text" style="width:200px;" data-bind="value: $root.SearchText, valueUpdate: 'afterkeydown'" />
    </span>
   </span>
      <!-- ko if:  $root.WithPaging() -->
    <span class="jtable-toolbar-item jtable-toolbar-item-add-record" style="vertical-align:middle!important;">
     <span class="jtable-toolbar-item-text">
      Page Size 
      <input type="text" style="width:50px;" data-bind="value: $root.PageSize, isUnSignedIntegerTextBox: true" />
     </span>
    </span>
   <!-- /ko -->
  </div> 
 </div>
    <table class="jtable">
  <thead>
   <tr>
    <th class="jtable-column-header jtable-column-header-sortable" data-bind="click: function () { $root.SetEmployeesSorting('Id'); }, css: { 'jtable-column-header-sorted-asc': $root.SortingColumn() == 'Id' && $root.SortingDirection() == 'asc', 'jtable-column-header-sorted-desc': $root.SortingColumn() == 'Id' && $root.SortingDirection() != 'asc' }">
     <div class="jtable-column-header-container">
      <span class="jtable-column-header-text">
       Id
      </span>
     </div>
    </th>
    <th class="jtable-column-header jtable-column-header-sortable" data-bind="click: function () { $root.SetEmployeesSorting('Name'); }, css: { 'jtable-column-header-sorted-asc': $root.SortingColumn() == 'Name' && $root.SortingDirection() == 'asc', 'jtable-column-header-sorted-desc': $root.SortingColumn() == 'Name' && $root.SortingDirection() != 'asc' }">
     <div class="jtable-column-header-container">
      <span class="jtable-column-header-text">
       Name
      </span>
     </div>
    </th>
   </tr>
  </thead>
  <tbody id="EmployeesTableBody">
   <!-- ko if:  $data.Employees().length > 0 -->
    <!-- ko template: {name: 'EmployeesTemplate', foreach: $data.Employees, as: 'employee'}-->
    <!-- /ko -->
   <!-- /ko -->
   <!-- ko ifnot:  $data.Employees().length > 0 -->
    <tr class="jtable-data-row jtable-row-odd">
     <td colspan="2">
      No employees found
     </td>
    </tr>
   <!-- /ko -->
  </tbody>
 </table>
    <!-- ko if:  $data.Employees().length > 0 -->
        <div style="display:block;" id="EmployeesPager" class="page_navigation"></div>
    <!-- /ko -->
</div>

<script id="EmployeesTemplate" type="text/html">
    <tr class="jtable-data-row" data-bind="css: {'not-found-on-search': !$root.SearchTextExistsOnRow(employee), 'jtable-row-even': ($index() % 2) == 0, 'jtable-row-odd': ($index() % 2) != 0 }">
        <td>
            <label data-bind="highlightThis: $root.SearchText(), text: employee.Id(), shortenAt: AppSettings.ShortenAt, moreText: AppSettings.ShortenMoreText, lessText: AppSettings.ShortenLessText"></label>
        </td>
  <td>
            <label data-bind="highlightThis: $root.SearchText, text: employee.Name(), shortenAt: AppSettings.ShortenAt, moreText: AppSettings.ShortenMoreText, lessText: AppSettings.ShortenLessText"></label>
        </td>
    </tr>
</script>

CommonViewModelsDefinitions.js
var AppSettings = new Object();
AppSettings.PageSize = 5;
AppSettings.ShortenAt = 15;
AppSettings.ShortenMoreText = "more";
AppSettings.ShortenLessText = "less";


function EmployeesViewModelDefinition(settings) {
    var self = this;

    self.IsNullOrUndefinedOrEmpty = function (obj) {
        return (typeof (obj) == 'undefined' || undefined == obj || null == obj || '' == obj.toString().trim());
    };

    self.finalSettings = {
        WithPaging: (self.IsNullOrUndefinedOrEmpty(settings.WithPaging)) ? false : settings.WithPaging,
        PageSize: (self.IsNullOrUndefinedOrEmpty(settings.PageSize)) ? AppSettings.PageSize : settings.PageSize,
        ActualCurrentPageNumber: (self.IsNullOrUndefinedOrEmpty(settings.ActualCurrentPageNumber)) ? 1 : settings.ActualCurrentPageNumber,
        ActualNumberOfPages: (self.IsNullOrUndefinedOrEmpty(settings.ActualNumberOfPages)) ? 1 : settings.ActualNumberOfPages,
        ActualTotalNumberOfRows: (self.IsNullOrUndefinedOrEmpty(settings.ActualTotalNumberOfRows)) ? 0 : settings.ActualTotalNumberOfRows,
        ActualCurrentPageRowsCount: (self.IsNullOrUndefinedOrEmpty(settings.ActualCurrentPageRowsCount)) ? 0 : settings.ActualCurrentPageRowsCount,
        PagerDomElementId: (self.IsNullOrUndefinedOrEmpty(settings.PagerDomElementId)) ? null : settings.PagerDomElementId,
        SortingColumn: (self.IsNullOrUndefinedOrEmpty(settings.SortingColumn)) ? 'Id' : settings.SortingColumn,
        SortingDirection: (self.IsNullOrUndefinedOrEmpty(settings.SortingDirection)) ? 'asc' : settings.SortingDirection,
        WithPagingUpdatedDelegate: (self.IsNullOrUndefinedOrEmpty(settings.WithPagingUpdatedDelegate)) ? function (currentSettings) { } : settings.WithPagingUpdatedDelegate,
        PageSizeUpdatedDelegate: (self.IsNullOrUndefinedOrEmpty(settings.PageSizeUpdatedDelegate)) ? function (currentSettings) { } : settings.PageSizeUpdatedDelegate,
        ActualCurrentPageNumberUpdatedDelegate: (self.IsNullOrUndefinedOrEmpty(settings.ActualCurrentPageNumberUpdatedDelegate)) ? function (currentSettings) { } : settings.ActualCurrentPageNumberUpdatedDelegate,
        SortingColumnUpdatedDelegate: (self.IsNullOrUndefinedOrEmpty(settings.SortingColumnUpdatedDelegate)) ? function (currentSettings) { } : settings.SortingColumnUpdatedDelegate,
        SortingDirectionUpdatedDelegate: (self.IsNullOrUndefinedOrEmpty(settings.SortingDirectionUpdatedDelegate)) ? function (currentSettings) { } : settings.SortingDirectionUpdatedDelegate
    };
 
    self.GetFinalSettings = function () {
        for (var prop in self) {
            if (self.finalSettings.hasOwnProperty(prop)) {
                self.finalSettings[prop] = self[prop]();
            }
        }

        return self.finalSettings;
    };

    self.SynchronizeSettings = function (source, destination) {
        for (var prop in destination) {
            if (destination.hasOwnProperty(prop)) {
                if (typeof (source[prop]) != 'undefined' && null != source[prop]) {
                    destination[prop] = source[prop];
                }
            }
        }
    };
 
 self.SearchText = ko.observable();
 
    self.private_WithPaging = ko.observable(self.finalSettings.WithPaging);
    self.WithPaging = ko.computed({
        read: function () {
            return self.private_WithPaging();
        },
        write: function (value) {
            self.private_WithPaging(value);

            if (typeof (self.finalSettings.WithPagingUpdatedDelegate) != 'undefined' && null != self.finalSettings.WithPagingUpdatedDelegate) {
                self.finalSettings.WithPagingUpdatedDelegate(self.GetFinalSettings());
            }
        },
        deferEvaluation: true
    });

    self.private_PageSize = ko.observable(self.finalSettings.PageSize);
    self.PageSize = ko.computed({
        read: function () {
            return self.private_PageSize();
        },
        write: function (value) {
            if (typeof (value) == 'undefined' || null == value || '' == value) {
                value = AppSettings.PageSize;
            }

            self.private_PageSize(value);

            if (typeof (self.finalSettings.PageSizeUpdatedDelegate) != 'undefined' && null != self.finalSettings.PageSizeUpdatedDelegate) {
                self.finalSettings.PageSizeUpdatedDelegate(self.GetFinalSettings());
            }
        },
        deferEvaluation: true
    });

    self.private_PagerDomElementId = ko.observable(self.finalSettings.PagerDomElementId);
    self.PagerDomElementId = ko.computed({
        read: function () {
            return self.private_PagerDomElementId();
        },
        write: function (value) {
            self.private_PagerDomElementId(value);
        },
        deferEvaluation: true
    });

    self.private_SortingColumn = ko.observable(self.finalSettings.SortingColumn);
    self.SortingColumn = ko.computed({
        read: function () {
            return self.private_SortingColumn();
        },
        write: function (value) {
            if (value == self.private_SortingColumn()) {
                self.private_SortingDirection(self.ToggleSortingDirection(self.SortingDirection()));
            }
            else {
                self.private_SortingColumn(value);
            }

            if (!self.WithPaging()) {
                self.SortEmployees();
            }
            else if (typeof (self.finalSettings.SortingColumnUpdatedDelegate) != 'undefined' && null != self.finalSettings.SortingColumnUpdatedDelegate) {
                self.finalSettings.SortingColumnUpdatedDelegate(self.GetFinalSettings());
            }
        },
        deferEvaluation: true
    });

    self.ToggleSortingDirection = function (currentDirection) {
        var finalDirection;

        if (currentDirection.toLowerCase().indexOf('asc') > -1) {
            finalDirection = 'desc';
        }
        else {
            finalDirection = 'asc';
        }

        return finalDirection;
    };

    self.private_SortingDirection = ko.observable(self.finalSettings.SortingDirection);
    self.SortingDirection = ko.computed({
        read: function () {
            return self.private_SortingDirection();
        },
        write: function (value) {
            self.private_SortingDirection(self.ToggleSortingDirection(self.SortingDirection()));

            if (!self.WithPaging()) {
                self.SortEmployees();
            }
            else if (typeof (self.finalSettings.SortingDirectionUpdatedDelegate) != 'undefined' && null != self.finalSettings.SortingDirectionUpdatedDelegate) {
                self.finalSettings.SortingDirectionUpdatedDelegate(self.GetFinalSettings());
            }
        },
        deferEvaluation: true
    });

    self.SetEmployeesSorting = function (sortingColumn) {
        self.SortingColumn(sortingColumn);
    };

    self.SortEmployees = function () {
        self.Employees.sort(self.SortEmployeesComparer);
    };

    self.SortEmployeesComparer = function (a, b) {
        var result = 0;

        var sortingColumn = self.SortingColumn();
        var sortingDirection = self.SortingDirection();

        var valA = a[sortingColumn]();
        var valB = b[sortingColumn]();

        if (isNumeric(valA) && isNumeric(valB)) {
            valA = valA.toString().toLowerCase().replace(',', '');
            valB = valB.toString().toLowerCase().replace(',', '');

            if (parseFloat(valA) == parseFloat(valB)) {
                result = 0;
            }
            else if (parseFloat(valA) > parseFloat(valB)) {
                result = 1;
            }
            else {
                result = -1;
            }
        }
        else {
            if (valA == valB) {
                result = 0;
            }
            else if (valA > valB) {
                result = 1;
            }
            else {
                result = -1;
            }
        }

        if (sortingDirection.toLowerCase().indexOf('asc') == -1) {
            result = result * -1;
        }

        return result;
    };

    self.DataBind = function (JSEmployees, actualNumberOfPages, actualTotalNumberOfRows, actualCurrentPageNumber, actualCurrentPageRowsCount) {
        var retrievedEmployees = ko.mapping.fromJS(JSEmployees);

        self.Employees.removeAll();

        for (var i = 0; i < retrievedEmployees().length; i++) {
            var Employee = (retrievedEmployees())[i];
            self.Employees.push(Employee);
        }

        self.finalSettings.ActualNumberOfPages = actualNumberOfPages;
        self.finalSettings.ActualTotalNumberOfRows = actualTotalNumberOfRows;
        self.finalSettings.ActualCurrentPageNumber = actualCurrentPageNumber
        self.finalSettings.ActualCurrentPageRowsCount = actualCurrentPageRowsCount;
        self.BuildPager();
    };

    self.DataBindFromSettings = function (JSEmployees, newSettings) {
        var finalSettings = self.GetFinalSettings();
        self.SynchronizeSettings(newSettings, finalSettings);
        self.DataBind(JSEmployees, finalSettings.ActualNumberOfPages, finalSettings.ActualTotalNumberOfRows, finalSettings.ActualCurrentPageNumber, finalSettings.ActualCurrentPageRowsCount);
    };

    self.BuildPager = function () {
        if (!self.IsNullOrUndefinedOrEmpty(self.PagerDomElementId()) && self.WithPaging() && self.Employees().length > 0 && self.finalSettings.ActualNumberOfPages > 1) {
            $("#" + self.PagerDomElementId()).show();

            $("#" + self.PagerDomElementId()).paginate({
                count: self.finalSettings.ActualNumberOfPages,
                start: self.finalSettings.ActualCurrentPageNumber,
                display: 11,
                border: false,
                text_color: 'rgba(255, 255, 255, 1)',
                background_color: 'rgba(255, 255, 255, 0)',
                text_hover_color: '#FB6E52',
                background_hover_color: '#FFFFFF',
                images: false,
                onChange: function (newPageNumber) {
                    if (newPageNumber != self.finalSettings.ActualCurrentPageNumber) {
                        self.finalSettings.ActualCurrentPageNumber = newPageNumber;

                        if (typeof (self.finalSettings.ActualCurrentPageNumberUpdatedDelegate) != 'undefined' && null != self.finalSettings.ActualCurrentPageNumberUpdatedDelegate) {
                            self.finalSettings.ActualCurrentPageNumberUpdatedDelegate(self.GetFinalSettings());
                        }
                    }
                }
            });
        }
        else {
            $("#" + self.PagerDomElementId()).hide();
        }
    };
 
 
 //Define your own entities array here
 self.Employees = ko.observableArray();
 
 //Include your own entities columns here
 self.SearchTextExistsOnRow = function(employee) {
  if(self.IsNullOrUndefinedOrEmpty(self.SearchText())) {
   return true;
  }
  else {
   return (employee.Id().toString().toLowerCase().indexOf(self.SearchText().toLowerCase())) != -1
   || (employee.Name().toString().toLowerCase().indexOf(self.SearchText().toLowerCase())) != -1;
  }  
 };
}

Common.js
jQuery.fn.highlight = function (str, className) {
    var regex = new RegExp(str, "gi");
    return this.each(function () {
        $(this).contents().filter(function() {
            return this.nodeType == 3 && regex.test(this.nodeValue);
        }).replaceWith(function() {
            return (this.nodeValue || "").replace(regex, function(match) {
                return "<span class=\"" + className + "\">" + match + "</span>";
            });
        });
    });
};

function isBound(elemenId) {
    var result = false;
    var x = ko.dataFor($("#" + elemenId)[0]);

    if (typeof (x) != 'undefined' & null != x) {
        result = true;
    }

    return result;
};

function IsNullOrUndefinedOrEmpty(obj) {
    return (typeof (obj) == 'undefined' || undefined == obj || null == obj || '' == obj);
}

function isNumber(evt) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    return true;
}

function numberWithCommas(x) {
    var parts = x.toString().split(".");
    parts[0] = parts[0].replace(/\B(?=(\d{3})+(?!\d))/g, ",");
    return parts.join(".");
}

function getMaxOccurance(array) {
    if (array.length == 0)
        return null;
    var modeMap = {};
    var maxEl = array[0], maxCount = 1;
    for (var i = 0; i < array.length; i++) {
        var el = array[i];
        if (modeMap[el] == null)
            modeMap[el] = 1;
        else
            modeMap[el]++;
        if (modeMap[el] > maxCount) {
            maxEl = el;
            maxCount = modeMap[el];
        }
    }
    return maxEl;
}

function isNormalInteger(str) {
    var n = ~~Number(str);
    return String(n) === str && n > 0;
}

/*-----------------------------------KO Extenders-------------------------------*/
ko.bindingHandlers.isDecimalSignedTextBoxWithLimit = {
    update: function (element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);

        // Grab some more data from another binding property
        var noOfDigitsBeforeDecimal = allBindings.get('noOfDigitsBeforeDecimal') || 10;
        var noOfDigitsAfterDecimal = allBindings.get('noOfDigitsAfterDecimal') || 10;
        var defaultValue = allBindings.get('defaultValue') || 0;
        var invalidInputCallack = allBindings.get('invalidInputCallack') || null;

        // Now manipulate the DOM element
        if (valueUnwrapped == true) {
            $(element).on("keypress", function () {
                return checkSignedDecimalWithLimit(this, noOfDigitsBeforeDecimal, noOfDigitsAfterDecimal);
            });

            $(element).on("keyup", function () {
                checkPasteSigned(this, noOfDigitsBeforeDecimal, noOfDigitsAfterDecimal, defaultValue, function (elem) { invalidInputCallack(elem); }, false);
            });

            $(element).on("change", function () {
                checkPasteSigned(this, noOfDigitsBeforeDecimal, noOfDigitsAfterDecimal, defaultValue, function (elem) { invalidInputCallack(elem); }, false);
            });

            $(element).on("blur", function () {
                checkPasteSigned(this, noOfDigitsBeforeDecimal, noOfDigitsAfterDecimal, defaultValue, function (elem) { invalidInputCallack(elem); }, true);
            });
        }
    },
    init: function (element, valueAccessor, allBindings) {
        var noOfDigitsBeforeDecimal = allBindings.get('noOfDigitsBeforeDecimal') || 10; // 10 is default duration unless otherwise specified
        var noOfDigitsAfterDecimal = allBindings.get('noOfDigitsAfterDecimal') || 10; // 10 is default duration unless otherwise specified

        adjustZerosAfterDecimalPoint(element, noOfDigitsAfterDecimal);
        adjustNumbersBeforeDecimalPoint(element, noOfDigitsBeforeDecimal);
    }
};

ko.bindingHandlers.isDecimalUnSignedTextBoxWithLimit = {
    update: function (element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);

        // Grab some more data from another binding property
        var noOfDigitsBeforeDecimal = allBindings.get('noOfDigitsBeforeDecimal') || 10;
        var noOfDigitsAfterDecimal = allBindings.get('noOfDigitsAfterDecimal') || 10;
        var defaultValue = allBindings.get('defaultValue') || 0;
        var invalidInputCallack = allBindings.get('invalidInputCallack') || null;

        // Now manipulate the DOM element
        if (valueUnwrapped == true) {
            $(element).on("keypress", function () {
                return checkUnSignedDecimalWithLimit(this, noOfDigitsBeforeDecimal, noOfDigitsAfterDecimal);
            });

            $(element).on("keyup", function () {
                checkPasteUnSigned(this, noOfDigitsBeforeDecimal, noOfDigitsAfterDecimal, defaultValue, function (elem) { invalidInputCallack(elem); }, false);
            });

            $(element).on("change", function () {
                checkPasteUnSigned(this, noOfDigitsBeforeDecimal, noOfDigitsAfterDecimal, defaultValue, function (elem) { invalidInputCallack(elem); }, false);
            });

            $(element).on("blur", function () {
                checkPasteUnSigned(this, noOfDigitsBeforeDecimal, noOfDigitsAfterDecimal, defaultValue, function (elem) { invalidInputCallack(elem); }, true);
            });

            $(element).on("focus", function () {
                var value = $(this).val();
                var formattedDefaultValue = formatZerosAfterDecimalPoint(defaultValue.toString(), noOfDigitsAfterDecimal);
                formattedDefaultValue = formatNumbersBeforeDecimalPoint(formattedDefaultValue, noOfDigitsBeforeDecimal);

                if (value == formattedDefaultValue) {
                    $(this).val('');
                }
            });
        }
    },
    init: function (element, valueAccessor, allBindings) {
        var noOfDigitsBeforeDecimal = allBindings.get('noOfDigitsBeforeDecimal') || 10; // 10 is default duration unless otherwise specified
        var noOfDigitsAfterDecimal = allBindings.get('noOfDigitsAfterDecimal') || 10; // 10 is default duration unless otherwise specified

        adjustZerosAfterDecimalPoint(element, noOfDigitsAfterDecimal);
        adjustNumbersBeforeDecimalPoint(element, noOfDigitsBeforeDecimal);
    }
};

ko.bindingHandlers.isUnSignedIntegerTextBox = {
    update: function (element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);

        // Grab some more data from another binding property
        var defaultValue = allBindings.get('defaultValue') || 0;

        // Now manipulate the DOM element
        if (valueUnwrapped == true) {
            $(element).on("keypress", function (event) {
                return isNumber(event)
            });

            $(element).bind("paste", function (e) {
                e.preventDefault();
            });

            $(element).on("focus", function () {
                var value = $(this).val();

                if (value == defaultValue) {
                    $(this).val('');
                }
            });

            $(element).on("blur", function () {
                var value = $(this).val();

                if (null == value || '' == value) {
                    $(this).val(defaultValue);
                }
            });
        }
    }
};

ko.bindingHandlers.shortenAt = {
    update: function (element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.unwrap(value);

        // Grab some more data from another binding property
        var moreText = allBindings.get('moreText') || "more";
        var lessText = allBindings.get('lessText') || "less";

        // Now manipulate the DOM element
        if (valueUnwrapped > 0) {
            var content = $(element).text();
            if (content.length > valueUnwrapped) {
                var con = content.substr(0, valueUnwrapped);
                var hcon = content.substr(valueUnwrapped, content.length - valueUnwrapped);
                var txt = con + '<span class="dots">...</span><span class="morecontent"><span>' + hcon + '</span>&nbsp;&nbsp;<a href="" class="moretxt">' + moreText + '</a></span>';
                $(element).html(txt);

                $(element).find(".moretxt").click(function () {
                    if ($(this).hasClass("sample")) {
                        $(this).removeClass("sample");
                        $(this).text(moreText);
                    } else {
                        $(this).addClass("sample");
                        $(this).text(lessText);
                    }
                    $(this).parent().prev().toggle();
                    $(this).prev().toggle();
                    return false;
                });
            }
        }
    }
};

ko.bindingHandlers.highlightThis = {
    update: function (element, valueAccessor, allBindings) {
        // First get the latest data that we're bound to
        var value = valueAccessor();

        // Next, whether or not the supplied model property is observable, get its current value
        var valueUnwrapped = ko.utils.unwrapObservable(value);

        // Grab some more data from another binding property
        //var moreText = allBindings.get('moreText') || "more";
        //var lessText = allBindings.get('lessText') || "less";

        // Now manipulate the DOM element
        if (typeof(valueUnwrapped) != 'undefined' && null != valueUnwrapped && valueUnwrapped.toString() != '') {
   if (!$(element).is("[backup]")) {
    $(element).attr("backup", $(element).html());
   }
   
   var backup = $(element).attr("backup");
   $(element).html(backup);
   $(element).highlight(valueUnwrapped, "highlighted-search-text");
        }
  else {
   var backupAttr = $(this).attr('backup');

   if ($(element).is("[backup]")) {debugger;
    var backup = $(element).attr("backup");
    $(element).html(backup);
   }
  }
    }
};
/*-----------------------------------KO Extenders-------------------------------*/

Employees.js
var EmployeesViewModel = null;
 
function ResetEmployeesView() {
    EmployeesViewModel = new EmployeesViewModelDefinition({
        SortingColumnUpdatedDelegate: GetEmployeesPagedOrdered,
        SortingDirectionUpdatedDelegate: GetEmployeesPagedOrdered,
        ActualCurrentPageNumberUpdatedDelegate: GetEmployeesPagedOrdered,
        PageSizeUpdatedDelegate: GetEmployeesPagedOrdered,
        WithPaging: true,
        PagerDomElementId: 'EmployeesPager'
    });
}

function GetEmployeesPagedOrdered(currentSettings, callback) {
 EmployeesViewModel.SearchText("");

    var pageNumber = currentSettings.ActualCurrentPageNumber;
 var pageSize = currentSettings.PageSize;
 var orderByPropertyName = currentSettings.SortingColumn;
 var sortingDirection = currentSettings.SortingDirection;
 
 var token = GetEmployeesPagedOrderedByAjax(pageSize, pageNumber, orderByPropertyName, sortingDirection);
 
 if(null != token) {
  var employees = token.Employees;
  var actualNumberOfPages = token.ActualNumberOfPages;
  var actualTotalNumberOfRows = token.ActualTotalNumberOfRows;
  var actualCurrentPageNumber = token.ActualCurrentPageNumber;
  var actualCurrentPageRowsCount = token.ActualCurrentPageRowsCount;

  var newSettings = {
   ActualNumberOfPages: actualNumberOfPages,
   ActualTotalNumberOfRows: actualTotalNumberOfRows,
   ActualCurrentPageNumber: actualCurrentPageNumber,
   ActualCurrentPageRowsCount: actualCurrentPageRowsCount
  };

  $("#EmployeesMainDiv").load('KOTemplates/Employees_Template.html',
   function () {
    ko.cleanNode($("#EmployeesMainDiv")[0]);
    if (!isBound('EmployeesMainDiv')) {
     ko.applyBindings(EmployeesViewModel, $("#EmployeesMainDiv")[0]);
    }

    EmployeesViewModel.DataBindFromSettings(employees, newSettings);
    
    if (typeof (callback) != 'undefined' && null != callback) {
     callback();
    }
   }
  );
 }
};

//This is the method resonsible for retrieving employees from the back-end by sorting and paging.
//The implementation of this method differs from one system to another depending on the back-end and the server-side framework and language.
//The most important point to notice here is the "Paging Calculations" section in the method below.
//This section should be taken into consideration and implemented. 
function GetEmployeesPagedOrderedByAjax(pageSize, pageNumber, orderByPropertyName, sortingDirection) {
 var resultToken = null;
 
 var AllEmployees = new Array();
 AllEmployees.push({Id:1, Name:"Employee 1"});
 AllEmployees.push({Id:2, Name:"Employee 2"});
 AllEmployees.push({Id:3, Name:"Employee 3"});
 AllEmployees.push({Id:4, Name:"Employee 4"});
 AllEmployees.push({Id:5, Name:"Employee 5"});
 AllEmployees.push({Id:6, Name:"Employee 6"});
 AllEmployees.push({Id:7, Name:"Employee 7"});
 AllEmployees.push({Id:8, Name:"Employee 8"});
 AllEmployees.push({Id:9, Name:"Employee 9"});
 AllEmployees.push({Id:10, Name:"Employee 10"});
 AllEmployees.push({Id:11, Name:"Employee 11"});
 AllEmployees.push({Id:12, Name:"Employee 12"});
 AllEmployees.push({Id:13, Name:"Employee 13"});
 AllEmployees.push({Id:14, Name:"Employee 14"});
 AllEmployees.push({Id:15, Name:"Employee 15"});
 AllEmployees.push({Id:16, Name:"Employee 16"});
 AllEmployees.push({Id:17, Name:"Employee 17"});
 AllEmployees.push({Id:18, Name:"Employee 18"});
 
 if(AllEmployees.length > 0) {
  AllEmployees.sort(function (a, b) {
   var result = 0;
   var valA = a[orderByPropertyName];
   var valB = b[orderByPropertyName];
   
   if (isNumeric(valA) && isNumeric(valB)) {
    valA = valA.toString().toLowerCase().replace(',', '');
    valB = valB.toString().toLowerCase().replace(',', '');

    if (parseFloat(valA) == parseFloat(valB)) {
     result = 0;
    }
    else if (parseFloat(valA) > parseFloat(valB)) {
     result = 1;
    }
    else {
     result = -1;
    }
   }
   else {
    if (valA == valB) {
     result = 0;
    }
    else if (valA > valB) {
     result = 1;
    }
    else {
     result = -1;
    }
   }

   if (sortingDirection.toLowerCase().indexOf('asc') == -1) {
    result = result * -1;
   }

   return result;
  });
  
  //-------------------------------------------------Paging Calculations-------------------------------------------------
  if(pageSize <= 0) {
   pageSize = AllEmployees.length;
  }
  
  var maxNumberOfPages = Math.max(1, Math.ceil(parseFloat(parseFloat(AllEmployees.length) / parseFloat(pageSize))));
  
  if(pageNumber < 1) {
   pageNumber = 1;
  }
  else if(pageNumber > maxNumberOfPages) {
   pageNumber = maxNumberOfPages;
  }
  
  var pageIndex = pageNumber - 1;
  var firstItemIndex = pageIndex * pageSize;
  var lastItemIndex = (pageIndex * pageSize) + (pageSize - 1);
  var actualNumberOfPages = maxNumberOfPages;
  var actualTotalNumberOfRows = AllEmployees.length;
  var actualCurrentPageNumber = pageNumber;
  
  if(lastItemIndex > AllEmployees.length) {
   lastItemIndex = AllEmployees.length - 1;
  }
  
  var actualCurrentPageRowsCount = lastItemIndex - firstItemIndex;
  //-------------------------------------------------Paging Calculations-------------------------------------------------
  
  resultToken = new Object();
  resultToken.Employees = AllEmployees.slice(firstItemIndex, lastItemIndex + 1);
  resultToken.ActualNumberOfPages = actualNumberOfPages;
  resultToken.ActualTotalNumberOfRows = actualTotalNumberOfRows;
  resultToken.ActualCurrentPageNumber = actualCurrentPageNumber;
  resultToken.ActualCurrentPageRowsCount = actualCurrentPageRowsCount;
 }
 
 return resultToken;
}

function BindGrid(callback) {
    GetEmployeesPagedOrdered(EmployeesViewModel.GetFinalSettings(), callback);
};

$(document).ready(function(){
 ResetEmployeesView();
 BindGrid();
});

Layout.css
body {
    font-family: Arial, Helvetica, sans-serif;
    background: grey no-repeat center center;
    min-width: 980px;
    font-size: 12px;
    line-height: normal;
    color: black;
}

* {
    padding: 0;
    outline: none;
    border: none;
    text-align: left;
    list-style: none;
}

.not-found-on-search {
 display: none!important;
}

.highlighted-search-text {
 background-color: #ff2;
}

table thead tr th, table tbody tr td {
    vertical-align: top;
}

a, a:hover, a:visited {
    text-decoration: none;
    outline: none;
    cursor: pointer;
}

a:hover, a:focus, a:active {
 color: black /*c4c4c4*/;
 text-decoration: none;
}

::selection {
    background: #666;
    color: black;
    text-shadow: none;
}

html, body {
    height: 100%;
}

.jPaginate {
    float: right;
    height: 34px;
    position: relative;
    color: #a5a5a5;
    font-size: small;
    width: auto;
    padding-right: 65px;
    margin-top: 10px;
}

.jPaginate a {
 line-height: 15px;
 height: 18px;
 cursor: pointer;
 padding: 2px 5px;
 margin: 2px;
 float: left;
}

.jPag-control-back {
    position: absolute;
    left: 0px;
}

.jPag-control-front {
    position: absolute;
    top: 0px;
}

.jPaginate span {
    cursor: pointer;
}

ul.jPag-pages {
    float: left;
    list-style-type: none;
    margin: 0px 0px 0px 0px;
    padding: 0px;
}

ul.jPag-pages li {
 display: inline;
 float: left;
 padding: 0px;
 margin: 0px;
 font-weight: bold;
}

ul.jPag-pages li a {
 float: left;
 padding: 2px 5px;
}

span.jPag-current {
    cursor: default;
    background-color: rgba(251, 235, 235, 0.38);
    line-height: 15px;
    height: 18px;
    padding: 2px 5px;
    margin: 2px;
    float: left;
}

table tr.jtable-row-odd td, table tr.jtable-data-row td {
    border-bottom: 1px solid #ddd;
    border-right: 1px solid #ddd;
    line-height: 30px;
}


Note:
The table structure and styling used in this solution is built on the jTable plugin. jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or Javascript. It has several great features but in this solution we just used its themes. In this solution we used the green metro theme but it provides other themes which you can choose from.



That's it. Again, all code samples used on this post can be downloaded from here.
Hope you find this usefull.



2015-01-30

A Guide For Dealing With Hierarchical, Parent-Child And Tree Form Data Operations



Lately I have been working on more than one project dealing with hierarchical data structures. This encouraged me to try to sum up my experience on this type of structures and corresponding operations.

From time to time I will revisit this post to update it with whatever new I found related to this topic. Please find the assembled posts below and let me know if you have any comments.


How To Apply Recursive SQL Selections On Hierarchical Data
Sometimes we work on systems where a hierarchical data structure exists on some entities like employees and their managers. Both employees and managers can be called employees but there is a self join relation between them as each employee must have a manager. We all faced the situation when we need to get the info about each employee and his/her direct manager. At this point we used to join between the employees (child) table and itself (parent) on the condition that the parent id of the child is equal to the id of the parent. This is good. But, what about if we need to get the hierarchical tree of managers of a certain employee not just his direct manager. It seems as we just need to the same join but more than one time till we are up all the way to the head manager. This is somehow logical but how can we do this number of joins and we don't know the number of levels up to the head manager?!!! If you want to know more, you can read this article.


How To Transform Unsorted Flat Hierarchical Data Structures Into Nested Parent-Child Or Tree Form Objects
Sometimes you have hierarchical data structure presented into an SQL database table where there is a parent-child relation between rows. You may need to transform this flat hierarchical data structure into a parent-child or tree form entity so that you can use it in more advanced or complex business like binding to a tree control or whatever. If you want to know how to do this transformation process, you can read this article.


How To Copy SQL Hierarchical Data At Run-time While Keeping Valid Internal References And Self Joins
Sometimes when you deal with hierarchical data structures you may need to perform internal copy operations. These copy operations should be handled in a smart way as just using INSERT-SELECT statements will mess up the internal references and self joins of the newly inserted records. If you want to know more about this, you can read this article.


For SQL Hierarchical Data, How To Show Only Tree Branches Including Certain Type Of Entities And Discard Others
If you have a tree of entities represented into a SQL database into parent-child relation, you may need to be able to view only the tree branches which include a certain type of entities and discard the branches which don't include this type. If you ever faced such situation or even curious to know how to manage such situation, you can read this article.


Knockout Advanced Tree Library & Control
This post shows you how to fully implement a tree control using knockout. This tree control has great features like; 01.Flat input data, 02.Dynamic node object properties, 03.Sorting by node object properties, 04.Searching by node object properties, 05.Searching by like patterns (case sensitive/insensitive) or whole words, 06.Searching by regular expressions, 07.Expanding to matching nodes, 08.Highlighting matching nodes, 09.Expand/Collapse, 10.Adding nodes, 11.Extensibility. It was taken into consideration while writing the code to separate the business-related code from the core implementation as far as possible without adding too much complexity to the whole solution. You can take this library as a base which you can modify to be adapted to your needs. Feel free to do it and for sure if you have any comments or ideas I am all ears.


That's it. Hope this will help you someday.


2015-01-23

Splitting Daytime Into Chunks To Enhance SQL Bulk Time-based Operations Performance





The best way to understand what this post is about is to start with a real scenario.

One of my colleagues was building a system which controls some motors using some readings coming from electronic sensors. The problem was that the frequency of the sensors readings was so high that the system had to insert a few reading records into the SQL database in few milliseconds. This means that in just a second the system had to insert hundreds or even thousands of records into the database.

This for sure was a big challenge and due to some customer needs and business requirements the approved solution was to compress the sensor readings per a fixed time range at the end of the day. This means that at the end of each day the sensor readings should be divided into groups where each group is limited by a time range of half an hour for example and then the readings of each group should be aggregated by taking the average. This way we will end up having hundreds of readings records into the database instead of thousands or even more. Till now everything is somehow good and logical.

A new challenge aroused while working on the SQL routine which will carry out the bulk aggregation process. The performance of this process was not promising. The process used to take a huge amount of time due to the heavy date-time comparisons and groupings. This was what encouraged me to jump in and try to help.

Before applying any changes the process was going like this; getting all sensor readings which were created between 00:00:00 and 00:15:00 and then taking the average for these readings, then, getting all sensor readings which were created between 00:15:00 and 00:30:00 and then taking the average for these readings, and so on......

As you can see this amount of processing and grouping based on time is huge and this was causing the whole process to be a nightmare performance wise.

One of the best ways to enhance the performance of bulk actions is to try to break the whole one big process into small controllable ones. Then, observe each small process and check whether it, for one record, depends only on the record itself and doesn't need to know anything about other records or not. If this happens, then this small process could be held on single record basis at early stage which could be the moment the record was created or something else based on the business requirements. This will help split the huge processing effort on different moments and stages of the system business life cycle and workflow which will make it more controllable and less recognizable.

Now, to apply the same concept on the problem we have on hand right now we should notice that:
  1. The chunks of time ranges (15 minutes) are the same for all readings and they do not change for any reason unless requested by system user which is done manually or through user interference
  2. The creation date of each sensor reading record is known at the moment the record is created
  3. Most of the processing effort is consumed on the date-time comparisons followed by the groupings
This helped me to decide that:
  1. The chunks of time ranges should be defined only once at the system launch and the results should be kept physically in a table to be used as a quick cached reference
  2. The time chunk to which each sensor reading record belongs should be decided at the moment the record is created
  3. This way each record can have an id of the time chunk it belongs to which will cause the grouping process to be much more easier and effortless


Create Database
USE [master]
GO

CREATE DATABASE [DayChunks] ON  PRIMARY 
( NAME = N'DayChunks', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\DayChunks.mdf' , SIZE = 4096KB , MAXSIZE = UNLIMITED, FILEGROWTH = 1024KB )
 LOG ON 
( NAME = N'DayChunks_log', FILENAME = N'C:\Program Files\Microsoft SQL Server\MSSQL10_50.MSSQLSERVER\MSSQL\DATA\DayChunks_log.ldf' , SIZE = 1280KB , MAXSIZE = 2048GB , FILEGROWTH = 10%)
GO

ALTER DATABASE [DayChunks] SET COMPATIBILITY_LEVEL = 100
GO

IF (1 = FULLTEXTSERVICEPROPERTY('IsFullTextInstalled'))
begin
EXEC [DayChunks].[dbo].[sp_fulltext_database] @action = 'enable'
end
GO

ALTER DATABASE [DayChunks] SET ANSI_NULL_DEFAULT OFF 
GO

ALTER DATABASE [DayChunks] SET ANSI_NULLS OFF 
GO

ALTER DATABASE [DayChunks] SET ANSI_PADDING OFF 
GO

ALTER DATABASE [DayChunks] SET ANSI_WARNINGS OFF 
GO

ALTER DATABASE [DayChunks] SET ARITHABORT OFF 
GO

ALTER DATABASE [DayChunks] SET AUTO_CLOSE OFF 
GO

ALTER DATABASE [DayChunks] SET AUTO_CREATE_STATISTICS ON 
GO

ALTER DATABASE [DayChunks] SET AUTO_SHRINK OFF 
GO

ALTER DATABASE [DayChunks] SET AUTO_UPDATE_STATISTICS ON 
GO

ALTER DATABASE [DayChunks] SET CURSOR_CLOSE_ON_COMMIT OFF 
GO

ALTER DATABASE [DayChunks] SET CURSOR_DEFAULT  GLOBAL 
GO

ALTER DATABASE [DayChunks] SET CONCAT_NULL_YIELDS_NULL OFF 
GO

ALTER DATABASE [DayChunks] SET NUMERIC_ROUNDABORT OFF 
GO

ALTER DATABASE [DayChunks] SET QUOTED_IDENTIFIER OFF 
GO

ALTER DATABASE [DayChunks] SET RECURSIVE_TRIGGERS OFF 
GO

ALTER DATABASE [DayChunks] SET  DISABLE_BROKER 
GO

ALTER DATABASE [DayChunks] SET AUTO_UPDATE_STATISTICS_ASYNC OFF 
GO

ALTER DATABASE [DayChunks] SET DATE_CORRELATION_OPTIMIZATION OFF 
GO

ALTER DATABASE [DayChunks] SET TRUSTWORTHY OFF 
GO

ALTER DATABASE [DayChunks] SET ALLOW_SNAPSHOT_ISOLATION OFF 
GO

ALTER DATABASE [DayChunks] SET PARAMETERIZATION SIMPLE 
GO

ALTER DATABASE [DayChunks] SET READ_COMMITTED_SNAPSHOT OFF 
GO

ALTER DATABASE [DayChunks] SET HONOR_BROKER_PRIORITY OFF 
GO

ALTER DATABASE [DayChunks] SET  READ_WRITE 
GO

ALTER DATABASE [DayChunks] SET RECOVERY FULL 
GO

ALTER DATABASE [DayChunks] SET  MULTI_USER 
GO

ALTER DATABASE [DayChunks] SET PAGE_VERIFY CHECKSUM  
GO

ALTER DATABASE [DayChunks] SET DB_CHAINING OFF 
GO


Create Tables
USE [DayChunks]
GO

SET ANSI_NULLS ON
GO

SET QUOTED_IDENTIFIER ON
GO

CREATE TABLE [dbo].[Settings](
 [ID] [int] IDENTITY(1,1) NOT NULL,
 [Name] [nvarchar](max) NOT NULL,
 [Value] [nvarchar](max) NULL,
 CONSTRAINT [PK_Settings] PRIMARY KEY CLUSTERED 
(
 [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO





CREATE TABLE [dbo].[DayChunks](
 [ID] [int] IDENTITY(1,1) NOT NULL,
 [ChunkNumOfMinutes] [int] NOT NULL,
 [ChunkNumOfSeconds] [int] NOT NULL,
 [ChunkStart] [time](0) NOT NULL,
 [ChunkEnd] [time](0) NOT NULL,
 [IsLastChunk] [bit] NOT NULL,
 CONSTRAINT [PK_DayChunks] PRIMARY KEY CLUSTERED 
(
 [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

ALTER TABLE [dbo].[DayChunks] ADD  CONSTRAINT [DF_DayChunks_IsLastChunk]  DEFAULT (0) FOR [IsLastChunk]
GO




CREATE TABLE [dbo].[SensorReadings](
 [ID] [int] IDENTITY(1,1) NOT NULL,
 [CreationDateTime] [datetime] NOT NULL,
 [Reading] [float] NOT NULL,
 [DayChunkID] [int] NULL,
 [DayDate] [date] NOT NULL,
 CONSTRAINT [PK_SensorReadings] PRIMARY KEY CLUSTERED 
(
 [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO

ALTER TABLE [dbo].[SensorReadings] ADD  CONSTRAINT [DF_SensorReadings_CreationDateTime]  DEFAULT (getdate()) FOR [CreationDateTime]
GO

ALTER TABLE [dbo].[SensorReadings] ADD  CONSTRAINT [DF_SensorReadings_DayDate]  DEFAULT (getdate()) FOR [DayDate]
GO





CREATE TABLE [dbo].[AggregatedSensorReadings](
 [ID] [int] IDENTITY(1,1) NOT NULL,
 [DayChunkID] [int] NULL,
 [Reading] [float] NOT NULL,
 [DayDate] [date] NOT NULL,
 CONSTRAINT [PK_AggregatedSensorReadings] PRIMARY KEY CLUSTERED 
(
 [ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]
GO

Create Routines
USE [DayChunks]
GO


SET ANSI_NULLS ON
GO

IF EXISTS
(
 SELECT * FROM dbo.sysobjects
 WHERE id = object_id(N'[dbo].[SetDayChunksSettings]')
 AND OBJECTPROPERTY(id, N'IsProcedure') = 1
)
 
DROP PROCEDURE [dbo].[SetDayChunksSettings]

GO
CREATE PROCEDURE [dbo].[SetDayChunksSettings]
(
    @ChunksNumOfMinutes INT
 , @ChunksNumOfSeconds INT
 , @ChunksStartTime TIME(0)
)
AS
BEGIN
 DELETE FROM Settings
 WHERE Name IN
 (
  'DayChunksStartTime'
  , 'DayChunksNumOfMinutes'
  , 'DayChunksNumOfSeconds'
 )
 
 INSERT INTO Settings
 (
  Name
  , Value
 )
 VALUES
 (
  'DayChunksStartTime'
  , CAST(@ChunksStartTime AS NVARCHAR(MAX))
 )
 ,
 (
  'DayChunksNumOfMinutes'
  , CAST(@ChunksNumOfMinutes AS NVARCHAR(MAX))
 )
 ,
 (
  'DayChunksNumOfSeconds'
  , CAST(@ChunksNumOfSeconds AS NVARCHAR(MAX))
 )
END
GO





IF EXISTS
(
 SELECT * FROM dbo.sysobjects
 WHERE id = object_id(N'[dbo].[CreateDayChunksBasedOnInput]')
 AND OBJECTPROPERTY(id, N'IsProcedure') = 1
)
 
DROP PROCEDURE [dbo].[CreateDayChunksBasedOnInput]

GO
CREATE PROCEDURE [dbo].[CreateDayChunksBasedOnInput]
(
    @ChunksNumOfMinutes INT
 , @ChunksNumOfSeconds INT
 , @ChunksStartTime TIME(0)
)
AS
BEGIN
 DECLARE @MaxEnd TIME(0) = DATEADD(minute, (-1 * @ChunksNumOfMinutes), @ChunksStartTime)
 SET @MaxEnd = DATEADD(second, (-1 * @ChunksNumOfSeconds), @MaxEnd)

 DECLARE @ChunkStart TIME(0) = @ChunksStartTime

 DECLARE @ChunkEnd TIME(0) = DATEADD(minute, @ChunksNumOfMinutes, @ChunksStartTime)
 SET @ChunkEnd = DATEADD(second, @ChunksNumOfSeconds, @ChunkEnd)
 
 TRUNCATE TABLE DayChunks
 
 WHILE (@ChunkEnd < @MaxEnd)
 BEGIN
  INSERT INTO DayChunks
  (
   ChunkNumOfMinutes
   , ChunkNumOfSeconds
   , ChunkStart
   , ChunkEnd
  )
  VALUES
  (
   @ChunksNumOfMinutes
   , @ChunksNumOfSeconds
   , @ChunkStart
   , @ChunkEnd
  )
     
  SET @ChunkStart = DATEADD(minute, @ChunksNumOfMinutes, @ChunkStart)
  SET @ChunkStart = DATEADD(second, @ChunksNumOfSeconds, @ChunkStart)
     
  SET @ChunkEnd = DATEADD(minute, @ChunksNumOfMinutes, @ChunkEnd)
  SET @ChunkEnd = DATEADD(second, @ChunksNumOfSeconds, @ChunkEnd)
 END

 IF(@ChunkEnd = @MaxEnd OR @ChunkEnd > @MaxEnd)
 BEGIN
  IF(@ChunkEnd > @MaxEnd)
  BEGIN
   SET @ChunkEnd = @MaxEnd
  END
  
  INSERT INTO DayChunks
  (
   ChunkNumOfMinutes
   , ChunkNumOfSeconds
   , ChunkStart
   , ChunkEnd
  )
  VALUES
  (
   @ChunksNumOfMinutes
   , @ChunksNumOfSeconds
   , @ChunkStart
   , @ChunkEnd
  )
  
  INSERT INTO DayChunks
  (
   ChunkNumOfMinutes
   , ChunkNumOfSeconds
   , ChunkStart
   , ChunkEnd
   , IsLastChunk
  )
  VALUES
  (
   @ChunksNumOfMinutes
   , @ChunksNumOfSeconds
   , @MaxEnd
   , @ChunksStartTime
   , 1
  )
 END
END
GO





IF EXISTS
(
 SELECT * FROM dbo.sysobjects
 WHERE id = object_id(N'[dbo].[CreateDayChunksBasedOnSettings]')
 AND OBJECTPROPERTY(id, N'IsProcedure') = 1
)
 
DROP PROCEDURE [dbo].[CreateDayChunksBasedOnSettings]
GO

CREATE PROCEDURE [dbo].[CreateDayChunksBasedOnSettings]
AS
BEGIN
 DECLARE @ChunksNumOfMinutes INT
 DECLARE @ChunksNumOfSeconds INT
 DECLARE @ChunksStartTime TIME(0)
 
 IF EXISTS (SELECT TOP 1 ID FROM Settings WHERE Name = 'DayChunksNumOfMinutes')
 BEGIN
  SELECT TOP 1 @ChunksNumOfMinutes = 
   CASE
    WHEN Value IS NULL THEN CAST(0 AS INT)
    ELSE CAST (Value AS INT)
   END
  FROM Settings
  WHERE Name = 'DayChunksNumOfMinutes'
 END
 ELSE
 BEGIN
  SET @ChunksNumOfMinutes = 0
 END

 IF EXISTS (SELECT TOP 1 ID FROM Settings WHERE Name = 'DayChunksNumOfSeconds')
 BEGIN
  SELECT TOP 1 @ChunksNumOfSeconds = 
   CASE
    WHEN Value IS NULL THEN CAST(0 AS INT)
    ELSE CAST (Value AS INT)
   END
  FROM Settings
  WHERE Name = 'DayChunksNumOfSeconds'
 END
 ELSE
 BEGIN
  SET @ChunksNumOfSeconds = 0
 END

 IF EXISTS (SELECT TOP 1 ID FROM Settings WHERE Name = 'DayChunksStartTime')
 BEGIN
  SELECT TOP 1 @ChunksStartTime = 
   CASE
    WHEN Value IS NULL THEN CAST('00:00:00' AS TIME(0))
    ELSE CAST (Value AS TIME(0))
   END
  FROM Settings
  WHERE Name = 'DayChunksStartTime'
 END
 ELSE
 BEGIN
  SET @ChunksStartTime = CAST('00:00:00' AS TIME(0))
 END
 
 EXEC [dbo].[CreateDayChunksBasedOnInput] @ChunksNumOfMinutes, @ChunksNumOfSeconds, @ChunksStartTime
END
GO





SET ANSI_NULLS ON
GO

IF EXISTS
(
 SELECT *
 FROM INFORMATION_SCHEMA.ROUTINES
 WHERE ROUTINE_NAME = 'GetDateTimeDayChunkID'
 AND ROUTINE_SCHEMA = 'dbo'
 AND ROUTINE_TYPE = 'FUNCTION'
)
 
DROP FUNCTION [dbo].[GetDateTimeDayChunkID]
GO

CREATE FUNCTION [dbo].[GetDateTimeDayChunkID] 
(
 @InputDateTime DATETIME
)
RETURNS INT
AS
BEGIN
 DECLARE @Result INT
 DECLARE @InputTime TIME(0) = @InputDateTime
 
 SELECT TOP 1 @Result = ID
 FROM DayChunks
 WHERE @InputTime BETWEEN ChunkStart AND ChunkEnd
 
 IF(@Result IS NULL)
 BEGIN
  SET @Result = (SELECT TOP 1 ID FROM DayChunks WHERE IsLastChunk = 1)
 END
 
 RETURN @Result
END
GO

Testing Solution
The script below tests the solution by simulating sensor readings every one second and the bulk aggregation process is held every one minute.
USE [DayChunks]
GO


-- Setting day chunks settings
-- DayChunksStartTime = '00:00:00'
-- DayChunksNumOfMinutes = 1
-- DayChunksNumOfSeconds = 0
-- This means that the day starts at 00:00:00 and is splitted into chunks each is 1 minute long
EXEC [dbo].[SetDayChunksSettings] 1, 0, '00:00:00'

-- Splitting the day into proper chunks based on the settings set in the previous step
EXEC [dbo].[CreateDayChunksBasedOnSettings]
GO


-- Simulating sensor readings every one second
TRUNCATE TABLE SensorReadings
GO

DECLARE @i INT;
DECLARE @SensorReading FLOAT
DECLARE @Now DATETIME

SET @i = 1;
WHILE (@i <= 90)
BEGIN
 WAITFOR DELAY '00:00:01'
 
 DECLARE @CreationDateTime1 DATETIME = GETDATE()
 DECLARE @RandomReading1 FLOAT
 SELECT TOP 1 @RandomReading1 = RAND()
 
 INSERT INTO SensorReadings
 (
  Reading
  , CreationDateTime
  , DayChunkID
 )
 VALUES
 (
  @RandomReading1
  , @CreationDateTime1
  , [dbo].[GetDateTimeDayChunkID](@CreationDateTime1)
 )
 
 SET  @i = @i + 1;
END


SELECT *
FROM SensorReadings


-- Applying aggregation on sensor readings
TRUNCATE TABLE AggregatedSensorReadings
GO

INSERT INTO AggregatedSensorReadings
(
 DayChunkID
 , Reading
 , DayDate
)
SELECT DayChunkID
, AVG(Reading)
, DayDate
FROM SensorReadings
GROUP BY DayDate, DayChunkID


SELECT AggregatedSensorReadings.*
, DayChunks.ChunkStart
, DayChunks.ChunkEnd
FROM AggregatedSensorReadings
LEFT OUTER JOIN DayChunks
ON DayChunks.ID = AggregatedSensorReadings.DayChunkID

Result

 Settings


DayChunks 1




DayChunks 2


SensorReadings 1


SensorReadings 2


AggregatedSensorReadings



That's it. This is just an example of an application of the main concept of splitting day time into chunks. You can still use this concept and adapt the code to your business needs.


Hope this will help you someday.
Good Luck.


2014-09-17

How To Develop/Adjust ASP.NET User Controls For Multiple Instances Support




When developing ASP.NET user controls you should keep in mind whether they need to support multiple instances feature or not. In other words, you should decide if more than one instance of your user control could be added on the same page. Why do you need to make up your mind on this? ...... wait and see.


Code Sample
You can download the code sample from here


Assume that you need to develop a user control which is simply a text box and a clear button. Once the clear button is clicked the text inside the text box should be cleared. Also, our user control should support multiple instances feature.

We will create the solution as in the image below.


Here we have two approaches to implement our user control; a BAD approach which will cause some issues as we will see and another GOOD approach which will work perfectly. So we will start with the bad approach to fully understand why we need the good one.


Bad Approach

TextWithClear.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TextWithClear.ascx.cs" Inherits="DevelopmentSimplyPut.MultiInstanceUserControl.Controls.TextWithClear" %>

<script type="text/javascript" src="../Scripts/jquery-1.11.0.min.js"></script>

<div style="border-color:red;border-width:thin;border-style:solid;width:20%;">
    <input id="txt_MyTextBox" name="txt_MyTextBox" type="text" value="" />
    <br />
    <input id="btn_Clear" type="button" value="Clear" onclick = "Clear();" />
</div>

<script type="text/javascript">
    function Clear() {
        $("#txt_MyTextBox").val("");
    }
</script>

Home.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="DevelopmentSimplyPut.MultiInstanceUserControl.Home" %>

<%@ Register Src="~/Controls/TextWithClear.ascx" TagPrefix="uc1" TagName="TextWithClear" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:TextWithClear runat="server" id="TextWithClear1" />
        <br />
        <uc1:TextWithClear runat="server" id="TextWithClear2" />
    </div>
    </form>
</body>
</html>


After running the application, we will get the image below.


As we can see both text boxes have the same id. Clicking the "Clear" button of the first instance will cause the first text box to be cleared as in the image below.


Unfortunately clicking the "Clear" button of the second instance also causes the first text box (not the second text box) to be cleared as in the image below.


This happened as both text boxes have the same id, so the javascript code selecting the text boxes by id will always return the first one only and then apply the clear action. That is why clicking the "Clear" button of both user control instances will always clear the first text box.

This is the time to try the good approach.


Good Approach

TextWithClear.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="TextWithClear.ascx.cs" Inherits="DevelopmentSimplyPut.MultiInstanceUserControl.Controls.TextWithClear" %>

<script type="text/javascript" src="../Scripts/jquery-1.11.0.min.js"></script>

<div id="MainContainer" runat="server" style="border-color:red;border-width:thin;border-style:solid;width:20%;">
    <input id="txt_MyTextBox" name="txt_MyTextBox" type="text" value="" />
    <br />
    <input id="btn_Clear" type="button" value="Clear" onclick = "GetCurrentTextWithClearControlManager<%= this.ClientID %>().Clear();" />
</div>

<script type="text/javascript">
    function TextWithClearControlManager(_controlClientId) {
        this.ControlClientId = _controlClientId;
        this.GetMainContainerDomElement = function GetMainContainerDomElement() {
            return $("div[id^=" + this.ControlClientId + "][id$=MainContainer]").eq(0);
        };
        this.Clear = function Clear() {
            this.GetMainContainerDomElement().find("#txt_MyTextBox").val("");
        };
    }

    function GetCurrentTextWithClearControlManager<%= this.ClientID %>() {
        return new TextWithClearControlManager('<%= this.ClientID %>');
    }
</script>

Home.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Home.aspx.cs" Inherits="DevelopmentSimplyPut.MultiInstanceUserControl.Home" %>

<%@ Register Src="~/Controls/TextWithClear.ascx" TagPrefix="uc1" TagName="TextWithClear" %>


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <uc1:TextWithClear runat="server" id="TextWithClear1" />
        <br />
        <uc1:TextWithClear runat="server" id="TextWithClear2" />
    </div>
    </form>
</body>
</html>


After running the application, we will get the image below.


As we can see both text boxes have the same id but each outer container div of each user control has its own unique id which is composed from the id of the user control and the static id which was given to the div. Clicking the "Clear" button of the first instance will cause the first text box to be cleared as in the image below.


Now clicking the "Clear" button of the second instance causes the second text box to be cleared as in the image below.


This is good news but what really happened here?

Steps
  1. Wrapped our user control into a main container DOM element or used an already existing one as in our case here
  2. Gave it an id which is "MainContainer" in our case
  3. Marked it as a server control by adding "runat="server""
  4. Added a javascript function which acts as a constructor for a manager object. This manager object is user control instance related. It controls and serves only the user control instance whose client id is passed to its constructor
  5. Inside this manager object we defined a function called "GetMainContainerDomElement" which is responsible for returning the main container DOM element of its corresponding user control. In our case here it returns the outer "MainContainer" div of corresponding user control
  6. Also inside this manager object we defined the clear function but this time we make use of the "GetMainContainerDomElement" function to focus on the current outer div of the user control corresponding to the current manager object. Then, we select the proper text box which is a child of this main div, not another div. This way we make sure that all actions will be applied on the corresponding user control instance without affecting any other instances
  7. Created the function whose name is composed of "GetCurrentTextWithClearControlManager" followed by the client id of the user control. This is to make sure that the function "GetCurrentTextWithClearControlManager" of all user control instances will not replace and overwrite each other as they are finally on the same page. This function is used to return the manager object of each user control instance to be used inside DOM elements tags. In our case we used it as follows "onclick = "GetCurrentTextWithClearControlManager<%= this.ClientID %>().Clear();""
Now each "Clear" button accesses its corresponding manager object and fires the right "Clear" function.


That's it. Hope this will help you someday.
Good luck.



2014-06-21

How To Access ASP.NET Web.config AppSettings On Client-Side Javascript



You can download the code presented into this post from here


There are many ways by which you can access your ASP.NET web application web.config application settings through your client-side javascript code. The common thing between all of these ways is that to do so you for sure need to access the server-side.

The most proper way I prefer is to load all your application settings in a batch the first time your page is loaded and I think the best practice here is to use a handler to achieve this task. The handler will be responsible for accessing the web.config and retrieving all the application settings keys and their corresponding values and finally returning the response as a javascript file to be loaded once the handler is requested.

This way all what you have to do is to include the handler as a javascript resource on your page or master page then once the page is loaded you will have all your application settings as javascript variables.

Let's have a look on the code below to see what I am talking about.



Web.config
<?xml version="1.0"?>

<!--
  For more information on how to configure your ASP.NET application, please visit
  http://go.microsoft.com/fwlink/?LinkId=169433
  -->

<configuration>
    <system.web>
      <compilation debug="true" targetFramework="4.5" />
      <httpRuntime targetFramework="4.5" />
    </system.web>

  <appSettings>
    <add key="SampleSetting" value="This is the setting value"/>
  </appSettings>
  
</configuration>

ClientGlobalVars.ashx.cs
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Web;
using System.Web.SessionState;
using System.Collections.Specialized;

namespace DevelopmentSimplyPut.Handlers
{
    public class ClientGlobalVars : IHttpHandler, IRequiresSessionState 
    {
        public void ProcessRequest(HttpContext context)
        {
			context.Response.ClearHeaders();
			context.Response.ContentType = "application/x-javascript";
			context.Response.Cache.SetCacheability(HttpCacheability.Public);
			context.Response.CacheControl = Convert.ToString(HttpCacheability.Public);
            context.Response.Write("var AppSettings = new Object();\n");

            NameValueCollection appSettings = ConfigurationManager.AppSettings;

            for (int i = 0; i < appSettings.Count; i++)
            {
                string key = appSettings.GetKey(i);
                string value = appSettings.Get(i);
                context.Response.Write(string.Format(CultureInfo.InvariantCulture, "AppSettings.{0} = '{1}';\n", key, value));
            }
        }

        public bool IsReusable
        {
            get
            {
                return false;
            }
        }
    }
}

ClientGlobalVars.ashx
<%@ WebHandler Language="C#" CodeBehind="ClientGlobalVars.ashx.cs" Class="DevelopmentSimplyPut.Handlers.ClientGlobalVars" %>

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AccessAppSettingsFromJs.Default" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript" src="/Handlers/ClientGlobalVars.ashx"></script>

    <script>
        alert(AppSettings.SampleSetting);
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    </div>
    </form>
</body>
</html>

So now once you open Default.aspx in a web browser you get the result in the image below.



That's it. You can now access your application settings from client-side javascript.


2014-06-16

Paging Concept - The Main Equations To Make It Easy




The paging concept is used in many fields that it is even used in our daily lives. When you have a set of items and you want to divide them equally between some sort of containers or groups, you are thinking of paging but may be you don't recognize it.

The aim of this post is to explain some mathematical equations which can make it easy for you to implement the paging concept. If you are expecting to find explanations for the paging concept on specific applications like operating systems memory management or file system or whatever, then you are reading the wrong article.

The best way to explain paging is to apply on an example. Let's assume that we have a collection of 10 items and we want to divide these 10 items into groups where each group contains 3 items.

If we apply the calculations manually, we will have the items distributed as in the image below.


This was easy as the items count is not that big but this is not always the case. Also, we need to come up with the mathematical operation or equation which can be used to carry out the paging task automatically or through code.

After some analysis you will find that the mathematical relation will end up as in the image below.


The equation states that when we divide the "Item Index" on "Page Size", we get the "Page Index" and the remainder will be the "Item Index Per Page". Let's apply this mathematical equation on the example we have on hand right now.


When we divided "Item Index = 2" (Third item) on "Page Size = 3" we got "Page Index = 0" and "Item Index Per Page = 2". This means that the third item is the third item on the first page.

Also, when we divided "Item Index = 3" (Fourth item) on "Page Size = 3" we got "Page Index = 1" and "Item Index Per Page = 0".  This means that the fourth item is the first item on the second page.

Also, when we divided "Item Index = 7" (Eighth item) on "Page Size = 3" we got "Page Index = 2" and "Item Index Per Page = 1".  This means that the eighth item is the second item on the third page.

Also, when we divided "Item Index = 9" (Tenth item) on "Page Size = 3" we got "Page Index = 3" and "Item Index Per Page = 0".  This means that the tenth item is the first item on the fourth page.


So, we can transform the equation into the shape below:

Item Index = (Page Index * Page Size) + Item Index Per Page


This means that if we have a value for "Page Index" and a value for "Page Size" and we need to know the index of the first item and the last item on this page we can use the equation above as follows.

First Item Index = (Page Index * Page Size) + Min Item Index Per Page
                             = (Page Index * Page Size) + 0
                             = (Page Index * Page Size)

Last Item Index = (Page Index * Page Size) + Max Item Index Per Page
                            = (Page Index * Page Size) + (Page Size - 1)

But note that if the calculated "Last Item Index" is greater than the index of the last item in the whole collection, then take the smaller number which is the index of the last item in the whole collection.


To verify the equations above let's apply on the example we have on hand.

On the first page, (first item index = 0 * 3 = 0) and (last item index = (0 * 3) + (3 - 1) = 2)
On the second page, (first item index = 1 * 3 = 3) and (last item index = (1 * 3) + (3 - 1) = 5)
On the third page, (first item index = 2 * 3 = 6) and (last item index = (2 * 3) + (3 - 1) = 8)
On the fourth page, (first item index = 3 * 3 = 9) and (last item index = (3 * 3) + (3 - 1) = 11 which is greater than the max available item index (9), therefore, last item index = 9)


That's it, as you can see these equations can make your life much easier.
Goodbye.


2014-01-13

For SQL Hierarchical Data, How To Show Only Tree Branches Including Certain Type Of Entities And Discard Others


SQL Hierarchical Data

If you have a tree of entities represented into a SQL database into parent-child relation as in the image above, you may need to be able to view only the tree branches which include a certain type of entities
and discard the branches which don't include this type.

For example, let's have a look on the tree above and assume that we need to show only the branches which include the "J" type of entities. For this to happen, then we need to transfer the above tree into the one below.

SQL Hierarchical Data

How to do this in SQL?
To be able to answer this question, we first need to know how our mind does it. Our mind does a lot of processing and computing in an efficient way which makes us think that it is so easy, but is it that easy?

Assume that we have these types of entities in our tree.


And the real entities instances in our database are as in the image below.


Which means that our entities are in the tree form as in the image below.


Now, let's assume that we need to view only the tree branches including the "J" type. To do this manually just by a piece of paper and a pen, we look at the leaf entities in the tree. By leaf I mean the entities which have no children. Then, up from there we trace each branch and if a branch doesn't include a "J", we erase this branch till we finally get the final tree.

To do this in a more systematic approach, we can first locate our leaf entities. Then, we go up one level for each one of the leaf entities, then another one level up and so on till we reach the top of the tree. This could be illustrated as in the table below.


As you can see, we first started with the leaf entities and it took us five iterations to reach the top most of the tree. But why do we need to do that?

We did that because we already know the sequence of the system entities types, for example we know that if the leaf entity of a branch is "T", then this branch will not have a "J" as "J" comes after "T". So, we needed to trace back each branch to decide which branch to keep and which to discard.

Does that mean that every branch doesn't end with "J" should be completely deleted up to the top of the tree? No, as you can see in our tree above, there is a branch which ends with "T4", we are sure that this branch will not include a "J" but if we delete this branch up to the "C" entity, we will lose "P2" which has valid "J" children.

So, to get it right you can think of it as a voting system. Each entity in the tree should vote on whether its parent should be kept or no. Finally, we sum the voting on each parent and know if at least one child needs this parent, if not, we can discard this parent without any problems or loosing any valid branches.

So, each entity of the leaf entities should already know if its parent should be kept or not, so in our example, if the leaf entity is a "J", then its parent should be voted a "1". But if the leaf entity is a "S" or "T" or "P" or "C" then the parent should be voted a "0".

So, this leads us to the result in the image below.


Now, we need to sum the votes of each entity to know which entities to keep and which to discard. After doing the summation, we will get the result as in the image below.


So, to make sure the logic we applied here is valid, let's return to the tree diagram and highlight the entities which got a sum of "0" votes. These entities are decided by all child entities to be useless and disposable.

SQL Hierarchical Data

Are these the entities we can delete from the tree to make sure every branch includes a "J" entity? Yes, those are the ones and by deleting them we get the final tree as in the image below.


So, now we are sure that the logic we applied is valid but can we apply this complex logic in SQL?

Applying the same logic in SQL

--Creating table structure
DECLARE @AllEntities AS Table
(
 Id INT
 , NAME NVARCHAR(100)
 , ParentId INT
 , [Type] NVARCHAR(10)
)


--Inserting sample data as in the example supplied
INSERT INTO @AllEntities
(
 Id
 , NAME
 , ParentId
 , [Type]
)
VALUES
(1, 'C', NULL, 'C')
, (2, 'P1', 1, 'P')
, (3, 'P2', 1, 'P')
, (4, 'T1', 2, 'T')
, (5, 'T2', 2, 'T')
, (6, 'T3', 2, 'T')
, (7, 'T4', 3, 'T')
, (8, 'T5', 3, 'T')
, (9, 'S1', 4, 'S')
, (10, 'S2', 4, 'S')
, (11, 'S3', 5, 'S')
, (12, 'S4', 6, 'S')
, (13, 'S5', 6, 'S')
, (14, 'S6', 8, 'S')
, (15, 'S7', 8, 'S')
, (16, 'J1', 10, 'J')
, (17, 'J2', 10, 'J')
, (18, 'J3', 11, 'J')
, (19, 'J4', 11, 'J')
, (20, 'J5', 14, 'J')
, (21, 'J6', 14, 'J')


--Declaring a variable to hold the required ensured entity type
--Each branch in the tree should include this entity type, otherwise,
--the whole branch will be excluded from the final result
DECLARE @EnsuredEntityType AS NVARCHAR(10)
SET @EnsuredEntityType = 'J'


;WITH EnsuredEntityTree(Id, ParentId, Voting) AS
(
 --Strating with the leaf entities on the tree as the seed
 SELECT parent.ObjectID
 , parent.ParentObjectID
 , CASE
 WHEN 
 (
  (@EnsuredEntityType = 'J' AND (parent.Type = 'J'))
  OR
  (@EnsuredEntityType = 'S' AND (parent.Type = 'S' OR parent.Type = 'J'))
  OR
  (@EnsuredEntityType = 'T' AND (parent.Type = 'T' OR parent.Type = 'S' OR parent.Type = 'J'))
  OR
  (@EnsuredEntityType = 'P' AND (parent.Type = 'P' OR parent.Type = 'T' OR parent.Type = 'S' OR parent.Type = 'J'))
  OR
  (@EnsuredEntityType = 'C' AND (parent.Type = 'C'))
 ) THEN 1
 ELSE 0 END AS Voting
 FROM @AllEntities as parent
 LEFT OUTER JOIN @AllEntities as children
 ON children.ParentId = parent.Id
 WHERE children.Id IS NULL

 UNION ALL

 SELECT parent.Id
 , parent.ParentId
 , et.Voting --the same voting from the original seed object
 FROM @AllEntities AS parent
 INNER JOIN EnsuredEntityTree AS et
 ON et.ParentId = parent.Id
)

SELECT DISTINCT Id, ParentId
FROM EnsuredEntityTree
GROUP BY Id, ParentId
HAVING SUM(Voting) > 0


Finally, I hope you find this useful someday.
Good luck.