Questions on UI for ASP.NET MVC Forum

2 answers

179 views

Hello,

I am trying the Kendo Slider for ASP MVC and want to set the inital values programatically. To do this I have this line of code:

@Html.Kendo.RangeSlider.Name("rangesliderStadtverkehr").Min(0.6).Max(5.5).SmallStep(0.1).LargeStep(1).Values(CDbl(0.6), CDbl(5.5))

But when the site is rendered the selectionStart-value is set to 6 and the selectionEnd-value is set to 55. It seems that the decimal-point ist forgotten.

An additional problem is a linebreak at the end of the renderd slider. For both problems I have added an attachment.

Can you help me to fix the problems? Thank you.

Best regards, Martin

Slider

answered on 19 Dec 2018

2 answers

133 views

Title on 2 lines

Hello,

I'm trying to put title on 2 lines but the layout is not so good. See attachment. This is the code used here :

steps[6] = 'Might well be expected at some time';

steps[5] = 'Quite possi. could happen';

steps[4] = 'Unusual but possible';

steps[3] = 'Remotely possible';

steps[2] = 'Conceivable but<br/>very unlik.';

steps[1] = 'Pratically impossible';

steps[0] = 'Choose value';

AdapterLegendes("#NoProbabilite", steps);

function AdapterLegendes(nomSlider, steps) {

var slider = $(nomSlider).data("kendoSlider");

var largeTickItems = slider.wrapper.find(".k-tick-large");

$.each(largeTickItems, function (index) {

var step = steps[index];

var children;

$(this).attr("title", step).children().html(step);

});

}

Slider

answered on 07 Jun 2017

1 answer

125 views

Adjust Min Max via javascript

How can I adjust a RangeSlider's Min and Max after the control has already been created (i.e. via javascript)?

Slider

answered on 06 Feb 2017

2 answers

197 views

Color and thickness

Hello,

1) How I can change the color slider when user select another value of the slide. Example, selecting 1 the slider become yellow, selecting 2 it's become red, etc. I have to use the sliderChange I guess. But what are the JS instructions?

2) And it's possible the change the thickness of the slider?

Thank a lot for your precious help.

Slider

answered on 09 Jan 2017

1 answer

93 views

Kendo Panel Slider

Requirements
Telerik Product and Version	Kendo
Supported Browsers and Platforms	IE
Components/Widgets used (JS frameworks, etc.)

Hello Telerik Team,

We are looking for a Kendo-MVC control equal to the below link:-

http://demos.telerik.com/aspnet-ajax/splitter/examples/sp_firstlook/defaultcs.aspx

we need to overlay on another control same like the above example. we have already seen the Kendo slider which does not fit into our requirement.

Please let us know ASAP.

Slider

answered on 09 Sep 2016

6 answers

233 views

kendo.Slider() culture not localizing number correctly

Hello.

I have set up my environment to include

~/Scripts/kendo/2013.3.1324/cultures/kendo.culture.is-IS.min.js

followed by a localization script in _Layout.cshtml like this

<script type="text/javascript">
kendo.culture("@culture");
</script>

and construct a Slider in an Editor Template like so:
@model string
@(Html.Kendo().Slider()
.Name(@ViewData.ModelMetadata.PropertyName)
.Min(0.55)
.Max(34.1))
.SmallStep(0.5)
.LargeStep(5.5)
.Value(@Convert.ToDouble(Model))
)

The problem is that the tooltip will show a dot for decimal separator like "34.1" instead of the expected "34,1" (for example).

Also, when the value is read from the control it contains a dot instead of the comma. As a result, the value will come from the slider as 341 instead of 34.1 (or 34,1 in Icelandic, to be exact).

Do you have any clue what I could do differently, am I missing something or am I misunderstanding the concept of culture and decimal numbers as far as the Slider goes?

Sincerely,
Baldvin

Slider

answered on 23 Mar 2016

2 answers

116 views

How to get Slider ID in event function

For example, if I have a change event as below

function sliderChange(e)
{
var msg = "View is changed to " + e.value;
$("#e.ID").html(msg);
}

How can I get slider ID then I can change some control related to this ID?

Thanks

Slider

answered on 07 Mar 2016

1 answer

565 views

Multiple range Slider

Hello,

is it possible to create multiple range slider using Kendo UI ?

see attachement.

Thanks.

Slider

answered on 09 Feb 2016

1 answer

112 views

Slider Skinning Sample

Just a sample to skin a slider via css, thought I'd share:
(vendor prefixes omitted for clarity)

.k-slider-track {
    background: linear-gradient(to bottom, rgba(199, 199, 199, 0.7) 5%, rgba(156, 156, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #292929;
    border-radius: 2px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}

.k-slider-selection {
    background: linear-gradient(to bottom, rgba(199, 244, 199, 0.7) 5%, rgba(156, 224, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-color: #293329;
    border-radius: 2px;
    box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5) inset;
}

.k-draghandle {
background: linear-gradient(to bottom, rgba(199, 244, 199, 0.7) 5%, rgba(156, 224, 156, 0.1) 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
border-color: #294429;
border-radius: 2px;
}

.k-tick-large {
display:none;
}

Slider

answered on 03 Mar 2015

1 answer

179 views

Kendo Slider Tooltips works in one case not the other

If you see the attached images you'll notice that the slider on the right with the square drag handle has a working tooltip, but the slider on the left doesn't have a tooltip when dragged as you can see in the second image.

I compared the two MVVM based implementations, stripped out the unnecessary information and came up with this:

<input id="..." name="..." class="post-retirement" data-show-buttons="false" data-role="slider" data-min="0" data-max="2" data-small-step="0.01" value="" data-value="" data-bind="visible: isVisible, events: { change: onChange }" data-index="@i" data-tooltip="{format: '{0:p0}'}" data-toggle="tooltip" />

<input id="..." name="..." class="weight-split" data-show-buttons="false" data-role="slider" data-min="0" data-max="1" data-small-step="0.01" value="" data-value="" data-bind="visible: isVisible, events: { change: onChange }" data-index="@i" data-tooltip="{format: '{0:p0}'}" data-toggle="tooltip" />

As you can see they're almost identical apart from class names which are used only to style the drag handles differently.

The JavaScript that activates the tooltip and binds the MVVM objects looks like this:

//activate tooltips

$("[data-toggle=\"tooltip\"]").tooltip();

var postRetirementViewModel = kendo.observable({

isEnabled: true,

isVisible: true,

onChange: function (e)

{

//get the index for this row

var index = $(e.sender.element).data("index");

//removed for brevity

}

});