Questions on UI for ASP.NET AJAX Forum

2 answers

285 views

Hi,

I'm using two lists as a dual list. I need to enhance the lists in a few ways: allow checkboxes in the destination list, only allow ONE item to be checked in the destination list, and enhance the items in the destination list to provide obvious visual cues for users.

All the code is in a user control - the lists are completely programmatically created and jquery is used to do some of the client-side magic. I am having state issues, though.

Issue 1 - move an item from the select list to the destination list. Check the item then move it back to the select list, using the To Top button. Note the item's style (now in the select list) has taken on the Red style of the inserted span from the destination list. It should be back to just a regular list item with the select list's default style.

Issue 2 - now move the same item back to the Destination list. Note that it somehow retains its checked status and the additional span I added. It should be back to just a default unchecked item (which then gets styled blue). With multiple items in the bottom list, in this manner it's possible to end up with 2 items checked in the destination list.

Issue 3 - now uncheck the item then move it back to the select list, using the To Top button. Back to the Red style???

All these issues are related - the list is trying to preserve item state. I need it to forget the item state and just let the items fall back to their default state so they can be predictably manipulated.

There is also a block of code commented out in the .js file in which I explicitly remove all the changes I make to the items. This code doesn't work either, as spans get moved around when the listbox is trying to preserve their state.

Thanks in advance for your input.
JD

C#:

public class UserControl1 : WebControl

