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.
Related
I need to migrate an app to HTML 5 and I'm researching HTML 5 frameworks. So far I have Webix and Kendo ui as the 2 finalists.
Now, each one has something that I need to use and that is better than on the other, so, I was thinking about using both of them if possible.
So far the only related comment I have found is this Webix and KendoUI
There is one thing to consider with regard to styling - Kendo UI uses the content box model, while Webix uses the border box model.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Box_Model/Introduction_to_the_CSS_box_model
This can cause problems when nesting components from the two libraries - the ones inside may end up with broken layout due to inherited opposite box model styles.
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
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.
i am using jqgrid to present a grid ,
i whould like to custom the sorting icons ,
we have a CMS and the content (include the arrows ) is controled by our clients.
however i don't have a problem doing it either by CSS or by code(js).
currently i see fixed arrows that are presented ,and the only thing i could custom is the possion and the apperance (vertical /horizinal) .
my needs :
1.sperate icons for asc and desc(that will be coustom images).
2.present one icon each click (tougle between the icons )
many thanks
The grid receives the icons from the jQuery UI Theme that your page is using. So you might be able to override the grid's CSS classes to achieve your solution. The icons used for sorting have the classes ui-icon-triangle-1-n and ui-icon-triangle-1-s.
I am using jqgrid to display the data in 10 columns. There is one column PillName, we can store PillName as 100 caharacters in Database. While displaying in jqgrid, its displaying like in the following image:
How to show the value in a proper way so that jqgrid dont get distorted. Ideally, it should break after some characters.
or It can show some 10 characters and then after that ........(dots)?
Kindly Help?
Thanks.
I suppose that you have CSS conflicts between MVC and jqGrid. One sees problems already in the input field of the jqGrid pager. The problem for example can be fixed with additional CSS definition
input.ui-pg-input { width: auto; }
The close problem you have probably with <td> or <tr> elements. You can examine the styles of the grid cell with Developer Tools of Internet Explorer of Chrome oder with Firebug. You can also make a simple test and comment the whole MVC CSS or a large parts of the CSS. I suppose that the grid will looks OK after removing unneeded CSS declaration or including the fix like with the pager in the CSS of your projects.