telerik radgrid - get client side sibling cell value in javascript - telerik

I have an asp.net radgrid that contains a column thusly:
<telerik:GridTemplateColumn UniqueName="RenewsContainer" HeaderText="Renews" HeaderStyle-Width="60px" ItemStyle-Width="60px" HeaderStyle-HorizontalAlign="Center" ItemStyle-HorizontalAlign="Center">
<ItemTemplate>
<asp:CheckBox ID="chkRenewsView" runat="server" Checked='<%#Eval("Renews")%>' onclick="checkboxChange(this);" />
</ItemTemplate>
<EditItemTemplate>
<asp:CheckBox ID="chkRenews" runat="server" Checked='<%# Bind("Renews") %>' />
</EditItemTemplate>
</telerik:GridTemplateColumn>
Notice the onclick="checkboxChange(this). This works fine, but inside that checkBoxChange() function I need to access the checkbox state (checked/unchecked) of a sibling GridCheckBoxColumn checked state. I don't know how to get the row index (or rowid) of the checked row, and even when the row is obtained, I don't know how to get the checked state of that GridCheckBoxColumn (uniquename: "Locked").
Seems like there could be 2 approaches to this, at least:
Inside the checkboxChange() function, pass as an arg the current row index or telerik rowid. I don't know how to get this.
Inside the js function, somehow determine the row index or rowid of the row containing the checkbox that was clicked.
And then once the rowid/rowidx is obtained, how to get that sibling checked state?
Any ideas?

Couldn't you give your checkbox a unique CssClass and then use jQuery to select it right out of the DOM? The RadGrid is a programmatic wrapper, but if you inspect the rendered HTML it's just a DIV/Table like anything else.
<ItemTemplate>
<asp:CheckBox ID="chkRenewsView" runat="server" CssClass="MyCheckBox" Checked='<%#Eval("Renews")%>' onclick="checkboxChange(this);" />
</ItemTemplate>
//jQuery
var isChecked = $(".MyCheckBox").is(':checked');

Related

Setting SelectedValue in a Telerik DropDownList in a RadGrid

I am trying to set the SelectedValue of a RadDropDownList in the EditTemplate of my RadGrid. The DataItemBound event appears to be throwing an error on compilation.
ASP.NET
<telerik:GridTemplateColumn DataField="givenAnswer" HeaderText="givenAnswer" UniqueName="givenAnswer">
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "givenAnswer") %>
</ItemTemplate>
<EditItemTemplate>
<telerik:RadDropDownList ID="ddlGivenAnswer" runat="server" OnItemDataBound="ddlGivenAnswer_DataBound">
<Items>
<telerik:DropDownListItem Text="Yes" Value="Yes" />
<telerik:DropDownListItem Text="No" Value="No" />
</Items>
</telerik:RadDropDownList>
</EditItemTemplate>
</telerik:GridTemplateColumn>
C#
protected void ddlGivenAnswer_DataBound(object sender, GridItemEventArgs e)
{
if ((e.Item.IsInEditMode))
{
GridEditFormItem item = (GridEditFormItem)e.Item;
RadDropDownList ddl = (RadDropDownList)item.FindControl("ddlgivenAnswer");
ddl.SelectedValue = (string)DataBinder.Eval(e.Item.DataItem, "givenAnswer").ToString();
}
}
Error
CS0123: No overload for 'ddlGivenAnswer_DataBound' matches delegate 'DropDownListItemEventHandler'
This error is being throw on the telerik:RadDropDownList open tag line in ASP.NET. What am I missing here?
Main Edit:
Error CS0123:
First typing CS0123 in Google show me that you were using wrong parameter for your event. Probably a copypast fail. Delete the even in the aspx and ask to intelisense to create a new one. Or copypast this one.
protected void ddlGivenAnswer_ItemDataBound(object sender, Telerik.Web.UI.DropDownListItemEventArgs e)
ItemDataBound:
ItemDataBound occure when a data is bound in a control.
I'am pretty sure that inline declaration are not going to fire this event.
Minor Misconception:
Why would someone change the Value of a selected element dynamically?
It's like changing the value of a vote without changing the vote him self or the name on the vote.
What you want is to check the rigth item.
To check Waldo in the drop down list :
ddlGivenAnswer.FindItemByValue("Waldo").Selected = true;
To check the right Item:
ddlGivenAnswer.FindItemByValue(
DataBinder.Eval(e.Item.DataItem, "givenAnswer").ToString()
).Selected = true;

