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 change text for a Button with jQuery in ASP.NET

I tried this code on jQuery to change the btn text when I click on a span that opens a modal to add a ShipWay.
$(document).ready(function () {
$("#spanOpen").click(function () {
$("#fulldiv").fadeIn(1000);
$('#titleModal').text('הוספת שלוחה');
$("#ContentPlaceHolder1_btnAddShip").prop('value', 'הוסף');
$('#ContentPlaceHolder1_txtShipName').val('');
$('#ContentPlaceHolder1_txtShipPrice').val('');
$('#ContentPlaceHolder1_txtShipStart').val('');
$('#ContentPlaceHolder1_txtShipEnd').val('');
$('#ContentPlaceHolder1_txtShipPremium').val('No');
});
$(".close").click(function () {
$("#fulldiv").fadeOut(500);
});
});
function UpdateClick(btn)
{
$("#fulldiv").fadeIn(1000);
var row = btn.parentNode.parentNode;
var rowIndex = row.rowIndex - 1;
$('#ContentPlaceHolder1_txtShipName').val(row.cells[6].innerHTML);
$('#ContentPlaceHolder1_txtShipPrice').val(row.cells[5].innerHTML);
$('#ContentPlaceHolder1_txtShipStart').val(row.cells[4].innerHTML);
$('#ContentPlaceHolder1_txtShipEnd').val(row.cells[3].innerHTML);
$('#ContentPlaceHolder1_txtShipPremium').val(row.cells[2].innerHTML);
$('#titleModal').text('עדכן שלוחה');
$("#ContentPlaceHolder1_btnAddShip").prop('value', 'עדכן');
return false;
}
This is the button I use in my html for Add/Update the row:
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text=""
CssClass="btn" OnClick="btnAddShip_Click" />
When I tried to check his text in the code behind he said that he have nothing like = "".
This is my code in the C#
In the first if I want to ask if the text of the button is Add
and if not it will be Update in the else
the code go for WebService and to Xml
I tried the code he works well I just need that if will work perfect
because I don't want to create another button
ElectricWSL.Ship ship = new ElectricWSL.Ship();
ship.ShipName = txtShipName.Text.Trim();
ship.ShipPremium = txtShipPremium.Text.Trim();
ship.ShipPrice = double.Parse(txtShipPrice.Text);
ship.ShipStartTime = txtShipStart.Text.Trim();
ship.ShipEndTime = txtShipEnd.Text.Trim();
if (btnAddShip.Text == "הוסף")
{
ws.WSLAddShip(ship);
ShowXMLGrid();
}
else
{
int rowIndex = GetRow(txtShipName.Text);
ws.WSLUpdateShip(ship, rowIndex);
ShowXMLGrid();
}

Answering one of your point in details when i tried to check his text in the code behind it contains like =""
Button text is empty in code because
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text=""
CssClass="btn" OnClick="btnAddShip_Click" />
Add some text to it like
<asp:Button ID="btnAddShip" runat="server" ValidationGroup="AddShip" Text="Add"
CssClass="btn" OnClick="btnAddShip_Click" />
And get it in code behind like
if (btnAddShip.Text == "Add")
{
ws.WSLAddShip(ship);
ShowXMLGrid();
}
else
{
int rowIndex = GetRow(txtShipName.Text);
ws.WSLUpdateShip(ship, rowIndex);
ShowXMLGrid();
}

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);

Looping RadGrid item in clientside

