New to dojo and dGrid, so I hope I'm overlooking something obvious. This is almost same as this Saving a Dgrid JsonRest-based Store, which has no accepted answer.
After recently adding an edit box to dGrid (pretty simple), now I'd like to be able to save those changes. How do I save? What I tried doesn't work.
define([
'require',
'dgrid/List',
'dgrid/OnDemandGrid',
'dgrid/Selection',
'dgrid/Keyboard',
'dgrid/editor',
'dgrid/extensions/ColumnHider',
'dojo/_base/declare',
'dojo/_base/array',
'dojo/Stateful',
'dojo/when',
'dstore/RequestMemory',
'put-selector/put',
'dojo/_base/lang',
'dojo/domReady!'
], function (require, List, OnDemandGrid, Selection,
Keyboard, editor, Hider, declare, arrayUtil, Stateful,
when, RequestMemory, put, lang) {
storeJunctions = new RequestMemory({ target: require.toUrl('./dataJunctions.json') });
junctionGrid = new (declare([OnDemandGrid, Selection, editor, Keyboard, Hider]))({
collection: storeJunctions,
selectionMode: 'single',
columns: {
J1: { label: 'J1', editor: 'text' },
J2: { label: 'J2', editor: 'text' },
...
}
}, 'grid');
In the HTML I have a save button:
<button type='button' onclick="junctionGrid.save();return false;">Save Junctions</button>
It couldn't be that simple, so to no surpsie, the data does not post/update to the file on my local dev server.
Related
Using Tablulator (great product!), I am trying to keep the cursor from resetting to the first editable cell in the table after editing a cell. The replaceData function is updating the data element, and while the scroll position does not change, the cursor is reset. I'm not sure how to do this correctly. The documentation, while great, is silent about cursor position beyond the next(), etc methods, which I cannot quite get to work.
In my vue.js table definition component, I have a watch like this:
watch: {
tableData: {
handler: function (newData) {
this.tabulator.replaceData(newData);
},
deep: true,
}
},
and a cellEdited method inside mounted like this:
mounted() {
let self = this;
//todo Possibly validate that cater tips is less than total tips since cater tips is a portion of total tips
self.tabulator = new Tabulator(self.$refs.myTable, {
height: 380, // set height of table (in CSS or here)
placeholder: 'Click "Load Store Tips" to edit data',
data: self.tableData, //link data to table
reactiveData: true, //enable data reactivity
downloadConfig: {columnCalcs: false},
addRowPos:"bottom",
history:true,
layout: "fitDataFill",
initialSort:[
{column:"storeID", dir:"asc"},
],
//Define Table Columns
columns: [
{title: "Store ID", field: "storeID", sorter:"number"},
{title: "Store Tips", field: "inStore_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Cater Tips", field: "cater_tips", align: "right", formatter: "money", editor: "number", bottomCalc: "sum"},
{title: "Client ID", field: "clientID"},
],
////////////////////////////////////////////////////////////////////////////
// When a cell is edited, write the data out to the server to ensure it is
// always in a saved state.
////////////////////////////////////////////////////////////////////////////
cellEdited: function (e, cell) {
//self.colPos = cell.getColumn(); //trying to save the cursor pos, but generating error
//self.rowPos = cell.getRow(); // generating error
self.PostTipsEventMethod();
}
});
Here is what I have tried:
Tried capturing the row and column position, and then setting that after the replaceData table render, and after the cellEdited method
Tried using the next() method to move the cursor to the next cell inside the cellEdited method, before and after the replaceData function.
Can someone guide me a bit further on this? I've searched through the tabulator element in the debugger trying to find the row and column numbers of the cell I'm editing, but so far, no joy. I guess I don't understand the lifecycle of the table rendering well enough.
Thank you!
I have multiple FilteringSlect on my page except first one, rest are disabled. Upon selecting a value in first, 2nd filteringselect gets enabled and so on. I'm able to achieve this. When a user selects value in the first filteringselect and then press tab to go to the next fitleringselect, it gets enabled but user has to click the mouse on 2nd fitleringselect to enter a value. I have a jsfiddle link
`http://jsfiddle.net/qpue91L9/75/`
which demonstrates the problem. What I want is, as soon as user tabs from first filteringselect, next one should get enabled and without an extra click, user should be able to select a new value by typing inside the fitleringselect textbox.
I think I got it working [Working fiddle][1]
[1]: http://jsfiddle.net/qpue91L9/125/
Also as suggested, providing the complete working code
HTML Code
<input id="stateSelect">
<input id="stateSelect1">
<input id="stateSelect2">
JS Code
require([
"dojo/store/Memory", "dojo/on","dijit/form/FilteringSelect", "dojo/domReady!",'dijit/registry',"dijit/focus","dojo/dom"
], function(Memory, on,FilteringSelect,ready,registry,focusUtil,dom){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL", timeStamp:"1211753600"},
{name:"Alaska", id:"AK", timeStamp:"1211753601"},
{name:"American Samoa", id:"AS", timeStamp:"1211753602"},
{name:"Arizona", id:"AZ", timeStamp:"1211753603"},
{name:"Arkansas", id:"AR", timeStamp:"1211753604"},
{name:"Armed Forces Europe", id:"AE", timeStamp:"1211753605"},
{name:"Armed Forces Pacific", id:"AP", timeStamp:"1211753606"},
{name:"Armed Forces the Americas", id:"AA", timeStamp:"1211753607"},
{name:"California", id:"CA", timeStamp:"1211753608"},
{name:"Colorado", id:"CO", timeStamp:"1211753609"},
{name:"Connecticut", id:"CT", timeStamp:"1211753610"},
{name:"Delaware", id:"DE", timeStamp:"1211753611"}
], idProperty: "timeStamp"
});
var filteringSelect = new FilteringSelect({
id: "stateSelect",
store: stateStore,
tabIndex: 1,
searchAttr: "name",
identifier: "timeStamp",
}, "stateSelect").startup();
var filteringSelect1 = new FilteringSelect({
id: "stateSelect1",
name: "state",
tabIndex: 2,
store: stateStore,
searchAttr: "name",
identifier: "timeStamp" ,
disabled:true,
}, "stateSelect1").startup();
var filteringSelect2 = new FilteringSelect({
id: "stateSelect2",
name: "state",
tabIndex: 3,
store: stateStore,
searchAttr: "name",
identifier: "timeStamp",
disabled:true,
}, "stateSelect2").startup();
on(dijit.byId("stateSelect"),"KeyPress",function(evt){
dijit.byId("stateSelect1").set("disabled",false);
});
on(dijit.byId("stateSelect"),"change",function(evt){
dijit.byId("stateSelect1").set("disabled",false);
dijit.byId("stateSelect1").focus();
});
on(dijit.byId("stateSelect1"),"KeyPress",function(evt){
dijit.byId("stateSelect2").set("disabled",false);
});
on(dijit.byId("stateSelect1"),"change",function(evt){
dijit.byId("stateSelect2").set("disabled",false);
dijit.byId("stateSelect2").focus();
});
});
I checked out your example and got it working somewhat....
Update Example
Basically, I added this:
require([ "dijit/focus", "dojo/dom", "dojo/domReady!" ], function(focusUtil, dom){
var domObj = dom.byId("stateSelect1");
focusUtil.focus(domObj);
});
and also added tabIndex property to each select object. The problem is it only works when you actually select an item from the list by clicking on it. If tab is used then it doesn't work. You could probably use this example and trap the tab event to make it work the way you want it too.
I have some styles that I need to apply to all DataTables buttons so that they match the rest of the buttons on my site. I can add that using the className option as below, but I'd like not to have to supply the same thing every time.
Manual example
$('#myTable').DataTable({
buttons: [
{
text: 'I look like a button',
className: 'icanhazdefalt'
}
]
})
I see in the docs that the default value is undefined. I couldn't find anywhere in the docs that you could override the default for this or other options. Is this possible? Something like:
$.fn.DataTable.Buttons.options.extend({
className: 'icanhazdefalt'
})
What I need is to be able to set the default for the plugin itself (rather than for a specific instance). Then all instances I create on the page from then on would have the default I specified. I can include the script that sets the default right after the plugin script (perhaps in a layout file) so that I never have to manually do anything to get all subsequent instances to have the default className (but still be able to override it by explicitly providing it as shown in the 'manual example' above).
Use:
$('#myTable').DataTable( {
buttons: {
buttons: [
{ extend: 'copy', className: 'copyButton' },
{ extend: 'excel', className: 'excelButton' }
]
}
} );
Reference: https://datatables.net/reference/option/buttons.buttons.className
EDIT: There might be a better and simpler way of doing this but, this is what I came up at the moment.
//DataTable
var table= $("#myTable").DataTable( {
dom: 'Bfrtip',
buttons: [
{
text: 'I look like a button'
},
{
text: 'I dont'
}
]
} );
//Add class to all buttons
$(table.buttons()).each(function(){
$($(this)[0]["node"]).addClass("sampleClass");
});
You can also change your button selection by giving a parameter for buttons().
See this link for that.
I'm using the pdf button from jquery datatables which is essentially the pdfmake library. The problem that I'm having is that I would like to add an additional paragraph right above my table when the user clicks the button to export the table. I have tried using the "message" parameter but for the life of me I cannot retrieve additional information right before the pdf will download. I tried doing this.
buttons: [
{
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
message:function() { $("#HeaderDesc").text()}
}
]
But I have been unsuccessful in my attempts. Does anyone have any ideas on how to accomplish this?
There is another easy solution to this.
I accomplished this by using splice property. You can do like this inside customize function.
doc.content.splice(0, 1, {
text: [
{ text: 'I am loving dataTable and PdfMake \n',bold:true,fontSize:15 },
{ text: 'You can control everything.',italics:true,fontSize:12 }
],
margin: [0, 0, 0, 12],
alignment: 'center'
});
This will splice at the first position [0 index] as well as replace 1 value with the above content.
Happy coding!!!!
You cannot. The config literal for the button is read once, and message does not support function type.
However, you can change the message in the not so well documented customize() callback. This is called just before dataTables pass the generated document to pdfmake. If you have defined a message, then there will exists message section(s) in the content nodes, and those nodes have a text attribute holding the actual message :
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = 'this is a late created message'
}
})
}
As mentioned, you must define message before this will work. If you have not defined message, there will be no styles of type message you can manipulate. Your pdfhtml5 settings could look like this :
buttons: [
{
message: '__MESSAGE__',
extend: 'pdfHtml5',
orientation: 'landscape',
pageSize: 'LEGAL',
title: 'Entry',
header:true,
customize: function ( doc ) {
doc.content.forEach(function(content) {
if (content.style == 'message') {
content.text = $("#HeaderDesc").text()
}
})
}
}
]
demo -> https://jsfiddle.net/xx5f5z6x/
Im new to Dojo and im trying to make some ui, but only using the programmatic way.
I would like if someone could show me some example of how to make a form programmarically using Dojo dijit.form.Form. I've been looking for some example but all i can find is the declarative way of it.
A more object oriented solution:
define( [
"dojo/_base/declare",
"dijit/form/Form",
"dijit/form/Textarea",
"dijit/form/Button"
],
function(declare, Form, TextArea, Button) {
return declare( "mypackage.MyForm", Form, {
textarea: new TextArea({}),
submitButton: new Button({
type: "submit",
label: "ready!"
}),
constructor: function(args) {
declare.safeMixin(this, args);
},
onSubmit: function() {
alert(this.textarea.get('value'));
},
postCreate: function() {
this.domNode.appendChild( this.textarea.domNode );
this.domNode.appendChild( this.submitButton.domNode );
}
});
}
);
Just drop a new mypackage.MyForm({}) at any place you might expect a widget.
Its pretty straight forward. You just create all the pieces of the the form, and then append all the pieces to their respective parent. To create the form objects, like any dijit object, you pass the constructor a param object, and a domNode to place it at, like so:
var resetbtn = new dijit.form.Button({
type: 'reset',
label: 'Reset'
}, dojo.doc.createElement('button'));
The full example is here. To find out what properties can be added to the params object, see the API Docs. Any of the properties can be added to the param list.