I have a function that dynamically adds a webslider control to a web page. However, when the page is rendered the control is invisible. It is on the page (I can see it in the HTML), but it isn't displayed.
Am I missing an attribute, or do I have a value configured incorrectly?
private WebSlider loadWebSlider(string fieldname, string displayas, Table tb) { WebSlider ws = new WebSlider(); ws.EnableSecondaryValue = true; ws.MaxValue = 10.00; ws.MinValue = 0.00; ws.Value = 1; ws.SecondaryValue = 9; ws.ContentAlignment = SliderContentAlignment.Center; ws.Width = 488; // Unit.Percentage(100); ws.Height = 60; ws.Orientation = Orientation.Horizontal; ws.ThumbsInteractionMode = SliderThumbsInteractionMode.Lock; ws.Tickmarks.NumberOfLabels = 3; ws.Tickmarks.LabelLocation = SliderTickmarkLabelLocation.BottomOrRight; ws.ValueType = SliderValueType.Decimal; ws.ValueLabel.CssClass = "slider"; ws.ValueLabel.Format = "${0}..${1}"; ws.ValueLabel.Location = SliderValueLabelLocation.RightOrBottom; string gadgetName = "webslider_" + fieldname; ws.ID = gadgetName; ws.MinusButton.ImageUrl = "~/Images/igsli_MinusH.gif"; ws.MinusButton.DisabledImageUrl = "~/Images/igsli_MinusDisableH.gif"; ws.MinusButton.FocusImageUrl = "~/Images/igsli_MinusFocusH.gif"; ws.MinusButton.HoverImageUrl = "~/Images/igsli_MinusHoverH.gif"; ws.MinusButton.PressedImageUrl = "~/Images/igsli_MinusPressH.gif"; ws.PlusButton.ImageUrl = "~/Images/igsli_PlusH.gif"; ws.PlusButton.DisabledImageUrl = "~/Images/igsli_PlusDisableH.gif"; ws.PlusButton.FocusImageUrl = "~/Images/igsli_PlusFocusH.gif"; ws.PlusButton.HoverImageUrl = "~/Images/igsli_PlusHoverH.gif"; ws.PlusButton.PressedImageUrl = "~/Images/igsli_PlusPressH.gif"; ws.ShowPlusMinusButtons = false; ws.Thumb.ImageUrl = "~/Images/igsli_ThumbH.gif"; ws.Thumb.DisabledImageUrl = "~/Images/igsli_ThumbDisableH.gif"; ws.Thumb.FocusImageUrl = "~/Images/igsli_ThumbFocusH.gif"; ws.Thumb.HoverImageUrl = "~/Images/igsli_ThumbHoverH.gif"; ws.Thumb.PressedImageUrl = "~/Images/igsli_ThumbPressH.gif"; ws.SecondaryThumb.ImageUrl = "~/Images/igsli_ThumbH.gif"; ws.SecondaryThumb.DisabledImageUrl = "~/Images/igsli_ThumbDisableH.gif"; ws.SecondaryThumb.FocusImageUrl = "~/Images/igsli_ThumbFocusH.gif"; ws.SecondaryThumb.HoverImageUrl = "~/Images/igsli_ThumbHoverH.gif"; ws.SecondaryThumb.PressedImageUrl = "~/Images/igsli_ThumbPressH.gif"; TableRow tr = new TableRow(); TableCell tc = new TableCell(); tc.Controls.Add(ws); tr.Cells.Add(tc); tb.Controls.Add(tr); return ws; }
Hi littlegreendude,
Please let me know if you need further assistance.
Best Regards,
Petar IvanovDeveloper Support EngineerInfragistics, Inc.http://es.infragistics.com/support
These functions seem to be working well. Regarding which property of the label should be set, you can use the textContent as in the code above or innerHTML which should do the same.
Please let me know if you have any questions.
Alright, I read where this is indeed a limitation on the control. I also found where it suggested to override the format value label with javascript. Here is where I'm at, I'm just not sure what value(s) in label to set. If there is a better way to do this, please let me know.
function CurrencyFormatted(amount)
{
var i = parseFloat(amount);
if(isNaN(i)) { i = 0.00; }
var minus = '';
if(i < 0) { minus = '-'; }
i = Math.abs(i);
i = parseInt((i + .005) * 100);
i = i / 100;
s =new String(i);
if(s.indexOf('.') < 0) { s += '.00'; }
if(s.indexOf('.') == (s.length - 2)) { s += '0'; }
s = minus + s;
return s;
}
function WebSliderFormatValueLabel(sender, e) {
var ws = document.getElementById(sender._id);
var label = ws.control.getLabelElem();
// not sure what part of label should be set????
label.textContent ='$' + CurrencyFormatted(ws.control.getValue()) + ' .. $'
+ CurrencyFormatted(ws.control.get_secondaryValue());
Petar,
Thank you for the help.
After further testing, I found that if I expanded the size that the slider control is there.
It turned out to be a style sheet issue.
I was missing a project include. I copied ig_slider.css from the NetAdvantage 2011.1\ASP.NET\Startup Solution\ig_res\Default\" folder to my project folder and included it.
Once I did this, you were correct that I no longer needed the URL image references.
Now I'm wrestling with the label formatting. My slider is for a dollar amount, but currency formatting doesn't seem to work ValueLabel.Format
Currency formatting works fine for the tickmarks with Tickmarks.LabelFormatString = "{0:C}";
But, ValueLabel.Format = "{0:C}..{1:C}";
doesn't work. Is this a limitation of the control?
Best regards,
Steve
I have created a sample demonstrating dynamic addition of a WebSlider to a page. I have examined the html you have provided and I could find one difference (in the input elements) :
<input id="webslider_ASD_clientState" type="hidden" name="webslider_ASD_clientState"> <input id="webslider_ASD:i" type="button" style="position:absolute;z-index:-1;outline:0;width:1px;height:1px;font-size:1px;padding:0px;left:7px;top:46%;border:0px;" value="3.8862559241706163|8.578199052132701|1|1|1|0">
Please tell me if this helps.