Firstly, love the product!
Secondly, is it possible to change the expand and collapse icons for tree module within Tabulator? It would really help with the consistency of my project if I were to instead use the block arrows (Alt 16 & Alt 30).
I've already manipulated the CSS to the remove the border, etc.
The data and columns are substituted within the software package I am compiling this within.
var table = new Tabulator("#example-table", {
height:400,
data: [ **TableData** ]
dataTree:true,
dataTreeStartExpanded:true,
dataTreeBranchElement: false,
dataTreeChildIndent: 9,
dataTreeCollapseElement: !1,
dataTreeStartExpanded: !1,
layout:"fitColumns",
columns:[ **ColumnData** ],
rowClick:function(e, row){ //trigger an alert message when the row is clicked
alert("ID " + row.getData().id + " Selected");
},
});
I am pairing this with
<link href="dist/css/tabulator.min.css" rel="stylesheet">
<script type="text/javascript" src="dist/js/tabulator.min.js"></script>
You can use the dataTreeExpandElement and dataTreeCollapseElement setup options for this in your table constructor
var table = new Tabulator("#example-table", {
dataTree:true,
dataTreeCollapseElement:"<span>►</span>",
dataTreeExpandElement:"<span>▼</span>",
});
Full details on how to use this feature can be found in the Data Tree Documentation
Checking the source code for Tabulator, dataTreeCollapseElement and dataTreeExpandElement are either looking for a string or DOM element. Try specifying an empty element that won't show:
dataTreeCollapseElement: '<i/>',
dataTreeExpandElement: '<i/>',
Related
Would anyone happen to know how to set readonly in a cell/column of gravity forms list field? I need one column for input and the others should not be edited by the user.
Gravity Perks has confirmed the list column is not supported by their plugin.
Add the following to an HTML field on your form:
**
You will need to know the list field id and the column you want to make read-only. If your list field is 32 for instance and you want the second column to be "read-only", you would replace the second line below with .gfield_list_32_cell2
<script>
jQuery(document).ready(function(){
jQuery( '.gfield_list_1_cell1' ).find( 'input, select, textarea' ).each(
function() {
if ( jQuery( this ).val() != '' ) {
jQuery( this ).prop( 'readonly', true );
}
});
});
</script>
I am currently working on building a new table with the functionality of adding and deleting rows. I see in the documentation of 4.0 how to add these buttons. I am able to make the buttons show up, however the functionality behind them are not there.
Any help or being pointed in the right direction with this issue would be wonderful. Thank you in advance.
<head>
<link href="dist/css/tabulator.css" rel="stylesheet">
<link rel="stylesheet" href="landing_css.css">
<meta charset="ISO-8859-1">
</head>
<body>
<div id="example-table"></div>
<div id="tabulator-controls">
<button name="add-row">
+ Add Row
</button>
</div>
<script type="text/javascript" src="dist/js/tabulator.js"></script>
<script type="text/javascript">
var table = new Tabulator("#example-table", {
height:205, // set height of table (in CSS or here), this enables the Virtual DOM and improves render speed dramatically (can be any valid css height value)
//data:tabledata, //assign data to table
layout:"fitColumns", //fit columns to width of table (optional)
responsiveLayout:"hide", //hide columns that dont fit on the table
tooltips:true, //show tool tips on cells
addRowPos:"bottom", //when adding a new row, add it to the top of the table
history:true, //allow undo and redo actions on the table
pagination:"local", //paginate the data
paginationSize:10, //allow 10 rows per page of data
movableColumns:true, //allow column order to be changed
resizableRows:true, //allow row order to be changed
columns:[ //Define Table Columns
{title:"Admin (Yes/No)", field:"admin", width:150, editor:"select", editorParams:{"Yes":"Yes", "No":"No"}},
{title:"First Name", field:"firstname", width:150, editor:"input"},
{title:"Last Name", field:"lastname", width:150, editor:"input"},
{title:"Job Title", field:"job", width:150, editor:"input"},
{title:"Email Address", field:"email", width:150, editor:"input"},
});
$("#add-row").click(function(){
table.addRow({});
});
</script>
I
The issue is you are using the selector #add-row which means it is looking for an element with an id attribute of "add-row". Your button element has no id attribute but a name attribute with that value in which case you need to use the following selector:
$('[name="add-row"]').click(function(){
table.addRow({});
});
I'm working with typed.js to get some words typed. I would like the first word to be showing when the page loads and start the loop from there. In order to get this result I've just placed "nice" in between the span tags, did this the trick.
But... When looking to the following codepen, you can see that the first loop is correct. When the second loop starts, the first word (nice) is not being typed but just appears and disappears quickly. I could really use some help to fix this. Any thoughts?
var typewriter = $('.typewriter');
if(typewriter.length) {
function initTypewriter() {
var typed = new Typed(".typewriter", {
strings: $(".typewriter").attr("data-typewriter").split("|").map(function(e) {
return e
}),
typeSpeed: 80,
backSpeed: 75,
startDelay: 1000,
backDelay: 2000,
loop: !0,
loopcount: false,
showCursor: false,
callback: function(e){ } // call function after typing is done
});
};
initTypewriter();
};
<h2>A <span title="nice, clean, good" class="typewriter" data-typewriter="nice|clean|good">nice</span> example</h2>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/typed.js/2.0.6/typed.min.js"></script>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
CodePen Link
Kind regards
I realise this question is over 2 years old now, but I came across this issue today and couldn't find a solution either so put together a workaround.
Essentially, create 2 instances of Typed JS.
The first removes the existing text and uses the onComplete method to remove itself, clear the text content from the DOM and then setup the second instance to do the actual loop.
My example has no dependencies outside of Typed JS, but you could adapt to jQuery selectors, etc, pretty easily.
Demo here: https://codepen.io/jneale/pen/pogyzXK
HTML
<h1>Hello <span class="typed-replaced">world</span></h1>
Javascript
function setupTypedReplace() {
// the text node to type in
var typed_class = 'typed-replaced';
// the original text content to replace, but also use
var replace_text = 'world';
var options = {
strings: ['there', 'buddy', replace_text], // existing text goes at the end
typeSpeed: 80,
backSpeed: 60,
backDelay: 1000,
loop: true,
smartBackspace: false,
cursorChar: '_',
attr: null
};
// clear out the existing text gracefully then setup the loop
new Typed('.' + typed_class, {
strings: [replace_text, ''],
backSpeed: options.backSpeed,
backDelay: options.backDelay,
cursorChar: options.cursorChar,
attr: options.attr,
startDelay: 700,
onComplete: function (t) {
// existing text has now been removed so let's actually clear everything out
// and setup the proper Typed loop we want. If we don't do this, the original
// text content breaks the flow of the loop.
t.destroy();
document.getElementsByClassName(typed_class)[0].textContent = '';
new Typed('.' + typed_class, options);
}
});
}
setupTypedReplace();
The documentation of selectize already explains how to use create: function (input, callback) {....} to add a new item to the database.
In my case, the base model of a selectbox not only contains the option name but also other data.
P.e.: I have a selectbox with countries.
The options are filled from a model "Countries" which contains "country_name", "top_level", "currency". The selectbox only shows "country_name".
If a user wants to add a new country, I want to open a bootstrap modal, let the user add the new country data and after saving I want to refresh the selectbox using refreshOptions ().
I tried to change in selectize.js in line 741 from
'option_create': function(data, escape) {
return '<div class="create">Add <strong>' + escape(data.input) + </strong>…</div>';
to
'option_create': function(data, escape) {
return '<a data-toggle="modal" data-keyboard="false" data-backdrop="static" data-target="#modal" href="... some link ...">New country</a>';
I can see the link after writing a not existing country in the seletbox but when I click on it nothing happens.
How can I fix this? I am already to close to give up :-)
++++++++++++++++++++++++++++++++++
Javascript for removing option:
<script type="text/javascript">
$(".chosen-search-94-departID").selectize({
create: true,
sortField: {field: 'text'},
onOptionAdd: function (value, $item) {
var link='... link ...' + value;
load_modal_content (link, '... csrf ...');
$('#modal').modal('show');
$item.selectize.removeOption(value);
},
});
Might be cleaner / simpler to use onItemAdd (see Usage page) to define a behavior when a new item is added. No need to change selectize.js for that, I think.
I am using jqgrid.
I really need help with this, and have no clue how to do it, but i am sure its possible... can any one give me even a partial answer? were to start from?
I now have a requirement saying that for searching and filtering the grid I dont want the regular model form pop op thing opening, instead the filter should be open when entering the page but not as a pop up form , but should be on the top of the page but still have all the functions to it.
Needs to look like this:
And again having the select tag filled with the correct information (like they do in the popup form) and when clicking on "Save" it should send the request to the server, like regular.
Is this possible?
*******EDIT*******
The only thing i basically need is to have the filter with out the dialog part of it.
The solution of the problem for the old searching dialog you can find here. I modified the demo to the current implementation of the searching dialog in the jqGrid.
You can see the results on the demo:
The corresponding code is below:
var $grid = $('#list');
// create the grid
$grid.jqGrid({
// jqGrid opetions
});
// set searching deafauls
$.extend($.jgrid.search, {multipleSearch: true, multipleGroup: true, overlay: 0});
// during creating nevigator bar (optional) one don't need include searching button
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false, search: false});
// create the searching dialog
$grid.jqGrid('searchGrid');
var gridSelector = $.jgrid.jqID($grid[0].id), // 'list'
$searchDialog = $("#searchmodfbox_" + gridSelector),
$gbox = $("#gbox_" + gridSelector);
// hide 'close' button of the searchring dialog
$searchDialog.find("a.ui-jqdialog-titlebar-close").hide();
// place the searching dialog above the grid
$searchDialog.insertBefore($gbox);
$searchDialog.css({position: "relative", zIndex: "auto", float: "left"})
$gbox.css({clear:"left"});
Here's the way I implemented it, using Oleg's excellent help.
I wanted my users to be able to immediately type in a search criteria (in this case, a user's name) and for the jqGrid to show the results. No messing around with the popup Search dialog.
Here's my end result:
To do this, I needed this HTML:
Employee name:
<input type="text" name="employeeName" id="employeeName" style="width:250px" />
<!-- This will be my jqGrid control and pager -->
<table id="tblEmployees"></table>
<div id="pager"></div>
and this JavaScript:
$("#employeeName").on('change keyup paste', function () {
SearchByEmployeeName();
});
function SearchByEmployeeName()
{
// Fetch the text from our <input> control
var searchString = $("#employeeName").val();
// Prepare to pass a new search filter to our jqGrid
var f = { groupOp: "AND", rules: [] };
// Remember to change the following line to reflect the jqGrid column you want to search for your string in
// In this example, I'm searching through the UserName column.
f.rules.push({ field: "UserName", op: "cn", data: searchString });
var grid = $('#tblEmployees');
grid[0].p.search = f.rules.length > 0;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1 }]);
}
Again, my thanks to Oleg for showing how to use these search filters.
It really makes jqGrid much more user-friendly.