Develop Reference

How to get List item's attribute in context menu's selection? Telerik

I am working with ASP.NET and I have two RadListBox. Data in first box is populated from database using RadListBoxItem and I have set an attribute for each item. In the second box, I've enabled custom context menu. After I adding the item from first box to second box, user can select some option using the context menu. On context menu selection, I need to get the Attribute I set before and update the attribute value according to the context menu selection so I can used it for later process.Currently, I unable to even read the attributes I set previously using the context menu's javascript. Please guide how to read ListItem's attribute and update the attribute to a new value.
This is how I add the item to the first box with attribute from code behind.
this._sortingList = new List<Sorting>();
this._sortingList = DBConnection.getSortingList();
foreach (var s in this._sortingList)
{
RadListBoxItem item = new RadListBoxItem();
item.Text = s.Description;
item.Value = s.Id.ToString();
item.Attributes["myorder"] = "0";
this.RadListBox1.Items.Add(item);
}
This is custom context menu javascript.
function showContextMenu(sender, e) {
var menu = $find("<%= cm1.ClientID %>");
var rawEvent = e.get_domEvent().rawEvent; menu.show(rawEvent);
e.get_item().select();
$telerik.cancelRawEvent(rawEvent);
}
function onItemClicked(sender, e) {
var listBox = $find("<%= RadListBox1.ClientID %>");
var listItem = listBox.get_selectedItem();
var menuItem = e.get_item();
if (menuItem.get_text() == "Ascending"){
alert(listItem.get_attributes().getAttribute("myorder"));
}
else if (menuItem.get_text() == "Descending") {
alert(listItem.get_attributes().getAttribute("myorder"));
}
}
The context menu's if else statement is working. I tested with some random alert and it can work. Sorry for my English.

