kendo angular 2 grid rtl header issue - kendo-ui-angular2

while using the angular 2 grid in RTL, the fields are aligned correctly, but the header fields are not, both the content and the fields themselves.
you can do an easy test - just use the regular grid, and add dir="RTL" in the HTML tag,
unless I am missing something and I need to add something else?
thanks

The Grid component officially doesn't support RTL mode yet. You can keep track for the state of readiness of the packages here - https://github.com/telerik/kendo-angular/issues/96

Related

TYPO3 imageManipulation focusArea in Frontend

Does anyone know how to use the TYPO3 focus area in the frontend?
TCA imageManipulation
If I use the crop attribute in the fluid-template
<f:image width="555c" height="312c" src="{article.teaserFile.uid}" treatIdAsReference="1" crop="{article.teaserFile.originalResource.referenceProperties.crop}" />
i get a serialized string in data-focus-area.
<img data-focus-area="{"x":786.1145320197,"y":96.682142857143,"width":271.44177339901,"height":270.05062857143}" src="/fileadmin/_processed_/9/b/csm_testimage_0bfc7bc724.jpg" width="657" height="566" alt="" title="Testimage">
Does the data need to be used by a JS library? Can someone recommend a library here? Because i didn't find a recommendation for a library which can handle focus Area and the attribute data-focus-area.
Or do i have to write a viewhelper giving the attributes e.g. for "jQuery focuspoint" to data-focus-x, data-focus-y, data-image-w, and data-image-h.
No, you don't need to rewrite the ViewHelpers. (It would be nice, if in the future it could be a bit better extendable then now however.)
But you can implement the jQuery Focuspoint. The only thing you need to do, BEFORE you starts the focuspoint plugin, you can transform this array into the needed values with jquery.
An exmaple from the FocusPoint documentation
$('.focuspoint').focusPoint();
So before this line, you can just simply add the values from the array as an own data attribute.
The form is different, but the logic is the same. So you have the x, y, width and height values in the focus-area array.
This would not work with responsify.js for example. It needs bottom, top, left, right values.
So yes... it won't work out of the box.
But NO, you don't need to change the PHP part, because you can solve it on the front end. (You need jQuery plugin anyway, so making some code before using it is easier.)
Changing those ViewHelpers is also a possibility of course, but you really need to rewrite their functionality (also the renderImage function to be concrete) and if you want to update it to a later version it could lead to problems.

Kentico Widgets :: Matching fields with HTML structure of Web Part

I really hope I'm making sense with this one.
I'm trying to create a widget from a custom webpart that I created. It's nothing special at all as you can see:
<h3>Header</h3>
<p>Intro Copy</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
I now want to be able to create a widget from this and create new fields that will be used to populate the above DOM. What do I need to do in order or do this.
In an example I saw for the demo site, they populated the bg image with:
style="background-image: url('{% ResolveUrl(PathToImage) %}');"
That was however done on the front facing part of the CMS and I'm trying to do it within the solution.
Any thoughts?
It's all in your layout or code behind. Your layout can have that code (but in ASCX format) and it will work just fine. OR you can add literal controls to the page based on the fields and what the user has entered.
Doing it in your layout is more restrictive and specific to that one application but allows you to use multiple new webpart layouts. Using the code approach allows you to be more dynamic but doesn't allow you to use the built-in layouts of the webpart/widget.
I would just use the Transformable Web Part in the Marketplace...it does exactly what you want it to do. Create a custom web part, and you use a Transformation to style the Web Part Properties into the DOM elements.
https://devnet.kentico.com/marketplace/web-parts/transformable-web-part
Reason why i built it!
I've done something similar in the past, using what I call generic web parts. I wrote a blog on it last year - it might help out with what I think you're trying to achieve:
http://www.mattnield.co.uk/Posts/Show/generic_web_parts_for_rapid_development
Why are you choosing to go with Widgets? If you want to access any field inside the transformation within the web part it's feasible by the same way as you define in inbuilt web parts.
If you want to perform any function like onload etc. then you need to use kentico API to access any data.
If you provide more insight on what is required, I can help further

Orchard CMS: Add a stylesheet to a page

Setup:
I am using Orchard CMS 1.6.
I have a site where I need to be able to set the background color of the whole page. Ie, I need to style the body tag.
I could use the LayoutSelector module and have distinct layouts. However, the only difference in each layout is that the background-color rule for the body tag is different. So it seems a very un-dry way of doing things.
I can't find any way to make Vandelay.Classy add a distinct id or class to the body tag (it adds, as I understand it) an id or a class to the outer tag of a content type. In my case, that isn't the body tag.
So that is no good, I really do need to customize the body tag.
How to do this?
Note:
I need 3 different background colors. I also have a two column layout and a three column layout. [I use (a modified version of) the layoutSelector module to achieve this.] So to have 3 different colors of background, and I used layouts to achieve this, I would need 6 different layouts: TOTAL overkill.
There must be a better way...
From any cshtml file, you should be able to access the Layout shape. From pretty much anywhere else, you can still get to the Layout shape through WorkContextAccessor. Once you have a reference to the Layout shape, you can do Layout.Classes.Add("the-class-you-want").

