This is a migrated thread and some comments may be shown as answers.

[Solved] Model Array Property, EditorFor, and Slider Issue

0 Answers 14 Views
Slider
This is a migrated thread and some comments may be shown as answers.
This question is locked. New answers and comments are not allowed.
Evan
Top achievements
Rank 1
Evan asked on 10 Aug 2012, 02:50 AM
I'm having an issue with the Range Slider not working when bound to an indexed model column.

I'm working on an extensible page where custom model elements are included in main model as an array of an interface type.

My model class contains the following property:

public IPageComponentModel[] PageComponentModels { get; set; }

In my view, I'll iterate through these and render editors dynamically.(right now I'm hardcoding to the first one though)

@Html.EditorFor(model => model.PageComponentModels[0], "DateRangeSlider", null)

In my "DateRangeSlider" view I have the following which binds a range slider for one of the properties of my instance of IPageComponentModel.(this is strongly typed in the view as "DateRangeSliderModel" and I'm binding to the Values property)

public class DateRangeSliderModel : IPageComponentModel

{

public int[] Values { get; set; }
}


Html.Telerik().RangeSliderFor<int>(model => model.Values)

I have some custom MVC model binding up and running where my IPageComponentModel array is properly initialized and bound.

When the page is rendered all looks well in the HTML.

<div id="PageComponentModels[0]_Value" style="width:290px;">
<
input name="PageComponentModels[0].Value[0]" step="1" type="range" value="642" />
<
input name="PageComponentModels[0].Value[1]" step="1" type="range" value="857" />
</
div>

The script for the slider is as follows:
//<![CDATA[
jQuery(document).ready(function(){<br>jQuery('#PageComponentModels\\[0\\]_Value')
.tRangeSlider({tickPlacement:
'none', smallStep:1, largeStep:5, minValue:0, maxValue:857,
onLoad:onLoadRangeSlider, onChange:onChangeRangeSlider, onSlide:onSlideRangeSlider});

I don't think anything is obviously wrong here because the onLoadRangeSlider and onSlideRangeSlider both fire when debugging.  Now to the issue.  Every time I have a bracket(or parenthesis) in the slider name, the slider does not stop sliding on mouse up.  Also, my onChangeRangeSlider doesn't fire.  If I set the name of the slider explicitly without any special characters, all is well, but my model binding doesn't work correctly without the brackets.  Oddly, there are no javascript errors.

Any ideas on a fix or workaround?

--Evan




Tags
Slider
Asked by
Evan
Top achievements
Rank 1
Share this question
or