Questions on UI for ASP.NET AJAX Forum

2 answers

135 views

OnSelectedIndexChanged event fired unexpected after page refresh in Firefox

Hi there,

The RadcomboBox OnSelectedIndexChanged event fired unexpected after I refresh page in firefox, however, it is working fine in IE and Chrome. Here is my code and scenario.

1 Use firefox to open the page

2 Select value from the first ComboBox

3 Select value from the second ComboBox

4 Refresh Page

5 Click the "Explore" button on the page, the OnSelectedIndexChanged
event of the first RadComboBox got fired in Firefox (working fine in IE
and Chrome).

Please help. Thank you very much.

Default.aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns='http://www.w3.org/1999/xhtml'>

<head runat="server">

<title>Telerik ASP.NET Example</title>

<link rel="stylesheet" type="text/css" href="styles.css" />

</head>

<body>

<form id="form1" runat="server">

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadFormDecorator ID="FormDecorator1" runat="server" />

<div class="qsf-demo-canvas">

<div class="continents">

<telerik:RadComboBox ID="RadComboBox1" runat="server" Width="186px"

AutoPostBack="true" Filter="Contains" datatextfield="Name" datavaluefield="ID"

OnDataBound="ddlBox1_DataBound" OnSelectedIndexChanged="RadComboBox1_SelectedIndexChanged">

</telerik:RadComboBox>

</div>

<div class="countries">

<telerik:RadComboBox ID="RadComboBox2" runat="server" Width="186px"

AutoPostBack="true" Filter="Contains" datatextfield="Name" datavaluefield="ID"

OnDataBound="ddlBox2_DataBound" OnSelectedIndexChanged="RadComboBox2_SelectedIndexChanged">

</telerik:RadComboBox>

</div>

<div>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" CellSpacing="0" AllowSorting="true"

GridLines="None" Width="800px">

<ClientSettings>

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" DataKeyNames="ID">

<Columns>

<telerik:GridBoundColumn DataField="ID" DataType="System.String"

HeaderText="StateID" ReadOnly="True" SortExpression="ID" UniqueName="ID">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="Name" DataType="System.String"

HeaderText="Name" SortExpression="Name" UniqueName="Name">

</telerik:GridDateTimeColumn>

</Columns>

</MasterTableView>

<FilterMenu EnableImageSprites="False">

</FilterMenu>

</telerik:RadGrid>

</div>

<p class="buttons">

<asp:Button ID="Button1" runat="server" Text="Explore" OnClick="Button1_Click" />

</p>

<div class="result">

<asp:Label runat="server" ID="Literal1" />

</div>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadComboBox1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadComboBox2" />

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadComboBox2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

</form>

</body>

</html>

Code behind

using System;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Linq;

using System.Data;

using System.Data.SqlClient;

using System.Configuration;

using System.Web.Security;

using System.Collections.Generic;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using Telerik.Web.UI;

public partial class Default : System.Web.UI.Page

{

public class State

{

public String ID { get; set; }

public String Name { get; set; }

}

public class City

{

public String ID { get; set; }

public String Name { get; set; }

public String StateID { get; set; }

}

public List<State> GetStateList()

{

List<State> _list = new List<State>();

State d1 = new State();

d1.Name = "AB";

d1.ID = "1";

State d2 = new State();

d2.Name = "BC";

d2.ID = "2";

State d3 = new State();

d3.Name = "ON";

d3.ID = "3";

_list.Add(d1);

_list.Add(d2);

_list.Add(d3);

return _list;

}

public List<City> GetCityList(String _stateID)

{

List<City> _list = new List<City>();

List<City> _newList = new List<City>();

City c1 = new City();

c1.Name = "Calgary";

c1.ID = "1";

c1.StateID = "1";

City c2 = new City();

c2.Name = "Edmonton";

c2.ID = "2";

c2.StateID = "1";

City c3 = new City();

c3.Name = "Vancouver";

c3.ID = "3";

c3.StateID = "2";

City c4 = new City();

c4.Name = "Victoria";

c4.ID = "4";

c4.StateID = "2";

City c5 = new City();

c5.Name = "Toronto";

c5.ID = "5";

c5.StateID = "3";

City c6 = new City();

c6.Name = "Ottawa";

c6.ID = "6";

c6.StateID = "3";

_list.Add(c1);

_list.Add(c2);

_list.Add(c3);

_list.Add(c4);

_list.Add(c5);

_list.Add(c6);

var _result = _list.Where(t => t.StateID == _stateID);

foreach (var _item in _result)

{

City d = new City();

d.ID = _item.ID;

d.StateID = _item.StateID;

d.Name = _item.Name;

_newList.Add(d);

}

return _newList;

}

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

LoadBox1();

}

