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.
Related
My extension have sidebar webview that can create additional webviews as panels in the active text editor. Each of these additional webviews is for an unique item and I want to revive/activate existing webview, for the specific item, if it exists.
My issues:
I can get a list of the existing tabs with window.tabGroups.all and loop through the result. But there is no way, as far as i can see, to reactivate the desired tab. I can get some properties from there but no methods. The question here is: is there a API to get a list of the tabs and be able to revive/activate it?
Because of the first point ive decided to keep list of the instances of the additional webviews and when new webview is about the be created im checking if its unique id (in the title) is in the list and if it is then just revive the tab instead of creating a new one. Dont like this approach much but its working. The problem here is when the additional webview is closed. When closed it has to be removed from the array. Ive implemented onDidDispose for the panel but somehow the filter function, inside it, is not called:
// panels: vscode.WebviewPanel[]
// create new panel
const panel = vscode.window.createWebviewPanel(...)
// add the webview instance to the panel
const newWebview = new AdditionalWebview(panel, this.context);
this.panels.push(panel);
panel.onDidDispose(() => {
console.log("Before remove the panel"); // can see this in the console
this.panels = this.panels.filter((p) => p.title != panel.title);
console.log("Before remove the panel"); // for some reason this never appears
});
Not sure why but the panel filter functionality is never triggered (and everything after it is also not ran).
extra question: at the moment the uniqueness of the additional panels is based on their label/title. In my case thats is ok but is there any other way to get unique identifier of each tab? id/guid somewhere?
On your first question about activating a given editor, you have a couple of options.
If you know the editor's index/position in its group. That can be obtained from its tabGroup.tabs position - it seems that the tab's index in that array is faithfully its index in the editor. So you could do a Array.findIndex to get the tab uri you want to set to active.
await vscode.commands.executeCommand('workbench.action.openEditorAtIndex', [indexToOpen]);
// note the [] around the index argument
The only problem with this approach is that it works within the active group only, so you may have to activate the correct group first via:
await vscode.commands.executeCommand('workbench.action.focusSecondEditorGroup');
// or whichever group the tab you want to open is in
Or second method:
// assumes you have the tab
const openOptions = { preserveFocus: true, preview: tab.isPreview, viewColumn: tab.group.viewColumn};
// check if a uri, might be viewtype, etc., instead
if (tab.input instanceof vscode.TabInputText) {
await vscode.commands.executeCommand('vscode.open', tab.input.uri, openOptions);
}
// are your editors regular text editors?
This looks like it is opening a new tab but it will focus an existing tab if one exists at that location with that same uri.
Here Select2.vue comp source: https://pastebin.com/zKvaaDS9
Here ItemDetail.vue page source: https://pastebin.com/gL7a75hH
I use select2 in VueJS, which I created based on VueJS documentation and other resource. Everything seems work fine. But, sometimes tag or selected is not selecting correct which after I debug I found it sometimes undefined, [], or ''(empty).
I highly suspect this because async. Here what I want to archive: I want to show all units that support an item.
AJAX: api for get units
AJAX: api for get an item detail. Data item, include current units that support for this item.
Load select2 units based on item.units and units. Sometimes is workfine but sometimes is not.
Here some explaination what I do
// Calling item detail(ASYNC)
// api/item/detail/:id
var item = getItemDetail()
// Calling ajax units(ASYNC)
// api/category?group_by=units
var units = getUnits();
Hopely would arrange select2 type=tags would render correctly based on item.units(for v-model) and units for available in dropdown menu.
It seems not render correctly when:
Select2 render without options and value(ajax not complete for item and units)
AJAX Item finish first
AJAX Units finish last
When I debug, it seems select2 updated v-model with empty value because nothing match in select items with v-model value. So for example:
item.units = [1,2,3];
units = []; // Because not ready yet
$(this.$el).val(); // Return empty array or something
I tried correct the order something like this:
Select2 render without options and value(ajax not complete for item and units)
AJAX Units finish last, wait until finish and go to step 3
AJAX Item finish first
This work perfectly.
The question is: Is it possible to run async and render select2 perfectly without thinking about ajax order or wait to complate first?
I think you could solve this in two ways.
You could store the value in a separate property of your select2 wrapper component, when the options changed, make sure to reapply your value to select2. This way, even if select2 sets value to empty, you will reset the original value after ajax finishes loading.
When the value changes and select 2 have no options loaded, create one option just so it won't set the value to empty. When your options finish loading, it will replace all items from select2 with ajax loaded ones.
// Option 2: this would go inside Watch for value property
// Note that this works for a single select, for tags, the idea is the same
// but you will have to create all the tags.
const select = $(this.$refs.select2);
if (select.find(`option[value="${value}"]`).length === 0) {
select.append(
$("<option>")
.val(value)
.text(this.displayText || "")
);
}
I've used option 2 at work (sorry, can't share the full code) and it worked. If it is unclear for you with just the snipped above, I can try and provide more details.
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 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
I have a dropdown list that serves as a record navigation control -- selecting a value from the dropdown is supposed to "jump to" that record. I feel like I've done stuff like this before that worked, but I can't get this one to work. The issue seems to be that I can't get the dropdown list to change the ID route value that the page was initially called with. So let's say my page is called from this URL:
/PatientProfile/Services/12
12 is the ID route value here--this is essentially the initial record displayed. This works. However, when I select something from my dropdown, it will redirect to something like this:
/PatientProfile/Services/12?ID=7
Notice how the 12 is still there in the route value ID. ID 7 was selected from the dropdown, but it's appended to the URL as a new parameter instead of the route value. What I want to happen is this:
/PatientProfile/Services/7
Here's what the razor looks like for my dropdown:
#using (Html.BeginForm("Services", "PatientProfile", FormMethod.Get))
{
#Html.Label("ID", "View Profile:")
#Html.DropDownListFor(model => model.CurrentProfile.ID, ViewBag.ProfileID as SelectList, new { onchange = "this.form.submit();" })
}
I tried both Html.DropDownList and Html.DropDownListFor, but saw no difference in behavior.
Any help greatly appreciated.
I would use jquery for this. Please confirm the generated id of the dropdownlist for this to work properly
$('#CurrentProfile_ID').change(function(){
window.location('#Url.Action("Services", "PatientProfile", new { id = "----" })'.replace("----", $('#CurrentProfile_ID :selected').val()));
});
Hopefully this helps.
PS. This sounds like a perfect situation for using a partial view that you update using an ajax call so you don't have to post back.