How can I control the active state of a v-list-item based on the property of an object? I've created a codepen for you to test. You'll see my object's have a property called active and some of them are marked by default as true. Which means when you first run the application they should be marked as active.
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
selectionModel: [1],
items: [
{'name':'Sour Candy', 'active': false, color:'red'},
{'name':'Chocolate', 'active': false, color:'green'},
{'name':'Muffins', 'active': false, color:'blue'},
{'name':'Cakes', 'active': true, color:'pink'},
{'name':'Pizza', 'active': false, color:'purple'},
{'name':'Fruit', 'active': false, color:'orange'},
{'name':'Vegetables', 'active': true, color:'yellow'},
{'name':'Popcorn', 'active': true, color:'indigo'}
]
}),
})
https://codepen.io/jokermartini/pen/ExVQZgN?editors=1011
Related
I'm trying to test some hotkeys on my site. Typing Ctrl+5 in a field should do something. I'm doing:
command.get(...)
...
.findByCssSelector('input')
.click()
.pressKeys([keys.CONTROL, '5'])
.pressKeys(keys.NULL)
.end()
Seems to be giving me weird results in IE. In my keydown handler I'm logging the event and getting this:
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: false, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "Control", keyCode: 17 ...}
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: false, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "5", keyCode: 53 ...}
Notice ctrlKey is false so it's not performing my hotkey. This is what I'm getting when typing Ctrl + 5 manually:
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: true, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "Control", keyCode: 17 ...}
{altKey: false, bubbles: true, button: undefined, buttons: undefined, cancelable: true, changedTouches: undefined, char: "", charCode: 0, clientX: undefined, clientY: undefined, ctrlKey: true, currentTarget: HTMLInputElement {...}, data: undefined, delegateTarget: HTMLInputElement {...}, detail: 0, eventPhase: 2, handleObj: Object {...}, isSimulated: false, jQuery311042854121322469546: true, key: "5", keyCode: 53 ...}
What am I missing?
You have a few things that I would suggest here.
The first relates to your use of CTRL in your pressKeys method. Have a look at the Leadfoot documentation:
https://theintern.io/leadfoot/module-leadfoot_keys.html
The CTRL key is referenced by using keys.CONTROL.
Another suggestion that I would have (based on my own experience with using Intern) is that you should include all key presses in a single array. Right now you have two lines as follows:
.pressKeys([keys.CTRL, '5'])
.pressKeys(keys.NULL)
I found that what would happen is that you needed all of these to be contained in a single array such as:
.pressKeys([keys.CONTROL, '5', keys.NULL])
It should be noted that some people have individual pressKeys events and it seems to work for them. For me, when I wanted to do keyboard shortcuts like this, I could never get that to work.
In addition to this, another suggested array of key presses is as follows - this will press both keys you want and then release them again too:
.pressKeys([keys.CONTROL, '5', '5', keys.CONTROL)
Update 1:
One thing you should look out for (and it's something that recently affected me which is why I said I'd suggest it here while it's fresh in my mind) is to ensure your capabilities are set to ensure that keyboard events are supported. There are a few ways to do this.
Firstly, you can set a global capabilities setting as follows:
"capabilities": {
...
"fixSessionCapabilities": true
}
This will resolve a lot of the problems automatically with an environment before any tests are run. However I have found that using this setting as true globally can cause other unwanted behaviours with your environments so another alternative to that is to set what you need on an individual environment as required.
For example, your keyboard events don't seem to be working so you can ask your configuration to try to correct this when IE tests are run as follows:
"environments": [
...
{
"browserName": "internet explorer",
"brokenSendKeys": true
}
]
If you want to view and try out any other potential settings like this then you can find them all in the Globals section of the Leadfoot documentation as follows:
https://theintern.io/leadfoot/global.html
I am referring the following Datatable example -
https://datatables.net/examples/api/select_single_row.html
The example captures onclick event on the entire row
$('#example tbody').on( 'click', 'tr', function (){}
I wish to capture an event on the click of a particular columns,
say column Name, Position and Office.
How do I do that?
If you know the table colums index then you might you use this.
$('#example tbody').on( 'click', 'tr td:eq(0)', function (){
alert("col1");
});
$('#example tbody').on( 'click', 'tr td:eq(1)', function (){
alert("col2");
});
$('#example tbody').on( 'click', 'tr td:eq(4)', function (){
alert("col5");
});
You can access clicks in columns hooking and event handler in the elements you want in the fnRowCallback.
Here is a complete example with a table with 2 extra columns showing an icon that receives the click:
$('#example').DataTable({
dom: 'lfrt',
paging: false,
rowBorder: true,
hover: true,
serverSide: false,
rowHeight: 30,
order: [[ 1, 'asc' ]],
columns: [
{
title: 'Id',
visible: false,
searchable: false
},
{
title: 'version',
visible: false,
searchable: false
} {
title: Name'
},
{
data: null,
title: 'Diagram',
searchable: false,
sortable: false,
defaultContent: '<i class="fa fa fa-sitemap icon-btn" data-btnaction="grafo"></i>',
className: 'text-center'
},
{
data: null,
title: 'History',
searchable: false,
sortable: false,
defaultContent: '<i class="fa fa-history icon-btn" data-btnaction="appdetail"></i>',
className: 'text-center'
}
],
select: false,
fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
$('td > i', nRow).on('click', function() {
// if you have the property "data" in your columns, access via aData.property_name
// if not, access data array from parameter aData, aData[0] = data for field 0, and so on...
var btnAction = $(this).data('btnaction');
if (btnAction === 'grafo'){
} else if (btnAction === 'appdetail'){
// do something......
}
});
}
});
Used enableCellSelection: true but it doesn't work it out.
$scope.gridOptionss = { data: 'dashboard',enableGridMenu: true,enableCellSelection: true, enableRowSelection: false, enableRowHeaderSelection: false,
columnDefs: [
{field:'Name', displayName:'No Response',width:150},
{field:'age', displayName:'Part Response', width:150},
]
}
Below is my code
onSelectRow : function(id) {
$("#order_list").setGridParam({
'editurl' : 'clientArray'
});
}
});
jQuery("#order_list").jqGrid('navGrid',"#pjmap",{edit:false,add:false,del:false,search: false, refresh:false,cloneToTop:true});
jQuery("#order_list").jqGrid('inlineNav', '#order_list_toppager',{add:false,del:false,edit:true,search: false, refresh:false,cloneToTop:true, viewtext:"View", edittext:"Edit", savetext:"Save", canceltext:"Cancel"});
Hei
You can create your own functions for saving by adding a function in parameters for aftersavefunc. My code is like this:
$('#jqGridOutput').navGrid("#jqGridPagerOutput", { edit: false, add: false, del: true, refresh: false, view: false }, {}, {}, delSettings);
$('#jqGridOutput').inlineNav('#jqGridPagerOutput',
{
edit: true,
del: true,
add: true,
cancel: false,
editParams: {
aftersavefunc: function (id) { //what should happen on save edit row },
keys: true,
},
addParams: {
keys: true,
position: "last",
aftersavefunc: function (id) { //what should happen on save new row }
},
});
I think, this is what you are looking for if i understand you correctly?
Below is my code, and I need to close the add/edit dialog after a submit. It's updating the server and reloading the grid in both the cases, but it is not closing the dialog:
jQuery("#toolbar1").jqGrid({
url:'category/getcategorylist',
datatype: "xml",
colNames:["Name","Description","Id"],
colModel:[
{name:"cname",index:"cname",editable:true, width:250, align:"center",xmlmap:"categoryName"},
{name:"cdescription",index:"cdescription", editable:true,width:300, align:"center",xmlmap:"description"},
{name:"id",index:"id", editable:true,width:210, align:"center",xmlmap:"categoryId",key: true,hidden: true},
],
rowNum:100,
viewrecords: true,
toppager:true,
height:250,
width:800,
modal:true,
sortorder: "asc",
xmlReader: {
root : "CategoryList",
row: "categoryList",
repeatitems: false
},
});
$("#toolbar1").jqGrid("navGrid", "#toolbar1_toppager", {
reloadAfterSubmit:true, view: false, search:false ,addtext: 'Add',
edittext: 'Edit',
deltext: 'Delete',
refreshtext: 'Reload'
},
{url: "category/updatecategory"}, {url: "category/createcategory"}, {url:"category/deletecategory"});
There are some properties for closing the dialog that needs to be set on your edit/add declarations, they normally default to false.
For Adding:
closeAfterAdd - when add mode, close the dialog after add record. (default: false)
For Editing:
closeAfterEdit - when in edit mode, close the dialog after editing. (default: false)
So in your example you would need:
{url: "category/updatecategory", closeAfterEdit: true},
{url: "category/createcategory", closeAfterAdd: true}
Or:
$("#toolbar1").jqGrid("navGrid", "#toolbar1_toppager", {
reloadAfterSubmit:true, view: false, search:false ,addtext: 'Add',
edittext: 'Edit',
deltext: 'Delete',
refreshtext: 'Reload',
closeAfterAdd: true,
closeAfterEdit: true
},
These settings are available on the wiki
Following code snippet will solve your purpose :
$('#toolbar1').jqGrid('navGrid', '#toolbar1_toppager',
{edit:true,add:true,del:true,search:false}, // options
{closeAfterEdit:true}, // edit options
{closeAfterAdd:true}, // add options
{}, //del options
{}, // search options
);