Develop Reference

How can you get Tabulator to use Select2 header filter?

Following the example here, we've been trying for over a week to get Tabulator working with a Select2 header filter. There is a JS Fiddle here with all the pieces. It seems like the Tabulator filter (which are really just editors) onRendered() function is not even getting called because the console log we have inside it never gets logged.
The select element itself shows up in the header filter, but never gets the Select2 object applied (probably because the onRendered seems to not even be called). If we put the Select2 object outside the onRendered function, it get applied, but then the filter does not get applied after selection is made. There are no console or other errors and we've followed the Tabulator 'example' to the letter, so we are not sure what to try next.
Does anyone know how to get a basic Select2 header filter functioning with Tabulator?
var tableData = [{
id: "1",
topic: "1.1"
},
{
id: "2",
topic: "2.2"
},
];
var select2Editor = function(cell, onRendered, success, cancel, editorParams) {
var editor = document.createElement("select");
var selData = [{
id: '1.1',
text: "One"
}, {
id: "2.2",
text: "Two"
}, {
id: "3.3",
text: "Three"
}, ];
onRendered(function() {
// TODO: map tracks to id and text
console.log('rendered');
$(editor).select2({
data: selData,
minimumResultsForSearch: Infinity,
width: '100%',
minimumInputLength: 0,
//allowClear: true,
});
$(editor).on('change', function(e) {
success($(editor).val());
});
$(editor).on('blur', function(e) {
cancel();
});
});
return editor
};
var columns = [{
title: "ID",
field: "id"
}, {
title: "Topic",
field: "topic",
headerFilter: select2Editor,
}, ];
var table = new Tabulator("#table", {
placeholder: "No Data Found.",
layout: "fitData",
data: tableData,
columns: columns,
});

I'm new to both Tabulator and select2 and I think this is possibly a bad way to do it but it seems like it miiight work.
If you want to use select2 with text input elements, it looks like you need to use the full package.
https://jsfiddle.net/dku41pjy/
var tableData = [{
id: "1",
topic: "1.1"
},
{
id: "2",
topic: "2.2"
},
];
var columns = [{
title: "ID",
field: "id"
}, {
title: "Topic",
field: "topic",
headerFilter: 'select2Editor'
}, ];
var awaiting_render = [];
function do_render({ editor, cell, success, cancel, editorParams }) {
console.log('possibly dodgy onrender');
var selData = [{
id: '',
text: "-- All Topics --"
}, {
id: '1.1',
text: "One"
}, {
id: "2.2",
text: "Two"
}, {
id: "3.3",
text: "Three"
}, ];
$(editor).select2({
data: selData,
//allowClear: true,
});
$(editor).on('change', function(e) {
console.log('chaaaange')
success($(editor).val());
});
$(editor).on('blur', function(e) {
cancel();
});
}
function render_awaiting() {
var to_render = awaiting_render.shift();
do_render(to_render);
if(awaiting_render.length > 0)
render_awaiting();
}
Tabulator.prototype.extendModule("edit", "editors", {
select2Editor:function(cell, onRendered, success, cancel, editorParams) {
console.log(cell);
var editor = document.createElement("input");
editor.type = 'text';
awaiting_render.push({ editor, cell, success, cancel, editorParams });
return editor
},
});
var table = new Tabulator("#table", {
placeholder: "No Data Found.",
layout: "fitData",
data: tableData,
columns: columns,
tableBuilt:function(){
render_awaiting();
},
});
Edit: my suspicion is that onRendered only gets fired when these edit elements are used in cells to sope with the transition between showing just data and showing an editable field.

Why is my Bootstrap-Editable with Bootstrap-tables not working?

I am creating a table which needs editable fields..
This jquery element is appended to the page:
var container = $('#up-modal .modal-body');
var table = $('<table></table>');
table.attr('id','up-table');
table.attr('style','width:auto;');
table.attr('data-toggle', 'table');
table.attr('data-search', 'true');
table.attr('data-maintain-selected', 'true');
table.attr('data-pagination','true');
table.attr('data-page-size',3);
container.append(table);
following this, the bootstrap table function is called
$("#up-table").bootstrapTable({
columns:[
{
field: 'id',
title: 'ID',
align: 'center'
},
{
field: 'Permission',
title: 'Permission',
searchable: true
},
{
field: 'Extended',
name: 'Extended',
title: 'Properties',
editable:{
type: 'text',
pk: 1,
title: 'Modify Properties',
name: 'Extended',
validate: function(value){
value = $.trim(value);
try{
JSON.parse(value);
}catch(e){
return 'Invalid json provided for properties';
}
}
}
},
{
field: 'Access',
title: 'Access',
checkbox:true
}
],
data: tableData
});
The table is drawn correctly, but the fields are not editable. I can call $('.editable').editable(options) after the table is built and that works fine, but that stops working when pagination is involved.
I am using this example as a reference https://github.com/wenzhixin/bootstrap-table-examples/blob/master/welcome.html
oh, and I should mention the proper scripts and css files are locally hosted and being included correctly in my html.
Library quick links:
https://vitalets.github.io/bootstrap-editable/
http://bootstrap-table.wenzhixin.net.cn/

