[Solved] Rangeslider in Grid

[Ralph]

Hi there,

Im trying to filter a grid by using a rangeslider defined in a headertemplate. I'm using the clientside OnChange to find out that the user moved the slider and filter the grid according to the new condition. The javascript is pretty straightforward:

 

function onSliderChanged(e) {

var slider = $("#RangeSlider").data("tRangeSlider");
var filterstring = "price~ge~"     + slider.selectionStart.toString() +
             "~and~price~le~" + slider.selectionEnd.toString();

grid.filter(filterstring);

}

The problem that I have is that every time the grid is filtered, the values of the slider in the header are resetted to the original values when the grid was created. Therefor you cannot see what value is selected as the min or max value (visual) but it is also impossible to modify both values (min and max) to something else as the default values. The grid is showing the expected filtered data.

This is the code i used to create the grid:

@(Html.Telerik().Grid(Model)
   .Name("MyGrid")
    .DataKeys(key => key.Add(p => p.ID))
    .Columns(columns =>
    {
         columns.Bound(o => o.ID).Hidden();
         columns.Bound(o => o.Code);
         columns.Bound(o => o.Description);
         columns.Bound(o => o.Price).HeaderTemplate(
             @<text>
                   @(Html.Telerik().RangeSlider<double>()
                      .Name("RangeSlider"))
                      .Min(0)
                      .Max(1000)
                      .ClientEvents(events => events.OnChange("onSliderChanged"))
            </text>);
    })
    .Sortable()
    .Selectable()
    .Pageable(paging => paging.PageSize(10))
    .Filterable())

 

Any idea's?

Thanks in advance