Is it possible for the Kendo UI for Angular Grid Detail expand/collapse button to be moved to the right of the grid?
It appears that kendo-ui defaults the expand/collapse to the left most column of the kendo grid. I need to see if it is possible to move it to the button to the right.
We can implement it by hiding the current +/- icons using some custom CSS and manually adding such icons to the last column. Then we would need to programmatically expand and collapse the detail template, when clicking the icons in the last column, by using the expandRow and collapseRow functions of the grid.
Combine these plunkers to see
https://plnkr.co/edit/hc8eYXNTZyFqfRvOiCrc?p=preview
.k-icon.k-plus:before {
content: none;
}
.k-icon.k-minus:before {
content: none;
}
.k-icon.k-plus, .k-icon.k-minus{
pointer-events: none;
}
.k-detail-cell{
overflow: visible !important
}
.k-detail-cell section{
margin-left: -32px;
}
https://plnkr.co/edit/HaCEdMYUtAj4RlpebQnj?p=preview
//import components
import {
GridComponent,
GridDataResult,
DataStateChangeEvent
} from '#progress/kendo-angular-grid';
//get the child
#ViewChild(GridComponent) grid: GridComponent;
//modify your logic here
public ngAfterViewInit(): void {
// Expand all first rows initially
for(let i = 0; i < this.pageSize; i++) {
this.grid.expandRow(i);
}
}
Related
We are adding custombuttons to our fullcalendar like below.
Is there a way to change the background and foreground color of the button?
And is there a way to set padding or margins to the custom buttons?
var calendar = new Calendar(calendarEl, {
customButtons: {
myCustomButton: {
text: 'custom!',
click: function() {
alert('clicked the custom button!');
}
}
},
headerToolbar: {
left: 'prev,next today myCustomButton',
center: 'title',
right: 'dayGridMonth,timeGridWeek,timeGridDay'
}
});
Yes, you can set any properties you like using CSS.
On inspecting how fullCalendar renders the buttons in HTML, I noticed it gives each one a class according to the property name of the button.
For example, if - per your sample code - you call the button myCustomButton then fullCalendar will give the rendered <button a CSS class called fc-myCustomButton-button. This means you can specify any rules you like for that class, e.g.:
.fc-myCustomButton-button
{
background-color: red !important;
}
(You need the !important so that fullCalendar's other CSS rules don't override it.)
Demo: https://codepen.io/ADyson82/pen/WNJqXLM
I am working on a react project and I am creating a note taking application with a simple text editor. I have a simple note component that is just a div element with an h3 inside that has these styles:
note {
border-bottom: 1px solid gray;
width: 100%;
padding: 1rem;
box-sizing: border-box;
}
.note h3 {
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
}
.note:hover {
cursor: pointer;
}
.note.selected {
background: #c9d4d1;
}
Here is also the React code for the note component:
import { useContext, useEffect } from 'react';
import { NotesContext } from '../../App';
import { ResponsiveContext } from '../containers/AppContainer/AppContainer';
import './Note.css';
const Note = ({ note }) => {
const { selectedNoteId, setSelectedNoteId } = useContext(NotesContext);
const toggleEditorView = useContext(ResponsiveContext);
const handleClick = () => {
setSelectedNoteId(note.id);
toggleEditorView();
console.log(note.id);
}
const calculateStyles = selectedNoteId === note.id ? 'note selected' : 'note';
return (
<div onClick={handleClick}
className={calculateStyles}>
<h3>{note.displayTitle || 'New Note'}</h3>
</div>
)
};
export default Note;
I also have a note list which lists all the notes on the left but posting that code as well would make this post so long, you can go to the github repo to see all the code.
When I try to style the text using the text editor and make it a heading (this happens only when I try to make it a heading, when I try to make the text bold and italic it works fine) the first note's text gets pushed to the left if it is long enough (it only happens on the first note no matter which note you are styling with the text editor) and I don't see any updates through the elements tab on the dev tools the element doesn't flash. It is kind of hard to explain what the problem is so I recorded a video showing the exact problem that I am having.
Since I have to use property container="body" ->
https://github.com/ng-bootstrap/ng-bootstrap/issues/1012
My dropdown is attached to the body(correct me if i'm wrong...).
So it means I can't inherit width from parent (ngbDropdown)-> ngbDropdownMenu.
How I can set the same width for dropdown menu and button??
NgbDropdown with width: inherit but without property container="body"
ngbDropdown with width: inherit but with property container="body"
So I need property container="body"
but still want to inherit width from button
I have the solution for this! It is a combination of a few techniques. I added some Typescript code that listens for the openChange event emitted by the Dropdown. At that time I grab the width of the hostElement which is the Dropdown's trigger. I use that to set the width of the .dropdown that was appended to body. Now, my CSS will work which sets .dropdown-menu width to 100%. Unfortunately this causes a brief flash where the user can see the dropdown at the normal width before it changes to 100% of the trigger's width. To fix that I use some CSS to control the opacity of the .dropdown-menu.
1) Hook the (openChange) event of ngbDropdown:
<div
ngbDropdown #dropdown="ngbDropdown" container="body"
#hostElement (openChange)="fixDropdownWidth(hostElement)">
I am using a Template Variable to grab a reference to the hostElement and I pass that element as a parameter to my function fixDropdownWidth() in my Component:
2) Fix function of Component:
fixDropdownWidth(hostElement: HTMLDivElement) {
setTimeout(() => {
let bodyDD: HTMLDivElement[] = <HTMLDivElement[]>Array.from(this._document.body.children).filter((child: HTMLDivElement) => child.className.indexOf('dropdown') >= 0);
if (bodyDD && bodyDD.length) {
this._renderer.setStyle(bodyDD[0], 'width', hostElement.clientWidth + 'px');
this._renderer.addClass(bodyDD[0].children[0], 'fixed');
}
}, 0);
}
I must use setTimeout() here because .dropdown is actually not yet added to DOM.
3) This is using Angular Renderer2 which needs to be injected to your constructor along with Angular #DOCUMENT:
constructor(#Inject(DOCUMENT) private _document: any, private _renderer: Renderer2) { }
You will need to add some imports to your Component for these:
import { Renderer2 } from '#angular/core';
import { DOCUMENT } from '#angular/common';
4) Final piece of the puzzle is the CSS which makes .dropdown-menu opacity 0 by default, until the width has been "fixed". See here also the min-width: 100% which is making the dropdown the same width as the trigger with CSS.
body > .dropdown > .dropdown-menu {
min-width: 100%;
opacity: 0;
transition: opacity 150ms ease-in-out;
&.fixed {
opacity: 1;
}
}
All together now, what happened?
We tapped into the openChange event emitted by ngbDropdown.
At that time we grabbed the hostElement's width and set the .dropdown-menu's container .dropdown to have the same width, that way our CSS rule of min-width: 100% will work
Because the dropdown-menu briefly flashes we turned the opacity to zero.
In our fix routine we set a class of "fixed" which reveals the dropdown with opacity: 1 after the width has been set correctly.
Final thing to mention is I added a Github issue for this:
https://github.com/ng-bootstrap/ng-bootstrap/issues/3523
Requested to have the ng-bootstrap framework set hostElement's width so we won't have to do this workaround.
I'm stuck on a problem. I am using Kendo MVC and want to display font awesome icon in Grid Custom commands.
I have defined Grid Custom Commands for Edit, Delete, and Detail.
columns.Command(command =>
{
command.Custom("Edit").Action("Edit", "User");
command.Custom("Details").Action("Details", "User");
command.Custom("Delete").Action("Delete", "User");
}
Please review the following screenshot. I want to auto-add the fa fa-edit and other icons using MVC Helper extension method.
It is possible to override the CSS for the edit/details/delete command buttons which gives you the option to apply the same style for all pages or just one, for example:
.k-grid-content .k-button.k-grid-edit::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-delete::before {
content: "\f1f8" !important;
}
And when grid transitions (after placed into edit mode):
.k-grid-content .k-button.k-grid-update::before {
content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-cancel::before {
content: "\f1f8" !important;
}
Here is the a complete Dojo example and all Font Awesome icons along with their CSS values.
I have a sortable list of items that returns results based on what the user types in the search box. The results always overflows and here i am using the following css for it:
#list { overflow-x: visible; overflow-y: hidden; }
This allows me to have only a vertical scrollbar. I then drag the individual li's that are in the list over to a droppable area. The sortable functionality is added to the list using the JQuery below:
$("#list").sortable({
connectWith: ".connectedSortable",
helper: 'clone',
appendTo: 'body',
zIndex: 999
});
The reason i use the appendTo: 'body' is to ensure that the item that is being dragged is on top of everything and will not be under the list's other items when being dragged. However, whenever I drag any item from the list, the DIVs that are in the item will have their CSS styling gone.
I understand that this is due to the fact that when the item is dragged, it is appended to 'body' and thus does not have any parent to inherit the original CSS styles.
My question is how do i style the dragged item back to its original styling to make sure it stays the same even if I am dragging/not dragging it? through the events?
EDIT:
Found the reason for the css messing up. It was a random br thrown in between two div's causing it to be interpreted differently when the item was being dragged and appended to the body.
You have two options to sort the problem. One is to create your own helper with the function. This way you can style is any way you want, wrap it in an element, add classes, etc.
The following demo shows the difference, the top one works, the bottom one is broken. http://jsfiddle.net/hPEAb/
$('ul').sortable({
appendTo: 'body',
helper: function(event,$item){
var $helper = $('<ul></ul>').addClass('styled');
return $helper.append($item.clone());
}
});
The other option is not to use append:'body', but to play with zIndex. Your zIndex:999 clearly has no effect, since the default value is 1000. :) The problem with zIndex is that it only matters for siblings, elements within the same parent. So if you have another sortable on your form with a greater zIndex than your current sortable, its items could easily be on top of your dragged one, regardless of the zIndex of your currently dragged item.
The solution is to push your whole sortable on top when dragging starts and restore it when it stops:
$('#mySortable').sortable({
start: function(){
// Push sortable to top
$(this).css('zIndex', 999);
},
stop: function(){
// Reset zIndex
$(this).css('zIndex', 0);
}
});
If the original value matters, you can even save the original zIndex with .data() and retrieve it afterwards.
Thank you DarthJDG. I am aware this thread is a little old but I hope to help others that had the same issue I did.
I had to edit your solution a little bit because the styling was off when appending the item to the helper. I ended up just recreating the list element. Just in case others run into the same issue I did.
I added this into the area where I created the sortable.
I took the text out of the sortable and created a new list item with that as text.
Javascript:
appendTo: 'body',
helper: function(event,$item){
console.log(event);
var $helper = $('<ul class = "styled" id="' + event.originalEvent.target.id + '"><li>' + event.originalEvent.target.innerText + '</li></ul>');
return $helper;
}
I was then able to add custom styling to the draggable object, including custom text with out an issue. The styling I ended up using was that of JQuery Smoothness.
CSS:
.styled li{
margin-left: 0px;
}
.styled{
cursor:move;
text-align:left;
margin-left: 0px;
padding: 5px;
font-size: 1.2em;
width: 390px;
border: 1px solid lightGrey;
background: #E6E6E6 url(https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x;
font-weight: normal;
color: #555;
list-style-type: none;
}