Hello everyone,
I am trying the Handsontable pro version, and i have some questions that i didn’t found answers:
thanks a lot
Best regards
Oumaïma
usually, we recommend performing pagination on the server-side, however, yes, there is a front-end version as well. You can test it via this demo http://jsfiddle.net/handsoncode/g912eb3o/. I keep it in my Prototype list of demos so please check it carefully before publishing on production.
When it comes to dropdown menu customization you can use predefined filters by using
dropdownMenu: true,
filters: true,
or define a custom menu like this one http://jsfiddle.net/handsoncode/5on7vjft/
thanks for your answer.
For filters i need input filter and dropdown filter in the same table, some columns with input and others dropdowns and others without any.
Do you think is it possible?
var hot = new Handsontable(container, {
data: JSON.parse(tranchesJSON),
rowHeaders: true,
colHeaders: [
'<s:text name="myForm.pays"/>', /*0*/
'<s:text name="myForm.ville"/>', /*1*/
...
'<s:text name="myForm.coeff"/>'/*27*/
],
hiddenColumns: {
columns: [18, 19, 20, 21, 22, 23, 24, 25, 26, 27]
},
columns: [{
data: 'pays',
renderer: dropDownPaysRenderer,
className: 'liste-pays',
},...
{
data: 'coeff'
}],
afterInit: function(){
console.log("Handsontable initialized!");
var timeEnd = Date.now();
var temps = timeEnd - timeDebut;
console.log("Temps de chargement = " + temps);
},
fixedColumnsLeft: 3,
dropdownMenu: true,
filters: true
});
function dropDownPaysRenderer(instance, td, row, col, prop, value, cellProperties) {
td.innerHTML = selectOption(listeDeroulantePays, value);
return td;
}thanks you for your help
Could you send me a draft of the requirements? I’ll check if it work bugless.
hello and thanks for your help, i join to a zip witch contains a part of my project
I also noticed that when i scroll on the table, some weird effects, as if the table was duplicated or parts of it disappeared.
Thanks you !
Oumaïma Monnier
here the code
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<html>
<head>
<script type="text/javascript" src="<s:url value='./handsontable-pro/handsontable.full.min.js'/>"></script>
<link rel="stylesheet" type="text/css" media="screen"href="<s:url value='./handsontable-pro/handsontable.full.min.css'/>" />
</head>
</html>
<script>
function getDropDownList(mapToRender, title) {
var $select = $('<select></select>');
var $emptyOption = $("<option>" + title + "</option>");
$select.append($emptyOption);
$.each(mapToRender, function (key, value) {
var $option = $("<option></option>", {
"text": value,
"value": key
});
$select.append($option);
});
return $select;
}
/**
*
* @param {type} select
* @param {type} data
* @returns {unresolved}
*/
function selectOption(select, data) {
select.find("option:selected").removeAttr("selected");
select.find("option[value="+data+ "]").attr("selected", "selected");
return select.prop("outerHTML");
}
function dropDownVilleRenderer(instance, td, row, col, prop, value, cellProperties) {
td.innerHTML = selectOption(listeDeroulanteVille, value);
return td;
}
function dropDownPaysRenderer(instance, td, row, col, prop, value, cellProperties) {
td.innerHTML = selectOption(listeDeroulantePays, value);
return td;
}
function dropDownVehiculeRenderer(instance, td, row, col, prop, value, cellProperties) {
td.innerHTML = selectOption(listeDeroulanteVehicule, value);
return td;
}
var container = document.getElementById('example-handsontable');
var hot = new Handsontable(container, {
data: donneesAnonymes,
rowHeaders: true,
height: 500,
colHeaders: [
'Pays', /*0*/
'Ville', /*1*/
'Véhicule', /*2*/
'date', /*3*/
'Prix', /*4*/
'Carburant', /*5*/
'Commercialisation', /*6*/
'Prix coutant', /*7*/
'Marge' /*8*/
],
hiddenColumns: {
columns: [7, 8]
},
columns: [{
data: 'pays',
renderer: dropDownPaysRenderer,
className: 'liste-pays'
}, {
data: 'ville',
renderer: dropDownVilleRenderer,
className: 'liste-ville'
}, {
data: 'vehicule',
renderer: dropDownVehiculeRenderer,
className: 'liste-vehicule'
}, {
data: 'date',
type: 'date'
}, {
data: 'prix',
type: 'numeric'
}, {
data: 'carburant',
type: 'numeric'
}, {
data: 'commercialisation',
type: 'checkbox'
}, {
data: 'prixCoutant',
type: 'numeric'
}, {
data: 'marge',
type: 'numeric'
}],
afterInit: function () {
console.log("Handsontable initialized!");
var timeEnd = Date.now();
var temps = timeEnd - timeDebut;
console.log("Temps de chargement = " + temps);
},
fixedColumnsLeft: 3,
dropdownMenu: true,
filters: true
});
</script>
var donneesAnonymes = [
{
"pays": "1",
"ville": "2",
"vehicule": "4",
"date": "01/01/1998",
"prix": 92,
"carburant": "SP95",
"commercialisation": "true",
"prixCoutant": 5689,
"marge": 231
},
{
"pays": "2",
"ville": "2",
"vehicule": "3",
"date": "01/01/2000",
"prix": 5689,
"carburant": "DIESEL",
"commercialisation": "false",
"prixCoutant": 1024,
"marge": 231
},
{
"pays": "2",
"ville": "2",
"vehicule": "3",
"date": "01/01/1987",
"prix": 92,
"carburant": "DIESEL",
"commercialisation": "true",
"prixCoutant": 231,
"marge": 100
},
{
"pays": "4",
"ville": "5",
"vehicule": "4",
"date": "01/01/2017",
"prix": 100,
"carburant": "HUILE",
"commercialisation": "false",
"prixCoutant": 231,
"marge": 1024
},
{
"pays": "5",
"ville": "5",
"vehicule": "5",
"date": "01/01/1998",
"prix": 100,
"carburant": "DIESEL",
"commercialisation": "true",
"prixCoutant": 1024,
"marge": 100
}];And i need also a pagination ( i will have something like 4000 rows) 
That is a lot of updates @oumaima.monnier
The pagination and filtering/sorting works only on the frontend so it might be slow. Please test this example http://jsfiddle.net/Lx3q00c8/
You can push anything in the data variable and check if that works for your project and what is also important if it doesn’t slow down the scrolling and overall performance.
Thanks Aleksandra
I know that is many things i need but it’s for a Big et exigent client
I made a POC for datatables et one for handsontable and the goal is to switch applications into one of those technologies
It musnt be too slowly for them
The response of handsontable seduced them on the POC
Do you thing that their demands are unrealist?
Thaks
Nope, It is commonly used to have a pagination and sorting/filtering features for a larger datasets. It’s an only way to not to get lost in the big data
But, some of the operation are recommended for backend as they usually are more efficient. Like the pagination. You just send a reguest to the server to push another part of dataset after user clicks a button. Then you do not need to load all the data to a table. You have a Handsontable in the frontend to gather events form user and then by our callbacks (beforeFilter, beforeChange, beforeColumnSort) communicate with the database. Firstly it may sound like more work to do but it is surely the only solution when the dataset grows really fast or the devices that are used aren’t high-tech.
Hello Aleksandra, sorry for the late answer! we have choose handsontable
Best regards
Oumaïma Monnier
i worked hard for that
i have many bugs and questions for you 
Many bugs? Wow, so let’s start right away. I am ready to answer all the questions
I believe that we can close this issue as there are no updates for a long time.