I am looking for a simple list component, similar to the HTML listbox (or Bootstrap "List group".)
Does such a component exist?
If not which component can be used for this purpose?
Thanks
ListView is Kendo's version of simple list. In demos on Telerik site, almost every listView has template with image. But simple listView looks as you want. I just add padding, to make it more readable:
Example: http://dojo.telerik.com/AyIwU/2
EDIT: Example with max-height and scroll: http://dojo.telerik.com/AyIwU/6
Related
I wanted to bind a checkboxlist using KendoUI when a modal pop is opened.
On modal popup load I wanted to get data from a webapi which will have json response and bind it to checkbox kendo Ui template.
I referred kendoUI forums all samples are using static data. Can someone please guide me to the right direction where I can consume dynamic data.
Thank you!
There's a lot of ways to approach this.
I think the easiest way would be to use a TreeView with checkboxes configured that only returns a single level of nodes, then just show it in a Window or Dialog as you would show any other view. This way you get decent, default item formatting of the TreeView with having to use a template, but you don't get paging if your datasource is large.
You can also use a ListView with a template that formats the data with a checkbox. This requires a template but you get paging capability. Once again, you just display the ListView in a Window or Dialog as normal.
Here's a simple demo of a ListView implementation: http://dojo.telerik.com/#Stephen/iwOhIV
It is a combination of Kendo demos: http://demos.telerik.com/kendo-ui/dialog/treeview-integration with the TreeView replaced with the ListView from this demo(http://demos.telerik.com/kendo-ui/listview/remote-data-binding) and then the styling tweak with a template that uses checkboxes.
The rest of it is up to you(persisting/loading checked state, etc).
Does kendo have any option to set FOOTER template like header ?
My requirement is to show some content in Footer, say that "Type more for refine search"
The Kendo Combobox does not support footers.
http://www.telerik.com/forums/footer-template-in-combobox
The ComboBox widget does not support footerTemplate. As an alternative
solution I suggest putting the checkbox outside of the widget and use
the setOptions method to modify the filter that is used by the widget.
For example:
Firstly, I am doing a research on KendoUI, and my experience is mainly on struts-layout taglib.
And now I got issues on HTML Form while using KendoUI.
My Questions are as below:
Can Kendo ListView be used to replace the html form? That is, there is no Form any more, but a kendo ListView.
If still use html form, how to make each field editable in line (is there any kendo widget to do same behavior as JQuery UI plugin X-editable)?
The closest thing would probably be a Grid that is editable. Clicking on a cell puts it in edit mode: http://demos.telerik.com/kendo-ui/grid/editing
But you could also make a custom Kendo UI widget that behaves basically the same as x-editable by having a clickable element that opens a Kendo Tooltip box with an input element in it.
We are currently using twitter Bootstrap for its grid system, navigation and input styling. In working with Kendo UI, we noticed that it has a theme system.
Is there a reference available on how to use the Kendo UI classes?
We imagine Kendo classes would replace our input and navigation markup, but what about our grid system? Does Kendo UI have a built-in CSS grid system?
Only the documentation of the classes. There's quite a bit of information but it's not exhaustive.
http://docs.kendoui.com/getting-started/web/appearance-styling
This is ancient now but just for anyone still wondering about the last part of the question:
We imagine Kendo classes would replace our input and navigation markup, but what about our grid system? Does Kendo UI have a built-in CSS grid system?
The answer to that is NO. Kendo has a data grid widget but no layout grid at this point in time. But they do keep adding to it. Their stuff is sort of compatible with the Bootstrap grid but if for instance you want to use the Bootstrap grid inside of a Kendo Window widget you need to adjust for the fact that they use different box sizing models:
/*=====================================================================*/
/* Box-sizing fix for using Bootstrap grid layout inside Kendo widgets */
/*=====================================================================*/
/* reset everything to the default box model */
*,
:before,
:after
{
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
This might be a little late but, just in case, there's a workaround. Fire up their handy ThemeBuilder. Click on "Download." Then look through the kendo.custom.css file they have. Lists all the CSS classes in plain sight.
You can also look through their kendo.all.css or kendo.common.css (depending on if you have their professional or open-source offering) in the src folder that came with your Kendo-UI download.
I am completely new to ASP.NET MVC, so the question might sound silly.
I have a view that should display a part of the data from it's model at a time. And there are buttons that should trigger which part of the data gets shown.
So far, I have encapsulated each part of the data into a div and added buttons. I have also added a function that returns CSS style for a given id (basically, it returns display:visible or display:none).
I assume that I'll be able to wire up event handlers for buttons. But I am completely stuck at redrawing/updating of div elements. I mean I don't understand how should I cause divs to update their style.
Could you please help me to show/hide div elements and buttons dynamically?
That should be standard javascript (or in your case jquery). It is unrelated to MVC3. Once you have the view built that includes all your divs with content, you call $('#div_id').show() or $('#div_id').hide() to show or hide. You can also use many other methods that have related animations, but that should get you started.
http://docs.jquery.com/Tutorials:Basic_Show_and_Hide
Like this:
$('buttonClass/IDhere').click(function (){
$('theDivYouWantToShowClass/IDhere').toggle();
});