I am using Tempus Dominus Bootstrap-4 datetime picker
I am initializing it like this:-
$("div[id*='BookingDate']").datetimepicker({
inline: true,
sideBySide: true,
format: 'L',
allowMultidate: true,
viewDate: moment('2019-08-10', 'YYYY/MM/DD'),
minDate:new Date('2019-06-20'),
maxDate:new Date('2024-06-20'),
});
I need to enable particular weekdays and highlight them. How can I do that?
To enable only certain weekdays, you can use the daysOfWeekDisabled option to disable any weekdays that you don't want enabled, and thus enable the ones you don't include in your list. For instance, to disable weekends, add daysOfWeekDisabled: [0, 6] to your datetimepicker options:
$(function() {
$('#datetimepicker1').datetimepicker({
inline: true,
sideBySide: true,
format: 'L',
allowMultidate: true,
viewDate: moment('2019-08-10', 'YYYY/MM/DD'),
minDate:new Date('2019-06-20'),
maxDate:new Date('2024-06-20'),
daysOfWeekDisabled: [0, 6]
});
});
As for highlighting the enabled days, you can apply a custom CSS rule to change the background-color on the day elements that are not disabled and not active like so:
#datetimepicker1 > div > ul > li.show > div > div.datepicker-days > table > tbody > tr > td:not(.disabled):not(.active) {
background-color: #7abaff;
}
This assumes that your HTML has a certain structure, but you can mess around in the Chrome inspector and copy the CSS selector for the day elements to make it work in your setup.
I've created a JSFiddle as a demo that shows how this looks. Hope this helps!
Related
This is a working example you can take
<input type="text" id="ddl" />
<button>Change value</button>
<script>
var ddl = $("#ddl").kendoDropDownList({
dataTextField: "name",
dataValueField: "id",
filter: "contains",
dataSource: {
data: [
{id: 1, name: "apples"},
{id: 2, name: "oranges"},
{id: 3, name: "apples2"},
{id: 4, name: "oranges2"}]
}
}).data("kendoDropDownList");
$("button").on("click", function(){
ddl.dataSource.filter("")
ddl.value(2);
});
</script>
http://dojo.telerik.com/#plazarov/EmAni
Click on the dropdown list and filter it in Edge
Now clear the filter by selecting 'x' mark on the input text field. The filter wont get cleared.
Is it a bug in Kendo control?
You could argue it's a Kendo bug yes, see their example which suffers the same problem (in IE/Edge):
http://demos.telerik.com/kendo-ui/dropdownlist/serverfiltering
But you could also argue that it's the browser poking it's nose in and adding this "clear" button to the input field. You can suppress it with simple CSS: (credit to Remove IE10's "clear field" X button on certain inputs?)
.someinput::-ms-clear {
display: none;
}
See working example here: http://dojo.telerik.com/oguYo
Interestingly the Kendo styles suppress this too instead of making it work with the widgets, I found 2 uses of it in the common CSS just at a glance:
.k-widget ::-ms-clear{width:0;height:0}
.k-multiselect-wrap .k-input::-ms-clear{display:none}
Presumably they missed this instance though, good spot!
It seems it's bug. And the previous "answer" is not an answer.
For both examples http://dojo.telerik.com/#plazarov/EmAni and http://dojo.telerik.com/oguYo you need click twice for clearing the filter.
I don't find a solution too.
But it works if you clear a selected value:
http://dojo.telerik.com/ocUlEkAd/2
When editing content that includes a table in ckeditor, it shows a border around table cells even though there is no border in the markup. This seems to be a convenience feature, so I'd like to be able to toggle it, perhaps via a checkbox in the toolbar. Is this possible? Perhaps there is a plugin of some sort that I have not configured? Thanks for your help.
Screen shot of table borders
This this best example to hide table border. Key player is : startupShowBorders: false,
$(function () {
var editor = CKEDITOR.replace("textarea", {
width: 750, height: 500, fullPage: true,
extraPlugins: 'stylesheetparser',
allowedContent: true,
qtBorder: '0',
startupShowBorders: false,
////pasteFilter: 'semantic-content',
//// Custom stylesheet for editor content.
//// contentsCss: ['content/css/html-email.css'],
//// Do not load the default Styles configuration.
stylesSet: []
});
});
I am using a tablesorter plugin with filter, paging and sorting on a big table. The style is applying very slow on page load (user sees an unformatted table). I was thinking to simply hide the table until it is completely loaded.
How can I achieve this?
Here is my tableSorter initialization code:
$("#report").tablesorter({
theme: 'blue',
widthFixed: true,
widgets: ["zebra", "filter", "savePagerSize"],
widgetOptions: {
filter_childRows: false,
filter_columnFilters: true,
filter_cssFilter: 'tablesorter-filter',
filter_filteredRow: 'filtered',
filter_formatter: null,
filter_functions: null,
filter_hideFilters: false,
filter_ignoreCase: true,
filter_liveSearch: true,
filter_searchDelay: 300,
filter_serversideFiltering: false,
filter_startsWith: false,
filter_useParsedData: false
}
}).tablesorterPager({
container: $("#pager")
});
You can hide the table by default and set the Style as Display: none.
And make is visible in Document ready by changing style to display = 'block'.
works for me.
In some cases, it's helpful to display some of the rows for positioning purposes. In that case, you start by hiding some of the rows while the page loads so it doesn't have as much rendering work to do, and then once the table's been initialized, make sure they're all visible.
/* hide bulk of table until it's been initialized'*/
.tablesorter tbody tr:nth-child(n+10),
.tablesorter tfoot tr {
display: none;
}
/* if we've been decorated, we've been initialized */
.tablesorter.tablesorter-bootstrap tbody tr,
.tablesorter.tablesorter-bootstrap tfoot tr {
display: table-row
}
Tablesorter will automatically decorate the table with any widget classes once it's been initialized. If you don't have any widgets, you can add your own class to the table by tapping into the tablesorter-initialized event
$("table").tablesorter({
// this is equivalent to the above bind method
initialized : function(table){
$(table).addClass('tableInit');
}
});
Demo in Plunker
Ive been through all the posts, finally got setCell to work with hardcoded values, but not using the options.rowId.
function StatusFormatter(cellvalue, options, rowObject) {
if (cellvalue == 'C'){
jQuery("#list").setCell(options.rowId , 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell("[2.000]", 'SOORDLINE', '', { color: 'red' });
jQuery("#list").setCell('[2.000]', 'SOREQDATE', '', { color: 'red' });
jQuery("#list").setCell(options.rowId, 'SOPRICE', '', { color: 'red' });
}
return cellvalue;
};
The FIRST and LAST lines dont work, but the 2 with the hardcoded rowId DO work. I inspected what comes back in the option.rowId and they are the same as the hardcoded values, (just different depending on the row of course. What am I missing? Please help. I dont see any difference between the lines, or values.
EDITED-
I tried the answer, and it seems to be what I need. I tried the following
{ name: 'SOORDLINE', index: 'SOORDLINE', width: 25, search: false ,celattr: function () { return ' style="color: red"'; }
},
To aleast make them all red before I dove into the logic, and it didnt do anything for me.
Sorry, but you use custom formatter in absolute wrong way. The goal of the custom formatter to to provide HTML fragment to fill the content of the cells in the corresponding column. So the StatusFormatter will be called before the row with the id equal to options.rowId will be created. Moreover for performance purpose one use typically gridview: true. in the case the whole content of the grid (the whole body of the grid) will be constructed first as string and only after that will be placed in the grid body in one operation. It improve the performance because after placing of any element web browser have to recalculate position of all other elements on the page.
If you want to set text color on the SOORDLINE cell you should cellattr instead:
celattr: function () { return ' style="color: red"'; }
The celattr can be used also in the form celattr: function (rowId, cellValue, rawObject) {...} and you can test the property of rawObject which represent of the values for any column and return the cell style based on the cell value.
Alternatively you can enumerate the rows inside of loadComplete and set the style on <tr> element instead of setting the same styles for every row. See the answer as an example.
Is it possible to disable the pagination (First, Previous, Next, last) links in the tablesorterpager plugin of jQuery. This is my code in jQuery
jQuery('#mentor_engagement_report_table')
.tablesorter({ debug: false, sortList: [[0, 0]], widgets: ['zebra'] })
.tablesorterPager({container: jQuery("#pager"), positionFixed: false,size:10});
I've created a fork of the tablesorter plugin on github. After reading this question, I added a new option to the pager plugin named updateArrows which when true it applies a class name, contained in the new cssDisabled option to the arrows. Here is the initialization code and a demo:
$("table")
// initialize tablesorter
.tablesorter()
// initialize the pager plugin
.tablesorterPager({
// target the pager markup
container: $("#pager"),
// disabled class name to use
cssDisabled : 'disabled',
// apply disabled class name to the pager arrows when the rows at either extreme is visible
updateArrows: true
});
And here is some example of css used in the demo:
/*** css used when "updateArrows" option is true ***/
/* the pager itself gets a disabled class when the number of rows is less than the size */
#pager.disabled {
display: none;
}
/* hide or fade out pager arrows when the first or last row is visible */
#pager img.disabled {
/* visibility: hidden */
opacity: 0.5;
filter: alpha(opacity=50);
}
There is only pagination if you use the Pager Plugin, if not, not a thing will have pager part...
if you would like just to hide the pager
after your javascript code add:
$(".pager").hide();
Your question should be, Why do i want to hie the pager area? if I only want to shown 10 rows, the data should only contain 10 rows ...
It would be easier if you posted your whole code, and be more clear to what you want.
do you still want to select the row count per page?
then try this: http://jsfiddle.net/q66TA/
If you don't want anything from the pager, don't use it..
Update:
If you need the current page number and the total page count, you'll need to add this functionality to the plugin. There is a callback addon/patch available for this:
http://www.vinertech.com/patches/tblsorter.pager.cbk.patch
More on this: http://daveviner.blogspot.com/2009/12/jquery-tables-and-administrative.html
The best way, and what we use on all our's that require a view all button, is to use the plugin itself's way of disabling it.
This is brought directly from their site http://mottie.github.io/tablesorter/docs/example-pager.html
The code used is real simple actually:
// Disable / Enable
// **************
$('.toggle').click(function(){
var mode = /Disable/.test( $(this).text() );
$('table').trigger( (mode ? 'disable' : 'enable') + '.pager');
$(this).text( (mode ? 'Enable' : 'Disable') + ' Pager');
return false;
});
$('table').bind('pagerChange', function(){
// pager automatically enables when table is sorted.
$('.toggle').text('Disable Pager');
});
<button type="button" class="toggle">Disable Pager</button>