Add the following property to RadListBox.
OnClientContextMenu="list_ClientContextMenu"
Declare a RadContenxtMenu as follows.
<telerik:RadContextMenu ID="cmEdit" runat="server" OnClientItemClicked="cm_ClientItemClicked" Skin="Vista">
<Items>
<telerik:RadMenuItem Text="Edit" Value="e">
</telerik:RadMenuItem>
</Items>
</telerik:RadContextMenu>
Add a hidden field to get the client ID.
<asp:HiddenField runat="server" ID="hdnCmSelectedList" />
Finally add the JS to handle it.
function list_ClientContextMenu(sender, e) {
var menu = $find("<%= cmEdit.ClientID %>");
var rawEvent = e.get_domEvent().rawEvent; menu.show(rawEvent);
e.get_item().select();
var listName = sender.get_id();
if (listName.indexOf('listEmail') != -1) {
$get("<%= hdnCmSelectedList.ClientID %>").value = 'pe';
}
function cmEditAdmin_ClientItemClicked(sender, e) {
$find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequestWithTarget("<%= lnkBtnEdit.UniqueID %>", '');
}
Add a button with click handler as well.
<asp:LinkButton runat="server" ID="lnkBtnEdit" OnClick="lnkBtnEdit_Click"></asp:LinkButton>
Now in the code behind.
protected void lnkBtnEdit_Click(object sender, EventArgs e)
{
RadListBoxItem item;
switch (hdnCmSelectedList.Value)
case "pe":
item = list.SelectedItem;
if (item != null)
{
comboPendingDurationEmail.FindItemByValue(item.Attributes["myorder"]).Selected = true;
}
break;
}
Let me know, how that works out.

How to get value from dynamic control in gridview using javascript

I have one dynamic gridview contains one textbox.when user lost focus from the textbox, i want to get the value using javascript.for that i am using onblur() event in the textbox.but i'm not able to get the value .please find the code below
function validateintforDWOnblur(input) {
var row = input.parentNode.parentNode;
var rowindex = row.rowIndex;
var totaldw = document.getElementById('<%=gdvaddmsrcrt.ClientID%>').rows[rowindex].cells[2].innerHTML;
var totaldw1 = document.getElementById(totaldw.id).value;
var dw = document.getElementById('<%=gdvaddmsrcrt.ClientID%>').rows[rowindex].cells[3].innerHTML;
return true;
}
textbox inside the gridview
<asp:TextBox ID="txtdiswei" runat="server" onblur="javascript:return validateintforDWOnblur(this)" Width="100px" Text='<%# Bind("DW") %>' Height="40" CssClass="form-control"></asp:TextBox>
Please help me to sort this out.

I'm not sure that it is what you want but why don't you try
var value = document.getElementById('<%=yourTextBox.ClientID%>').value;
so for your table you can pass the ClietnId property from eachRow and use it in the javascript function
function doSomething(idOfTheTextBox){
var value = document.getElementById(idOfTheTextBox).value;
}
in html
onblur="doSomething('<%# this.ClientID %>')
if you build server side your rows you can do the following
TextBox txt = new TextBox();
txt.ID = "something1";
txt.Text = "text";
txt.Attributes.Add("onBlur","doSomething('" & txt.ClientID & "')");
CellOfTheGrid.Controls.Add(txt);

How to access radiobutton list value through Javascript?

I am using an ASP.NET RadioButton List which is bind with ObjectDatasource as given in following
Sample code:
<asp:RadioButtonList runat="server" ID="rdabcType" DataSourceID="roleSource" DataTextField="ABCName" DataValueField="ABCID" RepeatDirection="Horizontal">
</asp:RadioButtonList>
<asp:ObjectDataSource ID="abcSource" SelectMethod="GetABCType" runat="server">
<asp:ObjectDataSource/>
I want to access "value" of radio button list in Javascript. Can anyone suggest how to do that.

I believe you can iterate through the collection and look for selected
var radioObj = document.getElementById("rdabcType");
for(radioItem in radioObj){
if(radioObj[radioItem].selected == true){
//TODO: Implement
var radioValue = radioObj[radioItem].value;
}
}

The easiest way to iterate correctly through all the items is:
var types= document.getElementsByName("<%=rdabcType.UniqueID%>");
for (var j = 0; j < types.length; j++) {
var whatYouWant = types[j].value;
}

How to get custom attribute value from a radcomboboxitem when an item is selected with javascript

Here is my code:
<telerik:RadComboBox ID="ddlServicesRequested" runat="server" DataValueField="Value" DataTextField="Text" Skin="Vista" OnClientSelectedIndexChanging="setQtyReq"></telerik:RadComboBox>
function setQtyReq(combo, eventArgs) {
var Combo = $find("<%= ddlServicesRequested.ClientID %>");
var index= eventArgs.get_item().get_index();
}
Me.ddlServicesRequested.Items.Insert(0, New RadComboBoxItem("-- Select One --", "0"))
Dim dt1 As DataTable = GetDataTable("myStoredProcedure")
For Each dr As DataRow In dt1.Rows
Dim rcbi As New RadComboBoxItem()
rcbi.Text = dr("Text")
rcbi.Value = dr("Value")
rcbi.Attributes("Min") = dr("MinQty")
rcbi.Attributes("Max") = dr("MaxQty")
Me.ddlServicesRequested.Items.Add(rcbi)
Next
Here I have the radcombobox that is being populated with two custom attributes, Min and Max. When the user selects an item the setQtyReq javascript function get called and I am able to get the radcombobox and the index of the selected item. My problem I am having is that I can't figure out a way to get the values of the custom attributes. How can I get the values of the custom attributes?

Finally figured out how to do it:
function setQtyReq(combo, eventArgs) {
var item = eventArgs.get_item();
var min = item.get_attributes().getAttribute("Min");
var max = item.get_attributes().getAttribute("Max");
}

http://www.telerik.com/help/aspnet-ajax/combobox-custom-attributes.html
<script language="javascript">
function setQtyReq(combo, eventArgs) {
var Combo = $find("<%= ddlServicesRequested.ClientID %>");
var index= eventArgs.get_item().get_index();
alert(Combo.Items[index].Attributes.Max);
alert(Combo.Items[index].Attributes.Min);
}
</script>
Looks like the above will work.

How to create a dynamic SELECT drop-down list in JavaScript/jQuery?

I want to display the all the department names in the Dept Table in a combo box.
I have a function which fetches all the Dept name.
How can I dynamically create combo box in runtime, using javaScript or jQuery.
HTML CODE
<select id="searchDepartments">
</select> <input type="button" value="Search" onClick="search();" />
JavaScript function
function getDepartments(){
EmployeeManagement.getDeptList(function(deptList/*contains n-(dept.id, dept.name)*/{
for(i = 0; i<deptList.length; i++){
How can I able to write a code that generates(adds) options to the list?

The process is to create an option node for each item in the list, and add it as a child of the select element.
In plain javascript:
var sel = document.getElementById('searchDepartments');
var opt = null;
for(i = 0; i<deptList.length; i++) {
opt = document.createElement('option');
opt.value = deptList[i].id;
opt.innerHTML = deptList[i].name;
sel.appendChild(opt);
}

There's a plugin that already does this, you may want to check it out. Another benefit of this plugin, is that it has autocomplete built in.
A drop-down combo box, or a select box
into which you can type text to narrow
down the visible result set. This code
is a compilation of the JQuery
Autocomplete plugin as well as other
JQuery plugins, and is still in the
alpha stage of development.

A plain and simple JavaScript script would look as follows:
function AddOption(comboBoxID, displayText, displayValue)
{
var optionItem = document.createElement("option");
optionItem.text = displayText;
optionItem.value = displayValue;
document.getElementById(comboBoxID).options.add(optionItem);
}

You can use the following generic function:
function addOption(text,value,cmbId) {
var newOption = new Option(text, value);
var lst = document.getElementById(cmbId);
if (lst) lst.options[lst.options.length] = newOption;
}

You can create a datalist new option in html5:
<input type="text" class="form-control" id="your_id" list="your_list"
placeholder="Status"/>
<datalist id="your_list">
</datalist>
and fill it with a jquery .append function:
for(var i=0, len=resultado.response['id'].length; i<len; i++)
{
list += '<option value="' +resultado.response['data'][i]+" ( "+resultado.response['id'][i]+" ) "+ '"></option>';
}
dataList.html(list);