/fiddle.css

## fiddle.css
#rmenu {
  position: absolute;
}

.show {
  z-index: 1000;
  position: absolute;
  background-color: #C0C0C0;
  border: 1px solid blue;
  padding: 2px;
  display: block;
  margin: 0;
  list-style-type: none;
  list-style: none;
}

.hide {
  display: none;
}

.show li {
  list-style: none;
}

.show a {
  border: 0 !important;
  text-decoration: none;
}

.show a:hover {
  text-decoration: underline !important;
}

#clearPrefrence {
  border: 5px solid red;
}

#open1 {
  border: 5px solid green;
}

## fiddle.html
<body>
  <!--
  http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js
  <div id="test1">
    <a href="www.google.com" class="test">Google</a>
    <a href="www.google.com" class="test">Link 2</a>
    <a href="www.google.com" class="test">Link 3</a>
    <a href="www.google.com" class="test">Link 4</a>
  </div> -->


  <div>

    <select id="cars">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
    </select>

    <span id="open1">add/edit prefrence</span>
    <span>save prefrence</span>
    <span id="clearPrefrence">clear prefrence</span>
    <span>export</span>
  </div>

  <div id="win1" style="">
    <!--  removed display:none> -->
    <!--  <form action="/action_page.php"> -->
    First name: <input id="mickey" type="text" name="FirstName"><br>
    <input id="win1Submit" type="submit" value="Click me!">
    <!-- </form>
   -->
  </div>

  <!-- initially hidden right-click menu -->
  <div class="hide" id="rmenu">
    <form id="context-menu" )>
      <ul>
        <li>
          <!--         <a href="http://www.google.com">codeLong</a>
         --><input type="checkbox" name="column1" value="Bike" class="checkbox_check">codeLong<br>

        </li>

        <li>
          <!--         <a href="http://localhost:8080/login">codeShort</a>
         --><input type="checkbox" name="column2" value="Bike">codeShort<br>


        </li>

        <li>
          <!--         <a href="C:\">name</a>
         --><input type="checkbox" name="column3" value="Bike">name<br>

        </li>
      </ul>
    </form>

  </div>


  <div id="grid1"></div>

</body>

## fiddle.js
$("#context-menu").change(function(e) {
  var grid = $("#grid1").data("kendoGrid");
  var columns = e.target.form.elements;
  var checked = [];
  for (var column of columns) {
    var index = Number(column.name.split("column")[1]);
    if (column.checked)
      grid.showColumn(index - 1);
    else
      grid.hideColumn(index - 1);
  }
});


$("#win1").hide();

document.getElementById('cars').options[0].text = localStorage.getItem("someVarName") || 'unkonwn';
var dropdown = $('<select>');
alert("I am here dropdownmenu select");

dropdown.options = function(data) {
  var self = this;
  var newOptions = ""; //create one objec to save new options
  $.each(data, function(ix, val) {
    newOptions += '<option value="' + val + '">' + val + '</option>';
    //data.push(option);
  });
  self.html(newOptions);
}
//var array = ['one', 'two', 'three'];
var array = [];
dropdown.options(array);
$('body').append(dropdown);
$('#btnSubmit').on('click', function(ix, val) {
  //should clear out the current options
  //and replace with the new array
  alert("I am here dropdownmenu");
  var newArray = ['four', 'five', 'six'];
  dropdown.options(newArray);
});


$("#open1").click(function() {
  alert("I am here");

  $("#win1").show().kendoWindow({
    width: "300px",
    height: "500px",
    modal: true,
    title: "Window 1"
  });
});

$("#clearPrefrence").click(function() {
  alert("clearPrefrence");
  localStorage.clear();
  //$("#cars option[value=volvo]").remove();
  $("#cars option:selected").remove();

});