{

private RadListBox _RlbItemSelect = new RadListBox();

private RadListBox _RlbItemDestination = new RadListBox();

private Panel _ListDiv = new Panel();

private Button _Button = new Button();

private Label _Label1 = new Label();

private Button _Button2 = new Button();

HtmlGenericControl _TestList = new HtmlGenericControl("ul");

HtmlButton _TestButton = new HtmlButton();

void _Button_Click(object sender, EventArgs e)

{

_Label1.Text = "Postback";

_RlbItemSelect.Items.Add(new RadListBoxItem("This is another item, added after postback"));

}

protected override void OnInit(EventArgs e)

{

base.OnInit(e);

_Label1.ID = "_Label1";

_Label1.Text = "Initial Load";

_Button.Text = "RefreshPage";

_Button.ID = "_Button";

_Button.Click += _Button_Click;

this.Page.Form.Controls.Add(_Button);

this._ListDiv.Controls.Add(_Label1);

this.Controls.Add(_ListDiv);

this._ListDiv.Controls.Add(new LiteralControl("<br/><br/><span id style=\"text-align:left;\">Title</span><br/>"));

this._RlbItemSelect.ID = "_RlbItemSelect";

this._RlbItemSelect.Height = Unit.Pixel(200);

this._RlbItemSelect.Width = Unit.Pixel(800);

this._RlbItemSelect.AllowTransfer = true;

this._RlbItemSelect.AllowReorder = false;

this._RlbItemSelect.AllowTransferOnDoubleClick = true;

this._RlbItemSelect.TransferToID = "_RlbItemDestination";

this._RlbItemSelect.ButtonSettings.Position = ListBoxButtonPosition.Bottom;

this._RlbItemSelect.ButtonSettings.HorizontalAlign = ListBoxHorizontalAlign.Center;

this._RlbItemSelect.ButtonSettings.RenderButtonText = true;

this._RlbItemSelect.CssClass += " PopDualListHgSelect";

this._RlbItemDestination.ClientIDMode = System.Web.UI.ClientIDMode.Static;

this._RlbItemDestination.ID = "_RlbItemDestination";

this._RlbItemDestination.Height = Unit.Pixel(200);

this._RlbItemDestination.Width = Unit.Pixel(800);

this._RlbItemDestination.EmptyMessage = "Must choose at least one gateway pop";

this._RlbItemDestination.CheckBoxes = true;

this._RlbItemDestination.CssClass += " PopDualListHgDestination";

this._RlbItemDestination.SelectionMode = ListBoxSelectionMode.Single;

this._RlbItemDestination.OnClientItemChecking = "singleSelectionInHgDestLb";

this._RlbItemDestination.PersistClientChanges = true;

this._RlbItemDestination.EnableViewState = true;

this._ListDiv.Controls.Add(this._RlbItemSelect);

this._ListDiv.Controls.Add(new LiteralControl("<br/>"));

this._ListDiv.Controls.Add(this._RlbItemDestination);

this._ListDiv.Controls.Add(new LiteralControl("<br/>"));

if (!Page.IsPostBack)

{

_RlbItemSelect.Items.Add(new RadListBoxItem("This is item 1"));

_RlbItemSelect.Items.Add(new RadListBoxItem("This is item 2"));

_RlbItemSelect.Items.Add(new RadListBoxItem("This is item 3"));

_RlbItemSelect.Items.Add(new RadListBoxItem("This is item 4"));

}

Page.ClientScript.RegisterClientScriptInclude("scripts/listBox.js", "scripts/listBox.js");

}

Javascript:

function singleSelectionInHgDestLb(sender, args) {

var item = args.get_item();

var lb = item.get_listBox();

lb.trackChanges();

var items = sender.get_items();

var checked = item.get_checked();

var ele = $(item.get_element());

if (checked == false) {

clearChecks(items);

ele.closest(".rlbItem").find("label").SetHgSpanText(true);

}

else {

ele.closest(".rlbItem").find("label").SetHgSpanText(false);

}

lb.commitChanges();

}

function clearChecks(items) {

items.forEach(function (itm) {

itm.set_checked(false);

var ele = $(itm.get_element());

ele.closest(".rlbItem").find("label").SetHgSpanText(false);

});

}

(function ($) {

$.fn.SetHgSpanText = function (isPrimary) {

var setText = "SECONDARY";

var color = "blue";

if (isPrimary) { setText = "PRIMARY"; color = "red"; }

if ($(this).find(".hgInd").length) {

$(this).find(".hgInd").text("(" + setText + ") ");

$(this).find(".hgInd").attr("style", "color: " + color + "; font-size: 8pt");

} else {

$(this).find(".rlbCheck").after("<span class='hgInd' style='color: "

+ color + "; font-size: 8pt' class='rlbSpan'>(" + setText + ") </span>");

}

$(this).find(".rlbText").removeAttr("style");

};

})(jQuery);

$(function () {

$("#main").on("DOMNodeInserted", ".PopDualListHgDestination .rlbList", function (e) {

if ($(e.target).is(".rlbItem")) {

var checked = $(e.target).find(".rlbCheck[checked='checked']").length > 0;

$(e.target).find("label").SetHgSpanText(checked);

}

});

////This cleanup does method not work

//$(function () {

// $("#main").on("DOMNodeInserted", ".PopDualListHgSelect .rlbList", function (e) {

// if ($(e.target).is(".rlbItem")) {

// $(e.target).find(".hgInd").remove();

// $(e.target).find(".rlbText").removeAttr("style");

// }

// });

//});

$(document).ready(function () {

$("#main").find(".PopDualListHgDestination .rlbCheck[checked='checked']").closest("label").SetHgSpanText(true);

$("#main").find(".PopDualListHgDestination .rlbCheck[checked!='checked']").closest("label").SetHgSpanText(false);

});

ListBox

answered on 11 Oct 2013

1 answer

192 views

2nd request RadGrid cannot export to PDF

Hello,
this is my 2nd request.
Please help me out on this.
I have a Radgrid and when I try to export to PDF I am getting runtime error:
Invalid XHTML. RadGrid has to render correct XHTML in order to export to PDF. Parse error: '.', hexadecimal value 0x00, is an invalid character. Line 5036, position 159. at line: 1041399P5655380794N112 08/20/2012500$209.90
Source: Telerik.Web.UI

Thanks so much.

General Discussions

answered on 11 Oct 2013

1 answer

133 views

RadMenu not following ExpandDirection setting

Hi

I have a RadMenu that is not expanding in the down direction as set. It is a horizontal menu. The menu control is in the master page.

Any ideas?

Thanks!

< <div class="FullBanner" style="BACKGROUND: url(./images/grassBanner.png); FLOAT: left; WIDTH: 99%; HEIGHT: 75px">

<a title="Organize"

href="http://organize.ohea.org">

<div style="WIDTH: 99%; HEIGHT: 75px"></div>

</a>

</div>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadScriptManager ID="RadScriptManager1" runat="server">

</telerik:RadScriptManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="100%" Width="100%"

Transparency="25">

</telerik:RadAjaxLoadingPanel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%" EnableAJAX="False">

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" Skin="Forest" />

<telerik:RadMenu ID="menu" runat="server" Width="99%">

<Items>

<telerik:RadMenuItem runat="server" Text="Campaigns">

<Items>

<telerik:RadMenuItem runat="server" Text="Create New">

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Current Campaign Home"

Value='<%#  String.Format("~/childCampaignHome.aspx?campaignID={0}", Request.Params["CampaignID"]) %>' NavigateUrl='<%#  String.Format("~/childCampaignHome.aspx?campaignID={0}", Request.Params["CampaignID"]) %>'>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

<telerik:RadMenuItem runat="server" Text="Employers">

<Items>

<telerik:RadMenuItem runat="server" Text="Add/Update/Delete"

Value='<%#  String.Format("~/childManageEmployer.aspx?campaignID={0}", Request.Params["CampaignID"]) %>' NavigateUrl='<%#  String.Format("~/childManageEmployer.aspx?campaignID={0}", Request.Params["CampaignID"]) %>'>

</telerik:RadMenuItem>

</Items>

</telerik:RadMenuItem>

</Items>

<DefaultGroupSettings ExpandDirection="Down" />

</telerik:RadMenu>

<hr width="99%" align="left" />

<div>

<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">

</asp:ContentPlaceHolder>

</div>

</telerik:RadAjaxPanel>

Menu

answered on 11 Oct 2013

2 answers

131 views

Menu Left To Right

Hi,

is there a possibility to mix the directions of the menu in aspx?

I mean the Root Left to Right and the inner Items Right to Left as usual.

Menu

answered on 11 Oct 2013

1 answer

117 views

Additional field in async upload

Hi,

I have created some additional fields, like "select", "checkbox" in "onClientFileUploaded" event after doing multiple files upload. After which I can see the multiple additional fields in multiple rows (based on how many files I have uploaded).

User can now select any "select" or "checkbox" from any row, but I couldn't find any way to know from which row that selection made.

I need to know that row to identify the field.

Please help me.

Regards

Chandan

General Discussions

answered on 11 Oct 2013

3 answers

295 views

Top horizontal scrollbar

Hi,

my client needs a second horizontal scrollbar, in top of RadGrid.

I used to do it with this Javascript function:

function dobleScroll() {

var element = document.getElementById('divGrid');

if (element == null) {

setTimeout('dobleScroll();', 1000);

}

else {

var scrollbar = document.createElement('div');

scrollbar.appendChild(document.createElement('div'));

scrollbar.style.overflow = 'auto';

scrollbar.style.overflowY = 'hidden';

scrollbar.style.width = element.clientWidth + 'px';

scrollbar.firstChild.style.width = element.scrollWidth + 'px';

scrollbar.firstChild.style.paddingTop = '1px';

scrollbar.firstChild.appendChild(document.createTextNode('\xA0'));

scrollbar.onscroll = function () {

element.scrollLeft = scrollbar.scrollLeft;

};

element.onscroll = function () {

scrollbar.scrollLeft = element.scrollLeft;

};

element.parentNode.insertBefore(scrollbar, element);

}

The element "divGrid" is the HTML div that contains the grid.
This code works properly with .NET GridView, but it doesn't work with Telerik RadGrid. RadGrid creates more "div" elements than GridView and these divs have the value "0" for scrollWidth property.

Can anybody help me?
Thanks a lot

Grid

answered on 11 Oct 2013

1 answer

257 views

[Solved] Set empty message to password textbox

I am trying to set an empty message to my radtextbox with textmode set to password. But it is not displaying the empty message. If the textmode is not set, it works. Please help me with this.

Regards
Dan

Input

answered on 11 Oct 2013

1 answer

107 views

ClientSelectedIndexChanged event for RadCombobox in Listview

I've been trying to attach a ClientSelectedIndexChanged event to add a javascript function on a radCombobox inside a listview

protected void AdListView1_ItemCreated(object sender, RadListViewItemEventArgs e)

{

RadComboBox box = (RadComboBox)e.Item.FindControl("ItemTypeCbx");

box.Attributes.Add("OnClientSelectedIndexChanged", "ItemTypeCbxOnClientSelectedIndexChanged");

}





Then I'd like a javascript event to fire 




function ItemTypeCbxOnClientSelectedIndexChanged(sender, eventArgs) {
         
           
     }

The event doesn't fire and I'm pretty sure I'm probably missing some important step.  Can someone point me in the right 

direction? I've tried to attach that event inside Itemdatabound as well and no luck either.  Thanks

ListView

answered on 11 Oct 2013

2 answers

261 views

[Solved] Rad Editor Full Screen Mode Issue on Rad Window popup

Hi ,
I have a window popup where I am using a radEditor, when I do Full screen in RadEditor then do minimize and maximize window popup then page layout gets disintegrates due to Full screen mode of RadEditor
Could you please help to rid issue
Also I have attached the screenshot

Editor

answered on 11 Oct 2013

3 answers

208 views

Filtering Numeric Column with Contains

Hello.
In my Project I have a Grid which has some columns .Some of them are Numeric , but I need enable filtering on this Column.when I Enable ,I find out There is No 'Contains' item in the Filter List.I need to do it.I need Contains for NumericColumns .Is there any way To Enable 'Contains' for this Kind of Columns Or if not, Can I write some codes For This scenario and How?

Grid

answered on 11 Oct 2013