I have written code for a terminal UI application using blessed package in NodeJS which contains 2 forms, say form1 and form2 with some widgets like list and checkboxes in each form. So how can I navigate between the forms with keyboard?
var blessed = require('blessed');
// Create a screen object.
var screen = blessed.screen({
smartCSR: true
});
screen.title = 'my window title';
var parentform = blessed.form({
parent: screen,
keys: true,
left: 0,
top: 2,
width: 80,
height: 50,
// bg: 'green',
content: '',
border:{
type:'line'
},
style:{
border:{
fg:'green',
bg:'green'
}
}
});
var list = blessed.List({
top:2,
left:'center',
parent:parentform,
height:8,
width:20,
mouse:true,
keys:true,
items:["abc","xyz","123","456"],
border:{
type:'line'
},
style:{
selected:{
bg:'blue',
fg:'white'
},
item:{
bg:'white',
fg:'blue'
},
// focus:{
// bg:'red'
// }
}
});
var parentform_cb1 = blessed.Checkbox({
parent: parentform,
top:12,
left:10,
content:"cb1",
height:1,
width:12,
// bg:'white',
mouse:true
});
var parentform_cb2 = blessed.Checkbox({
parent: parentform,
top:14,
left:10,
content:"cb2",
height:1,
width:12,
// bg:'white',
mouse:true
});
var parentform_cb3 = blessed.Checkbox({
parent: parentform,
top:16,
left:10,
content:"cb3",
height:1,
width:12,
// bg:'white',
mouse:true
});
var parentform_cb4 = blessed.Checkbox({
parent: parentform,
top:18,
left:10,
content:"cb4",
height:1,
width:12,
// bg:'white',
mouse:true
});
var parentform_cb5 = blessed.Checkbox({
parent: parentform,
top:20,
left:10,
content:"cb5",
height:1,
width:12,
// bg:'white',
mouse:true
});
var form2 = blessed.form({
parent: screen,
keys: true,
left: 90,
top: 2,
width: 80,
height: 50,
content: '',
mouse:true,
scrollable:true,
scrollbar: {
style: {
bg: 'blue'
},
},
border:{
type:'line'
},
style:{
border:{
fg:'green',
bg:'green'
}
}
});
var form2_cb1 = blessed.Checkbox({
parent: form2,
top:4,
left:4,
content:"form2 cb2",
height:1,
width:18,
mouse:true
});
screen.key(['escape', 'q', 'C-c'], function(ch, key) {
return process.exit(0);
});
list.focus();
screen.render();
Currently I am able to do it with a mouse, but how can i do it with keyboard?
To navigate between the forms you can simply, attach a key event to the last checkbox item of form1 and the checkbox item of form2.
parentform_cb5.key(["tab"], function (ch, key) {
// focuses on form 2 when you press tab
form2.focusNext();
});
form2_cb1.key(["tab"], function (ch, key) {
// focuses back on the screen when you press tab
screen.focusNext();
});
Related
I have an editable multi selectable kendo Treelist. I would like to be able to select part of the grid and copy paste its data in the same grid (other columns and rows) or to a text file. It is important to paste it with the same structure in the new table.
The copy feature is not supported for kendo Treelist.
Is there a way to do that with use of JavaScript and jQuery?
Kendo demo
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2023.1.117/styles/kendo.default-v2.min.css"/>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2023.1.117/js/kendo.all.min.js"></script>
</head>
<body>
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ field: "age" }
],
selectable: "multiple, cell",
editable:"incell",
dataSource: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22 },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
});
</script>
</body>
</html>
I have used two buttons, one for copying and one for pasting. The events functions are as below. This solved my problem and I can also paste the copied text in excel.
<button onClick="copying()" >Copy</button>
<button onClick="pasting()" >Paste</button>
<div id="treeList"></div>
<script>
$("#treeList").kendoTreeList({
columns: [
{ field: "name" },
{ field: "age" }
],
selectable: "multiple, cell",
editable:"incell",
dataSource: [
{ id: 1, parentId: null, name: "Jane Doe", age: 22 },
{ id: 2, parentId: 1, name: "John Doe", age: 24 },
{ id: 3, parentId: 1, name: "Jenny Doe", age: 3 }
]
});
</script>
var copiedText="";
function copying(){
if(copiedText !== ""){
return;
}
var grid = $("#treeList").data("kendoTreeList");
var selected = grid.select();
var previousRowID = selected.eq(0).parent().index();
var isNewLine = true;
selected.each(function() {
var row = $(this).closest("tr");
var dataItem = grid.dataItem(this);
if (previousRowID !== $(this).parent().index()) {
copiedText += "\r\n";
isNewLine = true;
}
previousRowID = $(this).parent().index();
var colIndx = $("td", row).index(this);
var column = grid.columns[colIndx];
var data = dataItem;
var value = dataItem[column.field];
if (!isNewLine) {
copiedText += "\t";
}
copiedText += value;
isNewLine = false;
});
var textarea = $("<textarea>");
var offset = $(this).offset();
// Position the textarea on top of the Treelist and make it transparent.
textarea.css({
position: 'absolute',
opacity:0,
border: 'none',
width: $(this).find("table").width(),
height: $(this).find(".k-grid-content").height()
});
textarea.val(copiedText)
.appendTo('body')
.focus()
.select();
document.execCommand('copy');
setTimeout(function(){
textarea.remove();
});
}
function pasting() {
var pasteVal = copiedText;
var grid = $("#treeList").data("kendoTreeList");
if (pasteVal) {
var selectedArr= Object.values($(".k-grid td.k-selected"));
var pasteArray = pasteVal.split("\r\n").filter(r => r !== "").map(r => r.split("\t"));
pasteArray.forEach(function( item, index) {
selectedArr[index].innerHTML = item;
});
grid.refresh();
}
copiedText= "";
}
I am trying to show a popup as explained and i am not able to add one. Here is the code HTML followed by JS.
I have added a button and on click of the button i am trying to show popup. I was able to show a popup without the webix.ready() function, but when i try to add that my code breaks. Any help regarding this would be of real help.
HTML CODE:
<body>
<div class="loader-holder" id="loader-holder">
<div class="loader-container">
<p>Loading......</p>
</div>
</div>
</body>
JS CODE:
var form = {
view:"form",
borderless:true,
elements: [
{ view:"text", label:'Login', name:"login" },
{ view:"text", label:'Email', name:"email" },
{ view:"button", value: "Submit", click:function(){
if (this.getParentView().validate()){ //validate form
webix.message("All is correct");
this.getTopParentView().hide(); //hide window
}
else
webix.message({ type:"error", text:"Form data is invalid" });
}}
],
rules:{
"email":webix.rules.isEmail,
"login":webix.rules.isNotEmpty
},
elementsConfig:{
labelPosition:"top",
}
};
function showForm(winId, node){
console.log(node);
$$(winId).getBody().clear();
$$(winId).show(node);
$$(winId).getBody().focus();
}
var popup = {view:"popup",id:"win1",width:300,head:false,body:webix.copy(form)};
function Start(){
var tbl = {
}
var cfg = {
container:"listC",
width:1500,
height:600,
rows:[
{
height: 35,
view:"toolbar",
elements:[
{view:"text", id:"grouplist_input",label:"Filter",css:"fltr", labelWidth:170}
]
},
{ view:"button",value: 'Click to show a popup with a form',click:function(){ showForm("win1", popup)}},
]
}
/////////////////////////////////
var bodycontent =
{
id:"tb", autoheight:true,autowidth:true,
view:"tabview",
cells:[
{
header:"LIVE",
body: tbl
},
{
header:"REMOTE WATCH",
body: { id:"remote_watch", template:"some_text"}
},
{
header:"CONFIG",
body:cfg//{ id:"config", template:"CONFIG is In developement........"}
} ]
}
var label = { view:"label", label:'some_text ',height:25, align:"left",css:"my_style"}
webix.ready(function ()
{
var el = document.getElementById('loader-holder');
el.parentNode.removeChild(el);
webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
webix.ui(
{
view: "layout",
id: "dashboard",
rows:
[
label,
bodycontent
]
})
});
}
You can use popup functionality from
Bootstrap. It has good documentation.
You need to initialize popup before using it. You can do it wherever you want to (ex. webix.ready(), "showForm" function)
var form = {
view:"form",
borderless:true,
elements: [
{ view:"text", label:'Login', name:"login" },
{ view:"text", label:'Email', name:"email" },
{ view:"button", value: "Submit", click:function(){
if (this.getParentView().validate()){ //validate form
webix.message("All is correct");
this.getTopParentView().hide(); //hide window
}
else
webix.message({ type:"error", text:"Form data is invalid" });
}}
],
rules:{
"email":webix.rules.isEmail,
"login":webix.rules.isNotEmpty
},
elementsConfig:{
labelPosition:"top",
}
};
function showForm(winId, node){
webix.ui(popup);
$$(winId).getBody().clear();
$$(winId).show(node);
$$(winId).getBody().focus();
}
var popup = {view:"popup",id:"win1",width:300,head:false,body:webix.copy(form)};
function Start(){
var tbl = {
}
var cfg = {
container:"listC",
width:1500,
height:600,
rows:[
{
height: 35,
view:"toolbar",
elements:[
{view:"text", id:"grouplist_input",label:"Filter",css:"fltr", labelWidth:170}
]
},
{ view:"button",value: 'Click to show a popup with a form',click:function(){ showForm("win1", this.$view)}},
]
}
/////////////////////////////////
var bodycontent =
{
id:"tb", autoheight:true,autowidth:true,
view:"tabview",
cells:[
{
header:"LIVE",
body: tbl
},
{
header:"REMOTE WATCH",
body: { id:"remote_watch", template:"some_text"}
},
{
header:"CONFIG",
body:cfg//{ id:"config", template:"CONFIG is In developement........"}
} ]
}
var label = { view:"label", label:'some_text ',height:25, align:"left",css:"my_style"}
webix.ready(function ()
{
var el = document.getElementById('loader-holder');
el.parentNode.removeChild(el);
webix.i18n.parseFormatDate = webix.Date.strToDate("%m/%d/%Y");
webix.ui(
{
view: "layout",
id: "dashboard",
rows:
[
label,
bodycontent
]
})
});
}
Start();
https://webix.com/snippet/459c4dd6
I want to get the data-id of the element selected in pop-up.
i have to show the selection in the grid, whose solution you have provided. but for Database storage i need the ID value of the selection... how can i get and bind the ID in the grid.???
<script type="text/javascript">
$(function () {
// declaration
$("#lognForm").ejDialog(
{
enableModal: true,
enableResize: false,
width: 291,
close: "onDialogClose",
containment: ".cols-sample-area",
showFooter: true,
footerTemplateId: "sample"
});
$("#defaultlistbox").ejListView({ dataSource:ej.DataManager({
url: "http://js.syncfusion.com/ejServices/Wcf/Northwind.svc/", crossDomain: true
}),
query: ej.Query().from("Suppliers").select("SupplierID", "ContactName"),
fieldSettings: { text: "ContactName"},mouseUp: "onmouseup",height:"400px" ,enableCheckMark: true,
enableFiltering: true,
});
$("#btnOpen").ejButton({ size: "medium", "click": "onOpen", type: "button", height: 30, width: 172 });
$("#Grid").ejGrid({
columns: [
{ field: "title", headerText: "ListviewData", width: 80 },
]
});
$("#btn1").ejButton({ size: "medium", "click": "onbtnOpen", type: "button", height: 30, width: 172 });
});
function onOpen() {
$("#btnOpen").hide();
$("#lognForm").ejDialog("open");
}
function onbtnOpen(){
$("#lognForm").ejDialog("close");
}
function onDialogClose(args) {
$("#btnOpen").show();
}
function onmouseup(e) {
var selections = $('#defaultlistbox').ejListView("getCheckedItems");
var items = [];
$(selections).each(function () {
var $this = $(this);
var item = { title: $this.find("span").html() };
items.push(item);
});
if (selections.length > 0) {
var obj = $("#Grid").ejGrid("instance");
obj.setModel({ dataSource: items })
obj.refreshContent();
}
else{
var obj = $("#Grid").ejGrid("instance");
obj.dataSource([]); }
}
</script>
<li class="e-user-select e-list e-list-check e-state-default" data-id="2">
If you have a reference to that javascript DOM object, simply look for the dataset property. It's a hashmap containing string keys, that are on your HTML element prefixed with data.
For example, you'll find data-id on your object as myObject.dataset["id"].
I have dojox/form/CheckedMultiSelect control. When I check a few items from the dropdown, the label changed to '2 Item(s) Selected'. How to customize it to something like '2 State(s) Selected'.
var stateCheckedMultiSelect = new CheckedMultiSelect ({
id: 'stateChkMultiSelect',
dropDown: true,
multiple: true,
onChange: lang.hitch(this, function(result){
stateChecked = result;
})
});
stateCheckedMultiSelect.set('style', {width: '100%', height: '30px', fontSize: '14px'});
stateCheckedMultiSelect.addOption({'label': 'Texas', 'value': 'TX'});
stateCheckedMultiSelect.addOption({'label': 'New York', 'value': 'NY'});
stateCheckedMultiSelect.startup();
I was able to achieve my purpose via codes below. Not sure if there is a better way to do it. If so, please advise.
var StateCheckedMultiSelect = declare(CheckedMultiSelect, {
startup: function() {
this.inherited(arguments);
setTimeout(lang.hitch(this, function() {
this.dropDownButton.set("label", this.label);
}));
},
_updateSelection: function() {
this.inherited(arguments);
if(this.dropDown && this.dropDownButton){
var labels = [];
array.forEach(this.options, function(option){
if(option.selected){
labels.push(option.label);
}
});
this.dropDownButton.set("label", labels.length + 'state(s) selected');
}
}
});
I have this code. In here I am retrieving a new set of values via a URL through Jquery Ajax($.get()) on calling a function gotoa() on some click event. I am obtaining the set of values correctly as i am getting right result on alert. But the grid is not updating itself at that moment. When i refresh the whole page then the grid updates. How to update the grid on calling of gotoa() itself. ?
The code ::
<script type="text/javascript">
function gotoa(){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function(result){
alert(result);
var storedata={
identifier:"ID",
label:"name",
items:result
};
var store = new dojo.data.ItemFileWriteStore({data: storedata});
alert(store);
//var gridh = dijit.byId("gridDiv");
//gridh.setStore(store);
var gridStructure =[[
{ field: "ID",
name: "ID_Emp",
width: "20%",
classes:"firstname"
},
{
field: "Names",
name: "Name",
width: "20%",
classes: "firstname"
},
{ field: "Email",
name: "Mail",
width: "20%",
classes:"firstname"
}
]
];
var grid1 = new dojox.grid.DataGrid({
id: 'grid2',
store: store,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid1.domNode);
/*Call startup() to render the grid*/
grid1.startup();
// assuming our grid is stored in a variable called "myGrid":
dojo.connect(grid1, "onSelectionChanged", grid1, function(){
var items = grid1.selection.getSelected();
// do something with the selected items
dojo.forEach(items, function(item){
var v = grid1.store.getValue(item, "Names");
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
//if(name!="Mail")
showDialog();
}, grid1);
});
dojo.connect(grid1, "onCellClick", grid1, function sendmail(){
var items = grid1.selection.getSelected();
dojo.forEach(items, function(item){
var v1 = grid1.store.getValue(item, "Email");
alert(v1);
request.setAttribute("variablemail", v1);
});
});
},"text");
}
</script>
The output of alert(result) at a particular point of time is like this ::
[{"ID":1,"Names":"Shantanu","Email":"shantanu.tomar#gmail.com"},{"ID":2,"Names":"Mayur","Email":"mayur.sharma#gmail.com"},{"ID":3,"Names":"Rohit"},{"ID":4,"Names":"Jasdeep"},{"ID":5,"Names":"Rakesh","Email":"rakesh.shukla#gmail.com"},{"ID":6,"Names":"Divyanshu"},{"ID":8,"Names":"hello"},{"ID":9,"Names":"fine"},{"ID":10,"Names":"shivani"}]
And the output of alert(store) is like ::
[object Object]
And i am calling gotoa() on clicking anywhere inside a content pane(for the time being, later on will put a button or something) like this ::
<div dojoType="dijit.layout.ContentPane" title="Pending Activities" style="background-image: url('http://localhost:8080/2_8_2012/images/17.png');" onClick="gotoa();">
How to upgrade grid data ? thanks.
I am a newbie to dojo, i think this code will help you::
<script type="text/javascript">
function gotoa(isUpdate){
$.get("http://localhost:8080/2_8_2012/jsp/GetJson.jsp?random=" + new Date().getTime(), function(result){
alert(result);
var storedata={
identifier:"ID",
label:"name",
items:result
};
var store = new dojo.data.ItemFileWriteStore({data: storedata});
alert(store);
if (isUpdate) {
var grid = dojo.byId('grid2');
grid.setStore(store);
} else {
var gridStructure =[[
{ field: "ID",
name: "ID_Emp",
width: "20%",
classes:"firstname"
},
{
field: "Names",
name: "Name",
width: "20%",
classes: "firstname"
},
{ field: "Email",
name: "Mail",
width: "20%",
classes:"firstname"
}
]
];
var grid1 = new dojox.grid.DataGrid({
id: 'grid2',
store: store,
structure: gridStructure,
rowSelector: '30px',
selectionMode: "single",
autoHeight:true,
columnReordering:true},
document.createElement('div'));
/*append the new grid to the div*/
dojo.byId("gridDiv").appendChild(grid1.domNode);
/*Call startup() to render the grid*/
grid1.startup();
// assuming our grid is stored in a variable called "myGrid":
dojo.connect(grid1, "onSelectionChanged", grid1, function(){
var items = grid1.selection.getSelected();
// do something with the selected items
dojo.forEach(items, function(item){
var v = grid1.store.getValue(item, "Names");
function showDialog() {
dojo.require('dijit.Tooltip');
dijit.byId("terms").show();
}
//if(name!="Mail")
showDialog();
}, grid1);
});
dojo.connect(grid1, "onCellClick", grid1, function sendmail(){
var items = grid1.selection.getSelected();
dojo.forEach(items, function(item){
var v1 = grid1.store.getValue(item, "Email");
alert(v1);
request.setAttribute("variablemail", v1);
});
});
}
});
}
</script>
use gotoa() for initial loading of grid and gotoa(true) for updating the grid.