hi, Thank you for the quick reply, here is my code that is creating a dialog
var header ='<th style="width:100px;border:1px solid black;"><input type="checkbox" class="selectAllRows" /></th>';
var body = "";
for(var index in data) {
var rowData = data[index];
for( var key in rowData) {
header = header + '<th style="width:250px;border:1px solid black;">' + key + '</th>';
}
break;
}
for(var index in data) {
var rowData = data[index];
body = body + '<tr style="border:1px solid black;text-align:center;"><td><input type="checkbox" class="rowSelect" /></td>';
for( var key in rowData) {
body = body + '<td style="border:1px solid black;">' + rowData[key] + '</td>';
}
body = body + '</tr>';
}
//'<script type="text/javascript" language="javascript" src="/js/Handsontable5/handsontable.full.min.js"></script>'
//'<link rel="stylesheet" type="text/css" href="/js/Handsontable5/handsontable.full.min.css" />'
var dialogTemplate = '<div id="dialog-2" style="width:950px;height:500px;">' +
'<br>' +
'<div>' +
'Please Select No. of years <select id="userInput">' +
'<option value="10">Last 10 Years</option>' +
'<option value="20">Last 20 Years</option>' +
'<option value="25">Last 25 Years</option>' +
'<option value="30">Last 30 Years</option>' +
'<option value="ALL" selected="selected">All Records</option>' +
'</select>' +
'</div>' +
'<br>' +
'<br>' +
'<div id="container" class="handsontable"></div>' +
'<div>' +
'<table id="detailTableData" style="width:650px;border:1px solid black;">' +
'<tr style="border:1px solid black;">' + header +'</tr>' + body
'</table>' +
'</div>' +
'</div>';
jQuery(dialogTemplate).dialog({
modal: true,
draggable: false,
resizable: true,
maxWidth: "1000px",
height: "500px",
width: "950px",
title: "Import",
hideCloseButton: false,
open: function() {
jQuery(".ui-dialog").css({"left":"100px","top":"5px","margin-top": "70px", "margin-left":"105px", "width": "950px", "height": "500px","z-index":"9999"});
jQuery("#dialog-2").css({"display": "block","width": "auto","min-height": "350px","max-height": "450px","height": "400px"});
jQuery(".ui-dialog-titlebar").css({"float": "right !important","margin-top":"12px !important","margin-right":"10px !important","height":"15px !important","color":"#ffffff !important","background": "#3074a6 !important","border":"1px solid #3074a6 !important","height":"40px","border":".1em solid #eeeeee","border-bottom-right-radius": "0px","border-bottom-left-radius": "0px","border-top-right-radius": "0px","border-top-left-radius": "0px", "padding-top": "0px", "padding-right": "0px","padding-left": "0px"});
jQuery(".ui-corner-all").css({"border-bottom-right-radius": "0px","border-bottom-left-radius": "0px","border-top-right-radius": "0px","border-top-left-radius": "0px", "padding-top": "0px", "padding-right": "0px","padding-left": "0px"});
jQuery(".ui-dialog-title").css({"margin-top": "10px","margin-left": "10px","color": "#ffffff","float": "left","line-height": "25px","font-style": "normal","font-family": "Arial","font-weight": "700","font-size": "18px"});
jQuery(".ui-widget-header").css({"border": "1px solid #3074a6", "background": "#3074a6 url(/images/ui-bg_gloss-wave_35_f6a828_500x100.png)50% 50% repeat-x"});
jQuery(".dialog-button").css({"height":"35px","width":"70px","margin-top":"3px","margin-right":"10px","font-family":"Arial","font-size":"13px","color":"#3074a6","float":"right","background":"#ffffff"});
jQuery(".dialog-import").css({"height":"35px","width":"100px","margin-top":"3px","margin-right":"20px","font-family":"Arial","font-size":"13px","color":"#ffffff","float":"right","background":"#3074a6"});
jQuery(".ui-widget").css({"font-family": "Arial","font-size": "13px","background": "#ffffff"});
jQuery(".ui-widget-content").css({"border-": "1px solid #dddddd","background": "#ffffff url(/images/ui-bg_highlight-soft_100_eeeeee_1x100.png) 50% top repeat-x"});
var hotdata = [
["", "Ford", "Tesla", "Toyota", "Honda"],
["2017", 10, 11, 12, 13],
["2018", 20, 11, 14, 13],
["2019", 30, 15, 12, 13]
];
var hot = new Handsontable(jQuery("#container"), {
data: hotdata,
minSpareRows: 1,
rowHeaders: true,
colHeaders: true,
contextMenu: true
});
hot.render();
jQuery("#userInput").on("change", function() {
var selectedYear = jQuery("#userInput option:selected").val();
if(selectedYear === "ALL") {
jQuery('#detailTableData tbody').replaceWith('<tbody><tr style="border:1px solid black;">' + header +'</tr>' + body + '</tbody>');
} else {
var updateBody="";
for(var index in actualData) {
var rowData = actualData[index];
if(rowData["CDDate"] && (rowData["CDDate"] >= ((new Date()).getFullYear() - selectedYear))) {
updateBody = updateBody + '<tr style="border:1px solid black;text-align:center;"><td><input type="checkbox" class="rowSelect" /></td>';
for( var key in rowData) {
updateBody = updateBody + '<td style="border:1px solid black;">' + rowData[key] + '</td>';
}
updateBody = updateBody + '</tr>';
}
if(rowData['AerialDate'] && (rowData["AerialDate"] >= ((new Date()).getFullYear() - selectedYear))) {
updateBody = updateBody + '<tr style="border:1px solid black;text-align:center;"><td><input type="checkbox" class="rowSelect" /></td>';
for( var key in rowData) {
updateBody = updateBody + '<td style="border:1px solid black;">' + rowData[key] + '</td>';
}
updateBody = updateBody + '</tr>';
}
}
jQuery('#detailTableData tbody').replaceWith('<tbody><tr style="border:1px solid black;">' + header +'</tr>' + updateBody + '</tbody>');
}
});
},
buttons: [
{
text: "Import",
"class" : "dialog-import",
click: function() {
jQuery(this).dialog('destroy').remove();
jQuery(".modal-backdrop").remove();
}
},
{
text: "Append",
"class" : "dialog-button",
click: function() {
jQuery(this).dialog('destroy').remove();
jQuery(".modal-backdrop").remove();
}
},
{
text: "Cancel",
"class" : "dialog-button",
click: function() {
jQuery(this).dialog('destroy').remove();
jQuery(".modal-backdrop").remove();
}
}
]
});