protected void RadComboBox1_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

if (e.Value != String.Empty)

{

LoadBox2(e.Value);

List<State> _test = new List<State>();

RadGrid1.DataSource = _test;

RadGrid1.DataBind();

}

protected void RadComboBox2_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

if (e.Value != String.Empty)

{

LoadGrid();

}

public void LoadGrid()

{

RadGrid1.DataSource = GetStateList();

RadGrid1.DataBind();

}

protected void LoadBox1()

{

RadComboBox1.DataSource = GetStateList();

RadComboBox1.DataBind();

}

protected void LoadBox2(string _stateID)

{

RadComboBox2.DataSource = GetCityList(_stateID);

RadComboBox2.DataBind();

}

protected void ddlBox1_DataBound(object sender, EventArgs e)

{

var combo = (RadComboBox)sender;

combo.Items.Insert(0, new RadComboBoxItem("Please Select", String.Empty));

RadComboBox2.Items.Insert(0, new RadComboBoxItem("Please Select", String.Empty));

}

protected void ddlBox2_DataBound(object sender, EventArgs e)

{

var combo = (RadComboBox)sender;

combo.Items.Insert(0, new RadComboBoxItem("Please Select", String.Empty));

}

protected void Button1_Click(object sender, EventArgs e)

{

//Literal1.Text = string.Empty;

}

:

ComboBox

answered on 12 Jun 2015

1 answer

212 views

Programmatically Create Plot Bands for RadHtmlChart

Hello,

I am creating a RadHtmlChart in the code-behind (VB.NET) and would like to know how to create a plot band for the yAxis programmatically? I can't find any documentation online or in the forums. Any help would be greatly appreciated.

Thanks!

Chart (HTML5)

answered on 12 Jun 2015

1 answer

63 views

Determing what column is clicked on?

Hello,

I would like to click on a column in the grid with data and popup a menu to do something with that column of data. To do this do I have to click on a cell with data? Or can it be done with the header? I have the sort turned on for when they click a column header so I guess they need to click on any cell of data right? There is no particular row of data being used. The routines are going to use all of the data in the column. Also, what is the best way to show a menu? I would prefer the menu be near where I clicked. Is that possible for asp.net?

Thanks,

Warren

Grid

answered on 12 Jun 2015

7 answers

432 views

Cannot set Filter control width.

