Questions on UI for ASP.NET AJAX Forum

1 answer

129 views

ASP.NET Accessing SelectedRow cell data from Javascript

I thought I'd share this method I use to access the data from a selected row through Javascript.

I have, on many occasions, a need to access the information in a selected row from Javascript on a RadGrid row selected, through the use of the following property in the RadGrid declaration:

<ClientEvents OnRowSelected="OnRowSelected" />

Traditionally, I have used the standard way of accessing the data one element at a time:

function OnRowSelected(sender, eventArgs) {

var MasterTable = sender.get_masterTableView();

var row = MasterTable.get_dataItems()[eventArgs.get_itemIndexHierarchical()];

var someVar= MasterTable.getCellByColumnUniqueName(row, 'someColumnName').innerHTML;

In my usual use, I will need to access many, if not all, of the value from that selected row. This would require a variable declaration for each column's data, which isn't that bad when you are only dealing with a handful of columns but can become a chore when there are many columns. I had a RadGrid that had 20+ columns with the need to access every one of the columns to dynamically populate certain html elements on the row click (all client-side), requiring quite a bit of JS code.

All this led to me coming up with this method of collecting all the columns of the selected row in an easy-to-use javascript object:

function OnRowSelected(sender, eventArgs) {

var mt = sender.get_masterTableView();

var row = mt.get_dataItems()[eventArgs.get_itemIndexHierarchical()];

var mtCol = mt.get_columns();

var grdCols = {};

for (var i = 0; i < mtCol.length; i++) { grdCols[mtCol[i].get_uniqueName()] = ''; }

for (var k in grdCols) { grdCols[k] = mt.getCellByColumnUniqueName(row, k).innerHTML; }

alert(grdCols.someColumnUniqueName);

      ...

This declares an empty object, populates a key:value pair of the column unique name and an empty string, and then loops through object and sets the value for each key based on the key name set in the previous step. To access the data, use the object name (grdCols) and the ColumnUniqueName.

These generic lines of code can be placed into anywhere a particular row's values are needed.

Hopefully this can help someone looking for a similar solution.

Grid

answered on 29 Oct 2014

3 answers

298 views

RadComboBox return wrong selected value if 2 or more item has same text

Hi,

I have a radcombobox who have some item with the same text(ex: Item1, Item1), but both has a different value. But when i want to get the selectedValue of the second one, it always return me the first item value.

Is the a way to return the good value even if there two or more item that has the same text.

Thx for your help,

Guillaume

ComboBox

answered on 29 Oct 2014

12 answers

269 views

radcombobox within filter template error

i have a rad grid that has some rad combos in to filter data

<telerik:RadGrid ID="RadGridProducts" AllowSorting="True"

AllowFilteringByColumn="true"

DataSourceID="ObjDSProducts"

AutoGenerateColumns="false"

ShowStatusBar="true"

CommandItemDisplay="Top"

AllowAutomaticDeletes="True"

AllowAutomaticInserts="True"

AllowPaging="True" PageSize="10" runat="server" GridLines="None" Width="100%"

EnableLinqExpressions="false">

<PagerStyle Mode="NextPrevAndNumeric"></PagerStyle>

<MasterTableView DataKeyNames="Product_ID" AlternatingItemStyle-VerticalAlign="Top" ItemStyle-VerticalAlign="Top" CommandItemDisplay="Top">

<CommandItemSettings AddNewRecordImageUrl="~/connexassets/images/space.gif" AddNewRecordText="" ShowExportToExcelButton="true" />

<Columns>

<telerik:GridTemplateColumn DataField="Image" HeaderText="Image" AllowFiltering="false" UniqueName="Image" HeaderStyle-Width="45px" SortExpression="Group_Name">

<ItemTemplate><asp:Image runat="server" ID="PrdImg" ImageUrl='<%# String.Format("productresize.aspx?filename={0}&width=55", Eval("Image").ToString()) %>' Width="45px" BorderWidth="0" /></ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="Product_Code" DataField="Code" HeaderText="Code" AllowFiltering="false" HeaderStyle-Width="75px" />

<telerik:GridTemplateColumn AllowFiltering="true" DataField="Product_Title" HeaderText="Title" UniqueName="Product_Title" HeaderStyle-Width="225px" SortExpression="Product_Title">

<FilterTemplate>

<telerik:RadComboBox ID="RadComboBoxTitle" DataSourceID="SqlTitleDS" DataTextField="Product_Title"

DataValueField="Product_Title" Height="200px" DropDownWidth="390px" Filter="StartsWith" Width="220px" AppendDataBoundItems="true" SelectedValue='<%# TryCast(Container,GridItem).OwnerTableView.GetColumn("Product_Title").CurrentFilterValue %>'

runat="server" OnClientSelectedIndexChanged="Product_TitleIndexChanged">

<Items>

<telerik:RadComboBoxItem Text="All" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlockTitle" runat="server">

<script type="text/javascript">

function Product_TitleIndexChanged(sender, args) {

var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");

tableView.filter("Product_Title", args.get_item().get_value(), "EqualTo");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

<ItemTemplate>

<%#Eval("Product_Title")%>

<br /><asp:Label ID="lblProduct" Font-Bold="true" Font-Size="Smaller" Visible="true" runat="server" Text=""></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Product_Details"

HeaderText="Details"

SortExpression="Product_Details" UniqueName="Product_Details" Visible="false">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="Product_Price" DataField="Product_Price" HeaderText="Price" AllowFiltering="false" HeaderStyle-Width="60px">

<ItemTemplate>

<asp:Label ID="lblShowWeb" Visible="true" runat="server" Text="" />

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn AllowFiltering="true" DataField="Brand_Title" HeaderText="Brand" UniqueName="Brand_Title" HeaderStyle-Width="80px" SortExpression="Brand_Title">

<FilterTemplate>

<telerik:RadComboBox ID="RadComboBoxBrand" DataSourceID="SqlBrandDS" DataTextField="Brand_Title"

DataValueField="Brand_Title" Height="200px" DropDownWidth="215px" Width="165px" AppendDataBoundItems="true" SelectedValue='<%# TryCast(Container,GridItem).OwnerTableView.GetColumn("Brand_Title").CurrentFilterValue %>'

runat="server" OnClientSelectedIndexChanged="Brand_NameIndexChanged">

<Items>

<telerik:RadComboBoxItem Text="All" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="RadScriptBlockBrand" runat="server">

<script type="text/javascript">

function Brand_NameIndexChanged(sender, args) {

var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");

tableView.filter("Brand_Title", args.get_item().get_value(), "EqualTo");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

<ItemTemplate><%#Eval("Brand_Title")%></ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="ProductEditOptions" HeaderText="" HeaderStyle-Width="65px" AllowFiltering="false">

<ItemTemplate>

<asp:ImageButton ID="imgButEdit" runat="server" CausesValidation="true" AlternateText="Edit Product" CommandArgument='<%# Bind("Product_ID") %>' CommandName="Edit" ImageUrl="~/ConnexAssets/images/view.gif" />

<asp:ImageButton ID="imgbutdele"

CommandArgument='<%# Bind("Product_ID") %>' runat="server" ImageUrl="~/ConnexAssets/images/delete.gif" OnClientClick="javascript:return confirm('Are you sure you want to permanently delete this product?');" CommandName="DeleteProduct" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<DetailTables>

<telerik:GridTableView DataKeyNames="Prod_ID, Rel_ID" DataSourceID="DSRelated" Width="100%" runat="server" CommandItemSettings-AddNewRecordText="Add Related Product" CommandItemDisplay="Top" ShowHeader="false" AllowFilteringByColumn="false" Name="Child">

<NoRecordsTemplate>No Related Products listed....</NoRecordsTemplate>

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="Prod_ID" MasterKeyField="Product_ID" />

</ParentTableRelation>

<AlternatingItemStyle BackColor="AliceBlue" />

<Columns>

<telerik:GridBoundColumn SortExpression="RelatedProdName" ReadOnly="true" HeaderText="Related Product" Visible="true" HeaderButtonType="TextButton" DataField="RelatedProdName" UniqueName="RelatedProdName" />

<telerik:GridButtonColumn ConfirmText="Delete this Related Product?" ButtonType="ImageButton" CommandName="Delete" Text="Delete" UniqueName="DeleteColumn2">

<HeaderStyle Width="20px" />

<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />

</telerik:GridButtonColumn>

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="RelatedProdName" SortOrder="Descending"></telerik:GridSortExpression>

</SortExpressions>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table id="Table2" cellspacing="2" cellpadding="1" width="100%" border="0" rules="none" style="border-collapse: collapse; background: white;">

<tr>

<td>

<table id="Table3" cellspacing="1" cellpadding="1" border="0">

<tr><td colspan="2"></td></tr>

<tr>

<td valign="top">Product:</td>

<td>

<asp:DropDownList ID="RelProd_ID" runat="server" Width="586px"

DataSourceID="SqlDataSourceStock"

DataTextField="Product_Title" SelectedValue='<%# Bind("RelProd_ID") %>'

DataValueField="RelProd_ID" TabIndex="1" AppendDataBoundItems="True">

<asp:ListItem Selected="True" Text=" Select the product you wish to select as a related product " Value=""></asp:ListItem>

</asp:DropDownList>

</td>

</tr>

<tr><td colspan="2"></td></tr>

</table>

</td>

</tr>

<tr>

<td align="right">

<asp:Button ID="btnUpdate" Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Insert", "Update") %>'

runat="server" CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>'>

</asp:Button>

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CausesValidation="False" CommandName="Cancel"></asp:Button>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</telerik:GridTableView>

</DetailTables>

</MasterTableView>

</telerik:RadGrid>

But fo you filter the product by title and then delete the product, if i try a rebind on the grid it fails as the selected value of the combo in the filter template no longer exists so it errors as follows:

System.ArgumentOutOfRangeException: Selection out of range Parameter name: value

Generated: Tue, 30 Aug 2011 11:29:16 GMT

System.Web.HttpUnhandledException: Exception of type 'System.Web.HttpUnhandledException' was thrown. ---> System.ArgumentOutOfRangeException: Selection out of range

Parameter name: value

at Telerik.Web.UI.RadComboBox.PerformDataBinding(IEnumerable dataSource)

at Telerik.Web.UI.RadComboBox.OnDataSourceViewSelectCallback(IEnumerable data)

at System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback)

at Telerik.Web.UI.RadComboBox.OnDataBinding(EventArgs e)

at Telerik.Web.UI.RadComboBox.PerformSelect()

at System.Web.UI.WebControls.BaseDataBoundControl.DataBind()

at System.Web.UI.Control.DataBindChildren()

at System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding)

at System.Web.UI.Control.DataBind()

at System.Web.UI.Control.DataBindChildren()

at System.Web.UI.Control.DataBind(Boolean raiseOnDataBinding)

at System.Web.UI.Control.DataBind()

at Telerik.Web.UI.GridItem.SetupItem(Boolean dataBind, Object dataItem, GridColumn[] columns, ControlCollection rows)

at Telerik.Web.UI.GridTableView.CreateFilteringItem(Boolean useDataSource, GridColumn[] copiedColumnSet, GridTHead thead)

at Telerik.Web.UI.GridTableView.CreateControlHierarchy(Boolean useDataSource)

at Telerik.Web.UI.GridTableView.CreateChildControls(IEnumerable dataSource, Boolean useDataSource)

at System.Web.UI.WebControls.CompositeDataBoundControl.PerformDataBinding(IEnumerable data)

at System.Web.UI.WebControls.DataBoundControl.OnDataSourceViewSelectCallback(IEnumerable data)

at System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback)

at System.Web.UI.WebControls.DataBoundControl.PerformSelect()

at Telerik.Web.UI.GridTableView.PerformSelect()

at System.Web.UI.WebControls.BaseDataBoundControl.DataBind()

at Telerik.Web.UI.GridTableView.DataBind()

at Telerik.Web.UI.RadGrid.DataBind()

at connex_site_products.RadGridProducts_ItemCommand(Object source, GridCommandEventArgs e) in G:\T4\connex\site_products.aspx.vb:line 56

at Telerik.Web.UI.RadGrid.OnItemCommand(GridCommandEventArgs e)

at Telerik.Web.UI.RadGrid.OnBubbleEvent(Object source, EventArgs e)

at System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args)