$("#win1Submit").click(function() {

  var testingMickey = $("#mickey").val();
  alert("win1Submit I am here--->" + testingMickey);
  document.getElementById('cars').options[0].text = testingMickey;

  var someVarName = testingMickey;
  localStorage.setItem("someVarName", testingMickey);

  var getItemsomeVarName1 = localStorage.getItem("someVarName");
  alert("getItemsomeVarName1 I am here--->" + getItemsomeVarName1);


  $("#win1").data("kendoWindow").close();

});


setGrid();

$('.k-grid-header').on('contextmenu', function(e) {
  e.preventDefault();
  let menu = document.getElementById("rmenu");
  menu.style.top = e.clientY + 'px';
  menu.style.left = e.clientX + 'px';

  menu.className = "show";
});

$(document).bind("click", function(event) {
  document.getElementById("rmenu").className = "hide";
});


function setGrid() {

  var ds1 = new kendo.data.DataSource({
    transport: {
      read: {
        //using jsfiddle echo service to simulate JSON endpoint
        url: "/echo/json/",
        dataType: "json",
        type: "POST",
        data: {
          // /echo/json/ echoes the JSON which you pass as an argument
          json: JSON.stringify({
            "country": [{
                "codeLong": "AUT",
                "codeShort": "AT",
                "name": "Austria"
              },
              {
                "codeLong": "BEL",
                "codeShort": "BE",
                "name": "Belgium"
              },
              {
                "codeLong": "BGR",
                "codeShort": "BG",
                "name": "Bulgaria"
              }
            ]
          })
        }
      }
    },
    schema: {
      data: "country",
      model: {
        fields: {
          codeLong: {
            type: "string"
          },
          codeShort: {
            type: "string"
          },
          name: {
            type: "string"
          }
        }
      }
    }
  });


  $("#grid1").kendoGrid({
    dataSource: ds1,
    height: 180,
    scrollable: {
      virtual: true
    },
    columns: [{
        field: "codeLong",
        title: "codeLong"
      },
      {
        field: "codeShort",
        title: "codeShort"
      },
      {
        field: "name",
        title: "name"
      }

    ]
  });
}
	#rmenu {
	position: absolute;
	}

	.show {
	z-index: 1000;
	position: absolute;
	background-color: #C0C0C0;
	border: 1px solid blue;
	padding: 2px;
	display: block;
	margin: 0;
	list-style-type: none;
	list-style: none;
	}

	.hide {
	display: none;
	}

	.show li {
	list-style: none;
	}

	.show a {
	border: 0 !important;
	text-decoration: none;
	}

	.show a:hover {
	text-decoration: underline !important;
	}

	#clearPrefrence {
	border: 5px solid red;
	}

	#open1 {
	border: 5px solid green;
	}
	<body>
	<!--
	http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js
	<div id="test1">
	<a href="www.google.com" class="test">Google</a>
	<a href="www.google.com" class="test">Link 2</a>
	<a href="www.google.com" class="test">Link 3</a>
	<a href="www.google.com" class="test">Link 4</a>
	</div> -->


	<div>

	<select id="cars">
	<option value="volvo">Volvo</option>
	<option value="saab">Saab</option>
	</select>

	<span id="open1">add/edit prefrence</span>
	<span>save prefrence</span>
	<span id="clearPrefrence">clear prefrence</span>
	<span>export</span>
	</div>

	<div id="win1" style="">
	<!-- removed display:none> -->
	<!-- <form action="/action_page.php"> -->
	First name: <input id="mickey" type="text" name="FirstName"><br>
	<input id="win1Submit" type="submit" value="Click me!">
	<!-- </form>
	-->
	</div>

	<!-- initially hidden right-click menu -->
	<div class="hide" id="rmenu">
	<form id="context-menu" )>
	<ul>
	<li>
	<!-- <a href="http://www.google.com">codeLong</a>
	--><input type="checkbox" name="column1" value="Bike" class="checkbox_check">codeLong<br>

	</li>

	<li>
	<!-- <a href="http://localhost:8080/login">codeShort</a>
	--><input type="checkbox" name="column2" value="Bike">codeShort<br>


	</li>

	<li>
	<!-- <a href="C:\">name</a>
	--><input type="checkbox" name="column3" value="Bike">name<br>

	</li>
	</ul>
	</form>

	</div>


	<div id="grid1"></div>

	</body>
	$("#context-menu").change(function(e) {
	var grid = $("#grid1").data("kendoGrid");
	var columns = e.target.form.elements;
	var checked = [];
	for (var column of columns) {
	var index = Number(column.name.split("column")[1]);
	if (column.checked)
	grid.showColumn(index - 1);
	else
	grid.hideColumn(index - 1);
	}
	});


	$("#win1").hide();

	document.getElementById('cars').options[0].text = localStorage.getItem("someVarName") \|\| 'unkonwn';
	var dropdown = $('<select>');
	alert("I am here dropdownmenu select");

	dropdown.options = function(data) {
	var self = this;
	var newOptions = ""; //create one objec to save new options
	$.each(data, function(ix, val) {
	newOptions += '<option value="' + val + '">' + val + '</option>';
	//data.push(option);
	});
	self.html(newOptions);
	}
	//var array = ['one', 'two', 'three'];
	var array = [];
	dropdown.options(array);
	$('body').append(dropdown);
	$('#btnSubmit').on('click', function(ix, val) {
	//should clear out the current options
	//and replace with the new array
	alert("I am here dropdownmenu");
	var newArray = ['four', 'five', 'six'];
	dropdown.options(newArray);
	});



	$("#open1").click(function() {
	alert("I am here");

	$("#win1").show().kendoWindow({
	width: "300px",
	height: "500px",
	modal: true,
	title: "Window 1"
	});
	});

	$("#clearPrefrence").click(function() {
	alert("clearPrefrence");
	localStorage.clear();
	//$("#cars option[value=volvo]").remove();
	$("#cars option:selected").remove();

	});

	$("#win1Submit").click(function() {

	var testingMickey = $("#mickey").val();
	alert("win1Submit I am here--->" + testingMickey);
	document.getElementById('cars').options[0].text = testingMickey;

	var someVarName = testingMickey;
	localStorage.setItem("someVarName", testingMickey);

	var getItemsomeVarName1 = localStorage.getItem("someVarName");
	alert("getItemsomeVarName1 I am here--->" + getItemsomeVarName1);


	$("#win1").data("kendoWindow").close();

	});




	setGrid();

	$('.k-grid-header').on('contextmenu', function(e) {
	e.preventDefault();
	let menu = document.getElementById("rmenu");
	menu.style.top = e.clientY + 'px';
	menu.style.left = e.clientX + 'px';

	menu.className = "show";
	});

	$(document).bind("click", function(event) {
	document.getElementById("rmenu").className = "hide";
	});



	function setGrid() {

	var ds1 = new kendo.data.DataSource({
	transport: {
	read: {
	//using jsfiddle echo service to simulate JSON endpoint
	url: "/echo/json/",
	dataType: "json",
	type: "POST",
	data: {
	// /echo/json/ echoes the JSON which you pass as an argument
	json: JSON.stringify({
	"country": [{
	"codeLong": "AUT",
	"codeShort": "AT",
	"name": "Austria"
	},
	{
	"codeLong": "BEL",
	"codeShort": "BE",
	"name": "Belgium"
	},
	{
	"codeLong": "BGR",
	"codeShort": "BG",
	"name": "Bulgaria"
	}
	]
	})
	}
	}
	},
	schema: {
	data: "country",
	model: {
	fields: {
	codeLong: {
	type: "string"
	},
	codeShort: {
	type: "string"
	},
	name: {
	type: "string"
	}
	}
	}
	}
	});



	$("#grid1").kendoGrid({
	dataSource: ds1,
	height: 180,
	scrollable: {
	virtual: true
	},
	columns: [{
	field: "codeLong",
	title: "codeLong"
	},
	{
	field: "codeShort",
	title: "codeShort"
	},
	{
	field: "name",
	title: "name"
	}

	]
	});
	}