nscomponentsreact/build/generated/js/nsNavigation.min.js

React Wrapper Components for NSComponents

var nsModuleExport = function(root,name,prototype)
	{
		if(typeof exports === 'object' && typeof module === 'object')
		{
			module.exports[name] = prototype;
		}
		else if (typeof define === "function" && define.amd)
		{
			define(name,[], function () {return prototype;});
		}
		else if(typeof exports === 'object')
		{
			exports[name] = prototype;
		}
		else
		{
			root[name] = prototype;
		}
	};var nsIsWeb = function(root)
	{
		if(typeof exports === 'object' && typeof module === 'object')
		{
			return false;
		}
		else if (typeof define === "function" && define.amd)
		{
			return false;
		}
		else if(typeof exports === 'object')
		{
			return false;
		}
		else
		{
			return true;
		}
	};if(!nsIsWeb())
		{
var nsutilRef = require('./nsUtil.min.js');
var NSUtil = nsutilRef.NSUtil;
var nscontainerbaseRef = require('./nsContainerBase.min.js');
var nsExtendPrototype = nscontainerbaseRef.nsExtendPrototype;
var NSContainerBase = nscontainerbaseRef.NSContainerBase;
var svgRef = require('./nsSVG.min.js');
var NSSvg = svgRef.NSSvg;
var NSSvgShapes = svgRef.NSSvgShapes;
var plugginsRef = require('./nsPluggins.min.js');
var nsTextEditor = plugginsRef.nsTextEditor;
var nsTextAreaEditor = plugginsRef.nsTextAreaEditor;
var NSCellSelection = plugginsRef.NSCellSelection;
var NSTableCellNavigator = plugginsRef.NSTableCellNavigator;
var dateutilRef = require('./nsDateUtil.min.js');
var NSDateUtil = dateutilRef.NSDateUtil;

		}