Just starting with RadGrid control. Adding and configuring the basic for the grid was easy. Had problems with getting the column to set to a specific width, but fix that issue with TableLayout attribute to "Fixed" instead of "Auto". The problem I'm having now is the Filter controls are too wide. So I tried to used the "FilterControlWidth" attribute for the column, but it's not working. What am I missing? See code below. TIA, Gary

    
                <telerik:RadGrid ID="rgDCR" runat="server" AllowFilteringByColumn="True"   
        
                    AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"   
        
                    DataSourceID="BCRDataSource" GridLines="Vertical" Skin="Hay" > 
        
                    <ClientSettings AllowColumnsReorder="true">  
        
                    </ClientSettings> 
        
                    <MasterTableView datakeynames="BCRkey" datasourceid="BCRDataSource" TableLayout="Fixed">  
        
                        <Columns> 
        
                            <telerik:GridHyperLinkColumn   
        
                                HeaderText="BCR Request No."   
        
                                SortExpression="BCRRequestNumber" 
        
                                DataTextFormatString="{0}" 
        
                                DataNavigateUrlFields="BCRkey" 
        
                                UniqueName="BCRRequestNumber" 
        
                                DataNavigateUrlFormatString="~/BCRRequest.aspx?BCRPKey={0}" 
        
                                DataTextField="BCRRequestNumber" 
        
                                FilterControlWidth="40px" 
        
                                > 
        
            <HeaderStyle Width="60px"></HeaderStyle> 
        
                            </telerik:GridHyperLinkColumn> 
        
                            <telerik:GridBoundColumn   
        
                                DataField="BCRRequestedDate"   
        
                                DataType="System.DateTime"   
        
                                HeaderText="Request Date"   
        
                                SortExpression="BCRRequestedDate"   
        
                                UniqueName="BCRRequestedDate"   
        
                                DataFormatString="{0:dd-MMM-yyyy}" 
        
                                FilterControlWidth="40px" 
        
                                > 
        
            <HeaderStyle Width="60px"></HeaderStyle> 
        
                           </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn   
        
                                DataField="BCREffectiveDate"   
        
                                DataType="System.DateTime" 
        
                                HeaderText="Effective Date"   
        
                                SortExpression="BCREffectiveDate"   
        
                                UniqueName="BCREffectiveDate"   
        
                                DataFormatString="{0:dd-MMM-yyyy}" 
        
                                FilterControlWidth="40px" 
        
                                > 
        
            <HeaderStyle Width="60px"></HeaderStyle> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn   
        
                                DataField="BCRDescription"   
        
                                HeaderText="Request Description"   
        
                                SortExpression="BCRDescription"   
        
                                UniqueName="BCRDescription" 
        
                                FilterControlWidth="180px" 
        
                                > 
        
            <HeaderStyle Width="200px"></HeaderStyle> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn   
        
                                DataField="BCRFirstName"   
        
                                HeaderText="First Name"   
        
                                SortExpression="BCRFirstName"   
        
                                UniqueName="BCRFirstName" 
        
                                FilterControlWidth="40px" 
        
                                > 
        
            <HeaderStyle Width="60px"></HeaderStyle> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn   
        
                                DataField="BCRLastName"   
        
                                HeaderText="Last Name"   
        
                                SortExpression="BCRLastName"   
        
                                UniqueName="BCRLastName" 
        
                                FilterControlWidth="40px" 
        
                                > 
        
            <HeaderStyle Width="60px"></HeaderStyle> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn   
        
                                DataField="BCRStatus"   
        
                                HeaderText="Status"   
        
                                SortExpression="BCRStatus"   
        
                                UniqueName="BCRStatus" 
        
                                FilterControlWidth="40px" 
        
                                > 
        
            <HeaderStyle Width="60px"></HeaderStyle> 
        
                            </telerik:GridBoundColumn> 
        
                            <telerik:GridBoundColumn   
        
                                DataField="BCRLastUpdated"   
        
                                DataType="System.DateTime"   
        
                                HeaderText="Last Updated"   
        
                                SortExpression="BCRLastUpdated"   
        
                                UniqueName="BCRLastUpdated"   
        
                                DataFormatString="{0:dd-MMM-yyyy}" 
        
                                FilterControlWidth="40px" 
        
                                > 
        
            <HeaderStyle Width="60px"></HeaderStyle> 
        
                            </telerik:GridBoundColumn> 
        
                        </Columns> 
        
                        <FilterItemStyle Width="50px" /> 
        
                    </MasterTableView> 
        
                </telerik:RadGrid> 
        
                <asp:ObjectDataSource ID="BCRDataSource" runat="server" SelectMethod="SelectRows" TypeName="BLL.BCRBLL"></asp:ObjectDataSource>

Grid

answered on 12 Jun 2015

1 answer

370 views

How do I save 2 radgrids by only 1 outside Button

Hi, I'm having 2 radgrids (rgRole and rgRecei) in batch edit mode on same page.I'm using 1 html button to call OnBatchEditCommand from outside to save it. But my problem is that it can call only 1 of second radgrid and dismiss the first one.

function SaveRg() {
$find('rgRole').get_batchEditingManager().saveChanges('rgRole_ctl00')
$find('rgRecei').get_batchEditingManager().saveChanges('rgRecei_ctl00');
return false;
}

So how do i get NewValues of radgrid in code behind in another function like

protected void getRadGridNewValues(){

// get newValue of rgRole here

// get newValue of rgRecei here

}

Any help appreciated,
Thanks,
Hiep

Grid

answered on 12 Jun 2015

7 answers

242 views

Complaints and suggestions about the batch mode

As the managers of the company I work in are very interested in the newly introduced batch mode editing feature, because they want to achieve this behaviour in our new project, I was very involved in using and hacking RadGrid to achieve every feature they require.

