KENDOUI give group header - grid

As we can give common group header in normal telerik grid as shown in below example,
http://demos.telerik.com/aspnet-ajax/grid/examples/overview/defaultcs.aspx
Can we do same for KENDOUI - grid in MVC? i looked into demo but i did not found anything like this.
If its possible can you please provide with example?

Sadly multi-headers are not supported by the Kendo Grid. However you can try to insert some html into the thead of the Grid and make it look like this:
$('#grid').data().kendoGrid.thead.prepend("<tr><td colspan=2>foo</td><td colspan=3>bar</td></tr>")
Check the following example I created:
http://jsbin.com/edamuj/605/edit
I hope this helps.
EDIT
As from Q3 2014 MultiHeaders are supported and a demo is available here.

Related

Mixing `sap.m` with `sap.ui.commons` Breaks CSS of FileUploader

I need mobile UI5 only because of the TileContainer. But including sap.m together with sap.ui.commons breaks the CSS of my good-looking FileUploader (button looses its formatting) and TreeTable (fonts are too big).
Seems like a CSS conflict or overriding. How would you suggest to fix this?
JS Bin sample: http://jsbin.com/faveli/4/edit?html,js,output
you are using the gold reflection theme. It is not maintained any longer.
If you are using bluecrystal it will look better
http://jsbin.com/nozimaxeqi/1/
Best regards,
Tobias
Thank you for the hint, Tobias!
The solution was to change the order of imported libraries:
data-sap-ui-libs='sap.m,sap.ui.commons,sap.ui.table'>
the sap.m should stay before sap.ui.commons

How to create CSS Line

How to make HTML file like below line image style? Please help. I want to use CSS.
Right click the page and view source, it's really just down to sifting through whats in the source, but it you're a beginner i would start out on simpler projects since this one looks like it uses heavy CSS, but if you know basic CSS then the answer is in the page's
I would recommend working on something a bit easier before trying something like this, get used to working with CSS selectors and things like :hover

render html in flex 4 (web) without an iframe

I know this question was asked before, but none of the solutions work properly.
How do I render a basic html in flex 4 without an iframe? I saw textarea renders some weird format that would suffice if it would work.
For example I wan't to add an image like this
text_area.htmlText += "<img src='...' />";
then 1. I press enter 2. I add the image again like above, I get the img tag inserted 10 times or so; which is weird (but not funny at all). All things being equal, html is a much normal approach, is there a basic renderer for flex 4 that works ok? Thanks
You'll want to use either RichText or RichEditableText component to show your html using TLF. You'll want to do something like this:
<s:RichText textFlow="{TextConverter.importToFlow(yourHtmlString, TextConverter.TEXT_FIELD_HTML_FORMAT)}" />
However, you should know that if you have a lot of html, the conversion is going to take longer.

"Hard" word breaking / splitting in html / css

How can I split a long word/url at a certain point when displaying it in a html div?
It should be like:
thisisareallylongwordt
hatneedstobebroken her
e or something like th
at.
if you are wanting the word to break at the edge of the div rather than to overflow it use
div {word-wrap:break-word}
You need to manually insert <br> tags:
thisisareallylongwordt<br>
hatneedstobebroken her<br>
e or something like th<br>
at
There is afaik no CSS solution as much as one would want one.
Edit: As Raoul suggested the soft-hyphen ­ works too. Did not know that existed myself.
Do you want a static word wrap or something more dynamic as the size of the div changes? If you want the latter then you will probably want to use javascript. The jQuery library has a word-wrap plugin:
http://plugins.jquery.com/project/wordWrap
Dan

Ajax Control Toolkit Calendar Control CSS

I am using the AJAX Control Toolkit Popup Calendar Control in a datagrid. When it is in the footer it looks fine. When it is in the edit side of the datagrid it is inheriting the style from the datagrid and looks completely different (i.e. too big).
Is there a way to alter the CSS so that it does not inherit the style from the datagrid?
Open the page in firefox. However, first, download the firebug extension. Then, right click on the offending version and go down to inspect element.
Firebug is awesome because it let's you navigate the css of any element. You have two options here:
1) Assign the topmost element an css class and work it that way.
or
If that's not an option, you can use firebug to get the xpath to the offending element.
Xpaths look like body/table/tr/td/table/tr[2]
what you want to do with that in css is
body table tr td table tr {
/*css goes here */
}
Option 1 is definitely the better pick. Option 2 is more of a dirty way of getting things
done when things like asp.net doesn't let us have the fine grain of control we want.
It would be really awesome if you used a pastebin and posted the link to your rendered page's html.
It uses the style from the grid, because it's in it. If you want to change it's style, change the style of the control. What do you want it to do?
Here is the pastebin link:
http://pastebin.com/m17d99f8a
I am using a stylesheet for the grid that I got from Matt Berseth's blog located here:
http://mattberseth.com/blog/2007/10/a_yui_datatable_styled_gridvie.html
I am using a similar stylesheet for the calendar that I cannot find the link for anymore.

Resources