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.
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.
Im using Vuetify in my project. When I insert some data by v-select its working fine. Also when Im edit that data that also works. The only problem is I cant see the selected element when Im click on Edit.
Here is my code
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="text"
item-value="customer.rating"
single-line
></v-select>
Note: If I use {{customer.rating}} it gives an output like this
{ "id": 1, "text": "Bad" }
and If I select a different element its perfectly change on database. So everything is fine. The only requirement is I want show this value Bad as a selected element when I click on Edit.
Here is the complete code of my project file https://github.com/Shakilzaman87/pukucrm/blob/master/src/components/customers/EditCustomer.vue
Thanks in advance
It's and old question but Let me post my answer to help others as well, after alot of search I have come to this point, and I want to share it with others as well.
//This will load all your ratings in dropdown
<v-select
v-model="customer.ratings"
:items="ratings"
item-text="text"
item-value="id"
label="Rating"
dense>
</v-select>
Now Edit Part
Lets say you want to edit a record, so you will probably pass the record id in edit method of your vuejs then inside edit method of vuejs, you will do an edit axios call for that specific record to first show it inside fields and then you will update. But before update you need to do something inside edit method of your vuejs when you will have already loaded data for that specific id.
Now lets say you have received a record from database according to a specific id, you will see a dropdown id I mean to say a foreign key for a dropdown that you had saved during storing data.
Suppose you have ratings array which holds whole data for a dropdown. Inside this you are having an id and text fields. So you have this ratings array and an object from database during edit for a specific record. Now you are good to go with below code.
Inside Edit Method of vuejs
this.customer.ratings = this.ratings.find(item => item.id === parseInt(res.data.rating_id))
this.customer.ratings = parseInt(this.customer.ratings.rating_id)
Note: I am doing parseInt() it's because when you check in console the primary key is an integer like 1 but foreign key like rating_id is string i-e "1". You can also use two equals == if you are not using parseInt() but I haven't checked that.
For clearly understanding I am just sharing a sample edit code which might help you a bit
editItem(id){
axios.get( `/api/category/${id}` ).then( res => {
if(res.data.status === 200){
console.log(res.data.data)
this.name = res.data.data.name
this.id = res.data.data.id
this.parent_id = this.list_categories.find(item => item.id === parseInt(res.data.data.parent_id))
this.parent_id = parseInt(this.parent_id.id)
this.edited = true
}else{
this.$toaster.error( res.data.message )
}
});
}
I'm not sure what you mean by "... when Im click on Edit." but I will presume you mean when you click on the dropdown menu.
From what you have provided in your jsfiddle, your v-select should be like this:
<v-select
prepend-icon="star_rate"
:items="ratings"
v-model="customer.rating"
label="Rating"
item-text="ratings.text"
item-value="ratings"
single-line
></v-select>
This can be found here, in the API props section.
item-text: Set property of items’s text value
item-value: Set property of items’s value
The text is what you see, I believe that text which is the current value of item-text is either undefined or not declared. If this answer doesn't work, then you need to provide more of your code.
I have problem in rendering a template
When a new data has been added, it won't go to the process of v-if even if the condition is both TRUE.
Can some please explain why?
I have provided some screenshot below to explain further my issue
This first image was my template for displaying the products, you will notice the add, update and remove in here.
The second image shows that I'm trying to add a new product
The third image shows that I have successfully added the new product. The problem is, the action button "update" is triggered but won't take any effect.
The image above shows that the update button works with the past data, but not with the new one.
This last image will prove that the button has been triggered. I've added a console.log to display the following upon clicking the update button.
INDEX of the row, which is [0].
The typeOf the variable 'isUpdate' [boolean].
The value of 'isUpdate' [True, False]
and the productID which is [151]
Any idea why it hasn't been triggered, or any idea how to debugged this?
If you want to see the code. I can provide it, just tell me which part are you looking for. As I don't have any idea which part has the error.
Thank you in advance.
Updated
AS per Amresh Venugopal Request
Here is the v-if in the template
<tr v-if='product.id > 0 && product.isUpdate' class='table-inputs'>
And the updatebtn function
canUpdate: function(data) {
console.log(data.pindex);
this.products[data.pindex].isUpdate = !this.products[data.pindex].isUpdate;
console.log(typeof this.products[data.pindex].isUpdate);
console.log(this.products[data.pindex].isUpdate);
console.log(this.products[data.pindex].id);
}
I only set the isUpdate value to 'true' if 'false', and viceversa.
The productID is added after the ajax save function.
I figure it out!
When I push the data in this.products, I didn't include the 'isUpdate' field.
Got it working now.
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 single razor view in which i am trying to implement both Create and Edit options. Here is cshtml code for a drop down field:
#Html.DropDownListFor(model => model.StateID, (SelectList)ViewBag.StateID, "--Select--", new { #Id = "ddlState" })
However in edit mode although all the other fields are populated as per the model, the dropdown is not showing the saved selected value as per the model. I have used a viewbag to populate the dropdown and that works fine. The states are populated in the dropdown.
ViewBag.StateID = new SelectList(queryStatesInLookup, "LookupID", "LookupCode")
I debugged the razor page and checked. I get the state id from the model (for eg: 8), but this value wont bind to the dropdown. What gives? :/
Apparently the Viewbag cannot have the same name as the property the model ID is bound to. My guess is the CLR is unable to resolve the conflicting names of the dynamic object type Viewbag and the model property name at run time. Thanks :)
When you create your SelectList, you need to pass in the selected value there.
In the example below, replace SelectedValue with your actual selected value.
ViewBag.StateID = new SelectList(queryStatesInLookup, "LookupID", "LookupCode", SelectedValue)