at Telerik.Web.UI.GridItem.OnBubbleEvent(Object source, EventArgs e)

at System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args)

at System.Web.UI.WebControls.ImageButton.OnCommand(CommandEventArgs e)

at System.Web.UI.WebControls.ImageButton.RaisePostBackEvent(String eventArgument)

at System.Web.UI.WebControls.ImageButton.System.Web.UI.IPostBackEventHandler.RaisePostBackEvent(String eventArgument)

at System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument)

at System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData)

at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

--- End of inner exception stack trace ---

at System.Web.UI.Page.HandleError(Exception e)

at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

at System.Web.UI.Page.ProcessRequest(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

at System.Web.UI.Page.ProcessRequest()

at System.Web.UI.Page.ProcessRequestWithNoAssert(HttpContext context)

at System.Web.UI.Page.ProcessRequest(HttpContext context)

at ASP.connex_site_products_aspx.ProcessRequest(HttpContext context)

at System.Web.HttpApplication.CallHandlerExecutionStep.System.Web.HttpApplication.IExecutionStep.Execute()

at System.Web.HttpApplication.ExecuteStep(IExecutionStep step, Boolean& completedSynchronously)

Heres my code behind page:

Protected Sub RadGridProducts_ItemCommand(ByVal source As Object, ByVal e As Telerik.Web.UI.GridCommandEventArgs) Handles RadGridProducts.ItemCommand

Select Case e.CommandName

Case "DeleteProduct"

ProductItems.Delete(e.CommandArgument)

RadGridProducts.MasterTableView.DataBind()

Case Telerik.Web.UI.RadGrid.ExportToExcelCommandName

ConfigureExport()

RadGridProducts.MasterTableView.ExportToExcel()

Case "Edit"

Response.Redirect("site_editproduct.aspx?id=" & e.CommandArgument & "&page=" & RadGridProducts.CurrentPageIndex & "&filter=" & RadGridProducts.MasterTableView.FilterExpression.ToString)

End Select

End Sub

Any ideas?

Grid

answered on 29 Oct 2014

10 answers

841 views

How to find control id by $find() method

Hi all,

I created a control in codebehind,and assigned a id in server side , I need to do with it in client side now ,the following is js function.I call this function in codebehind,id is a parameter,I need to find id of client side。

function cbxSelectChange(id)
    {
   var cbxId = $find("<%= id.ClientID %>"); --- id is a parameter

    }

Any help on this will be grateful.

ComboBox

answered on 29 Oct 2014

1 answer

106 views

Support for Negivate Ranges

How do I set up a gauge from -100 to 100 where 0 is on the top of the gauge?

All attempts to put a navigate value in the scale.min have produced a gauge that still starts at zero.
Brad

Gauge

answered on 29 Oct 2014

1 answer

79 views

custom input values / formats

I'm looking for the simplest way to show multiple values from the selected item inside of the input area for a combobox. So for instance if I'm binding my combobox to a list of Person objects, that each have FirstName and LastName string properties, then I'd like to display the full name (the composite of both properties) of the selected person in the input area.

One way I see to do this is to create a property called FullName on the Person class that returns the composite string of the FirstName and LastName properties. And then set DataTextField on the combo box to use FullName to populate the input field.

Are there any other ways to accomplish this? Is it possible to create a template for the input area content or some other way to set the input value other than using DataTextField?

Thanks in advance!

ComboBox

answered on 29 Oct 2014

2 answers

119 views

Resx file for LightBox

Is there a resx file for the control LightBox? I would like to translate the label "Image 1 of 5" in the control ImageGallery (mode LightBox).

Darek

LightBox

answered on 29 Oct 2014

7 answers

449 views

No Toolbox or Telerik.Web.UI showing up VS2013

I just installed Telerik Q2 2014 using Visual Studio 2013 on Windows 8. I also have Visual Studio 2010 installed because of obout failure, I told Telerik instaill to use the 2013.

If I try to create a toolbox for ASP.NET AJAX it is not listed in the choose item list while other Telerik components are listed with several Reporting, OpenAccess and Report Viewer items. I noticed Kendo also does not show up in the toolbox item list. My VS 2013 has new menu items JUSTCODE, JUSTMOCK, JUSTRACE, TEST, ANALYZE, TELERIK DATA ACCESS so the install was successful for some tools.

Running the sample ComboBox client side solution gives the error:
Error 1 Could not load file or assembly 'Telerik.Web.UI' or one of its dependencies. The system cannot find the file specified. C:\Program Files (x86)\Telerik\AJAXDocumentation\Projects\ComboBox\CS\ClientSide\ClientSide\Default.aspx 3

Reading other posts, It would seem the Telerik install failed to set a reference for "Telerik.Web.UI.dll" properly but I do not know what else it missed, at least Kendo.

I am running Windows 8 with Visual Studio 2013.

Thanks,
George

Installer and VS Extensions

answered on 29 Oct 2014

13 answers

103 views

Major problem with textboxes in RadWindow on WinRT

Hi,

We have an Asus WinRT device...
When using IE10 on this device in Metro Mode, and "tapping" on a textbox that is located inside a RadWindow, the soft keyboard appears, but ½ a second later, the textbox loses focus and the keyboard disappears. This makes it impossible to write anything in the textbox!

The same behavior can be seen on your demo:
http://demos.telerik.com/aspnet-ajax/window/examples/overview/defaultcs.aspx
When setting focus on the Bing search text-field, it loses focus when tapping.

Regards
Caesar

Window

answered on 29 Oct 2014

1 answer

42 views

Adding one more agggregate field throws exception:"Object reference not set to an instance of an object"

Hi,
I'm using the pivotgrid that is connected to my analytics server. What I do is add 2 row fields one column and 2 aggregate.
It throws an "Object reference not set to an instance of an object" every time when I one more aggregate field. It happen with every aggregate field. I saw that in the sql profiler there is no error and all MDXQueries are executed successfully. Below you can find the stack trace of the exception and hopefully it can give you a clue what is wrong.

at Telerik.Web.UI.PivotHelperModelManager.BuildRowPivotModel()
at Telerik.Web.UI.RadPivotGrid.CreateChildControls(IEnumerable dataSource, Boolean dataBinding)
at System.Web.UI.WebControls.CompositeDataBoundControl.PerformDataBinding(IEnumerable data)
at System.Web.UI.WebControls.DataBoundControl.OnDataSourceViewSelectCallback(IEnumerable data)
at System.Web.UI.DataSourceView.Select(DataSourceSelectArguments arguments, DataSourceViewSelectCallback callback)
at System.Web.UI.WebControls.DataBoundControl.PerformSelect()
at Telerik.Web.UI.RadPivotGrid.PerformSelect()
at System.Web.UI.WebControls.BaseDataBoundControl.DataBind()
at Telerik.Web.UI.RadPivotGrid.DataBind()
at Telerik.Web.UI.PivotGridFieldReorderEventArgs.ExecuteCommand(Object source)
at Telerik.Web.UI.RadPivotGrid.OnBubbleEvent(Object source, EventArgs args)
at System.Web.UI.Control.RaiseBubbleEvent(Object source, EventArgs args)
at Telerik.Web.UI.PivotGridItem.OnBubbleEvent(Object source, EventArgs args)
at Telerik.Web.UI.PivotGridItem.FireCommandEvent(String commandName, Object commandArgument)
at Telerik.Web.UI.RadPivotGrid.HandleFireCommand(String commandName, String commandArgument)
at Telerik.Web.UI.RadPivotGrid.RaisePostBackEvent(String eventArgument)
at System.Web.UI.Page.RaisePostBackEvent(IPostBackEventHandler sourceControl, String eventArgument)
at System.Web.UI.Page.RaisePostBackEvent(NameValueCollection postData)
at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

Best Regards,
Diyan Penkov

PivotGrid

answered on 29 Oct 2014