a4j:support - Value retrieved from h:selectOneMenu is always NULL

There's a datatable with a h:selectOneMenu in each row. I want to be able to retrieve the value selected in the selectOneMenu in the bean. I'm using richfaces a4j:support tag to make AJAX calls to the backing bean. You can see the code below:
DataTable header:
<t:dataTable id="datatable" var="row" value="#{myBean.dataTableRows}">
SelectOneMenu with A4j:
<h:selectOneMenu id="type" label="Type:" styleClass="tamanho80"
value="#{datatableHolder.selectedValue}" converter="comboConverter" immediate="true" >
<f:selectItem itemValue="#{null}" itemLabel="" />
<t:selectItems var="tp"
itemValue="#{tp}" itemLabel="#{tp.nome}"
value="#{row.comboTypeValues}" />
<f:attribute name="row" value="#{row}"/>
<a4j:support event="onchange" reRender="parent" actionListener="${myBean.executeAjax}" immediate="true" ajaxSingle="true" />
</h:selectOneMenu>
The Backing Bean method to be executed:
public void executeAjax(ActionEvent event){
ValueHolder comboBox = (ValueHolder) event.getComponent().getParent();
comboBox .getValue();
}
comboBox .getValue() is returning NULL, even when I select a value.
PS:
This question has been identified as a possible duplicated of this question, but it's not. My question uses a dataTable and doesn't use binding for each element. Also, I'm using JSF 1.1 and RichFaces 3.3.3.
The problem was identified:
Each "option" generated by the t:selectItems tag was with the item id instead of an index, while the comboConverter was using an index to select the item. So, the list had 12 items (indexes should range from 0 to 11), but the id of the selected item was 22 for example. Then the converter would traverse the list to the index 22 and retrieve the element. However there's not such index in this list, because the max value is 12 and then the converter would always return NULL.
For this problem there are basically 3 ways to solve:
Create a new converter that look for the item by it's id
Adapt/Change the "comboConverter" to look for the item by it's id (doing that so, would impact other pieces of code that use this converter
Adapt the list to use indexes instead of ids
I've chosen the first one, due to the minor impact in the system.

Grabbing values from Ajax AutoCompleteExtender with "Tab" or "Enter"

