i have the view as the image attached. I want to add date picker for the column expiry date in all the rows.
here the first row contains the id for the column expiry date is 'expiry_1_date'
2nd row -> 'expiry_2_date'
3nd row -> 'expiry_3_date'
4nd row -> 'expiry_4_date'
5nd row -> 'expiry_5_date'
Please help me to acheive the desired result in Jquery. thanks in advance!!!
Use starts with selector. and call the datepicker method.
try like this
$('input:text [id^="expiry_"]').datepicker();
or alternate way add a class to each text box.
then use like this
$('.SomeClass').datepicker();
Demo
use attribute selector [] with ^
Selects elements that have the specified attribute with a value beginning exactly with a given string.
try this
$('input[id^="expiry_"]').datepicker();
Set a input with a class datepicker
<input type="text" class="datepicker" />
and then load it like :
$(function() {
$( ".datepicker" ).datepicker();
});
You can get the date from it like:
$(".datepicker").datepicker(
{
onSelect: function()
{
var dateObject = $(this).datepicker('getDate');
alert(dateObject);
}
});
You can select all element with id that start with string expiry and assign datepicker to it:
$('input[id^="expiry"]').each(function() {
$(this).datepicker();
})
Demo: http://jsfiddle.net/pyMzT/
Try like
$("input[id^='expiry'][id$='date']").datepicker();
See DEMO HERE
and to add css to it try with this
<style type="text/css">
.ui-datepicker {
background: #333;
border: 1px solid #555;
color: #EEE;
}
</style>
Related
How to highlight the selected row in v-data-table? i tried to modified the data by adding flag variable selected in the Example
In the above example click on a row will be highlighted by adding class called primary. If it is a static data it is working fine, but if it is dynamic data like getting data from API, the data in the data table will always be refreshed, if i change the pagination and sort and all.
For example, in my case, if i sort the column the data will come from the API and data in the v-data-table will be refreshed with sorted data, in this case it is very hard to maintain that selected flag each and every time when ever the data changes. Is there any other way to highlight a selected row?
<v-data-table #click:row="rowClick" item-key="name" single-select ...
methods: {
rowClick: function (item, row) {
row.select(true);
//item.name - selected id
}
}
<style>
tr.v-data-table__selected {
background: #7d92f5 !important;
}
</style>
or
<style scoped>
/deep/ tr.v-data-table__selected {
background: #7d92f5 !important;
}
</style>
Example
https://codepen.io/nicolai-nikolai/pen/GRgLpNY
Your solution does not work because the selected property is added to the data when you click on a row, but when data is reloaded then the data without a selected property replaces the old data.
So to make it work:
- add an id field to each item in the list of desserts
- add an selectedId with default value -1 to your data
- change the line of code in method activerow to this.selectedId = item.id;
- change the class attribute in the <tr> to :class="{'primary': props.item.id===selectedId}"
If on reload only your list of desserts changes, and the new list contains an item with the same id as selected before, then the same row should become selected.
I forked the codepen example to show you how this works:
https://codepen.io/anon/pen/PrWjxQ?editors=1010
How to make the row clickable is allready explained by others but not how to toggle the row selection. The selection state can be checked through isSelected and then set accordingly.
To style the selected row properly you need something more to take into account: the dark and light theme and the hover css pseudo class - which is overridden through the important tag so we need to restyle it.
Check out the Codepen Example
methods: {
rowClick: function (item, row) {
let selectState = (row.isSelected) ? false : true;
row.select(selectState);
}
}
<style>
.theme--light.v-data-table tbody tr.v-data-table__selected {
background: #f5c17d70 !important;
}
.theme--dark.v-data-table tbody tr.v-data-table__selected {
background: #a17b4970 !important;
}
.theme--dark.v-data-table tbody tr.v-data-table__selected:hover {
background: #a17b49c2 !important;
}
.theme--light.v-data-table tbody tr.v-data-table__selected:hover {
background: #ffd296d2 !important;
}
</style>
I have the below HTML structure.
<html>
<a class="customcssstyle" href="#'>Link</a>
</html>
Now I need to have a style, such that on focus on the link , it should appear in red.
For that in normal CSS, we write it as:
a.customcssstyle:focus
{
color:red;
}
May I know how we can write it using Less CSS.
CSS syntax is valid in less. But also you can do something like:
.customcssstyle
{
a {
&:focus {
color:red;
}
}
}
First of all: a is an inline element and should be inside a block element (not html). Then in css for calling a class you need a dot, e.g. .customcssstyle and not the value of the attribute class only. At least to select the focus state of this element just call the class with the pseudo selector :focus.
.customcssstyle:focus {
color: red;
}
I'm trying to add a border bottom red style to a table when the column value changes.
As shown in the picture, I want to add a bottom border when FamilyID changes it's value.
Any help is greatly appreciated and thank you in advance!
I actually just went about using a SQL workaround using the LAG command.
Used that as a flag to indicate when value has changed and set the CSS command for the event. Thanks #Piyush for the suggestion to use a flag!
I have implemented same thing on classic report of employee ,
you can check url https://apex.oracle.com/pls/apex/f?p=26095 with
userid: AMOL.PATIL#VYOMLABS.COM
pass : Unicorn#123
Code in execute JavaScript page load section:
var previous=null;
var flag;
$("td[headers=DEPTNO]").each(function() {
if(previous==null){
previous=$(this).text();
flag='true';
}
if($(this).text()==null ||$(this).closest('tr').next().find('[headers="DEPTNO"]').text()==null) {
}
else
{
if($(this).text()!=$(this).closest('tr').next().find('[headers="DEPTNO"]').text()) {
previous=$(this).text();
if(flag=='false')
flag='true';
else
{
flag='false';
}
}
if(previous==$(this).text()&& flag=='false') {
flag='true';
$(this).closest('tr').after('<tr><td></td><td></td><td></td></tr>');
$(this).closest('tr').next().addClass("myclass");
}
}
});
code for inline css section of page:
table.uReportStandard > tbody tr.myclass > td
{
background-color:red !important;
}
Output :
Similarly you can also implement same thing by just changing headers.In your case it may be FAMILYID which will replace DEPTNO here.
Please try this code ...
I use dgrid to make a simple grid (http://dojofoundation.org/packages/dgrid/tutorials/defining_grid_structures/).
My question is simple : how to put html tag in label columnheader's ? Because if I put an img tag for example, label contains the string img src=...
Thanks
The column definition can provide a function that builds the column header.
var column = {
//...
renderHeaderCell: function(node) {
domConstruct.create('img', {src: ''}, node);
return node;
}
};
See the documentation of the renderHeaderCell() function in the DGrid wiki:
renderHeaderCell(node)
An optional function that will be called to render the column's header
cell. Like renderCell, this may either operate on the node directly,
or return a node to be placed within it.
One-line answer using put-selector:
renderHeaderCell: function(node) {
return put("img[src=/your/image]");
}
Note this function won't work if your column happens to be a selector - because selector.js defines his own renderHeaderCell(node) function.
#craig Thanks for the answer, in my case I only needed to know how to add HTML into the header cell and the renderHeaderCell(node) was definitely the answer.
For anyone else simply needing to add a <br>, <span>, <div> etc to the header cell, here's a couple of simple examples to compare:
Example without using renderHeaderCell(node):
{
label: 'Title',
field: appConfig.fields[0],
sortable: false
}
Example using renderHeaderCell(node):
{
renderHeaderCell: function(node) {
node.innerHTML = '<span class="headerCell">Title<br><br></span>'
},
field: appConfig.fields[0],
sortable: false
}
Then you can target with CSS as normal:
.headerCell {
font-size: 9px;
}
How to show a checkbox in a dojo datagrid?
I would suggest setting cellType to dojox.grid.cells.Bool, instead of the formatter.The formatter gives you much freedom, but also the responsibility of gathering the data from all the checkboxes (for all the rows) afterwards. Something like this as a structure-entry should do the trick:
{
name: "is awesome?",
width: "auto",
styles: "text-align: center",
type: dojox.grid.cells.Bool, editable: true
}
Please make sure to use a write-store (like ItemFileWriteStore) and not just a read-store, otherwise you will be disabled to actually check the checkbox :)
Use formatter function as described in Widgets Inside dojo.DataGrid
You can return new dijit.form.Checkbox from formatter function in dojo 1.4
You need the IndirectSelection plugin for the EnhancedGrid, here's a fiddle: http://jsfiddle.net/raybr/w3XpA/5/
You can use something like this, with Json
HTML
<table id="myGrid" dojoType="dojox.grid.DataGrid"
clientSort="true" autoHeight="true" autoWidth="true">
<script type="dojo/method">
showFields();
</script>
</table>
DOJO
showFields:function () {
dojo.xhrPost({
url:"/getFields.do",
timeout:2000,
handleAs:"json",
load:dojo.hitch(this, "displayInGrid")
});
},
displayInGrid:function (jsonResult) {
var dataStore = new dojo.data.ItemFileReadStore(
{ data:jsonResult }
);
var checkboxLayout = [
[
{name:'ID', field:"id" },
{name:'Value', field:"id", formatter:this.addCheckBox}
]
];
var grid = dijit.byId("myGrid");
grid.setStructure(checkboxLayout);
grid.setStore(dataStore);
},
addCheckBox:function (val) {
var checkbox = "<input type='checkbox' name='myfields' value='" + val + "/>";
return checkbox;
},
If you are trying to show a checkbox selector on each row of the grid you can follow this tutorial
http://dojotoolkit.org/documentation/tutorials/1.8/working_grid/demo/selector.php
If the type of the cell is a boolean, then its value is displayed as either the string true or false. If a check box is desired, setting the cellType to be dojox.grid.cells.Bool and marking it as editable will make a checkbox appear.
http://dojotoolkit.org/reference-guide/1.9/dojox/grid/DataGrid.html#editing-cells
From markup, do like this for the desired result:
<th field="booleanField" cellType="dojox.grid.cells.Bool" editable="true">Checkbox field</th>