I have two buttons(Apply, Submit) on my website. I select a row(Page 1) and navigate to another page(Page 2) via grid pagination then select another row. I make few changes on the row and click 'Apply'. Changes get applied on the current page(page 2) but when I navigate to page 1 changes does not reflect. When I submit it sends both the affected row with changed values. Which means it changes the values on both rows but not reflecting it on UI. Is this the problem with cache or something else?
You can subscribe for complete event and refresh your datasource. I think it will work for you. Example :
create: {
url: "http://mycreate.json",
type: "POST",
complete: function(e) {
$("#grid").data("kendoGrid").dataSource.read();
}
},
Related
Using Vuetify Data Tables, I'm trying to figure out if there's a way to determine what page the current selected item is on, then jump to that page. My use case for this is, I'm pulling data out of the route to determine which item was selected in a Data Table so when a user follows that URL or refreshes the page that same item is automatically selected for them. This is working just fine, however, I can't figure out how to get the Data Table to display the correct page of the selection.
For example, user visits mysite.com/11
The Data Table shows 10 items per page.
When the user enters the site, item #11 is currently auto-selected, but it is on the 2nd page of items. How can I get this to show items 11-20 on page load?
I ended up using a solution similar to what #ExcessJudgement posted. Thank you for putting that code pen together, BTW! I created this function:
jumpToSelection: function(){
this.$nextTick(() => {
let selected = this.selected[0];
let page = Math.ceil((this.products.indexOf(selected) + 1) / this.pagination.rowsPerPage);
this.pagination.sortBy = "id";
this.$nextTick(() => {
this.pagination.page = page;
});
});
}
I'm not sure why I needed to put this into a $nextTick(), but it would not work otherwise. If anybody has any insight into this, it would be useful to know why this is the case.
The second $nextTick() was needed because updating the sortBy, then the page was causing the page to not update, and since I'm finding the page based on the ID, I need to make sure it's sorted properly before jumping pages. A bit convoluted, but it's working.
We have a table of data with columns like CaseId, name.. etc. Here Case Id is an hyper link. we are using the Jquery DataTables to display data. Here Issue is, If I am in page number 3 and clicking on any CaseId link here, It will redirect to cases page. Here if I click on back button it should display the page 3 data and it will select page number 3. But In my case it is going to page 1. I had handled the data level which is displaying page 3 data but here it's selecting the page number as 1. How to fix this... Can any one help me on this.
You can use the 'stateSave' option to save the state of your dataTable.
$(document).ready(function() {
$('#example').DataTable( {
stateSave: true
} );
} );
DataTables has the option of being able to save the state of a table
(its paging position, ordering state etc) so that is can be restored
when the user reloads a page, or comes back to the page after visiting
a sub-page. This state saving ability is enabled by the stateSave
option.
See https://datatables.net/examples/basic_init/state_save.html for more info.
I have these five fields ID, Name, Address, Phone and Fax displaying on the datatable. I am using Column Visibility Feature and by default, I am displaying first four columns. Suppose, I make Fax column Visible and Phone Column Invisible. Now, if I refresh the page, I see the same four columns again. My question is, can we Retain this visibility / invisibility ?
Thanks.
Refresh the page? Do you mean redraw the datatables page? (e.g. by clicking a column header to sort or clicking 'next' in the datatable?)
If so, are you using javascript/jquery to modify the visibility of your elements?
Doing so will work initially - but because datatables doesn't 'know' that jquery has modified the element, when it redraws the table (in a new order, or on a new page or whatever) it will revert your changes to whatever state it understands the table to be in.
To make your changes persist over redraws, you need to use the datatables api - so that datatables knows what you're doing. like this:
var mytable= $('#mytable').DataTable();
mytable.column( 0 ).visible( false );
however IF you want these changes to persist between refreshes of the webpage in the browser, then you need to set up sessions, or store these configurations in a database.
Then every time the page in requested, you check that data, and you can decide dynamically onload how to initialise your datatable:
$(document).ready( function() {
$('#example').dataTable( {
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ userHiddenColumn ] }
] } );
} );
Please excuse me for being a noob when it comes to what is probably not that hard....
I am writing a page which has a table which allows users to add players into a game. Every <td> contains a <input type='hidden'... and a piece of information (player name, place, points etc). There is also a 'delete' button (for use when a player is mistakenly added twice, or the wrong player is added to the list). At this stage, when clicking save, the table submits all the hidden inputs to the "Confirm results" page before closing the page and updating the database.
The problem I am having is that the players need to be added to and deleted from the database live. To do this, I've created a form will post their details to the same page, then if (I'm paraphrasing here) if($form = 'new player') an SQL command will add a temp file to the database to show that player is registered, then an SQL SELECT will get all the players in that game and echo them to the page. I want the delete button to delete the players row from the database the moment it is clicked and refresh the page, but the only way I know to do this is with a form, and this would create a form within a form.
How else can I make the delete button remove a row from a database without leaving the current window and without using another form? Is this something that should be done with AJAX? (I know almost nothing about AJAX - learning it is next on my to do list, but right now I just want to get this page to work).
added: One idea I had was to make the delete button more like a msgbox to create an inner window that basically says "Are you sure you want to delete John Smith" and then run the SQL code in that window. Would something like that work? How can I do that?
You can call an action from a buton click via AJAX.
So if you have an action set up to do what you want (your delete) then you should be abkle to fire it.....
I use MVC razor and do it like this....
JQuery....
$("#yourButton").click(function (e) {
var url = "#Url.Action("YourActionName", "YourControllerName")";
//alert(url);
$.ajax({
url: url,
type: 'POST',
cache: false,
data: { param1: param1Val, param2: param2Val },
success: function (result) {
..Do something with result if required
}
});
return true;
});
I've had similar scenarios to you and I am pretty new to this also, however, this seems to work nicely.
Hope it helps.
I wrapped my gridview with Pjax widget like this
\yii\widgets\Pjax::begin();
gridview
\yii\widgets\Pjax::end();
in order to make the gridview make ajax request when I click on each pagination.
I also use ['class' => 'yii\grid\CheckboxColumn'], in column as well.
and I find that when I'm on first pagination I checked some rows and then go to second page and check some rows but when I go back to first page what I've checked is gone.
My question is how can I keep all checkedrow for all pagination
With current conditions (Pjax, multiple pages, yii\grid\CheckboxColumn) it's impossible because of the way it works.
When you click on the pagination links all GridView html content is replaced by new one that comes from the AJAX response.
So obviously all selected checkboxes on the previous page are gone.
Few possible ways to solve that:
1) Write custom javascript and server side logic.
As one of the options, you can send AJAX request to server with parameter meaning that user has chosen to select all data for the bulk delete operation (or use separate controller action for bulk deletion). In this case actually we don't need to get the selected data from user, because we can simply get them from database (credits - Seng).
2) Increase number of displayed rows per page.
3) Use infinite scroll extension, for example this.
4) Break desired action in several iterations:
select needed rows on first page, do action (for example, delete).
repeat this again for other pages.
You can get selected rows like that:
$('#your-grid-view').yiiGridView('getSelectedRows');
[infinite scroll] : http://kop.github.io/yii2-scroll-pager/ will work good if you do not have any pjax filters. If you have filters also in play, do not use this plugin as it does not support pjax filters with it. For rest of the applications it is perfect to use.
Update1 : it seems to be straight forward than expected, here is the how I accomplished it
Add following lines to the checkbox column
'checkboxOptions' => function($data){
return ['id' => $data->id, 'onClick' => 'selectedRow(this)'];
}
Now add following JS to the common js file you will have in your project of the page where this datagrid resides
var selectedItems=[]; //global variable
/**
* Store the value of the selected row or delete it if it is unselected
*
* #param {checkbox} ele
*/
function selectedRow(ele){
if($(ele).is(':checked')) {
//push the element
if(!selectedItems.includes($(ele).attr('id'))) {
selectedItems.push($(ele).attr('id'));
}
} else {
//pop the element
if(selectedItems.includes($(ele).attr('id'))) {
selectedItems.pop($(ele).attr('id'));
}
}
}
Above function will store the selected row ids in the global variable array
Now add following lines to pjax:end event handler
$(document).on('pjax:end', function () {
//Select the already selected items on the grid view
if(!empty(selectedItems)){
$.each(selectedItems, function (index,value) {
$("#"+value).attr('checked',true);
});
}
});
Hope it helps.
I just solved this problem and it works properly with Pjax.
You may use my CheckboxColumn. I hope this can help. The checked items are recorded with cookies.
You can read the part with //add by hezll to understand how to fix it, because I didn't provide a complete general one.
Hope it works for you.
https://owncloud.xiwangkt.com/index.php/s/dGH3fezC5MGCx4H