I was able to reproduce the functionality on the following demo:
https://demos.telerik.com/kendo-ui/cards/drag-and-drop
I would like to be able to apply this to a dashboard screen where the user is able to move the widgets/cards around. What can I use to save as a preference for the order of the cards/widgets? Is there an attribute or parameter that tells the Kendo List where it should be in the list? That way the next time they come to the page the cards will be in the order they last saved them in.
Hi, Dev Team!
I use Cards with "k-card-deck" class. How i can do stretched link in every "k-card" inside "k-card-deck"?
need something like that:
<div class="k-card-deck">
<div class="k-card">
</div>
<div class="k-card"></div>
</div>
Is it possible to put cards inside a div and to filter those cards based on the value it contains and well as sort the cards.?
Is there any demo available for that?
I am using the material theme and here is my adjusted kendo.common.css to get rid of border radius that used to be 4px but I've switched to 0px. I'm attempting to get rid of the slanted borders in the header and footer of the card as shown in the attached image. I just wanted a standard flush border instead of the 45 degree angle cut off.
What do I need to change in the CSS to get this to work right?
.k-card{border-radius:0px;border-width:1px;border-style:solid;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;overflow:hidden}
.k-card.k-card-flat{box-shadow:none}
.k-card-header{padding:4px 8px;border-width:0 0 1px;border-style:solid;overflow:hidden}
.k-card>.k-card-header:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-header:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-header>h1,.k-card-header>h2,.k-card-header>h3,.k-card-header>h4,.k-card-header>h5,.k-card-header>h6{margin:0}
.k-card-body{padding:8px 8px;-ms-flex:1 1 0px;flex:1 1 0}
.k-card>.k-card-body:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-body:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-body p{margin:0 0 8px}
.k-card-body>.k-last,.k-card-body>:last-child{margin-bottom:0}
.k-card-image{border:0;max-width:100%;overflow:hidden}
.k-card>.k-card-image:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-image:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card-image>img{border:0;max-width:100%}
.k-card-title{margin:0 0 8px}
.k-card-subtitle{margin:0 0 8px}
.k-card-title+.k-card-subtitle{margin-top:-6px}
.k-card>.k-hr{margin:0;-ms-flex:0 0 auto;flex:0 0 auto;border-color:inherit}
.k-card-actions{padding:8px 8px;border-width:0;border-style:solid;border-color:inherit;overflow:hidden;-ms-flex-negative:0;flex-shrink:0;-ms-flex-preferred-size:auto;flex-basis:auto}
.k-card>.k-card-actions:first-child{border-top-left-radius:0px;border-top-right-radius:0px}
.k-card>.k-card-actions:last-child{border-bottom-right-radius:0px;border-bottom-left-radius:0px}
.k-card>.k-card-actions{border-top-width:1px;border-color:inherit}
.k-card-actions>.k-button.k-flat:first-child{margin-left:-8px}
.k-card-action{border-width:0;border-style:solid;border-color:inherit;display:-ms-inline-flexbox;display:inline-flex;-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-action>.k-button{border-radius:0;padding:12px 8px;-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-actions-vertical{padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}
.k-card-actions-vertical .k-card-action+.k-card-action{border-top-width:1px}
.k-card-actions-stretched{padding:0;display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row}
.k-card-actions-stretched .k-card-action+.k-card-action{border-left-width:1px}
.k-card-list{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-list .k-card{-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-list .k-card+.k-card{margin-top:16px}
.k-card-deck{display:-ms-flexbox;display:flex;margin-top:16px;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-deck .k-card{-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-deck .k-card+.k-card{margin-left:16px}
.k-card-deck-scrollwrap{display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center}
.k-card-deck-scrollwrap>.k-button{border-radius:0;-ms-flex:0 0 auto;flex:0 0 auto;position:absolute}
.k-card-deck-scrollwrap>.k-button:first-child{left:-1px}
.k-card-deck-scrollwrap>.k-button:last-child{right:-1px}
.k-card-deck-scrollwrap>.k-card-deck{-ms-flex:1 1 auto;flex:1 1 auto}
.k-card-group{display:-ms-flexbox;display:flex;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-group .k-card{border-radius:0;-ms-flex:0 0 auto;flex:0 0 auto}
.k-card-group .k-card>.k-card-header{border-radius:0}
.k-card-group .k-card+.k-card{margin-left:-1px}
.k-card-group .k-card.k-first{border-bottom-left-radius:0px;border-top-left-radius:0px}
.k-card-group .k-card.k-first>.k-card-header{border-top-left-radius:0px}
.k-card-group .k-card.k-last{border-top-right-radius:0px;border-bottom-right-radius:0px}
.k-card-group .k-card.k-last>.k-card-header{border-top-right-radius:0px}
.k-card-group .k-card.k-only{border-radius:0px}
.k-card-group .k-card.k-only>.k-card-header{border-top-left-radius:0px;border-top-right-radius:0px}