Add Client Side Item in WebDropDown Template

145

Drish B S posted over 12 years ago

Hi,

I am using a WebDropDown with a custom table template.

I just want to add a new template item at cliet side using javascript or jQuery.

Please suggest.

My aspx page code given below :

<ig:WebDropDown ID="ddlOrder" runat="server" Width="100%" DisplayMode

="DropDown"

DataSourceID="SqlDataSourceOrder" DropDownContainerHeight="300px" EnableClosingDropDownOnBlur

="true"

EnableClosingDropDownOnSelect="true" EnableLoadOnDemand="true" EnablePersistingCustomValues

="true"

PageSize="200" EnableAutoFiltering="Server" AutoFilterQueryType="Contains" EnableAutoCompleteFirstMatch

="false"

CurrentValue="" TextField="Search" ValueField

="OrderID">

<HeaderTemplate

<table width="100%" cellpadding="0" cellspacing

="1"

border="0"

<tr class

='clsHeaderDate'>

<td width

="20%">

<asp:Label ID="LBL_194_1" ToolTip="0" runat="server">Article Code</asp:Label></td

<td width

="20%">

<asp:Label ID="LBL_195_1" ToolTip="0" runat="server">Article Name</asp:Label></td

<td width

="20%">

<asp:Label ID="LBL_197_1" ToolTip="0" runat="server">Buyer Ref.</asp:Label></td

<td width

="20%">

<asp:Label ID="LBL_413_1" ToolTip="0" runat="server">Purchase Order No.</asp:Label></td

<td width

="20%">

<asp:Label ID="LBL_238_1" ToolTip="0" runat="server">Delivery Date</asp:Label></td>

</tr

</table

</HeaderTemplate

<ItemTemplate

<table style="width: 100%; border-collapse:collapse" cellspacing="1" cellpadding="0" border

="0">

<tr class="clsRowDataLabel" height

="25">

<td width

="20%">

#DataBinder.Eval(Container.DataItem, "ArticleCode"

)%>

</td

<td width

="20%">

#DataBinder.Eval(Container.DataItem, "ArticleName"

)%>

</td

<td width

="20%">

#DataBinder.Eval(Container.DataItem, "BuyerReference"

)%>

</td

<td width

="20%">

#DataBinder.Eval(Container.DataItem, "PONum"

)%>

</td

<td width

="20%">

#DataBinder.Eval(Container.DataItem, "DeliveryDate"

)%>

</td>

<td style

="display: none">

#DataBinder.Eval(Container.DataItem, "Search"

)%>

</td>

<td style

="display: none">

#DataBinder.Eval(Container.DataItem, "OrderID"

)%>

</td>

</tr

</table

</ItemTemplate

<ClientEvents DropDownClosed

="dllSelectionChange"/>

</ig:WebDropDown

145

Drish B S posted over 12 years ago in reply to [Infragistics] Petar Ivanov

Hi Petar,

Thanks for your quick reply.

Unfortunately the solution provided by you did not work as it is saying that method "insertRow()" is undefined.

I also tried the below piece of code which workd for me but giving an error while selecting that newly added item. Please have a look and let me know how can I fix this.

function addItem() {

var combo = $find('ddlOrder');

var item = combo.get_items().createItem();

var html_item ="<table style='width: 100%; border-collapse:collapse' cellspacing='1' cellpadding='0' border='0'><TBODY><tr class='clsRowDataLabel' height='25'><td width='20%'>999999</td><td width='20%'>Sample Style</td><td width='20%'>PAC9999</td><td width='20%'>99999</td><td width='20%'>4/5/2012 12:00:00 AM</td><td style='display: none'>999999~Sample Style~PAC9999~99999</td><td style='display: none'>99999</td></tr></TBODY></table>";

item.set_text(html_item);

item._element.innerHTML=html_item;

item.set_value(

'99999');
combo.get_items().add(item);

//combo.get_items().getItem(0).get_element().children[0].insertRow(0).insertCell(0).textContent = 'This is a new cell in a new row';

}
Cancel
Reply

Cancel
49378

[Infragistics] Petar Ivanov posted over 12 years ago
Hi wfx,

Thank you for posting in the community.

If your requirement is to add a new row in the templated table inside an item's container, this can be achieved by accessing the dropdown item's element, for istance:

ig_controls.WebDropDown1.get_items().getItem(0).get_element().children[0].insertRow(0).insertCell(0).textContent = 'This is a new cell in a new row';

More information and instructions on how to add items in WebDropDown client-side may be found at:

http://blogs.infragistics.com/forums/p/27710/253640.aspx

Please let me know if this helps.
Cancel
Reply

Cancel