How to generate and handle dynamic layouts and symbols in JSF/Richfaces?

My objective is to generate a graphic layout (made of Richfaces components) based on some input configuration (like an XML file) and display it in my web app. The layout is composed of graphic symbols representing various entities in the system: each symbol should be mapped to an entity in the system, in order to display its state. The XML configuration file is used to define the symbol connections and positions within the layout, and their mapping rules to an entity. How can I achieve this?
I was thinking to create a symbol library in a technology such as SVG, where you can define both the aspect and the behaviour, and then simply "wrap" each SVG symbol in a dynamically created richfaces component, which would allow me to handle both the user interactions and the mapping rules defined in the symbol. Unfortunately JSF/Richfaces don't support SVG images, therefore I would have to use plain HTML without Richfaces features.
Another way to achieve that would be to simply define generic symbols in the XML file, each one of them with an attribute specifying the related image, the mapping rule, etc., and then generate the corresponding richfaces component from within the web-app. By doing so, would I be able to then display all the symbols in the right position and therefore generate the complete dynamic layout?
Could you suggest a better approach? Thank you very much.
I believe that HTML5 has direct support for SVG images, however it is still an embedded object in regular HTML after all. This too is something I have been waiting for however I don't believe any of the current JSF2 component libraries have an offerring for this yet.
Here is a good explanation of a possible workaround:
Getting started with SVG graphics objects in JSF 2.0 pages
Potentially you could build a custom facelet component utilizing this workaround?
My thought though is that when your only tool is a hammer, everything looks like a nail. I would try to utilize an RIA (Rich Internet Application) technology better suited for display and manipulation of vector graphics like HTML5, Flash+Flex, Silverlight, etc..

Best web technology for building dynamic charts

I need to build a custom designed bar chart that displays some simple data. Below are my requirements. Can anyone suggest the best web technology for my requirements.
high browser compatibility
ability to draw shapes
ability to fill shapes with gradients
ability to have onclick and onmouseover events for the different shapes (bars in the chart).
Thanks guys. I was thinking of using svg but looking for suggestions.
How about Raphaël - it's SVG/VML.
It says:
Browser compatibility:
Raphaël currently supports Firefox
3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
Ability to draw shapes
circle, rect, ellipse, image, text, path
Ability to fill shapes with gradients
yes
Ability to have onclick and onmouseover events
yes:
... every graphical object you
create is also a DOM object, so you
can attach JavaScript event handlers
or modify them later.
Everything in the reference
On top of that, there's a plugin called gRaphael which makes the creation of charts easier.
Simple data - Google Charts API or Google Visualization API may suit you.
Details for all features of image charts can be found on the Chart feature list
You may also take a look at the comparison of the Charts API and the Visualization API.
Another candidate of course is JQuery SVG - if you're already familiar with jquery you may prefer this one.
There's a comparison of JQuery SVG and Raphaël on SO:
jQuery SVG vs. Raphael
I recommend using Adobe Flex. Below is an example of how easy pie chart creation can be in Flex:
<mx:Panel title="Pie Chart">
<mx:PieChart id="myChart"
dataProvider="{expenses}"
showDataTips="true"
>
<mx:series>
<mx:PieSeries
field="Amount"
nameField="Expense"
labelPosition="callout"
/>
</mx:series>
</mx:PieChart>
<mx:Legend dataProvider="{myChart}"/>
Based on your criteria:
high browser compatibility: Flex is used on more than 95% of all browsers and behaves the same in all browsers. No more need to check if your web app is running in ie, firefox, chrome, etc... because any browser that has a flash player is compatible.
ability to draw shapes: Flash's greatest strength is the ability to draw. Charts are completely customizable and skinnable to achieve the look you need.
Ability to fill shapes with gradients - done easily by setting style attributes or a custom skin.
ability to have onclick and onmouseover events for the different shapes - see this link for some easy ways to create user interactions with charts.
Hi i hope this link may help you i found it while searching for a solution similar to what you're looking for:
http://www.artetics.com/Articles/using-various-javascript-libraries-to-create-pie-chart
i'm trying gRaphael, i'm having difficulties on finding documentation though. you have to read the code and use the exploded instead of the min.js
I would like to share jquery.jqplot.js. It has lots of jQuery options, but depends on other plugins such as syntaxhighliter etc.

Resources