Greeting, I would like to ask a question about the bootgrid jquery.
After I tried to understand the documentation of the bootgrid, I know that hiding a column are able to do in the column setting, <th data-visible="false">sampleID<th>, but I want to do this function inside jquery because I have a condition for displaying some column.
For example, I have three columns which is 'A','B','C'. So when the Listing value is 'A', the column B and column C will be set to data-visible = "false":
$('#Listing'.val()) == "a"
{
$('#B').attr("data-visible","false");
$('#C').attr("data-visible", "false");
}
So I have tried the code above but it not work. Please suggest me a solution or method.
Is it possible if I set the data-visible using the jquery?
Related
I am using VueJS with bootstrap-vue, and using Laravel Dusk, I need to test a table inside a modal that uses a checkbox to select each row. In this particular case, there are multiple rows with checkboxes, and I need to select all of the checkboxes in the form and then submit the form. My test works fine with the modal in every way except checking the checkboxes; no matter what I try, I can't get the check() (or click()) method to check more than the first one. I've tried
->check("input[type=checkbox]")
and using the name
->check("input[name='my-custom-name']")
but I still only get the first item checked. Based on this, I tried something like
$checkboxes = $browser->driver->findElements(WebDriverBy::name('my-custom-name[]'));
for ($i = 0; $i <= count($checkboxes); $i++) {
$checkboxes[0]->click();
}
but even that only checks the first checkbox. What do I need to do to select all of the checkboxes in the table?
The answer was to first, add a custom dusk selector to the checkbox using the row index:
<template #cell(selected)="row">
<b-form-checkbox
v-model="row.item.check"
#input="rowCheckboxClick($event, row.index, row.item)"
plain
:dusk="'my-custom-selector-' + row.index"
>
</b-form-checkbox>
</template>
and second, use the selector within the test.
->whenAvailable(new PursuitModelRestoreDeletedModal(), function(Browser $browser) {
$browser->waitForText('Click on the checkbox in the Select column')
->assertSee('My Modal Title')
->check('#my-custom-selector-0')
->check('#my-custom-selector-1')
->check('#my-custom-selector-2')
->check('#my-custom-selector-3')
->click('#ok-button');
})
Yes, the code could probably be a little cleaner with a loop instead of having each selector listed separately, but this works.
I had this kendo grid demo, and on outletID column, i want to use kendoTreeView with checkbox, so multiple selected outletID possible. But when edit it display undefined result, and the template that display outletName also not working. Appreciate your help
DEMO IN DOJO
Your tree needs dataTextField and dataValueField set.
Your column template doesn't know where to look for the outletName. Kendo supports 1-N relationships, but I'm not aware of N-N.
The data in your template is the current row of the grid. For the first row, that would be {"id":"1","outletID":"LA2,LA3","accountName":"Data1"}. You need to process that data yourself. For instance:
template: "#= (data.outletID) ? data.outletID.split(',')
.map(x => TreeData.find(y => y.outletID == x)['outletName']) : '' #"
For the editor, the value of a dropDownTree is an array. Your row has a string. You need to do two things:
1 . Init the editor's value in the function outletTree:
if (options.model) {
ddt.value((options.model[options.field] || '').split(','))
}
2 . When the dropDownTree's value changes, update your grid row:
change: e => {
const value = e.sender.value();
console.log(value)
options.model.set(options.field, value.join(','))
}
Here's an updated dojo: https://dojo.telerik.com/#GaloisGirl/oYEGerAK . The "Update" button doesn't work yet, probably because the dataSource must support edition. Here is how to do it on local data.
I have a data table that has a hidden column. I want to set the values of that column to a java script array. (Note: I want to get the values that belong to the current page only). If I use a search filter, I want the values of the current page of the search result.
I've tried like this.
$('#datatbl').DataTable().rows({filter: 'applied'}).every(function () {
var row = this.data();
arr.push(row[0]);
});
But,this code gives all values from all the pages. Please help....
Try adding page:'current' in selector.
$('#datatbl').DataTable().rows({filter: 'applied', page:'current'})
We've just moved over from bootstrap to Vuetify, but i'm struggling with something.
We have some updates sent (over signalR) that update a list of jobs, i'd like to be able to target a job that has been changed and change the row color for that particular job for a few seconds so the operator can see its changed.
Has anyone any pointers on how we can do this on a Vuetify v-data-table
Thanks
I ran into the same problem. This solution is a bit crude and a bit too late, but may help someone else.
In this example I change the colour of the row permanently until the page reloads. The problem with a temporary highlight is that if the table is sorted there is no way to put the row in the visible part of the table - v-data-table will put it where it belongs in the sort, even if it's out of the view.
Collect the list of IDs on initial load.
Store the list inside data of the component.
Use a dynamic :class attribute to highlight rows if the ID is not in the list (added or edited rows)
Solution in detail
1. Use TR in the items template to add a conditional class.
<template slot="items" slot-scope="props">
<tr :class="newRecordClass(props.item.email, 'success')">
<td class="text-xs-center" >{{ props.item.email }}</td>
:class="newRecordClass(props.item.email, 'success')" will call custom method newRecordClass with the email as an ID of the row.
2. Add an additional array to store IDs in your data to store
data: {
hydrated: false,
originalEmails: [], <--- ID = email in my case
3. Populate the list of IDs on initial data load
update(data) {
data.hydrated = true; // data loaded flag
let dataCombined = Object.assign(this.data, data); // copy response data into the instance
if (dataCombined.originalEmails.length == 0 ) {
// collect all emails on the first load
dataCombined.originalEmails = dataCombined.listDeviceUsers.items.map( item => item.email)
}
return dataCombined;
}
Now the instance data.originalEmails has the list of IDs loaded initially. Any new additions won't be there.
4. Add a method to check if the ID is in the list
newRecordClass(email, cssClass) {
// Returns a class name for rows that were added after the initial load of the table
if (email == "" || this.data.originalEmails.length==0) return "" // initial loading of the table - no data yet
if (this.data.originalEmails.indexOf(email) < 0 ) return cssClass
}
:class="newRecordClass(..." binds class attribute on TR to newRecordClass method and is being called every time the table is updated. A better way of doing the check would be via a computed property (https://v2.vuejs.org/v2/guide/computed.html#Computed-Properties). Vue would only call it when the underlying data changed - a method is called every time regardless.
Removing the highlight
You can modify newRecordClass method to update the list of IDs with new IDs after a delay to change the colour to normal.
#bakersoft - Did you find a solution? I suspect there is an easier way to skin this cat.
I need to show multiple values (rank and vote) together separated by space as key:value in a webix datatable cell from the following structure :
id2: [{"rank":2, "vote":50}, {"rank":3, "vote":10}]
I want to show only the first element of this above array.
My snippet is here : https://webix.com/snippet/ca50874d
I am not able to figure out how to show these two values together in one cell.
Please help.
Thanks.
To show multiple values in the cell, or if you want to format the value according to you, you just need to use to template for that cell:
While specifying column configuration, you can specify the template for that particular column like below:
template:function(obj) {
}
This template will be called for each row, and obj contains the row object.
For your example you can specify the template like below:
template:function(obj) {
return obj.column1 +':' + obj.column2;
}
I further tried and could figure out the answer on my own. To show the first element of that array object, the 'map' attribute has to be used as below:
{ id:"id2", header:"Rank", width:80, map:"#id2[0].rank# : #id2[0].vote# "}
The working snippet for the same is here : https://webix.com/snippet/928bab77