Just needed to check a quick example for reference and I've discovered all the samples have been rewritten to include a bunch of fluff. Here is the new example for the textbox. THE TEXTBOX... this is the example??? Who thought this was a good idea? It seems like someone was given a task to make sure the examples are up to date and some very eager beaver who jumps on every new web dev bandwagon but loses sight of what the end user experience is like, or their fellow coding team members. I have always told people 'and telerik has good documentation and examples' but I can't honestly say that now. After using it for 15 years, I'm so disappointed in what happened to kendo.
Reminder, this is the first example for kendo text box:
<body>
<div class="demo-wrapper k-d-grid k-gap-8 k-flex-1 k-px-8 k-pt-7">
<div data-role="skeletoncontainer" class="side-container k-skeleton k-opacity-20 !k-d-flex k-flex-col k-align-items-center k-px-5 k-pt-7.5 k-rounded-tl-md k-rounded-tr-md" aria-live="polite" aria-label="Loading...">
<span class="k-skeleton k-opacity-80 k-skeleton-circle k-w-18 k-h-18 k-mb-5"></span>
<div class="k-d-flex k-flex-col k-align-items-center k-gap-1">
<span class="k-skeleton k-w-24 k-h-4 k-rounded-md"></span>
<span class="k-skeleton k-opacity-80 k-w-14 k-h-2.5 k-rounded-md"></span>
</div>
<div class="k-d-flex k-flex-col k-w-full k-mt-13 k-gap-4">
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
<div class="k-skeleton k-opacity-80 k-rounded-md k-h-2.5"></div>
</div>
</div>
<div class="main-container k-pb-8 k-d-flex k-flex-col">
<div class="k-d-flex k-gap-3 k-align-items-center k-mb-5">
<span class="avatar !k-d-none k-skeleton k-opacity-30 k-skeleton-circle k-w-12 k-h-12"></span>
<h4 class="k-h4 k-opacity-20 k-font-bold">My Profile</h4>
</div>
<span class="k-d-inline-block">Name</span>
<input id="textbox" />
<div class="k-d-flex k-flex-col k-gap-1 k-mt-5">
<span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
<span class="k-skeleton k-opacity-30 k-rounded-md k-h-7.5"></span>
</div>
<div class="k-d-flex k-flex-col k-grow k-gap-1 k-mt-5">
<span class="k-skeleton k-opacity-40 k-rounded-md k-w-24 k-px-3 k-h-4"></span>
<span class="content-expanded k-grow k-skeleton k-opacity-30 k-rounded-md k-h-20"></span>
</div>
</div>
</div>
<script>
$(document).ready(function() {
// create TextBox from input HTML element
$("#textbox").kendoTextBox({
value: "John Smith",
clearButton: true
});
});
</script>
<style>
.demo-wrapper {
grid-template-columns: 180px 1fr;
}
.k-h4 {
line-height: 26px;
margin-bottom: 0;
}
.kd-nodata-wrapper{
display: block !important;
padding-top: 20px !important;
}
/* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
@media (max-width: 678px), (min-width: 821px) and (max-width: 1038px), (min-width: 1241px) and (max-width: 1328px) {
.demo-wrapper {
grid-template-columns: 1fr;
}
.avatar {
display: block !important;
}
.side-container {
display: none !important;
}
.main-container {
padding-bottom: 0;
}
.content-expanded {
border-end-end-radius: 0;
border-end-start-radius: 0;
}
}
/* Breakpoint for full screen demo: max:359px */
@media (max-width: 476px) {
.avatar {
width: 32px;
height: 32px;
}
}
</style>
</body>(p.s., the list of tags to select from when submitting a question aren't in alphabetical order. Who is making these decisions???)
1 Answer, 1 is accepted
Hi Ody,
Thank you for your feedback. It is very important for us, and we really appreciate it.
The updates to the Kendo UI for jQuery demos aim to reflect modern web development practices, including responsive design and integration with UI patterns. The goal is to help users see how components can work in realistic scenarios, but I understand that this can sometimes make it harder to quickly reference a simple example.
Decisions about demo structure are made by the product and design teams to keep the resources relevant for a wide range of users.
However, we also provide a lot of examples with minimal configurations and no additional styles or functions. Most of the Overview demos for the different components not demonstrate a basic scenario. The reason for this is that the basic configuration can be seen in the rest of the Demos, in the APi, and also in the documentation. Below you will find such links for the TextArea component:
- https://www.telerik.com/kendo-jquery-ui/documentation/controls/textarea/get-started
- https://demos.telerik.com/kendo-ui/textarea/events
- https://www.telerik.com/kendo-jquery-ui/documentation/api/javascript/ui/textarea/configuration/value
In case you have additional questions or comments, do not hesitate to contact us.
Regards,
Neli
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.