There is a radgrid with one of the column as checkbox in
itemtemplate.
I want to loop through this radgrid's items. And based on each item's checkbox.checked condition, enable a seperate button control.(in client-side using javascript)
I've deviced code for this, but it is not giving the desired output.
What's wrong in this please.
Javascript:
<telerik:RadScriptBlock ID="scriptBlock1" runat="server">
<script type="text/javascript">
function checkRestrictionAcceptance()
{
var masterTable = $find("<%=RGGroupedCartRestrictedAssets.ClientID%>").get_masterTableView();
var count = masterTable.get_dataItems().length;
var checkbox;
var item;
for (var i = 0; i < count; i++)
{
item = masterTable.get_dataItems()[i];
checkbox = item.findElement("AcceptedCheckbox");
alert(checkbox.checked);
if (checkbox.checked)
{
var DownloadButton = document.getElementById('DownloadButton');
DownloadButton.enabled = false;
}
}
}
</script>
</telerik:RadScriptBlock>
Aspx:
<telerik:RadGrid ID="RGGroupedCartRestrictedAssets" runat="server" DataSourceID="CslaDSGroupedCartRestrictedAssets" AutoGenerateColumns="False"
GridLines="None" AllowPaging="True" AllowSorting="True" AllowFilteringByColumn="True" EnableEmbeddedSkins="false">
<MasterTableView DataSourceID="CslaDSGroupedCartRestrictedAssets" DataKeyNames="RestrictionText">
<Columns>
<telerik:GridTemplateColumn>
<ItemTemplate>
<asp:Checkbox ID="AcceptedCheckbox" runat="server" />
</ItemTemplate>
</Columns>
</MasterTableView>
</telerik:RadGrid>
<asp:Button ID="DownloadButton" runat="server" Text = "Test" OnClientClick ="checkRestrictionAcceptance();"/>

You need to specify the clientID of the DownloadButton
var DownloadButton = document.getElementById('<%=DownloadButton.ClientID%>');

I'm not sure which browser you're using, but I think that using the 'i' directly in get_dataItems() can be problematic with Firefox. Your code worked fine for me in IE10 using Telerik.Web.UI 2013.3.1324.45 - I am getting the value of checkbox.checked. Try this instead though, it might help:
function checkRestrictionAcceptance() {
var masterTable = $find("<%=RGGroupedCartRestrictedAssets.ClientID%>").get_masterTableView();
var count = masterTable.get_dataItems().length;
var checkbox;
var items = masterTable.get_dataItems();
for (var i = 0; i < count; i++) {
checkbox = items[i].findElement("AcceptedCheckbox");
alert(checkbox.checked);
if (checkbox.checked) {
var downloadButton = document.getElementById('<%=DownloadButton.ClientID%>');
downloadButton.enabled = false;
}
}

jQuery input selection - adding up totals inside a repeater

have two textboxes defined like so, which are inside a repeater:
<asp:TextBox ID="txtHours" runat="server" CssClass="text misch" Width="50px" Text='<%# Eval("laborHours") %>'/>
<asp:TextBox ID="txtCosts" runat="server" CssClass="text misc" Width="50px" Text='<%# Eval("totalCosts") %>'/>
i also have two boxes where i want to put totals:
<asp:TextBox ID="txtMiscH" runat="server" CssClass="text hours" Width="200px" />
<asp:TextBox ID="txtMisc" runat="server" CssClass="text add" Width="200px" />
when the value in the repeater changes, i want to add them up and put in the appropriate total boxes.
this is where i am now:
//add up miscaleneous mnumbers
//dollar amoungs
$("input[class~='misc']").change(function (event) {
var sum = 0;
var num = 0;
$("input[class~='misc']").each(function (event) {
num = parseInt($(this).val()) || 0;
sum = sum + num;
});
$("input[id*='txtMisc']").val(sum);
$("input[class~='add']").trigger('change');
});
//hours
$("input[class~='misch']").change(function (event) {
var sum = 0;
var num = 0;
$("input[class~='misch']").each(function (event) {
num = parseInt($(this).val()) || 0;
sum = sum + num;
});
$("input[id*='txtMiscH']").val(sum);
});
but it does not look like the first option works at all.
also i saw that there are different ways to select input
input[class~ or input[class* or input[class^
am i using the wrong one?
i guess because misc is also part of misch, it does the calculations for hours, even when i only update the misc costs box. please hep. would renaming class type be the easiest way to fix this?
http://jsfiddle.net/SKYDr/

Rather than using $("input[class~='misc']") you can use selectors which indicates the dom element directly such as below
$("input.misc")
$("input.misc[type=text]")
$("input.misc:text")
Same could be done for input[id*='txtMiscH'] e.g.
$("input#txtMiscH")
$("input#txtMiscH[type=text]")
$("input#txtMiscH:text")
Hope this will help !!