I have a setup where a user can enter a zip code into an ASP.NET TextBox control, and I have an AutoCompleteExtender from the Ajax Control Toolkit attached to that textbox. It gets its data from a static page method on the ASPX page.
When the user starts typing a Swiss zip code, e.g. 3 and then waits a brief moment, a list of matching zip code shows up - something like:
3000 - Bern
3001 - Bern
and so on. Works like a charm.
The normal way to pick one of the options shown is to move your mouse pointer to the list and select the one you want, click on it or press Enter, and get the zip code into that textbox (and the city name into a second textbox next to it).
Now, I got some additional requirements from my project manager:
we would like to be able to just press Enter without going into the list of choices to select one - he'd like to just get the first (or often times: only) entry shown put into those two textboxes...
we would like to be able to enter a valid 4-digit zip code and then just press Tab and move out of the textbox for the zipcode, and have the first (possibly only) entry with that zipcode be chosen and "selected" (and stuffed into the two textboxes).
Seems like a tall order to me (I'm not a great Javascript guru at all.....) - any ideas?
This is my ASP.NET page (in a standard ASP.NET 4.0 webforms sample app - with a master page; the script is simplified; in reality, I'm splitting up the text 3001 - Bern at the dash and stick the first part into the zip code and the second part into the city textbox):
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<script type="text/javascript">
function IAmSelected(source, eventArgs) {
$get('tbxCity').value = eventArgs.get_value();
}
</script>
<asp:ScriptManager runat="server" EnablePageMethods="True" />
<asp:Literal runat="server" ID="litPrompt" Text="Please enter zip code: " />
<asp:TextBox runat="server" ID="tbxZipcode" MaxLength="10" />
<act:AutoCompleteExtender runat="server" ID="acZipCode" TargetControlID="tbxZipcode" MinimumPrefixLength="1"
CompletionInterval="25" ServiceMethod="GetMatchingZipCodes" CompletionSetCount="15"
OnClientItemSelected="IAmSelected" />
<asp:TextBox runat="server" ID="tbxCity" MaxLength="50" />
</asp:Content>
and my code-behind (this, too, is simplified - of course, in reality, I get this data from a Entity Framework data model):
[WebMethod]
[ScriptMethod]
public static string[] GetMatchingZipCodes(string prefixText, int count)
{
return new string[] { "3000 - Bern", "3001 - Bern", "4000 - Basel", "6000 - Lucerne", "6001 - Lucerne" };
}
Check the FirstRowSelected property of AutoCompleteExtender. From your requirements seems like it's exactly what you need.

events not firing in VisualForce

In the page below,Topic__c is a single-select picklist. My intention is to have this list control which of the input fields is available below. The user selects an option, and the onchange event should fire, and rerender the fields.
<apex:inputField value="{!Call_Report__c.Topic__c}" id="topic" >
<apex:actionSupport event="onchange" reRender="tickerInput,sectorInput,bondInput">
<apex:param name="topicSelection" value="{!Call_Report__c.Topic__c}" />
</apex:actionSupport>
</apex:inputField>
<apex:inputField value="{!Call_Report__c.Tickers__c}" rendered="{!Call_Report__c.Topic__c='Issuer'}" id="tickerInput" />
<apex:inputField value="{!Call_Report__c.Sector__c}" rendered="{!Call_Report__c.Topic__c='Industry'}" id="sectorInput"/>
<apex:inputField value="{!Call_Report__c.Security__c}" rendered="{!Call_Report__c.Topic__c='Specific Bond'}" id="bondInput" />
Am I doing something obviously wrong here? http://community.salesforce.com/t5/Visualforce-Development/Multi-select-picklist-not-firing-event-for-AJAX-refreshes/m-p/173572/highlight/false#M22119 seems to imply that what I am doing is reasonable...
I'm pretty sure you need to rerender at a higher level than that, like at the level of an <apex:outputPanel id="thePanel"> or an <apex:page id="thePage">
I agree. Try wrapping your code in an outputPanel and rerendering that.

Setting SqlDataSource SelectParameters from form text box

I am trying to use a text box input as a SqlParameter but it only goes into DataSelecting when the page first loads. Not after the from is submitted.
Here is the code on the aspx page.
protected void DataSelecting(object sender, SqlDataSourceSelectingEventArgs e)
{
e.Command.Parameters["#zip"].Value = ZipBox.Text;
}
"
SelectCommand="SELECT Name FROM Names WHERE (ZipCode = #zip)"
OnSelecting="DataSelecting">
SelectParameters>
parameter Name="zip" DefaultValue="1" />
SelectParameters>
SqlDataSource>
FORM
id="ZipSearch" runat="server" action="Default.aspx" method="post">
TextBox ID="ZipBox" runat="server" />
Button id="btnSubmit" Text="Submit" runat="server" />
FORM
Thanks for your help,
Matt
You need to place that code in the button click event. Selecting event is for different purpose.
Old reply (Before OP's comment) :
What do you have in button click event?
The Selecting event would fire before your select command is executed. Hence if your button click event is firing any command, the Selecting event won't be fired.

Resources