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,
I have tested your scenario with the code you have provided (I just commented out the imaging configuration sections) and the slider was displayed on the page as expected. My tests were made using version 11.1 under Mozilla 7 an d IE9.
What I can suggest you to try is to ensure that the table you are adding the slider to is added to the form and that the image paths are correct. In order to be able to provide more insight I would need to know your product version. A sample including the page markup would also be appreciated.
Please tell me if this helps.
Best Regards,
Petar IvanovDeveloper Support EngineerInfragistics, Inc.http://ko.infragistics.com/support
using version 11.1 and IE9
Please let me know if you need further assistance.
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">