Kendo UI Core Chart - kendo-ui

Where can I find breaking changes when upgrading to kendo ui core?
For e.g. in previous version
Html.Kendo().Chart()
.Name("test")
.Legend(l => l
.Position(ChartLegendPosition.Top)
.Color("#111111") //This gives error .Color is not available
)
.ChartArea(chartarea => chartarea.Border(3, "#111111", ChartDashType.Dash)) //This gives error No overload method 'Border' takes 3 arguments
I am unable to find how to fix them and there are other controls with similar issues. So I would also like to know if there is any where I can look for all such breaking changes?

You can see breaking changes listed in the documentation here, sorted into years.
Edit:
Based on the API reference found here, it seems that your code should look something like this:
Html.Kendo().Chart()
.Name("test")
.Legend(legend => legend
.Position(ChartLegendPosition.Top)
.Labels(labels => labels.Color("#111111"))
)
.ChartArea(chartarea => chartarea
.Border(border => border
.Width(3)
.Color("#111111")
.DashType(ChartDashType.Dash))
Edit #2: Changed to set legend label color.

Related

Is there anything we can change all Kendo MVC UI testboxes maximum character in one shot?

I have so many kendo MVC UI textboxes and numerictextbox maximum character property in easy way ,
what are all the ways present to solve this
CODE:
there are so many text and numeric boxes like this
#Html.Kendo().TextBoxFor(model => model.CompanyTypeName).HtmlAttributes(new { style = "width:50px", #maxlength = "5" }).Name("CompanyTypeName")
You could look into using Editor Templates. Then you can make a single change to, for example, your String.cshtml file and all your EditorFor lines for string properties will utilize the same code.
Your code example above would change to:
#Html.Kendo().EditorFor(model => model.CompanyTypeName)
Then, you can add a String.cshtml file to your Shared/EditorTemplates folder that looks something like:
#model object
#Html.Kendo().TextBoxFor(model => model).HtmlAttributes(new { style = "width:50px", #maxlength = "5" })

Kaboom.js check object sprite type ? object.is?

I am creating a game with kaboom.js and wanted to check an object in the player.onHeadbutt((obj) => { if(object.is('surprise-block')) {...} }) callback, but apparently that method does not exist? I was doing a tutorial based on a 6 month old youtube video.. did the library change that much since then?
And if so, I then feel like it's not maintained very well.. are there more recommended game library alternatives than kaboom.js?
Furthermore.. where can I check which version of kaboom.js I have and how can I check what object sprite type I am interacting with?
I wanted to destroy the sprite on headbutt and replace it with another sprite...
I just found out how it's done:
player.onHeadbutt((obj) => {
const x = obj.pos.x;
const y = obj.pos.y;
add([
pos(x, y),
sprite("coin"),
])
obj.destroy()
})
You have to add pos(x,y) before adding the sprite.. didn't know that was important...

Drupal 7 ajax command with effect

The Drupal 7 AJAX library is great, very easy to use. However, I cannot find any resources that can explain to me how to add some effects when the ajax happens. for example, when i use ajax_command_replace to dynamically replace content with certain div, how can I make it fade in?
Thanks.
http://api.drupal.org/api/drupal/includes--ajax.inc/group/ajax/7
In the AJAX array, you can add an item "effect" and set it to slide, fade, or none (defaults to none). To make your item fade in, here's what you write:
'#ajax' => array(
'wrapper' => ...,
'callback' => ...,
'effect' => 'fade'
),
according to this link
ajax['effect']: The jQuery effect to use when placing the new HTML.
Defaults to no effect. Valid options are 'none', 'slide', or 'fade'.**
For future reference, the effect goes in as a new entry in the array returned by ajax_command_*.
For example:
$command = ajax_command_replace('#my-container', $html);
$command['effect'] = 'slide';

Telerik MVC grid-How to set default row selected

Is it possible to render a Grid with one row selected as default (set the right page number and highlight the row)?
For highlighting, try using the "OnRowDataBound" event
.ClientEvents(events => events.OnRowDataBound("onRowDataBound"))
with something like
function onRowDataBound(e) {
var myId = $('#MyId').val();
if (e.dataItem.Id == myId)
e.row.className = 't-state-selected';
}
I'm still trying to figure out how to set the correct initial page number. This bloke might be on to something.
Use the Grid RowAction method, eg:
.RowAction(row => row.Selected = row.DataItem.CustomerCode.Equals(ViewBag.ID))
It is perhaps possible if you iterate in the grid source, locate the row which has to be selected in it, than use a formula to detect on which page will be displayed, and finally change the page index on initial load and select it.

Jquery UI Slider - Input a Value and Slider Move to Location

I was wondering if anyone has found a solution or example to actually populating the input box of a slider and having it slide to the appropriate position onBlur() .. Currently, as we all know, it just updates this value with the position you are at. So in some regards, I am trying to reverse the functionality of this amazing slider.
One link I found: http://www.webdeveloper.com/forum/archive/index.php/t-177578.html is a bit outdated, but looks like they made an attempt. However, the links to the results do not exist. I am hoping that there may be a solution out there.
I know Filament has re-engineered the slider to handle select (drop down) values, and it works flawlessly.. So the goal would be to do the same, but with an input text box.
Will this do what you want?
$("#slider-text-box").blur(function() {
$("#slider").slider('option', 'value', parseInt($(this).val()));
});
Each option on the slider has a setter as well as a getter, so you can set the value with that, as in the example above. From the documentation:
//getter
var value = $('.selector').slider('option', 'value');
//setter
$('.selector').slider('option', 'value', 37);
UPDATE:
For dual sliders you'll need to use:
$("#amount").blur(function () {
$("#slider-range").slider("values", 0, parseInt($(this).val()));
});
$("#amount2").blur(function () {
$("#slider-range").slider("values", 1, parseInt($(this).val()));
});
You'll need to use Math.min/max to make sure that one value doesn't pass the other, as the setter doesn't seem to prevent this.
You were almost there when you were using the $("#slider-range").slider("values", 0) to get each value. A lot of jQuery has that kind of get/set convention in which the extra parameter is used to set the value.
I've done some work around the jQuery UI slider to make it accept values from a textbox, it may not be exactly what you were after but could help:
http://chowamigo.blogspot.com/2009/10/jquery-ui-slider-that-uses-text-box-for.html
$slider = $("#slider");
$("#amountMin").blur(function () {
$slider.slider("values", 0,Math.min($slider.slider("values", 1),parseInt($(this).val()) ) );
$(this).val(Math.min($slider.slider("values", 1),parseInt($(this).val())));
});
$("#amountMax").blur(function () {
$slider.slider("values",1,Math.max($slider.slider("values", 0),parseInt($(this).val()) ) );
$(this).val(Math.max($slider.slider("values", 0),parseInt($(this).val())));
});
I just used martin's code and updated the id to #slider also added the math.max as he suggested so the sliders won't overlap.

Resources