Leveraging personalized styles in Kendo UI

Currently, I am utilizing the robust Kendo UI HTML Framework within my web application for its exceptional support of MVVM functionality.

While I appreciate the convenience that Kendo offers with MVVM, I am in need of a solution that allows me to leverage the flexibility of Kendo MVVM without solely relying on Kendo Widgets. In other words, I am looking to directly bind the observable objects provided by Kendo to HTML elements like divs and tables.

For instance, if I have a datasource object within the kendo.observable view model, let's say viewModel.dtSource, I can easily connect it to a Kendo Grid as demonstrated in the code snippet below:

$("#grid").kendoGrid({
    dataSource: viewModel.dtSource,
    height: 550,
    columns: [{
        field: "firstname",
        title: "First Name"
    }, {
        field: "address",
        title: "Address"
    }, {
        field: "contact",
        title: "Contact"
    }, {
        field: "gender",
        title: "Gender"
    }],
});

However, my goal is to bind the kendo observable object viewModel.dtSource directly to an HTML table instead of utilizing the Kendo Grid.

Do you know if this is achievable?

Answer №1

Absolutely! It is indeed possible. Kendo UI takes inspiration from Knockout JS, but with its own unique features. If you're looking for a way to implement Kendo MVVM without relying on kendo widgets, check out this useful example here

Answer №2

Utilizing the Kendo Grid can really enhance your project if you take the time to set it up correctly. It can be quite challenging to structure regular HTML to effectively manage dynamic lists of data. One solution to this could be leveraging Kendo's Template system and implementing for loops.

While the dtSource.schema is not mandatory, it can be quite beneficial for organizing and interacting with your data.

var viewModel = kendo.observable({
    dtSource: new kendo.data.DataSource({
        schema: {
            model: {
                fields: {
                    firstname: { type: "string" },
                    address: { type: "string" },
                    contact: { type: "string" },
                    gender: { type: "string" }
                }
            }
        }
    })
});
kendo.bind("body", viewModel);
viewModel.dtSource.add({
    firstname: "John",
    address: "123 Main St",
    contact: "555-1212",
    gender: "Male"
});
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.blueopal.min.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js"></script>

<div data-role="grid"
     data-height="550"
     data-bind="source: dtSource"
     data-sortable="true"
     data-columns="[
         { field: 'firstname', title: 'First Name' },
         { field: 'address', title: 'Address' },
         { field: 'contact', title: 'Contact' },
         { field: 'gender', title: 'Gender' }
     ]"></div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Inject HTML from an external source into several div elements that share the same class

I am currently working on creating a portfolio showcasing my music albums through CD covers. On my portfolio page, I have all the content of my albums loaded initially, but it is hidden within divs. When an album is clicked, the content expands and colla ...

Adjust the checkbox dimensions within the cells of a bootstrap table

I am utilizing bootstrap-table along with a column containing checkboxes. I need to adjust the size of the checkboxes in my code to be 25x25 pixels. However, when I try using the height and width CSS attributes, it does not seem to take effect. html < ...

"Returning undefined: The outcome of using jQuery's .html() method on

I am having an issue with the JavaScript function I have created to load content from another URL into the current document. For some reason, both contentHtml and menuHtml variables are showing as undefined. Can someone please help me identify where I we ...

What is the best way to ensure that the width of a div fills its parent container?

I need my divs(.give, .sep, .take) to completely fill the width of its parent container (.trade). This is the HTML code: <div class="trade"> <div class="give"></div> <div class="sep"></div> ...

Achieving a horizontal alignment of these four div elements containing images

I need some assistance with aligning the divs using the .acontainer class. It was working perfectly before adding the images, but now it's all messed up. I've tried various adjustments and searches online, but I'm still stuck. Thank you for ...

Issue with image not fully encompassing div in Bootstrap 5

Currently working on a grid layout with images within the Bootstrap 5 framework. Here is the code snippet for the grid: #project_images img { height: 100%; width: 100%; object-fit: cover; } <section> <div class="container" id ...

Tips for extracting data from a JQuery table with Python

My goal is to extract information from the top ten items on a manga website using Python Selenium/BeautifulSoup. However, I am facing challenges due to the website loading its content through a jquery script. The tutorials and guides I have followed do not ...

Creating a unified border style for both <p> and <ul> tags in HTML5

Is there a way to have both paragraphs and unordered lists contained within the same border? I initially thought I could achieve this by placing the list inside the paragraph tag, but that does not seem to work. Below is a snippet of my external style sh ...

Ways to emphasize the four edges of a table cell using border-collapse collapse

I am trying to emphasize the borders of cells with the class active. The challenge arises from the fact that the table's border-collapse property is set to collapse, causing the top and left borders of cells (except for the leftmost and top row cells ...

Efficiently incorporating styles and CSS, as well as Bootstrap CDN, into window.print() while utilizing Vue.js

I am trying to print from my Vuejs component and apply CSS and Bootstrap styles to the printed page. Currently, I am using window.print() inside the mounted lifecycle hook as shown below: export default { mounted() { ...

Method for setting a checkbox as checked based on whether its value can be found in an array

I currently have the following input fields: <div id="my"> <input type="checkbox" value="1" name="names[]"> <input type="checkbox" value="2" name="names[]"> <input type="checkbox" value="3" name="names[]"> <input t ...

Could somebody please clarify the purpose of Bootstrap's `_root.scss` file?

After reading through the Bootstrap introduction [1], I added the following code snippet to my .html file: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384- ...

Issue with Bootstrap modal not closing automatically after submitting an ajax form

I am facing an issue with a modal on my page that is used for submitting courses registered by students. Even after successful submission, the modal closes but leaves behind a faded background. I have attempted various solutions from StackOverflow without ...

Tips for eliminating extra line breaks within image tags

I'm struggling to find a way to eliminate line breaks between and after image tags while keeping the rest intact using jQuery. Here's an example: <p> some text <br> more text </p> <br> <img src="image.jpg" alt ...

retrieve the Jquery progress bar's current value

Having trouble determining the value of the progress bar in order to increase it by a percentage with each step. No matter what I attempt, I keep getting errors such as 'undefined' or 'method cannot be called before object instantiation.&apo ...

Troubleshooting problem with divs overlapping in Internet Explorer 7

Check out this webpage: http://jsfiddle.net/aJNAw/1/ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta ...

What could be causing site container not to respond to height:auto?

I have encountered an issue while developing a website using absolute height values. I am puzzled as to why the height:auto property is not working for me. Can anyone provide some insight on this? HTML Structure <div id="site-content"> <div id=" ...

Manipulate a JavaScript object with AngularJS - viewing and editing capabilities

I'm looking to create a dynamic list of objects where clicking on an entry displays the object details and an edit button. When clicking on the edit button, the details should disappear and a form for editing the object should appear on the right side ...

Choosing the Date Picker in Selenium WebDriver: A Step-by-Step Guide

Currently delving into Selenium WebDriver with a focus on Java. My goal is to navigate through a date picker dropdown and select specific values for date, month, and year. Here is an example of the HTML tag: <dd id="date-element"> <input id="fro ...

Guide to using JavaScript to populate the dropdown list in ASP

On my aspx page, I have an ASP list box that I need to manually populate using external JavaScript. How can I access the list box in JavaScript without using jQuery? I am adding the JavaScript to the aspx page dynamically and not using any include or impor ...