RadGrid RadComboBox Client Popup Help - asp.net

Question

Need some help figuring this one please. I would like to add an On RowClick Event handler to my RadGrid to handle the selections from RadComboBox in the RadGrid Editform mode. What I would like to do is to, when user makes a selection from the combobox, display a RadWindow to allow user make additional Selections to be displayed in a textbox in the RadGrid Editform. SO far, what I have displays nothing, not even alertboxes
function RowCreated(rowObject) {
alert("Row with Index: " + rowObject.Index + " was created");
}
function RowSelected(sender, args) {
alert("row selected");
inputFieldValue = args.getDataKeyValue("Type");
alert(inputFieldValue);
}
function RowClick(rowIndex, e) {
alert("row Clicked");
var sourceElement;
alert(rowIndex);
}
The attachment to the grid happens in the client events tag
<telerik:RadGrid ID="securityGrid" runat="server" AllowPaging="True" AllowSorting="True" AutoGenerateColumns="false" Height="99.9%" AllowCustomPaging="true">
<MasterTableView ShowFooter="true" AutoGenerateColumns="False" AllowSorting="true" AllowPaging="true" EnableViewState="true" ClientDataKeyNames="HKey" DataKeyNames="HKey">
<NoRecordsTemplate>
<div align="center" style="font-weight: bold; font-size: 16px; color: Green; width: 100%;">
There Are No Records To Display. Please Select Another View.</div>
</NoRecordsTemplate>
<Columns>
<telerik:GridBoundColumn UniqueName="EHKey" Visible="false" DataField="EHKey" />
<telerik:GridCheckBoxColumn UniqueName="Active" HeaderText="Active" DataField="Active"
ColumnEditorID="ReportEditor">
<ItemStyle Width="70" />
<HeaderStyle Width="70" />
</telerik:GridCheckBoxColumn>
<telerik:GridDropDownColumn UniqueName="UILocation" DataSourceID="UILocation_DS"
HeaderText="UI Location" DataField="UILocation" ListTextField="Description" ListValueField="PrimaryKey"
DropDownControlType="RadComboBox" ColumnEditorID="ReportEditor">
<ItemStyle Width="20%" Height="18" />
<HeaderStyle Width="20%" />
</telerik:GridDropDownColumn>
<telerik:GridDropDownColumn UniqueName="Type" DataSourceID="SecurityType_DS" HeaderText="Type"
DataField="SecurityType" ListTextField="Description" ListValueField="PrimaryKey"
DropDownControlType="RadComboBox" ColumnEditorID="ReportEditor">
<ItemStyle Width="120" Height="18" />
<HeaderStyle Width="120" />
</telerik:GridDropDownColumn>
<telerik:GridBoundColumn UniqueName="Item" HeaderText="Item" DataField="ItemList"
ColumnEditorID="ReportEditor">
<ItemStyle Width="10%" />
<HeaderStyle Width="10%" />
</telerik:GridBoundColumn>
<telerik:GridDropDownColumn UniqueName="Access" DataSourceID="AccessType_DS" HeaderText="Access"
DataField="AccessType" ListTextField="Description" ListValueField="PrimaryKey"
DropDownControlType="RadComboBox" ColumnEditorID="ReportEditor">
<ItemStyle Width="120" />
<HeaderStyle Width="120" />
</telerik:GridDropDownColumn>
<%-- <telerik:GridBoundColumn UniqueName="ItemList" Visible="false" DataField="ItemList" />--%>
<telerik:GridEditCommandColumn HeaderText="Edit" ButtonType="ImageButton" UniqueName="EditCommandColumn">
<ItemStyle Width="40" CssClass="WATSImageButton" />
<HeaderStyle Width="40" />
</telerik:GridEditCommandColumn>
<telerik:GridButtonColumn UniqueName="DeleteCommandColumn" ButtonType="ImageButton"
CommandName="Delete" HeaderText="Del" ConfirmTitle="Delete Strategy Milestone!"
ConfirmText="Are you sure you want to delete this record?" ConfirmDialogType="RadWindow"
ConfirmDialogHeight="100" ConfirmDialogWidth="350">
<ItemStyle Width="35" CssClass="WATSImageButton" />
<HeaderStyle Width="35" />
</telerik:GridButtonColumn>
</Columns>
<EditFormSettings>
<FormMainTableStyle GridLines="None" CellSpacing="0" CellPadding="0" Width="100%"
CssClass="masterTable" />
<FormTableStyle CellSpacing="0" CellPadding="0" Width="50%" />
<FormStyle Width="100%" BackColor="#ffffe1"></FormStyle>
<EditColumn ButtonType="ImageButton" CancelText="Cancel" UpdateText="Update" InsertText="Add" />
</EditFormSettings>
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="True" UseStaticHeaders="True" />
<ClientEvents OnRowClick="RowClick" OnGridCreated="GridCreated" />
<Selecting AllowRowSelect="false" />
<ClientEvents />
</ClientSettings>
</telerik:RadGrid>

Answer 1

Debug your js code to see what part of it gets processed and whether errors occur. This can help you trace what's wrong.

Answer 2

Look at the following line:
alert("Click on row instance: " + eventArgs.get_itemIndexHierarchical());
You haven't defined eventArgs. This is the first line of the function so it makes sense that "nothing" happens when you click on the row.
Change your function to be as follows:
function RowClick(rowIndex, eventArgs) {
alert("Click on row instance: " + eventArgs.get_itemIndexHierarchical());
var e = window.event;
var sourceElement;
alert(sourceElement);
if (e.srcElement) {
sourceElement = e.srcElement;
alert("sourceElement");
}
else if (e.target) {
sourceElement = e.target;
alert("target");
}
alert("About to check ROw Index");
if (rowIndex != null) {
alert("Checked ROw Index");
inputField = grid.MasterTableView.Rows[rowIndex].Control.getElementsByTagName("INPUT")[0];
alert(inputField);
selvalue = sourceElement.value;
alert(selvalue);
if (inputField != null) {
alert("About to show it");
var popuppage = "userroleselect.aspx" + "?sel=" + selvalue + "&avail=" + inputField.value;
alert("Shown it!");
window.radopen(popuppage, "UserRoleDialog");
}
else {
alert("Did Not Make it");
}
}
}
Notice the eventArgs parameter also notice the the variable e is now defined in the function.