After a period of this involvement, I'd like to publish about some of the issues that hindered me, and one or a couple of suggestions to enhance the feature.

RadGrid in batch mode doesn't serialize its underlying data source items to the client to be able to manipulate them easily there. Although GridTableView has a dataItems collection (whose name seemed attractive to me), the collection in fact doesn't hold the data records (they're set to null). In fact, the grid uses the DOM as the store of data which made the code complicated (I mean Telerik's code and mine), made the grid hard to extend and manipulate, and introduced problems like this one.
Based on point 1, in which I mentioned that the grid is hard to extend, I'll provide an example: My management asked me to create computed columns and aggregates that are updated while on batch mode. Currently, the available computed columns and aggregates don't work while on batch mode, so I had to write the feature myself. I thought that the task is easy, and will be just a call to reduce on the dataItems array, but it turned out that dataItems doesn't hold the data (maybe this collection is used in other modes. When binding to a data service for example, but I'm not sure), and I had to use some combination of getCellValue and getCellByColumnUniqueName and take care of that these functions read the values from the DOM, so when a row is open for editing it won't be involved in the aggregation until it's closed. When I wanted to write code to recompute the aggregates when a row is deleted, I found that there's no "row deleted" event! The grid has a rowDeleted event but it's not triggered on batch mode. It tried the disposing event on data rows, but it's not reliable, because disposing is different than deletion, and I found my code called unexpectedly. To resolve the issue, I created a dummy rowDeleted event that I call by my code when the user deletes a row, and also consider using something fancy like DOM mutation observers to track row deletions. I'm keen on this because I have some other features that requires to be notified by row deletions.
As clear in point 2, the API is not rich, and I got the impression that the batch mode feature was half baked. Many times, I find myself in need to do direct DOM manipulations to achieve what I thought should be part of the API of any grid.
Based on point 1, the grid doesn't participate in ASP.Net post back operations because its data is in the DOM, not in a structure that can be serialized to a hidden field so that the data is not lost when another control causes a post back. Currently, a batch mode grid needs to be the issuer of the post back operation that saves the data. I have to bind my general save button to call batchManager's saveTable method, otherwise the data will be lost.
The documentation is not sufficient. It just states some methods (not all) without descriptions of the parameters and examples. I waste long time inspecting the objects using browser developer tools, and read the source code of their methods to understand how everything works.
I wonder why Telerik tries to create this whole thing from scratch. Why not use an MV* framework like Knockout or Angular to create a functionality like batch mode editing, in the same way that Telerik currently use jQuery? Using such a popular and powerful framework will make the component powerful, cleaner, and easier to extend, which will benefit you and us.

Maybe there are other issues that I wanted to write about, but these are on the top of my mind now.
I know that batch mode is a new feature that was added to the current release, but I found it lacking some expected basic behaviours.
I hope it will become better and better in future releases.

Regards,

Grid

answered on 12 Jun 2015

1 answer

105 views

Is it possible to remove blue border of selected grid ??

I am working on asp.net ajax gird. Is it possible to remove this blue border of selected grid? This is very annoying me.

http://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/simple-vs-advanced/defaultcs.aspx

Grid

answered on 12 Jun 2015

2 answers

342 views

How to remove selected grid "Shadow"

This blue shadow appear When I clicked somewhere on Grid. How to I remove this blue shadow from grid?

Grid

answered on 12 Jun 2015

5 answers

101 views

Adding indivual item background colors

I have tried a few things but I am unable to get the background color to set on a rad ddl. Here is the code I have that doesn't work:

Method 1

If (dr("ACTIVE")) = 0 Then
ddlOperator.Items(ddlOperator.Items.Count - 1).Attributes.Add("style", "BACKGROUND-COLOR: Red")
End If

Method 2

Dim itemData As New DropDownListItem
itemData.Text = dr("NAME").ToString
itemData.Value = dr("BADGE").ToString

If (dr("ACTIVE")) = 0 Then
itemData.Attributes.Add("style", "background-color: red")

end if

DropDownList

answered on 12 Jun 2015

1 answer

69 views

Can you Enable Smooth Streaming

I see that you can enable Smooth Streaming for the Silverlight version. Can you enable Smooth Streaming for the ASP.NET AJAX version of RadMediaPlayer?

Thank You!

MediaPlayer

answered on 12 Jun 2015