I am displaying some data in a slickgrid using ajax call which looks similar like this.
india 564
usa 45454
japan 5454
There is no column called a 'Number' which have the row number values,in the data table I am fetching. How can I set a column called 'Number' and set values? What I want is something similar like this.
1 india 564
2 usa 45454
3 japan 5454
To display the row number, you don't need a specific field/property for it. You can define a column and specify the formatter column option to return a value based on the underlying indexing of the grid which the function receives as it's first argument. Since the grid is 0 index based, adjust accordingly.
var grid;
var dataView = new Slick.Data.DataView();
var data = [{country: "usa", number: "123"},
{country: "japan", number: "456"},
{country: "india", number: "789"}];
var options = {
editable: false,
enableCellNavigation: true
};
var columns = [{name: "Row No", formatter: function(row){return row+1}},
{field: "country", name: "Country"},
{field: "number", name: "Data"}];
dataView.setItems(data, 'country')
grid = new Slick.Grid("#myGrid", dataView, columns, options);
<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<link rel="stylesheet" href="http://mleibman.github.io/SlickGrid/examples/examples.css" type="text/css"/>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.dataview.js"></script>
<div id="myGrid" style="width:300px;height:150px;"></div>
Related
I have data set of array:
[
{0:0, 1:"test-1", 2:1, 3:"data-1"},
{0:1, 1:"test-2", 2:2, 3:"data-2"},
{0:2, 1:"test-3", 2:3, 3:"data-3"},
];
How can I display data in a jQuery Datatable? I am not able to populate with this type of dataset.
Thank you for your time.
Datatable provide many ways how to generate table from dynamic source of data.
Example your data is from javascript, please refer documentation and example from this link:
https://datatables.net/examples/data_sources/js_array.html
And from your sample basic data, we can generate some basic table below:
var dataSet = [
{0:0, 1:"test-1", 2:1, 3:"data-1"},
{0:1, 1:"test-2", 2:2, 3:"data-2"},
{0:2, 1:"test-3", 2:3, 3:"data-3"},
];
$(document).ready(function() {
$('#example').DataTable( {
data: dataSet,
columns: [
{ title: "Index" },
{ title: "Test Name" },
{ title: "Sample No" },
{ title: "Data" },
]
} );
} );
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
<table id="example" class="display" width="100%"></table>
What I'd like to do is add a radio button next to the Search Bar on my datatable to allow searching by just one column, Store Number.
I was referred to drawCallback but I don't believe this does what I expect it to do. All the answers I find seem to be appending elements to rows/cols in the datatable, but not the header itself.
The selector for this header is #store-table_wrapper.
$('#store-table').DataTable({
"columnDefs": [{
"targets": [7, 8],
"visible": false,
"drawCallback": function() {
$('<input type="radio" name="store-number-filter-selector" />').appendTo('#store-table_wrapper');
}
}]
});
I believe, getting your radio button displayed you're half-way through, the really challenging part is to disable default search bar, since you're unlikely to override its default behavior (to search through the entire table).
However, you may use your own, custom searchbar, like on the following DEMO:
//define source data
const srcData = [
{id: 1, name: 'apple', category: 'fruit'},
{id: 2, name: 'raspberry', category: 'berry'},
{id: 3, name: 'carrot', category: 'vegie'}
];
//define dataTable object
const dataTable = $('#mytable').DataTable({
sDom: 't',
data: srcData,
columns: [
{data: 'id', title: 'id'},
{data: 'name', title: 'name'},
{data: 'category', title: 'category'}
],
//modify header nodes, by appending radios
initComplete: function() {
const table = this.api();
[1,2].forEach(column => table.column(column).header().innerHTML += `<input type="radio" name="searchflag" value="${column}" class="searchflag"></input>`);
}
});
//prevent sorting change upon radio click
$('input.searchflag').on('click', function(event) {
//clear search upon choosing the other radio
$('#searchfield').val('');
dataTable.search('').columns().search('').draw();
event.stopPropagation();
});
//searchbar keyup callback
$('#searchfield').on('keyup', function() {
//grab checked radio button value or search the entire table by default
let targetColumn = null;
targetColumn = $('input.searchflag:checked').val();
if(!targetColumn){
dataTable.search($(this).val()).draw();
}
else {
dataTable.column(targetColumn).search($(this).val()).draw();
}
})
input.searchflag {
float: left;
}
<!doctype html>
<html>
<head>
<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="application/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="demo.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
<input id="searchfield"></input>
<table id="mytable"></table>
</body>
</html>
I'm trying to copy the text contents of a cell - I don't need to be able to paste into Excel or anything, I just want the plaintext content. Highlighting text, right clicking, and selecting copy works as expected (so not the same problem as in SlickGrid and Text Selection since I can select text) but highlighting and pressing ctrl+c does not (nothing gets copied to the clipboard).
I tried commenting out the keypress-handling code in slick.grid.js ($canvas.on("keydown", handleKeyDown) and $focusSink.add($focusSink2).on("keydown"), handleKeyDown)) but no change.
Chrome 61 on Windows 10, if it matters.
Reproduce with the Basic use with configuration example, with enableTextSelectionOnCells set to true:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="shortcut icon" type="image/ico" href="favicon.ico" />
<title>SlickGrid example 1: Basic grid</title>
<link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
<link rel="stylesheet" href="examples.css" type="text/css"/>
</head>
<body>
<div id="myGrid" style="width:600px;height:500px;"></div>
<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>
<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>
<script>
var grid;
var columns = [
{id: "title", name: "Title", field: "title"},
{id: "duration", name: "Duration", field: "duration"},
{id: "%", name: "% Complete", field: "percentComplete"},
{id: "start", name: "Start", field: "start"},
{id: "finish", name: "Finish", field: "finish"},
{id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
];
var options = {
enableCellNavigation: true,
enableTextSelectionOnCells: true,
enableColumnReorder: false
};
$(function () {
var data = [];
for (var i = 0; i < 500; i++) {
data[i] = {
title: "Task " + i,
duration: "5 days",
percentComplete: Math.round(Math.random() * 100),
start: "01/01/2009",
finish: "01/05/2009",
effortDriven: (i % 5 == 0)
};
}
grid = new Slick.Grid("#myGrid", data, columns, options);
})
</script>
</body>
</html>
I was able to get Copy to Clipboard to work using this example:
https://6pac.github.io/SlickGrid/examples/example-excel-compatible-spreadsheet.html
I don't care for paste or much of the other Excel functionality, so I set readOnlyMode on like this:
grid.registerPlugin(new Slick.CellExternalCopyManager({
readOnlyMode : true,
includeHeaderWhenCopying : false,
}));
I have Combobox dijit/form/ComboBox and I want that when a user starts typing the combo box shows result that contains letter.
For Example combox have this value
Nebraska
South Dakota
Delaware
when users type "D"
the result should be
South Dakota
Delaware
Simple just user the queryExpr: "*${0}*" to search if the combo select item contains the search keyword .
bellow a complete sample using this last :
require([
"dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"
], function(Memory, ComboBox){
var stateStore = new Memory({
data: [
{name:"", id:""},
{name:"Nebraska", id:"NE"},
{name:"South Dakota", id:"SD"},
{name:"Delaware", id:"DE"},
{name:"Test1", id:"T1"},
{name:"Test2", id:"T2"},
{name:"Test3", id:"T3"}
]
});
var ComboBox = new ComboBox({
id: "filteringCombo",
store: stateStore,
queryExpr: "*${0}*",
searchAttr: "name"
}, "filterCombo").startup();
});
<script type="text/javascript">
dojoConfig = {isDebug: true, async: true, parseOnLoad: true}
</script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dojo/dojo.js"></script>
<link href="//ajax.googleapis.com/ajax/libs/dojo/1.8.3/dijit/themes/claro/claro.css" rel="stylesheet"/>
<body class="claro">
<div id="filterCombo"></div>
</body>
I am trying to get the most basic example of backgrid.js to work. In other words, an example where i can drop the source folder into my xampp/htdocs folder and run without having to do anything else.
I have tried many ways to get the code to run but i cannot get anything to show up.
Here is the html page i made to try to see an example working.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css"/>
<link rel="stylesheet" href="lib/backgrid.css"/>
<script src="jquery-1.10.2.min.js"></script>
<script src="underscore-min.js"></script>
<script src="backbone-min.js"></script>
<script src="lib/backgrid.js"></script>
</head>
<body>
<div id="grid">
<script type="text/javascript">
var Territory = Backbone.Model.extend({});
var Territories = Backbone.Collection.extend({
model: Territory,
url: "territories.json"
});
var territories = new Territories();
var columns = [{
name: "id", // The key of the model attribute
label: "ID", // The name to display in the header
editable: false, // By default every cell in a column is editable, but *ID* shouldn't be
// Defines a cell type, and ID is displayed as an integer without the ',' separating 1000s.
cell: Backgrid.IntegerCell.extend({
orderSeparator: ''
})
}, {
name: "name",
label: "Name",
// The cell type can be a reference of a Backgrid.Cell subclass, any Backgrid.Cell subclass instances like *id* above, or a string
cell: "string" // This is converted to "StringCell" and a corresponding class in the Backgrid package namespace is looked up
}, {
name: "pop",
label: "Population",
cell: "integer" // An integer cell is a number cell that displays humanized integers
}, {
name: "percentage",
label: "% of World Population",
cell: "number" // A cell type for floating point value, defaults to have a precision 2 decimal numbers
}, {
name: "date",
label: "Date",
cell: "date"
}, {
name: "url",
label: "URL",
cell: "uri" // Renders the value in an HTML anchor element
}];
// Initialize a new Grid instance
var grid = new Backgrid.Grid({
columns: columns,
collection: territories
});
// Render the grid and attach the root to your HTML document
$("#example-1-result").append(grid.render().el);
// Fetch some countries from the url
territories.fetch({reset: true});
</script>
</div>
</body>
</html>
Thanks for your time!
You seem to be adding the grid to non-existing element:
$("#example-1-result").append(grid.render().el);
Use $("#grid") instead and you should see the result.