Telerik Forums
Kendo UI for jQuery Forum
1 answer
45 views
How can I replicate a kendo template, for example a card. Filling it with information from a database or with a service consumed by ajax?
Nikolay
Telerik team
 answered on 18 Jul 2023
0 answers
77 views

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.

Dominic
Top achievements
Rank 1
Iron
 asked on 10 Feb 2022
2 answers
87 views

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>

Petar
Telerik team
 answered on 28 Feb 2020
2 answers
253 views

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?

Dimitar
Telerik team
 answered on 15 Jan 2020
1 answer
491 views

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}

Dimitar
Telerik team
 answered on 02 Oct 2019
Narrow your results
Selected tags
Tags
+? more
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Dominik
Top achievements
Rank 1
Giuliano
Top achievements
Rank 1
Dominic
Top achievements
Rank 1
Glendys
Top achievements
Rank 1
Iron
NoobMaster
Top achievements
Rank 2
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?