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: []
});
});
Related
I have kendo MVC Grid and I have to set my page size to 50, so I need to freeze the column header while scrolling.
The question is : How can I freeze the column header while scrolling ?
When you create the Grid you should define the height in pixels as well as define scrollable as true.
Example:
var grid = $("#grid").kendoGrid({
dataSource: ds,
scrollable: true,
height : "150px",
columns : [
...
]
});
See this working here : http://jsfiddle.net/OnaBai/uuPW5/
Maybe this is something you were looking for:
https://github.com/jmosbech/StickyTableHeaders
Works quite well and you don't have to have scrollbars in your grid which makes it easier to work with.
You simply link provided script to your view and call this method on load:
$('#grid').stickyTableHeaders({
cacheHeaderHeight: true,
leftOffset: 1,
fixedOffset: ...
});
Parameters are optional but cacheHeaderHeight improves performance and I had to add leftOffset because of custom grid header borders and fixedOffset because of other sticky elements.
Just set the css of the grid header like this :
.k-grid-header {
position: sticky;
top: 0;
}
This answer has already been given for kendo UI, but here is how it's implemented for kendo MVC:
.Scrollable(scr => scr.Height(400))
It will give you a vertical scroll bar, allowing the user to scroll through the data while constantly seeing both the header and footer of the table. You can read more about it here: https://docs.telerik.com/aspnet-mvc/html-helpers/data-management/grid/scrolling/overview.
Trouble with this solution, however, is that the grid will be 400px tall, even when there is only one row of data. You can solve this like so
.Scrollable(scr =>
{
if (data.Count() < 10)
{
scr.Height("auto");
}
else
{
scr.Height(400);
}
})
I am trying to load different static html files into a KendoWindow based on a link the user clicks. I am using the following to load the content.
$(document.body).append('<div id="formWindow"></div>');
$('#formWindow').kendoWindow({
visible: false,
iframe: true,
height: "auto",
maxWidth: 700,
title: noticeTitle,
modal: true,
resizable: true,
width: 700,
refresh: function() {
this.center();
},
close: function(e) {
var dialog = $("#formWindow").data("kendoWindow");
dialog.destroy();
},
content: formContent
});
When I use "iframe: false", the window size (height) is the correct size. However I need an iframe because sometimes the loaded page is a form for submitting data and I don't want the whole browser page to change, just the contents of the KendoWindow. When "iframe: true" is used, the KendoWindow size is almost the height of the browser screen (i.e. way too tall).
I would like to be able to adjust the window to fit the dynamically loaded contents, but I cannot figure out how to use JavaScript or JQuery to get the height of the window contents.
My content is always balanced tags and a page fragment (i.e. no tags).
Thanks!
I don't think you can. However, I found this: http://www.telerik.com/forums/automatic-width-and-height-on-window#Gx4FWdFC8EG4JXoxoq2PLw
This is what the popup looks like now:
I want to make the actual popup bigger as well as all of the text boxes inside.
Apparently, this changes the size of the actual popup and then centers it on the screen, the problem now is that I don't know how to resize the text boxes inside. It is executed on the EDIT event of the grid:
window.setTimeout(function () {
$(".k-edit-form-container").parent().width(800).height(400).data("kendoWindow").center();
}, 100);
Does anyone know how to do this?
Can you just use regular CSS? Like:
.k-edit-form-container .k-textbox,
.k-edit-form-container .k-widget
{
width: 600px;
}
You just have to make the selectors be a bit more specific that Kendo's built-in ones.
You can just delete the "parent"
window.setTimeout(function () {
$(".k-edit-form-container")
.width(800)
.height(400)
.data("kendoWindow")
.center();
}, 100);
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
If table contains big multi-line text column, pressing jqgrid view toolbar button creates view window
with big height and without scrollbar. Most of data is outside screen and is not visible.
I tried to add scrollbars and restrict its height using
jQuery.extend(jQuery.jgrid.view, {
savekey: [true, 13],
recreateForm: true,
closeOnEscape: true,
dataheight: screen.height-230,
height: 0.82* screen.height,
width: 0.96*screen.width,
top:5
});
but those settings are ignored ( they work for edit window only if jQuery.jgrid.edit is used).
How to add scrollbar(s) and retrict view window height if it contains more data than fits to screen ?
I suggest to get the demo from the answer and extend the code a little. In the method beforeShowForm I suggest to include additional line
$(this).children("span").css({
overflow: "auto",
"text-align": "inherit", // overwrite 'text-align: "right"' if exist
display: "inline-block",
"max-height": "100px"
});
You can see the results on the demo. The height of the View form will be variable, but the maximal height of every field will be restricted to 100px (see max-height above):
or