I have a kendo grid with several 1000's of rows. I want to display them as 1000 per page. Can any one please tell me how can I make the dropdown customized with the values like 1000, 5000, 10000 etc. and display number of rows based on it in javascript or JQuery. For now am setting the page size to 1000 in javascript, but when I change it to 20 or 10 in dropdown, I am unable to get the 1000 back!
Any help appreciated!
If you are using Javascript for kendogrid, add the following during your grid definition:
pageable: {
pageSize: 1000,
pageSizes: [1000, 5000, 10000]
}
You can try this:
pageable: {
pageSize: 10,
buttonCount: 10,
pageSizes: [5, 10, 20, 50, 100, 500]
},
Related
Hi I am using Highcharts. In one of the chart I have too many legends so there is an overflow. In this scenario Highcharts is rightly adding pagination arrow as shown in attached pic. My question is how can I control number of legends per page. I need only 4 legends per page when pagination occurs. I could not find anything in highcharts doc. Please help. [
There is no API option to set the number of series showing at the legend.navigation but you can control it using legend properties, such as itemWidth, maxHeight and other options for styling legend. You can also use responsive.rules for more precise settings.
Example config:
legend: {
align: 'center',
itemMarginTop: 1,
useHTML: true
},
responsive: {
rules: [{
condition: {
maxWidth: 500,
},
chartOptions: {
legend: {
width: 250,
itemWidth: 125,
maxHeight: 60
},
}
}
]
},
Demo:
https://jsfiddle.net/BlackLabel/j6gn1uto/
API Reference:
https://api.highcharts.com/highcharts/legend
https://api.highcharts.com/highcharts/responsive.rules
Is there a way to side scroll (I mean, on x axis) eCharts graph bar? I have a huge amount of data that needs to be displayed, so it cannot "fit" only browsers width, because the whole graph will be very hard to read (Every column loses on width).
My echarts version: ^4.0.4
My chart
You can add the attribute called dataZoom inside the object called options then pass this obj to the .setOption.
dataZoom: [
{
show: true,
start: 94,
end: 100
},
{
type: 'inside',
start: 94,
end: 100
},
{
show: true,
yAxisIndex: 0,
filterMode: 'empty',
width: 30,
height: '80%',
showDataShadow: false,
left: '93%'
}
],
I saw this example but i don't know what you want precisely.
https://ecomfe.github.io/echarts-examples/public/editor.html?c=mix-zoom-on-value
I found this example that can help you:
Bar Chart with scrolling options
Here I have referred the open source javascript graph library for your slider chart requirement.
Plotly.js
I have built a Form Designing application on top of
dsmorse(dsmorse.github.io/gridster.js/)
grister and I can't add widget in more than 15 rows. I tried gridster.options.max_rows=60; but it didn't worked in my case.
set max_rows to the number the rows desired
example
gridster[{0}] = $('#grTer_{0} ul').gridster({
widget_base_dimensions: ['auto', 55],
autogenerate_stylesheet: true,
min_cols: 1,
max_cols: 12,
max_rows: 140,
extra_rows : 40,
widget_margins: [30, 30]
}).data('gridster');
by default max_rows is 15 row max
I've got the last version of handsontable and now they are showing all my columns on the screen, for ex: I have 1000 cols and 1000 rows and table is showing 10 rows for my width and 1000 cols.
var hot = new Handsontable(el, {
colWidths:30,
colHeaders: true,
data: data,
minSpareRows: 1,
stretchH: "all",
variableRowHeights: false,
height: 200,
width: 200,
})
The latest version fixed this. Check this link.
I am wondering if there is a simple way to allow a JQuery datatable to re-size itself while the user is using a browsers zoom-in, zoom-out features. Currently When I zoom in and out on my data table the data either shrinks or grows too large for the table. And I also noticed that after I zoom out or in I can refresh the page and the datatable resizes itself to how it should look. Any insight or possible redirection to a question where this has been answered (could not find one) would be appreciated. Thanks.
Here are my JavaScript table properties:
"bJQueryUI": true,
"bStateSave": true,
"iDisplayLength": 50,
"aaSorting": [[4, "desc"], [5, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"sScrollY": "35em",
"sScrollX": "100%",
"bScrollCollapse": true
You can tie a datables redraw event to a window re-size function:
$(window).resize(function() {
oTable.fnDraw(false)
});
This assumes you initialized your table with the variable oTable like this:
var oTable = $("#tableName").dataTable({
"bJQueryUI": true,
"bStateSave": true,
"iDisplayLength": 50,
"aaSorting": [[4, "desc"], [5, "asc"]],
"aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"sScrollY": "35em",
"sScrollX": "100%",
"bScrollCollapse": true
});
You could also set the table in question to have style="width:100%;" and then use the "bAutoWidth":false option for DataTables. It then maintains your width and you don't actually need a redraw. Especially for tables doing complex Server side processing tables, this is quite a bit lighter. For the HTML just change the style
<table id="tableName" style="width:100%;">...</table>
And then your DataTables add the option:
var oTable = $("#tableName").dataTable({
// Your other options here...
"bAutoWidth":false
});
You need to re-draw table when window resizes:
$(document).ready(function() {
//Load datatable here
$(window).bind('resize', function () {
table.draw();
});
});