"use strict";
var NSFilter = (function()
{
	function NSFilter(data,filter,setting,recordLimit,isHierarchical,childField,filterFunction,hierarchyFilterChildren,arrIgnoreKeysInCloneDataSource) 
	{
		this.EXACT = "exact";
		this.STARTS_WITH = "startsWith";
		this.ENDS_WITH = "endsWith";
		this.CONTAINS = "contains";
		
		this.IS_FOUND_FIELD = "__nsFilter__found";
		
		this.util = new NSUtil();
		this.__data = data;
		this.__filter = filter;
		this.__setting = setting;
		this.__recordLimit = (parseInt(recordLimit) > 0) ? recordLimit : -1;
		this.__isHierarchical = this.util.isUndefined(isHierarchical) ? false : Boolean.parse(isHierarchical);
		this.__childField = childField ? childField : "children";
		this.__filterFunction = filterFunction;
		this.__hierarchyFilterChildren = hierarchyFilterChildren;
		this.__arrIgnoreKeysInCloneDataSource = arrIgnoreKeysInCloneDataSource;
		this.__ignoreSameLevelNode = true;
	}
	
	NSFilter.prototype.execute = function(data,filter,setting,recordLimit,isHierarchical,childField,filterFunction,hierarchyFilterChildren,arrIgnoreKeysInCloneDataSource) 
	{ 
		data = data ? data : this.__data;
		filter = filter ? filter : this.__filter;
		setting = setting ? setting : this.__setting;
		recordLimit = (parseInt(recordLimit) > 0) ? recordLimit : this.__recordLimit;
		isHierarchical = this.util.isUndefined(isHierarchical) ? Boolean.parse(this.__isHierarchical) : Boolean.parse(isHierarchical);
		childField = childField ? childField : this.__childField;
		filterFunction = filterFunction ? filterFunction : this.__filterFunction;
		hierarchyFilterChildren = hierarchyFilterChildren ? hierarchyFilterChildren : this.__hierarchyFilterChildren;
		arrIgnoreKeysInCloneDataSource = this.util.isUndefinedOrNull(arrIgnoreKeysInCloneDataSource) ? this.__arrIgnoreKeysInCloneDataSource : arrIgnoreKeysInCloneDataSource;
		if(data && filter)
		{
			var dataSource = data.slice(0);
			var arrFilter = [];
			var self = this;
			var callFilterFunction = function(source,level,parentItem)
			{
				var arrReturn = [];
				for (var count = 0; count < source.length; count++) 
				{
					var item = source[count];
					var found = false;
					if(isHierarchical && item[childField] && item[childField].length > 0 )
					{
						var arrChild = callFilterFunction(item[childField],level + 1,item);
						if(arrChild && arrChild.length > 0)
						{
							found = true;
							if(self.__ignoreSameLevelNode)
							{
					            item[childField] = arrChild;
							}
							arrReturn.push(item);
						}
					}
					if(!found && self.__filterItem(item,filter,setting,isHierarchical,childField,parentItem,filterFunction))
					{
						if(isHierarchical && hierarchyFilterChildren)
						{
							var arrChildren = item[childField];
							if(arrChildren && arrChildren.length > 0)
							{
								var childItem = null;
								var childLength = arrChildren.length;
								for(var childCount = childLength - 1;childCount > -1;childCount--)
								{
									childItem = arrChildren[childCount];
									if(childItem)
									{
										if(!hierarchyFilterChildren(childItem,childCount,childItem[self.IS_FOUND_FIELD],filter,setting,item))
										{
											arrChildren.splice(childCount, 1);
										}
									}
								}
							}
						}
						found = true;
						arrReturn.push(item);
						if(!isHierarchical && recordLimit > 0 && arrReturn.length >= recordLimit)
						{
							break;
						}
					}
				}
				//return false;
				return arrReturn;
			};
			var callNonHierarchicalFilterFunction = function(source)
			{
				var arrReturn = [];
				for (var count = 0; count < source.length; count++) 
				{
					var item = source[count];
					if(self.__filterItemNonHierarchical(item,filter,setting,filterFunction))
					{
						arrReturn.push(item);
					}
				}
				return arrReturn;
			};
			dataSource = this.util.cloneObject(dataSource,isHierarchical,[],arrIgnoreKeysInCloneDataSource);
			if(isHierarchical)
			{
				arrFilter = callFilterFunction(dataSource,1,null);
			}
			else
			{
				arrFilter = callNonHierarchicalFilterFunction(dataSource);
			}
			return arrFilter;
		}
		return data;
	};
	
	NSFilter.prototype.__filterItemNonHierarchical = function(item,filter,setting,filterFunction) 
	{
		var retValue = false;
		if(filterFunction)
		{
			retValue = filterFunction(item,filter,setting);
			this.__setItem(item,retValue);
			return retValue;
		}
		else if(filter instanceof Function) 
	    {
			retValue = filter(item,setting);
	        this.__setItem(item,retValue);
	        return retValue;
	    }
	    else if(filter instanceof Array) 
	    {
	        for (var count = 0; count < filter.length; ++count) 
	        {
	            if (this.__filterItemNonHierarchical(item,filter[count],setting,filterFunction))
	            {
	            	this.__setItem(item,true);
	            	return true;
	            }
	        }
	        return false;
	    }
	    else if(setting.type === "date" && filter)
	    {
	        return this.__filterDate(item,filter,setting);
	    }
	    else if(typeof(item) === "string" && filter)
	    {
	        return this.__filterString(item,filter,setting);
	    }
	    else if (item === item + 0 && filter)
	    {
	        return this.__filterNumeric(item,filter);
	    }
	    else if(typeof (filter) === "object") 
	    {
	        for(var key in filter) 
	        {
	        	var tempSetting = {};
	        	if(setting && setting[key])
	        	{
	        		tempSetting = setting[key];
	        	}
	            if(!this.__filterItemNonHierarchical(item[key],filter[key],tempSetting,filterFunction))
	            {
	            	return false;
	            }
	        }
	        this.__setItem(item,true);
	        return true;
	    }
		retValue = (filter == item);
	    this.__setItem(item,retValue);
	    return retValue;
	};
	
	NSFilter.prototype.__filterItem = function(item,filter,setting,isHierarchical,childField,parentItem,filterFunction) 
	{
		var retValue = false;
		if(filterFunction)
		{
			retValue = filterFunction(item,filter,setting,isHierarchical,childField,parentItem);
			this.__setItem(item,retValue);
			return retValue;
		}
		else if(filter instanceof Function) 
	    {
			retValue = filter(item,setting);
	        this.__setItem(item,retValue);
	        return retValue;
	    }
	    else if(filter instanceof Array) 
	    {
	        for (var count = 0; count < filter.length; ++count) 
	        {
	            if (this.__filterItem(item,filter[count],setting,isHierarchical,childField,parentItem,filterFunction))
	            {
	            	this.__setItem(item,true);
	            	return true;
	            }
	        }
	        return false;
	    }
	    else if(setting.type === "date" && filter)
	    {
	        return this.__filterDate(item,filter,setting);
	    }
	    else if(typeof(item) === "string" && filter)
	    {
	        return this.__filterString(item,filter,setting);
	    }
	    else if (item === item + 0 && filter)
	    {
	        return this.__filterNumeric(item,filter);
	    }
	    else if(typeof (filter) === "object") 
	    {
	        for(var key in filter) 
	        {
	        	if(isHierarchical && key === childField)
	        	{
	        		continue;
	        	}
	        	var tempSetting = {};
	        	if(setting && setting[key])
	        	{
	        		tempSetting = setting[key];
	        	}
	            if(!this.__filterItem(item[key],filter[key],tempSetting,isHierarchical,childField,parentItem,filterFunction))
	            {
	            	return false;
	            }
	        }
	        this.__setItem(item,true);
	        return true;
	    }
		retValue = (filter == item);
	    this.__setItem(item,retValue);
	    return retValue;
	};
	
	NSFilter.prototype.__setItem = function(item,isFound)
	{
		if(item && typeof (item) === "object" && isFound)
		{
			item[this.IS_FOUND_FIELD] = true;
		}
	};
	
	NSFilter.prototype.__filterNumeric= function(value,searchParam)
	{
		var retValue = false;
		value = parseFloat(value);
		if(!isNaN(value))
		{
			if(/<=/.test(searchParam)) // first checks if there is an operator (<,>,<=,>=)
			{
				retValue = (value <= parseFloat(searchParam.replace(/<=/,"")));
			}
			else if(/>=/.test(searchParam))
			{
				retValue = (value >= parseFloat(searchParam.replace(/>=/,"")));
			}
			else if(/</.test(searchParam))
			{
				retValue = (value < parseFloat(searchParam.replace(/</,"")));
			}
			else if(/>/.test(searchParam))
			{
				retValue = (value > parseFloat(searchParam.replace(/>/,"")));
			}
			else
			{
				retValue = (value === parseFloat(searchParam));
			}
		}
		return retValue;
	};
	
	NSFilter.prototype.__filterDate= function(value,searchParam,setting)
	{
		var retValue = false;
		var self = this;
		var matchValue = function(compareValue,opt)
		{
			var compValue = false;
			if(self.util.isUndefinedOrNull(value))
			{
				compValue = false;
			}
			else
			{
				var newVal = self.__getDate(value,setting.cellFormat);
				if(newVal)
				{
					newVal.setHours(0, 0, 0, 0);
					compareValue.setHours(0, 0, 0, 0);
					switch(opt)
					{
						case "equals":
							if (compareValue.getTime() === newVal.getTime()) 
							{
								compValue = true;
				            }
						break;
						case "greaterThan":
							if (compareValue.getTime() < newVal.getTime()) 
							{
								compValue = true;
				            }
						break;
						case "lessThan":
							if (compareValue.getTime() > newVal.getTime()) 
							{
								compValue = true;
				            }
						break;
						case "notEqual":
							if (compareValue.getTime() != newVal.getTime()) 
							{
								compValue = true;
				            }
						break;
					}
				}
				else
				{
					self.util.warning("NSFilter",value + " cannot be converted to date Object for given cell format");
					compValue = false;
				}
			}
			return compValue;
		};
		var processDate = function(date,type)
		{
			var compValue = false;
			if(date && matchType1)
			{
				if(!date || !Object.prototype.toString.call(date) === '[object Date]')
				{
					compValue = true;
				}
				else if(setting.comparator)
				{
					compValue = setting.comparator(value,date,setting);
				}
				else
				{
					compValue = matchValue(date,type);
				}
			}
			return compValue;
		};
		if(setting.matchType1 || setting.matchType2)
		{
			var matchType1 = setting.matchType1;
			var firstDate = setting.firstDate;
			var operation = setting.operation;
			var matchType2 = setting.matchType2;
			var secondDate = setting.secondDate;
			if(this.util.isUndefinedOrNull(value))
			{
				retValue = false;
			}
			else if(firstDate && secondDate && matchType1 && matchType2 && operation)
			{
				var firstVal = processDate(firstDate,matchType1);
				var secondVal = processDate(secondDate,matchType2);
				switch(operation)
				{
					case "and":
						retValue = (firstVal && secondVal);
					break;
					case "or":
						retValue = (firstVal || secondVal);
					break;
				}
			}
			else if(firstDate && matchType1)
			{
				retValue = processDate(firstDate,matchType1);
			}
			else if(secondDate && matchType2)
			{
				retValue = processDate(secondDate,matchType2);
			}
			else
			{
				retValue = true;
			}
		}
		else
		{
			if(!searchParam || !Object.prototype.toString.call(searchParam) === '[object Date]')
			{
				retValue = true;
			}
			else if(setting.comparator)
			{
				retValue = setting.comparator(value,searchParam,setting);
			}
			else if(this.util.isUndefinedOrNull(value))
			{
				retValue = false;
			}
			else
			{
				retValue = matchValue(searchParam,"equals");
			}
		}
		return retValue;
	};
	
	NSFilter.prototype.__filterString= function(value,searchParam,setting)
	{
		var regExp = null;
		var regExpModifier = "g";
		var startWithChar = "(^)";
		var endsWithChar = "($)";
		var searchString = "";
		var isCaseSensitive = false;
		var isMultiline = false;
		var matchType = this.CONTAINS;
		if(setting)
		{
			isCaseSensitive = Boolean.parse(setting["caseSensitive"]);
			isMultiline = Boolean.parse(setting["multiline"]);
			matchType = setting["matchType"] ? setting["matchType"] : matchType;
		}
		if(!isCaseSensitive)
		{
			regExpModifier += "i";
		}
		if(isMultiline)
		{
			regExpModifier += "m";
		}
		searchParam = this.__removeSpecialCharacter(searchParam);
		if(matchType === this.EXACT)
		{
			searchString = startWithChar + searchParam + endsWithChar;
		}
		else if(matchType === this.STARTS_WITH)
		{
			searchString = startWithChar + searchParam;
		}
		else if(matchType === this.ENDS_WITH)
		{
			searchString = searchParam + endsWithChar;
		}
		else 
		{
			searchString = searchParam;
		}
		regExp = new RegExp(searchString,regExpModifier);
		return regExp.test(value);
	};
	
	NSFilter.prototype.__removeSpecialCharacter = function(text)
	{
		function replaceEscape(char)
		{
			if(text)
			{
				var exp = new RegExp("\\" + char,"g");
				text = text.replace(exp,"\\" + char);
			}
		}
		var specialChar = ['\\','[','^','$','.','|','?','*','+','(',')'];
		for(var count = 0;count < specialChar.length;count++) 
		{
			replaceEscape(specialChar[count]);
		}
		return text;
	};
	
	//ref from : https://stackoverflow.com/questions/7445328/check-if-a-string-is-a-date-value
	NSFilter.prototype.__getDate = function(value,arrFormat) 
	{
		if(value)
		{
			var dateFormat;
		    if (Object.prototype.toString.call(value) === '[object Date]') 
		    {
		        return value;
		    }
		    if(arrFormat)
		    {
		    	var dateUtil = new NSDateUtil();
		    	if(!this.util.isArray(arrFormat))
		    	{
		    		arrFormat = [arrFormat];
		    	}
		    	for(var count = 0;count < arrFormat.length;count++)
		    	{
		    		var format = arrFormat[count];
		    		var date = dateUtil.parseString(value,format);
		    		if(date)
		    		{
		    			return date;
		    		}
		    	}
		    }
		    else
		    {
		    	if (typeof value.replace === 'function') 
			    {
			        value.replace(/^\s+|\s+$/gm, '');
			    }
			    dateFormat = /(^\d{1,4}[\.|\\/|-]\d{1,2}[\.|\\/|-]\d{1,4})(\s*(?:0?[1-9]:[0-5]|1(?=[012])\d:[0-5])\d\s*[ap]m)?$/;
			    if(dateFormat.test(value))
			    {
			    	return new Date(value);//Date.parse(value);
			    }
		    }
		}
	    return null;
	};
	
	return NSFilter;
})();
nsModuleExport(this,"NSFilter",NSFilter);"use strict";
var NSFloatingLabel = (function()
{
	function NSFloatingLabel(setting) 
	{
		var config = null;
		
		var self = this;
		var util = null;
		
		var container = null;
		var conContainer = null;
		var control = null;
		var label = null;
		var id = null;
		var parentElement = null;
		var isTxtBoxID = false;
		var typeCssClass = null;
        
        var initialize = function()
    	{
    		util = new NSUtil();
    		if(!setting)
    		{
    			setting = {};
    		}
    		config = {
    				container: setting["container"],
    				control: setting["control"],
    				label: setting["label"],
    				controlType: setting["controlType"] || (setting.control ? setting.control.nodeName.toLowerCase() : null) || "input",
    				inputType: setting["inputType"] || "text",// used when controlType is "input"
    				position: setting["position"] ? (setting["position"].charAt(0).toUpperCase() + setting["position"].slice(1)) : "Top",
    				topPosition: setting["topPosition"] ? (setting["topPosition"].charAt(0).toUpperCase() + setting["topPosition"].slice(1)) : "Middle",
    				theme: setting["theme"] ? (setting["theme"].charAt(0).toUpperCase() + setting["theme"].slice(1)) : "White"
    		};
    		if(!config.container && !config.control)
    		{
    			util.throwNSError("NSFloatingLabel","Enter a valid container or a control");
    		}
    		if(!config.label || !config.label.length)
    		{
    			util.throwNSError("NSFloatingLabel","Enter a valid Label");
    		}
    		if(!setting.customClass)
    		{
    			setting.customClass = {};
    		}
    		config.customClass = {container:setting.customClass["container"],control:setting.customClass["control"],controlFocus:setting.customClass["controlFocus"],
    							  label:setting.customClass["label"]};
    		setTypeCssClass();
    		createComponent();
    		setTheme(config.theme);
    	};
    	
    	var createComponent = function()
    	{
    		control = config.control;
    		var txtID = null;
    		if(control)
    		{
    			txtID = getID();
    			if(!isTxtBoxID)
    			{
    				txtID = txtID + "Txt";
    				control.setAttribute("id",txtID);
    				control.setAttribute("name",txtID);
    			}
    			container = util.createElement("div",getID() + "Container",getContainerClass());
    			parentElement = control.parentElement;
    			parentElement.insertBefore(container,control);
    		}
    		else
    		{
    			container = config.container;
    			util.addStyleClass(container,getContainerClass());
    			txtID = getID() + "TxtLabel";
    			control = util.createElement(config.controlType,txtID,null);
    			if(config.controlType == "input")
    			{
    				control.setAttribute("type",config.inputType);
    			}
    			control.setAttribute("name",txtID);
    		}
    		control.setAttribute("placeholder",config.label);
    		conContainer = util.createElement("div",getID() + "ConContainer","nsFloatingLabelConatiner");
    		util.addStyleClass(control,"nsFloatingLabelControl " + ((config.controlType == "input") ? "nsFloatingLabelInput" : "nsFloatingLabelTextArea"));
    		util.addEvent(control,"focus",controlFocusListener);
    		util.addEvent(control,"blur",controlBlurListener);
    		util.addEvent(control,"change input blur reset",controlEventListener);
    		conContainer.appendChild(control);
    		applyCustomClass(container,"container");
    		applyCustomClass(control,"control");
    		label = util.createElement("label",txtID + "Label","nsFloatingLabelLabel");
    		label.setAttribute("for",txtID);
    		label.innerHTML = config.label;
    		applyCustomClass(label,"label");
    		conContainer.appendChild(label);
    		container.appendChild(conContainer);
    	};
    	
    	var controlFocusListener = function(event)
    	{
    		event = util.getEvent(event);
    		controlEventListener(event);
    		util.addStyleClass(container,"nsFloatingLabelFocus");
    		util.addStyleClass(control,"nsFloatingLabelControlFocus");
    	};
    	
    	var controlBlurListener = function(event)
    	{
    		event = util.getEvent(event);
    		controlEventListener(event);
    		util.removeStyleClass(container,"nsFloatingLabelFocus");
    		util.removeStyleClass(control,"nsFloatingLabelControlFocus");
    	};
    	
    	var controlEventListener = function(event)
    	{
    		event = util.getEvent(event);
    		manageFocusCss((control.value && control.value.length) ? true : false);
    		redispatchEvent(event);
    	};
    	
    	var manageFocusCss = function(isSet)
    	{
    		isSet ? addFocusCss() : removeFocusCss();
    	};
    	
    	var addFocusCss = function()
    	{
    		util.addStyleClass(container,"nsFloatingLabelActive");
    		util.addStyleClass(control,typeCssClass);
			applyCustomClass(control,"controlFocus");
			applyCustomClass(label,"label");
    	};
    	
    	var removeFocusCss = function()
    	{
    		util.removeStyleClass(container,"nsFloatingLabelActive");
    		util.removeStyleClass(control,typeCssClass);
			removeCustomClass(control,"controlFocus");
			removeCustomClass(label,"label");
    	};
    	
    	var getContainerClass = function()
    	{
    		var retValue = "nsFloatingLabel nsFloatingLabel" + config.position;
    		if(config.position == "Top")
    		{
    			retValue += " nsFloatingLabel" + config.position + config.topPosition;
    		}
    		return retValue;
    	};
    	
    	var getID = function()
    	{
    		if(!id)
    		{
    			if(config.control && (config.control.hasAttribute("id") || config.control.hasAttribute("name")))
        		{
    				id = config.control.getAttribute("id") || config.control.getAttribute("name");
    				isTxtBoxID = true;
        		}
        		else if(config.container && (config.container.hasAttribute("id") || config.container.hasAttribute("name")))
        		{
        			id = config.container.getAttribute("id") || config.container.getAttribute("name");
        		}
    			else
    			{
    				id = "comp" + util.getUniqueId();
    			}
    		}
    		return id;
    	};
    	
    	var applyCustomClass = function(element,type)
    	{
    		if(element && type && config.customClass[type])
    		{
    			util.addStyleClass(element,config.customClass[type]);
    		}
    	};
    	
    	var removeCustomClass = function(element,type)
    	{
    		if(element && type && config.customClass[type])
    		{
    			util.removeStyleClass(element,config.customClass[type]);
    		}
    	};
    	
    	var setTypeCssClass = function()
    	{
    		var controlType = null;
    		switch(config.controlType.toLowerCase())
    		{
    			case "input":
    				controlType = "Input";
    			break;
    			case "textarea":
    				controlType = "TextArea";
        		break;
        		default:
        			controlType = "Input";
        		break;
    		}
    		typeCssClass = "nsFloatingLabel" + controlType + "Active";
    	};
    	
    	var redispatchEvent = function(event)
    	{
    		//control is not given but container is given as input
    		if(!parentElement)
    		{
    			util.redispatchEvent(container,event);
    		}
    	};
    	
    	var setAttribute = function(prop,value)
    	{
    		control.setAttribute(prop,value);
    	};
    	
    	var getAttribute = function(prop)
    	{
    		return control.getAttribute(prop);
    	};
    	
    	var value = function(value)
    	{
    		if(!util.isUndefined(value))
    		{
    			control.value = value;
    		}
    		return control.value;
    	};
    	
    	var getControl = function()
    	{
    		return control;
    	};
    	
    	var setTheme = function(theme) 
    	{
    		if(container && config.theme)
    		{
    			util.removeStyleClass(container,"nsFloatingLabel" + config.theme);
    			config.theme = theme;
    			util.addStyleClass(container,"nsFloatingLabel" + config.theme);
    		}
    	};
    	
    	var destroy = function() 
    	{
    		if(container && control)
    		{
    			if(parentElement)
        		{
        			parentElement.insertBefore(control,container);
        			container.parentElement.removeChild(container);
        			container = null;
        			if(!isTxtBoxID)
        			{
        				control.setAttribute("id",null);
        				control.setAttribute("name",null);
        			}
        		}
    		}
    		else
    		{
    			conContainer.parentElement.removeChild(conContainer);
    		}
    	};
    	
    	initialize();
    	
    	self.value = value;
    	self.getAttribute = getAttribute;
    	self.setAttribute = setAttribute;
    	self.setTheme = setTheme;
    	self.getControl = getControl;
    	self.destroy = destroy;
	};
	
	return NSFloatingLabel;
})();
nsModuleExport(this,"NSFloatingLabel",NSFloatingLabel);var NSNavigation = (function()
{
	function NSNavigation(component,setting) 
	{
		this.__setting = setting;
		
		this.__navigationContainerParent = null;
		this.__navigationContainer = null;
		this.__conSearch = null;
		this.__txtSearch = null;
		
		this.__config = null;
		this.__domVar = null;
		this.__selectedParentMenuItem = null;
		this.__selectedMenu = null;
		this.__selectedMenuItem = null;
		this.__isNavOpen = false;
		this.__dynamicContainer = null;
		this.__isDataHierarchical = false;
		this.__nsFloatingLabel = null;
		
		this.__fieldPrefix = "__ns_nav_field";
		this.__fieldIsOpen = this.__fieldPrefix + "_open";
		this.__fieldElement = this.__fieldPrefix + "_element";
		this.__fieldChildContainer = this.__fieldPrefix + "_childcontainer";
		this.__fieldChildMenuIconContainer = this.__fieldPrefix + "_menuiconcontainer";
		this.__fieldParentMenuItem = this.__fieldPrefix + "_parentmenuitem";
		
		this.__headerItem = null;
		this.__headerItemHeight = 0;
		this.__interval = null;
		
					
		this.base.__setBaseComponent.call(this,component);
	};
	
	nsExtendPrototype(NSContainerBase,NSNavigation);
	NSNavigation.prototype.constructor = NSNavigation;
	
	NSNavigation.prototype.initializeComponent = function() 
	{
		this.base.initializeComponent.call(this);
		this.__domVar = this.util.getDomVariables();
		this.__setSetting();
	};
	
	NSNavigation.prototype.setComponentProperties = function() 
	{
		this.base.setComponentProperties.call(this);
		if(this.__config.dataSource)
		{
			this.dataSource(this.__config.dataSource);
		}
	};
	
	NSNavigation.prototype.propertyChange = function(attrName, oldVal, newVal, setProperty)
	{
		var attributeName = attrName.toLowerCase();
		this.base.propertyChange.call(this,attrName, oldVal, newVal, setProperty);
	};
	
	NSNavigation.prototype.removeComponent = function() 
	{
		this.base.removeComponent.call(this);
	};
	
	NSNavigation.prototype.componentResized = function(event) 
	{
		this.base.componentResized.call(this,event);
	};
	
	NSNavigation.prototype.isNavOpen = function()
	{
		return this.__isNavOpen;
	};
	
	NSNavigation.prototype.toggleNavigation = function()
	{
		if(this.__isNavOpen)
		{
			this.closeNavigation();
		}
		else
		{
			this.openNavigation();
		}
	};
	
	NSNavigation.prototype.openNavigation = function()
	{
		this.util.dispatchEvent(this.__baseComponent,NSNavigation.NAVIGATION_OPEN_START);
		this.util.removeStyleClass(this.__config.containerElement,"nsNavCollapsed");
		this.__isNavOpen = true;
		var self = this;
		var transitionEndCallback = function()
		{
			self.__resizeContentContainer();
			this.util.dispatchEvent(this.__baseComponent,NSNavigation.NAVIGATION_OPEN_END);
		};
		var transition = new this.util.transition(this.__baseComponent,transitionEndCallback.bind(this));
	};
	
	NSNavigation.prototype.closeNavigation = function()
	{
		this.util.dispatchEvent(this.__baseComponent,NSNavigation.NAVIGATION_CLOSE_START);
		this.util.addStyleClass(this.__config.containerElement,"nsNavCollapsed");
		this.__isNavOpen = false;
		var self = this;
		var transitionEndCallback = function()
		{
			self.__resizeContentContainer();
			this.util.dispatchEvent(this.__baseComponent,NSNavigation.NAVIGATION_CLOSE_END);
		};
		var transition = new this.util.transition(this.__baseComponent,transitionEndCallback.bind(this));
	};
	
	NSNavigation.prototype.getItemByField = function(field,value,source)
	{
		return this.__getItemByField(field,value,source);
	};
	
	NSNavigation.prototype.selectMenu = function(itemOrElement)
	{
		var item = null;
		if(this.util.isElement(itemOrElement))
		{
			item = this.__getItemByElement(itemOrElement);
		}
		else
		{
			item = itemOrElement;
		}
		if(item)
		{
			this.__handleSelectedMenu(item);
			this.__invokeMenuClickHandler(item,null);
		}
	};
	
	NSNavigation.prototype.dataSource = function(source)
	{
		if(source) {
			this.__config.dataSource = source;
			this.__config.orignalDataSource = this.__config.dataSource ? this.__config.dataSource.slice(0) : [];
			this.__isDataHierarchical = false;
			if(source && source.length)
			{
				var item = null;
				for(var count = 0;count < source.length;count++)
				{
					item = source[count];
					if(this.__hasChildren(item))
					{
						this.__isDataHierarchical = true;
						break;
					}
				}
			}
			this.__renderItems();
		}
		return this.__config.dataSource;
	};
	
	NSNavigation.prototype.setTheme = function(theme)
	{
		this.base.setTheme.call(this,theme);
		if(this.__nsFloatingLabel)
		{
			this.__nsFloatingLabel.setTheme(theme);
		}
	};
	
	NSNavigation.prototype.collapse = function(item)
	{
		if(item && item[this.__fieldElement] && this.__hasChildren(item) && item[this.__fieldIsOpen])
		{
			var self = this;
			this.util.removeStyleClass(item[this.__fieldElement],"nsNavItemOpen");
			this.util.removeStyleClass(item[this.__fieldElement],"nsNavItemActive");
			if(item[this.__fieldChildContainer])
			{
				if(this.__config.enableAnimation)
				{
					this.util.slideUp(item[this.__fieldChildContainer],20,function(element){
						self.util.removeStyleClass(item[self.__fieldChildContainer],"nsNavSubNavContainerVisible");
						item[self.__fieldChildMenuIconContainer].innerHTML = self.__config.iconMenuCollapsed;
					});
				}
				else
				{
					this.util.removeStyleClass(item[this.__fieldChildContainer],"nsNavSubNavContainerVisible");
					item[this.__fieldChildMenuIconContainer].innerHTML = this.__config.iconMenuCollapsed;
				}
			}
			item[this.__fieldIsOpen] = false;
		}
	};
	
	NSNavigation.prototype.expand = function(item)
	{
		if(item && item[this.__fieldElement] && this.__hasChildren(item) && !item[this.__fieldIsOpen])
		{
			var self = this;
			this.util.addStyleClass(item[this.__fieldElement],"nsNavItemOpen");
			this.util.addStyleClass(item[this.__fieldElement],"nsNavItemActive");
			if(item[this.__fieldChildContainer])
			{
				if(this.__config.enableAnimation)
				{
					this.util.slideDown(item[this.__fieldChildContainer],20,function(element){
						self.util.addStyleClass(item[self.__fieldChildContainer],"nsNavSubNavContainerVisible");
						item[self.__fieldChildMenuIconContainer].innerHTML = self.__config.iconMenuExpanded;
					});
				}
				else
				{
					this.util.addStyleClass(item[this.__fieldChildContainer],"nsNavSubNavContainerVisible");
					item[this.__fieldChildMenuIconContainer].innerHTML = this.__config.iconMenuExpanded;
				}
			}
			item[this.__fieldIsOpen] = true;
		}
	};
	
	NSNavigation.prototype.__setSetting = function()
	{
		if(!this.__setting)
		{
			this.__setting = {};
		}
		if(!this.__setting["customClass"])
		{
			this.__setting["customClass"] = {};
		}
		this.__config = {
			containerElement: this.__setting["containerElement"] || this.__domVar.doc.body,
			elementsBeforeMenu: this.__setting["elementsBeforeMenu"] || null,
			pageHeaderContainer: this.__setting["pageHeaderContainer"] || null,
			pageContentContainer: this.__setting["pageContentContainer"] || null,
			header: this.__setting["header"] || null,
			showCollapseIcon: this.util.isUndefinedOrNull(this.__setting["showCollapseIcon"]) ? true : Boolean.parse(this.__setting["showCollapseIcon"]),
			iconCollapse: this.__setting["iconCollapse"] || "<i class='fa fa-bars pull-right'></i>",
			dataSource: this.__setting["dataSource"] || null,
			titleField: this.__setting["titleField"] || "title",
			childField: this.__setting["childField"] || "children",
			iconPosition: this.__setting["iconPosition"] || "left",
			iconMenuExpanded: this.__setting["iconMenuExpanded"] || ((this.__setting["iconPosition"] === 'right') ? "<i class='ns-icon ns-navigation-arrow-down'></i>" : "<i class='ns-icon ns-navigation-arrow-down'></i>"),
			iconMenuCollapsed: this.__setting["iconMenuCollapsed"] || ((this.__setting["iconPosition"] === 'right') ? "<i class='ns-icon ns-navigation-arrow-left'></i>" : "<i class='ns-icon ns-navigation-arrow-right'></i>"),
			context: this.__setting["context"] || this.__domVar.win,
			collapseLeftOffset: parseInt(this.__setting["collapseLeftOffset"]) || 0,
			collapseTopOffset: parseInt(this.__setting["collapseTopOffset"]) || 0,
			isPositionAbsolute: this.util.isUndefinedOrNull(this.__setting["isPositionAbsolute"]) ? true : Boolean.parse(this.__setting["isPositionAbsolute"]),
			extraAttribute: this.__setting["extraAttribute"],// to set link for Angular 2 or other framework attributes
			enableAnimation: Boolean.parse(this.__setting["enableAnimation"]),
			enableFilter: this.util.isUndefinedOrNull(this.__setting["enableFilter"]) ? true : Boolean.parse(this.__setting["enableFilter"]),
			filterConfig: this.__setting["filterConfig"] || {},
			customClass:{navContainer:this.__setting.customClass["navContainer"] || null,
					  menuContainer:this.__setting.customClass["menuContainer"] || null,
					  headerMenu:this.__setting.customClass["headerMenu"] || null,
					  menu:this.__setting.customClass["menu"] || null,
					  selectedParentMenu:this.__setting.customClass["selectedParentMenu"] || "nsNavParentSelectedMenu",
					  selectedMenu:this.__setting.customClass["selectedMenu"] || "nsNavSelectedMenu"}
		};
		//same as nsFloatingLabel properties except interval
		var filterConfig = this.__config.filterConfig;
		filterConfig.interval = this.util.isUndefinedOrNull(filterConfig["interval"]) ? 500 : parseInt(filterConfig["interval"]);
		filterConfig.label = filterConfig["label"] || "Filter";
		this.__createStructure();
	};
	
	NSNavigation.prototype.__renderItems = function()
	{
		if(this.__navigationContainer)
		{
			var arrChildren = this.__navigationContainer.children;
			if(arrChildren && arrChildren.length)
			{
				var length = arrChildren.length;
				var child = null;
				for(var count = length - 1;count > -1 ;count--)
				{
					child = arrChildren[count];
					if(child && this.util.hasStyleClass(child,"nsNavigationItem"))
					{
						child.parentElement.removeChild(child);
					}
				}
			}
			//this.util.removeAllChildren(this.__navigationContainer);
			//this.__createHeader(this.__navigationContainer);
			//this.__createSearchComponents(this.__navigationContainer);
			this.__createItems(this.__config.dataSource,this.__navigationContainer,1,null);
		}
	};
	
	NSNavigation.prototype.__createStructure = function()
	{
		if(!this.__navigationContainerParent)
		{
			this.util.removeAllChildren(this.__navigationContainerParent);
			this.__navigationContainerParent = null;
			this.__navigationContainer = null;
		}
		this.openNavigation();
		this.util.addStyleClass(this.__baseComponent,"nsNavMainContainer");
		this.__applyTheme(this.__baseComponent,"nsNavMainContainer");
		if(this.__config.isPositionAbsolute)
		{
			this.util.addStyleClass(this.__baseComponent,"nsNavMainContainerAbsolute");
		}
		this.util.addEvent(this.__baseComponent,"mouseleave",this.__parentMouseEventHandler.bind(this,null,"mouseleave"));
		//header start
		this.__navigationHeaderParent = this.util.createDiv(this.getID() + "HeaderParent","nsNavHeaderParent");
		this.__applyCustomClass(this.__navigationHeaderParent,"navHeader");
		this.__navigationHeader = this.util.createElement("ul",this.getID() + "Header","nsNavHeader");
		this.__applyCustomClass(this.__navigationHeader,"menuHeader");
		this.__addElementsBeforeMenu(this.__navigationHeaderParent);
		this.__createHeader(this.__navigationHeader);
		this.__createSearchComponents(this.__navigationHeader);
		this.__navigationHeaderParent.appendChild(this.__navigationHeader);
		//header end
		//body start
		this.__navigationContainerParent = this.util.createDiv(this.getID() + "ContainerParent","nsNavContainerParent");
		this.__applyCustomClass(this.__navigationContainerParent,"navContainer");
		this.__navigationContainer = this.util.createElement("ul",this.getID() + "Container","nsNavContainer nsNavContainerIcon" + this.util.toCamelCase(this.__config.iconPosition,true));
		this.__applyCustomClass(this.__navigationContainer,"menuContainer");
		this.__navigationContainerParent.appendChild(this.__navigationContainer);
		//body end
		//Footer start
		this.__navigationFooterParent = this.util.createDiv(this.getID() + "FooterParent","nsNavHeaderFooter");
		this.__applyCustomClass(this.__navigationFooterParent,"navFooter");
		//Footer end
		if(this.__config.pageHeaderContainer && this.__config.pageHeaderContainer.offsetHeight > 0)
		{
			this.__baseComponent.style.marginTop = this.__config.pageHeaderContainer.offsetHeight + "px";
		}
		this.__baseComponent.appendChild(this.__navigationHeaderParent);
		this.__baseComponent.appendChild(this.__navigationContainerParent);
		this.__baseComponent.appendChild(this.__navigationFooterParent);
		this.__headerItemHeight = this.__headerItem ? this.__headerItem.offsetHeight : 0;
	};
	
	NSNavigation.prototype.__addElementsBeforeMenu = function(parent)
	{
		if(parent && this.__config.elementsBeforeMenu && this.__config.elementsBeforeMenu.length > 0)
		{
			var length = this.__config.elementsBeforeMenu.length;
			for(var count = 0;count < length;count++)
			{
				var element = this.__config.elementsBeforeMenu[count];
				if(element)
				{
					parent.appendChild(element);
				}
			}
		}
	};
	
	NSNavigation.prototype.__createHeader = function(parent)
	{
		this.__headerItem = this.util.createElement("li",null,"nsNavTitle");
		this.__applyCustomClass(this.__headerItem,"headerMenu");
		if(this.__config.header)
		{
			var span = this.util.createElement("span",null,"nsNavHeaderTitle");
			this.util.addStyleClass(span,"nsNavNonVisibleIcon");
			span.appendChild(this.__domVar.doc.createTextNode(this.__config.header));
			this.__headerItem.appendChild(span);
		}
		if(this.__config.showCollapseIcon)
		{
			var spanIcon = this.util.createElement("span",null,"nsNavVisibleIcon");
			spanIcon.innerHTML = this.__config.iconCollapse;
			this.util.addEvent(spanIcon,"click",this.__toggleIconClickHandler.bind(this));
			this.__headerItem.appendChild(spanIcon);
		}
		parent.appendChild(this.__headerItem);
	};
	
	NSNavigation.prototype.__createSearchComponents = function(parent)
	{
		if(this.__config.enableFilter)
		{
			this.__conSearch = this.util.createElement("li",this.getID() + "SearchContainer","nsNavSearchContainer");
			parent.appendChild(this.__conSearch);
			var filterConfig = this.__config.filterConfig;
			filterConfig.container = this.__conSearch;
			this.__nsFloatingLabel = new NSFloatingLabel(filterConfig);
			this.util.addEvent(this.__conSearch,"input",this.__txtSearchChangeHandler.bind(this));
		}
	};
	
	NSNavigation.prototype.__txtSearchChangeHandler = function(event)
	{
		clearTimeout(this.__interval);
		var self = this;
		this.__interval = setTimeout(function(){
				self.__filterRecord.call(self,self.__nsFloatingLabel.value());
			}, this.__config.filterConfig.interval);
	};
	
	NSNavigation.prototype.__createItems = function(arrItem,parent,level,parentMenuItem)
	{
		if(arrItem)
		{
			if(!this.util.isArray(arrItem))
			{
				arrItem = [arrItem];
			}
			var item = {};
			for(var count = 0;count < arrItem.length;count++)
			{
				item = arrItem[count];
				if(item)
				{
					var li = this.__createItem(item,level,parentMenuItem);
					parent.appendChild(li);
				}
			}
		}
	};
	
	//While Changing this function, see if this change is applicable in __createDynamicItem function
	NSNavigation.prototype.__createItem = function(item,level,parentMenuItem)
	{
		var li = this.util.createElement("li",null,"nsNavigationItem");
		this.__applyCustomClass(li,"menu");
		li.setAttribute("ns-Nav-Level",level);
		if(item["cssClass"])
		{
			this.util.addStyleClass(li,item["cssClass"]);
		}
		if(level == 1)
		{
			this.util.addEvent(li,"mouseenter",this.__parentMouseEventHandler.bind(this,item,"mouseenter"));
			//this.util.addEvent(li,"mouseleave",this.__parentMouseEventHandler.bind(this,item,"mouseleave"));
			//this.util.addEvent(li,"click",this.__parentMouseEventHandler.bind(this,item,"mouseenter"));
		}
		item[this.__fieldElement] = li;
		item[this.__fieldIsOpen] = false;
		if(item["disabled"])
		{
			this.util.addStyleClass(li,"nsNavigationItemDisabled");
		}
		var anchor = this.util.createElement("a",null);
		li.appendChild(anchor);
		if(item["iconBeforeHtml"])
		{
			var spanIcon = this.util.createElement("span");
			this.util.addStyleClass(spanIcon);
			spanIcon.innerHTML = item["iconBeforeHtml"];
			var icon = spanIcon.firstChild;
			anchor.appendChild(icon);
			anchor.appendChild(this.__domVar.doc.createTextNode("\u00A0"));
		}
		var spanText = this.util.createElement("span",null,"nsNavMenuText");
		this.util.addStyleClass(spanText,"nsNavNonVisibleIcon");
		spanText.appendChild(this.__domVar.doc.createTextNode(item[this.__config.titleField]));
		anchor.appendChild(spanText);
		if(item["iconAfterHtml"])
		{
			var spanIcon = this.util.createElement("span");
			spanIcon.innerHTML = item["iconAfterHtml"];
			var icon = spanIcon.firstChild;
			anchor.appendChild(icon);
		}
		var hasChildren = false;
		if(this.__hasChildren(item))
		{
			this.util.addEvent(anchor,"click",this.__parentMenuClickHandler.bind(this,item));
			this.util.addStyleClass(li,"nsNavItemParent");
			anchor.setAttribute("href","javascript:void(0)");
			var spanIcon = this.util.createElement("span");
			this.util.addStyleClass(spanIcon,"nsNavNonVisibleIcon");
			spanIcon.innerHTML = this.__config.iconMenuExpanded;
			if(this.__config.iconPosition == "left")
			{
				anchor.insertBefore(spanIcon,anchor.firstChild);
			}
			else
			{
				this.util.addStyleClass(spanIcon,"nsNavContainerPullRight");
				anchor.appendChild(spanIcon);
			}
			var ul = this.util.createElement("ul",null,"nsNavSubNavContainer");
			this.util.addStyleClass(ul,"nsNavNonVisibleIcon");
			if(this.__config.enableAnimation)
			{
				this.util.addStyleClass(ul,"nsNavSubNavAnimate");
			}
			li.appendChild(ul);
			item[this.__fieldChildMenuIconContainer] = spanIcon;
			item[this.__fieldChildContainer] = ul;
			this.__createItems(item[this.__config.childField],ul,level + 1,item);
			hasChildren = true;
		}
		else
		{
			this.__setLink(anchor,item["link"]);
			this.__setExtraAttrubtesForLink(anchor,item);
		}
		this.util.addEvent(anchor,"click",this.__menuClickHandler.bind(this,item,li,hasChildren));
		if(level > 1)
		{
			this.util.addStyleClass(li,"nsNavigationChildItem");
		}
		if(parentMenuItem)
		{
			item[this.__fieldParentMenuItem] = parentMenuItem;
		}
		if(item["selected"] && !item["disabled"])
		{
			this.__selectMenu(item,li,false);
			this.__invokeMenuClickHandler(item,li);
		}
		if(hasChildren && item["expanded"] && !item["disabled"])
		{
			this.__selectMenu(item,li,true);
		}
		return li;
	};
	
	NSNavigation.prototype.__invokeMenuClickHandler = function(item,li)
	{
		li = li || item[this.__fieldElement];
		if(li)
		{
			var anchor = li.querySelector("a");
			if(anchor)
			{
				anchor.click();
			}
		}
	};
	
	NSNavigation.prototype.__selectMenu = function(item,li,isExpandOnly)
	{
		if(!li && item && item[this.__fieldElement])
		{
			li = item[this.__fieldElement];
		}
		if(item)
		{
			var parentMenuItem = item[this.__fieldParentMenuItem];
			if(isExpandOnly)
			{
				parentMenuItem = item;
			}
			else
			{
				if(li)
				{
					this.__handleSelectedMenu(item,li);
				}
				parentMenuItem = item[this.__fieldParentMenuItem];
			}
			while (parentMenuItem)
			{
				if(parentMenuItem[this.__fieldElement])
				{
					this.util.addStyleClass(parentMenuItem[this.__fieldElement],"nsNavItemOpen");
					if(parentMenuItem[this.__fieldChildContainer])
					{
						this.util.addStyleClass(parentMenuItem[this.__fieldChildContainer],"nsNavSubNavContainerVisible");
					}
					parentMenuItem[this.__fieldIsOpen] = true;
				}
				parentMenuItem = parentMenuItem[this.__fieldParentMenuItem];
			}
		}
	};
	
	NSNavigation.prototype.__menuClickHandler = function(item,li,hasChildren,event)
	{
		event = this.util.getEvent(event);
		if(!hasChildren)
		{
			this.__handleSelectedMenu(item,li);
			if(item["click"])
			{
				if (typeof item["click"] === "string" || item["click"] instanceof String)
				{
					if(this.util.isFunction(item["click"]))
					{
						item["click"] = this.__config.context[item["click"]];
					}
				}
				if(item["click"] && this.util.isFunction(item["click"]))
				{
					item["click"](event,item,li);
				}
			}
			//dont remove it as it is used in React as the page refreshed on click
			event.preventDefault();
			event.stopPropagation();
		}
	};
	
	NSNavigation.prototype.__toggleIconClickHandler = function(event)
	{
		this.__destroyDynamicItem();
		this.toggleNavigation();
	};
	
	NSNavigation.prototype.__parentMenuClickHandler = function(item,event)
	{
		if(item && item[this.__fieldElement])
		{
			item[this.__fieldIsOpen] ? this.collapse(item) : this.expand(item);
			this.__selectedParentMenuItem = item;
		}
		
	};
	
	NSNavigation.prototype.__parentMouseEventHandler = function(item,eventType,event)
	{
		event = this.util.getEvent(event);
		//for some reason event.type is coming as load so passing eventType to listener
		switch(eventType)
		{
			case "mouseenter":
				if(item && item[this.__fieldElement] && !this.__isNavOpen)
				{
					this.__createDynamicItem(item);
				}
				//this.util.addStyleClass(item[this.__fieldElement],"nsNavParentHover");
			break;
			case "mouseleave":
				this.__destroyDynamicItem();
				//this.util.removeStyleClass(item[this.__fieldElement],"nsNavParentHover");
			break;
		}
	};
	
	NSNavigation.prototype.__filterRecord = function(searchText)
	{
		 if(searchText && searchText.length > 0)
		 {
			 var field = this.__config.titleField;
			 var filter = {};
			 filter[field] = searchText;
			 var setting = {};
			 setting[field] = {caseSensitive:false,multiline:false,matchType:new NSFilter().CONTAINS};
			 this.__handleFiltering(filter,setting);
		 }
		 else
		 {
			 this.__resetFiltering();
		 }
	};
	
	NSNavigation.prototype.__resizeContentContainer = function()
	{
		if(this.__config.pageContentContainer)
		{
			this.__config.pageContentContainer.style.marginLeft = this.__baseComponent.offsetWidth + "px";	
		}
	};
	
	NSNavigation.prototype.__getTopOffset = function()
	{
		var offset = 0;
		if(this.__config.elementsBeforeMenu && this.__config.elementsBeforeMenu.length > 0)
		{
			var length = this.__config.elementsBeforeMenu.length;
			for(var count = 0;count < length;count++)
			{
				var element = this.__config.elementsBeforeMenu[count];
				if(element)
				{
					offset += element.offsetHeight;
				}
			}
		}
		if(!this.__isNavOpen)
		{
			offset += this.__headerItemHeight;
		}
		return offset;
	};
	
	NSNavigation.prototype.__handleFiltering = function(filter,setting,recordLimit)
	{
		var eventParam = {filter:filter,setting:setting,recordLimit:recordLimit};
		this.util.dispatchEvent(this.__baseComponent,NSNavigation.FILTER_CHANGING,eventParam,eventParam);
		this.__filteredColumn = [];
		if(filter)
	    {
			 var isHierarchical = this.__isDataHierarchical;
			 this.__config.dataSource = this.__config.orignalDataSource.slice(0);
			 var source = this.__config.dataSource;
		   	 var nsFilter = new NSFilter(source,filter,setting,recordLimit,isHierarchical,this.__config.childField,null,null,["__ns_nav_field_parentmenuitem"]);//this.__nsGrid.__filterFunction,this.__nsGrid.__hierarchyFilterChildrenFunction
		   	 this.__config.dataSource = nsFilter.execute();
		   	 this.__renderItems();
		   	 this.util.dispatchEvent(this.__baseComponent,NSNavigation.FILTER_CHANGED,eventParam,eventParam);
	    }
	};

	NSNavigation.prototype.__resetFiltering = function()
	{
		if(this.__config.orignalDataSource)
		{
			this.util.dispatchEvent(this.__baseComponent,NSNavigation.FILTER_CHANGING,null,null);
			this.__config.dataSource = this.__config.orignalDataSource.slice(0);
			this.__renderItems();
			this.util.dispatchEvent(this.__baseComponent,NSNavigation.FILTER_CHANGED,null,null);
			this.util.dispatchEvent(this.__baseComponent,NSNavigation.FILTER_RESETTED,null,null);
		}
	};
	
	NSNavigation.prototype.__createDynamicItem = function(item)
	{
		this.__destroyDynamicItem();
		var self = this;
		var createChild = function(item,parent,level)
		{
			var li = self.util.createElement("li",null,"nsNavDynamicMenuItem");
			if(item["cssClass"])
			{
				self.util.addStyleClass(li,item["cssClass"]);
			}
			var anchor = se