I'd like to know id there is a way to open an ag-grid on the last page upon start. The page size is 10000 and the extra rows should go in the first page, not the last. (So the last page and everything else except for the first page should have 10000 rows)
I've done some research online and didn't really find what I was looking for. I tried implementing the getRows method below but the results are the same.
getRows (params) {
// Use startRow and endRow for sending pagination to Backend
params.startPage = (this.state.fileNames.length / 1000);
params.endPage = 1;
this.apiService().subscribe(response => {
params.successCallback(
response.data, response.totalRecords
);
})
}
Related
I am trying to show the loading animation during a function call that takes some time. The function call is searching a large array that is already loaded. After the search, matching items are inserted into a table. The table is cleared prior to starting the search.
The problem is the animation only displays during the brief moment when the page updates.
Here is my code:
var interval = setInterval(function ()
{
$.mobile.loading('show');
clearInterval(interval);
}, 1);
DoSearch(term, function ()
{
var interval = setInterval(function ()
{
$.mobile.loading('hide');
clearInterval(interval);
}, 1000);
});
//The search function looks like this (detail omitted for brevity):
function DoSearch(term)
{
$("table#tableICD tbody").html('');
// also tried:
/*$("table#tableICD tbody")
.html('')
.table()
.closest("table#tableICD")
.table("refresh")
.trigger("create");*/
var tr = '';
$.each(codes, function (key, value)
{
// determine which items match and add them as table rows to 'tr'
});
$("table#tableICD tbody")
.append(tr)
.closest("table#tableICD")
.table("refresh")
.trigger("create");
callback();
}
The search works properly and adds the rows to the table. I have two unexpected behaviors:
The table does not clear until the search is complete. I have tried adding .table("refresh").trigger("create") to the line where I set the tbody html to an empty string. This does not help. (see commented line in the code)
As I mentioned, the animation displays briefly while the screen is refreshing. (Notice I set the interval to 1000 in the second setInterval function just so I could even see it.)
The suggestions I have read so far are to use setInterval instead of straight calling $.mobile.loading, which I have done and placing the search in a function and using a callback, which I have also done.
Any ideas?
Let me give you a few suggestions; they will probably not solve all your issues but they may help you found a solution.
jQuery Mobile is buggy, and for some features, we will never know were they intended to work like that or are they just plain bugs
You can call $.mobile.loading('show') on its own only in pageshow jQuery Mobile event. In any other case, you need to do it in interval or timeout.
It is better to do it in timeout, mostly because you are using less code. Here an example I made several years ago: http://jsfiddle.net/Gajotres/Zr7Gf/
$(document).on('pagebeforecreate', '[data-role="page"]', function(){
setTimeout(function(){
$.mobile.loading('show');
},1);
});
$(document).on('pageshow', '[data-role="page"]', function(){
// You do not need timeout for pageshow. I'm using it so you can see loader is actualy working
setTimeout(function(){
$.mobile.loading('hide');
},300);
});
It's difficult to enhance any jQuery Markup in real time after a page was loaded. So my advice is to first generate new table content, then clean it, and then update markup using .table("refresh").
Do table refresh only once, never do it several times in the row. It is very resourced heavy method and it will last a very long time if you run it for every row
If you are searching on keypress in the input box then showing it in the table; that is the least efficient method in jQuery Mobile. jQM is that slow, it is much better to use listview component which is least resource extensive.
I am using Antd Table component, I have bind data by below code. The first page is load data correctly, but when I moved to the second page, it is showing me 'No Data'. I have debugged code and tried to figure it out issue and found that reached data in render state as well but don't know why not bind it. It's work fond at localhost but when i deployed to server, it couldn't work.
Code:
enter image description here
Screenshot::
enter image description here
For people in the future who might have this problem (I also had the problem and solved it):
You probably have the current pageindex and pagesize stored in Redux.
If you have for instance:
30 results in total
a page size of 10
and you are on page 3
Now you change the page size to 100 (and of course you will only have 1 page) then your redux pageindex is still 3 and you try to access page 3 although only one page exists.
This leads to this error.
Solution:
const pagination = {
position: ['bottomCenter'],
showSizeChanger: true,
showQuickJumper: true,
onChange: (page) => {
dispatchFns.setConfig('currentPage', page);
},
onShowSizeChange: (_, pPageSize) => {
dispatchFns.setConfig('currentPage', 1); // this is the necessary line to fix the bug
dispatchFns.setConfig('pageSize', pPageSize);
},
total: itemsToShow.length,
current: currentPage,
pageSize,
};
// currentPage comes from Redux
// pageSize comes from Redux
Its resolved!
I have added current (current:pagination.current) in pagination option in antd table as below
<Table
size={'small'}
scroll={{ x: 370 }}
rowKey={record => record.template_id}
columns={columns}
dataSource={roleTemplateData}
pagination={{ pageSize: pagination.pageSize, pageSizeOptions: pageSizeOptions, showSizeChanger: true, total: pagination.total, position: position, current:pagination.current }}
loading={loading}
onChange={this.handleTableChange}
/>
Thanks.
I'm using a webix treetable with data loading from a server url with pagination.
Server url loads 100 records per page with total_count as say 1000.
It works fine so far.
But if I apply grouping on a column, it's throwing error. When I debug I understood that it's failing because it's trying to process 1000 records (based on the total_count) where as there are only 100 records loaded so far and throwing an error.
Is it possible to have grouping + remote pagination together on webix treetable.
Please check the sample code I'm using -
webix.ready(function () {
var gridColumns = [{
// ...
}];
var grid = webix.ui({
container: "testA",
view: "treetable",
columns: gridColumns,
url: "server-url.php"
scheme: {
$group: gridColumns[0].id
},
datafetch: 100,
pager: {
container: "paging_here",// the container where the pager controls will be placed into
size: 100, // the number of records per a page
group: 5 // the number of pages in the pager
}
});
});
and the html is
<div id="testA" style='width:1200px; height:600px;'></div>
<div id="paging_here"></div>
It will not work, unfortunately.
The grouping requires that all data is available on the client side, which means it doesn't compatible with dynamic loading.
If you have up to few thousands of records, you an try to load all data at once. Except the extra bandwidth, it will not have a negative impact on the performance.
I am working on web application (shipping domain) and using kendo UI for look and feel. While using kendo combo box I am facing an issue. In the database we have thousands of records in Vessel table which is bounded to a combobox, It took near about 6 sec to load if user wants to see all vessels (first time), but it took the same amount of time to get load second time also (that's the problem here) even it doesn't hit the Action method in controller (second time). I think its kendo's default functionality for combobox that if all records got loaded at 1st time (without filter) it will not send request to server to get the response for same request till we enter something in combobox filter, but if the combo box is getting load from the cache then it should't took the same time (6 sec) to load the combo box. I have searched for caching opting in kendo combobox documentation but no luck :( till now.
Here is my kendo combobox code:-
#(Html.Kendo().ComboBoxFor(i => i.VesselId)
.Name("VesselId").HtmlAttributes(new { style = "width:100%" })
.DataTextField("VesselName")
.Placeholder("Select Vessel...")
.DataValueField("VesselId")
.Filter(FilterType.Contains)
.AutoBind(false)
.MinLength(1)
.Value(proFormaVesselId)
.Text(proFormaVesselName)
.DataSource(source =>
{
source.Custom()
.ServerFiltering(true)
.Type("aspnetmvc-ajax")
.Transport(transport =>
{
transport.Read("GetFilteredVessels", "Common");
})
.Schema(schema =>
{
schema.Data("Data").Total("Total");
});
})
.Events(eve => eve.Change(#<text>
function () {
if (this.value() && this.selectedIndex == -1)
{
var dt = this.dataSource._data[0];
this.text('');
}
}
</text>
))
)
here is action method:-
public JsonResult GetFilteredVessels([DataSourceRequest] DataSourceRequest request)
{
var data = _IVesselService.GetVessel().Select(x => new
{
VesselId = x.VesselId,
VesselName = x.Status == (byte)enumRecordStatus.Accepted ? x.VesselName : (x.Status == (byte)enumRecordStatus.Draft ? x.VesselName + "(D)" : x.VesselName + "(R)")
}).OrderBy(x => x.VesselName);
var result= Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
result.MaxJsonLength = int.MaxValue;
return result;
}
please don't get confused with this line of code result.MaxJsonLength = int.MaxValue; previously i was getting error about the json lenth it too high issue, so I have settled it like this.
Now Combo box got loaded and took 6 sec but second time when I tried to load the same records (All records) it took 6 sec again even the breakpoin which I have placed on the GetFilteredVessels ActionMethod doesn't got hit. If combo box it getting load from cache then why it took 6 sec ?
I hope you understood my problem if not please comment I can explain more.
Thanks in advance.
as per #David Shorthose suggestion I found a temporary solution for this problem. Please refer to this Demo I am not selecting this as answer because may be someone or me can provide better solution for this, lets hope for the best. I am still looking doing research on it
I have a webpage with multiple jqgrids each with inline editing enabled, "action" column (edit icons) enabled and pager disabled. I need to handle the delete event for each row so that I can process the delete without reloading server-side data. I've looked at the approach mentioned in jqGrid Delete a Row and it's very helpful except I have two questions that are stumping me -
Are there more details around the rp_ge parameter in the delOptions.onClickSubmit event?
My column has the delOptions set as this -
delOptions: {onclickSubmit: function(rp_ge, rowid) {return onRowDelete(rp_ge,rowid);}},processing:true }},
Is there a way to get the grid id from within that event? I'd like to have a generic function that I can use to handle delete events from all the grids on the page. The rp_ge parameter has a gbox which sometimes contains the grid id appended? But I have no idea what it is since i'm not able to figure out when it's populated, when it's not.
function onRowDelete(rp_ge, rowid) {
//hardcoded grid id.. don't like it.
var gridid = '#Grid_X';
//what is this gbox?? can i get grid id predictable from it?
//var gridid = rp_ge.gbox.replace("#gbox_", "");
var grid = $('#Grid_X');
rp_ge.processing = true;
var result = grid.delRowData(rowid);
if (result) {
$("#delmod" + grid[0].id).hide();
}
return true;
}
In the jqGrid Delete a Row approach, the code $("#delmod"+grid[0].id).hide(); is hiding the popup delete confirmation dialog manually. What I noticed is that when the dialog pops-up, jqgrid de-emphasizes the background page (makes it light greyish). But after the popup is manually closed (hidden actually?), the background remains de-emphasized. So it looks like the page doesn't have focus (or even disabled). Any way this can be fixed? This can also be seen on the demo that Oleg wrote.
Any help would be appreciated.
(PS - I would've commented on the same post but I don't have enough points to comment on someone else's answer yet.)
In answer to your second point.
Several examples by Oleg such as this one have the following modification.
$("#delmod" + grid[0].id).hide();
is replaced with
$.jgrid.hideModal(
"#delmod"+grid_id,
{gb:"#gbox_"+grid_id,jqm:rp_ge.jqModal,onClose:rp_ge.onClose}
);
This will return focus after the delete operation.