Woops. As it turns out, there are compatibility issues with x-editable, bootstrap 3 and bootstrap-tables.
To fix this all I had to do was include the bootstrap-editable-tables extension
https://github.com/wenzhixin/bootstrap-table/tree/master/src/extensions/editable

Kendo UI Grid - Binding to navigation properties

I am using the Kendo UI grid and am display a role of models. Each model has a navigation property, and I am trying to display a field that exists in this navigation property.
//schema for my kendo data source
schema: {
data: function (data) {
return data || [];
}
}
......................................................
$("#FAAFreqGrid").kendoGrid({
dataSource: FAADS,
columns: [
{ field: "Id", title: "Freq ID", format: "{0:c}", width: "120px" },
{ field: "Frequency", title: "Frequency Test" format: "{0:c}", width: "120px" },
{ field: "FREQ_POOL", title: "FAATEST", format: "{0:c}", width: "120px" },
{ command: ["edit", "destroy"], title: " ", width: "250px" }
],
toolbar: ["create"],
editable: "inline",
pageable: true
});
If I go to my Web API Url, I get a json response of:
[{"$id":"1","Frequency":"164.1375","FREQ_POOL":{"$id":"2","IsAM":true,......etc}
FREQ_POOL is my navigation property, and it has the data I want. Frequency exists and displays in my grid properly. But my FREQ_POOL field says [object Object], and if I try to say "FREQ_POOL.IsAM", it says IsAM is not defined. I cannot get it to bind to any property I can bind to any other non-navigation field. How do I make this work? The data exists in the JSON object that is returned, but the binding just isn't working correctly. Thanks.

You could set a template for the column in question, like this:
$("#grid").kendoGrid({
columns: [ {
field: "name",
template: "<strong>#: name.first#, #: name.last# </strong>"
}],
dataSource: [ { name: { first: 'Jane', last: 'Doe' } }, { name: { first: "John", last: 'Doe' } } ]
});
the template can then be used to show object in the dataset
more info, you could find here
For the editing, you could then also define the cell editor, with an extra template or function, more info about that, you could find here.

Can only edit last row of Dojo DataGrid

I am using a dojo datagrid that is displaying data either coordinate data sent from a server, or coordinate data from pins which are added to an ESRI map.
However, when I click on a cell to edit the text box displays and you can change the value yet the change does not save unless you are editing the final row. If you edit a text box in row 2 and then click the box in the same column for the final row, the row 2 value is put in the final row.
If you exit any other way row 2 data reverts back to its original value. The final row behaves exactly how I want it to, you can edit all the values and they are saved (unless page is refreshed). If another row is added, and you try to edit it the row will throw a
"Uncaught TypeError: Cannot read property 'get' of undefined " error on ObjectStore.js:8.
I started with the code from the hellodgrid example
http://dojotoolkit.org/documentation/tutorials/1.9/working_grid/demo/ using the "Editing data with the Grid" and edited columns in any row.
I haven't seen a problem that's anything like mine and I am really stumped, so any help is appreciated.
Data in the following code is an array of objects I created.
function drawTable(data){
require([
"dojox/grid/DataGrid",
"dojox/grid/cells",
"dojox/grid/cells/dijit",
"dojo/store/Memory",
"dojo/data/ObjectStore",
"dojo/date/locale",
"dojo/currency",
"dijit/form/DateTextBox",
"dojox/grid/_CheckBoxSelector",
"dojo/domReady!"
], function(DataGrid, cells, cellsDijit, Memory, ObjectStore, locale, currency,
DateTextBox, _CheckBoxSelector){
function formatDate(inDatum){
return locale.format(new Date(inDatum), this.constraint);
}
gridLayout = [
{
type: "dojox.grid._CheckBoxSelector",
defaultCell: { width: 8, editable: true, type: cells._Widget, styles: 'text-align: right;' }
},
//cells:
[
{ name: 'Number', field: 'order', editable: false /* Can't edit ID's of dojo/data items */ },
{ name: 'ID', field: 'uniqueID', width: 10, editable: false /* Can't edit ID's of dojo/data items */ },
{ name: 'Station ID', field: 'stationID', width: 15, editable: true },
/* No description for each station... at least not yet
{ name: 'Description', styles: 'text-align: center;', field: 'description', width: 10,
type: cells.ComboBox,
options: ["normal","note","important"]},*/
{ name: 'Road', field: 'road', width: 10, editable: true, styles: 'text-align: center;',
type: cells.CheckBox},
{ name: 'Route', field: 'route', width: 10, editable: true, styles: 'text-align: center;',
type: cells.CheckBox},
{ name: 'Count Type', width: 13, editable: true, field: 'countType',
styles: 'text-align: center;',
type: cells.Select,
options: ["new", "read", "replied"] },
{ name: 'Count Duration', field: 'countDuration', styles: '', width: 15, editable: true},
/*
May want to use this later
{ name: 'Date', field: 'col8', width: 10, editable: true,
widgetClass: DateTextBox,
formatter: formatDate,
constraint: {formatLength: 'long', selector: "date"}}, */
]
//{
];
objectStore = new Memory({data:data});
stationGridStore = new ObjectStore({objectStore: objectStore});
// create the grid.
grid = new DataGrid({
store: stationGridStore,
structure: gridLayout,
// rowSelector: '20px',
"class": "grid"
}, "grid");
grid.startup();
// grid.canSort=function(){return false;};
});
}

You haven't included your actual data in the question, but based on one of your columns, I am guessing your data items store a unique identifier in a property called uniqueID. However, dojo/store/Memory by default assumes that unique IDs are in the id property. That mismatch may very well be what's causing your issue.
You can inform dojo/store/Memory that your unique identifiers are under another property by setting idProperty on the instance:
objectStore = new Memory({ data: data, idProperty: 'uniqueID' });

Selecting rows from one grid & passing them to another grid

I'm trying to allow rows to be selected via checkboxes and for those selected rows and their IDs to be sent to another grid when a 'Submit' button is clicked. In other words, acting as some sort of filter.
I've contacted Telerik's support team and was advised to take the following steps in order to get it working:
Get the selected rows with the Select() method of the Grid
Loop through them & get the underlying item with the dataItem method
Save them into an array
Destroy the grid
Initialize a new grid by setting the data data
Here's a sample on JSBin that shows what I have in mind.
I'm not sure where to start honestly. I would really appreciate it if someone could point me in the right direction to any resources or guides that would be helpful. Thanks!

Assuming you are using RadGrid, make sure you have client side selection turned on, you would see something like this:
<ClientSettings>
<Selecting AllowRowSelect="True" />
<ClientEvents OnRowSelected="RowSelected" />
</ClientSettings>
On the input button, make sure to call your JS method as follows :
<input onclick="GetSelected();" .... >
Your JS code might look something like this :
function GetSelected() {
var grid = $find("<%=Your Grid's ClientID Here%>");
var MasterTable = grid.get_masterTableView();
var selectedRows = MasterTable.get_selectedItems(); // 1. Get the selected rows. The selected item can be accessed by calling the get_selectedItems() method of the GridTableView client-side object.
for (var i = 0; i < selectedRows.length; i++) {
var row = selectedRows[i];
// This is where you would have to insert it in a collection so that you can bind it to another grid... You will need to call .Rebind() once you assign the new datasource to the other grid.
}
Hopefully this will give you some idea.. I can see if I can find any examples on inserting rows into other grid if you get stuck.

check this code
html
<div id="grid1"></div>
<input type="button" value="Submit" onclick="Move()" />
<div id="grid2" ></div>
script
<script>
$(document).ready(function() {
var data1 = [
{ id: 1, rating: 3, year: 1997, title: "Rock" }
, { id: 2, rating: 5, year: 1999, title: "X-Man" }
, { id: 3, rating: 4, year: 2011, title: "World War Z" }
];
var grid1=$("#grid1").kendoGrid({
sortable: true
, silectable: true
, selectable: "multiple row"
, filterable: true
, pageable: true
, columns: [
{ template: "<input type='checkbox' class='checkbox' />", width: "40px" }
,{ field: "id", title: "Id", filterable: false }
, { field: "rating", title: "Rating", filterable: false }
, { field: "year", title: "Year", filterable: true, type: "string"}
, { field: "title", title: "Title" }
]
, dataSource: { page: 1,
pageSize: 5,
data: data1
}
}).data("kendoGrid");
grid1.table.on("click", ".checkbox", selectRow);
var data2 = [
{ id: 101, rating: 6, year: 2012, title: "The Impossible" }
, { id: 102, rating: 8, year: 2013, title: "Escape" }
, { id: 103, rating: 7, year: 2013, title: "Gravity" }
];
$("#grid2").kendoGrid({
sortable: true
, silectable: true
, selectable: "multiple row"
, filterable: true
, pageable: true
, columns: [
{ field: "id", title: "Id", filterable: false }
, { field: "rating", title: "Rating", filterable: false }
, { field: "year", title: "Year", filterable: true, type: "string"}
, { field: "title", title: "Title" }
]
, dataSource: { page: 1,
pageSize: 5,
data: data2
}
});
});
function Move() {
var grid1 = $("#grid1").data("kendoGrid");
var rows = grid1.select();
rows.each(function(index, row) {
var selectedRow = grid1.dataItem(row);
//-move to grid2
var grid2 = $("#grid2").data("kendoGrid");
var ins = { id: selectedRow.id, rating: selectedRow.rating, year: selectedRow.year, title: selectedRow.title }; //id=1,rating=9.2,year=1995,title="The Godfather"
grid2.dataSource.insert(ins);
});
rows.each(function() {
grid1.removeRow($(this).closest('tr'));
});
}
function selectRow() {
var checked = this.checked,
row = $(this).closest("tr");
if (checked) {
//-select the row
row.addClass("k-state-selected");
} else {
//-remove selection
row.removeClass("k-state-selected");
}
}
</script>
this will help you :)