Questions on UI for ASP.NET AJAX Forum

3 answers

81 views

Can someone please direct me to extensive code example for RadTreeView with RadTabStrip.
I am using the RADControls version: v.2010.3.1215.40

thanks
A Iqbal

TreeView

answered on 18 Jan 2011

2 answers

86 views

Google Chrome

I have noticed an issue with the Telerik editor in Google Chrome. When I add an image, I can't select it to apply a CSS class. Is this a known bug? Are there any work-arounds?

Thanks,

Neil

Editor

answered on 18 Jan 2011

1 answer

84 views

reg rlvi css class edit

Hi in my application i am using drag and drop in listview...
i need to edit the rlvI class because my fieldset size changed after adding the drag and drop...
i need to know where i can edit the rlvi class...
please update me with a solution

ListView

answered on 18 Jan 2011

2 answers

72 views

Grid's delete column image looks disabled randomly

Hi,

We are facing unique issue. We have a grid which has delete image in delete column. This image is red in color. It turns gray sometimes. I cannot figure out the reson behind it.

<

telerik:RadGrid ID="grdDailyOvertime" runat="server" AutoGenerateColumns="False"

Enabled="false" AutoGenerateEditColumn="false" EnableTheming="true" OnDeleteCommand="grdDailyOvertime_DeleteCommand"

OnInsertCommand="grdDailyOvertime_InsertCommand" OnNeedDataSource="grdDailyOvertime_NeedDataSource"

OnUpdateCommand="grdDailyOvertime_UpdateCommand" OnItemCommand="grdDailyOvertime_ItemCommand"

HeaderStyle-HorizontalAlign="Center">

<MasterTableView Width="100%" CommandItemSettings-ShowRefreshButton="false" CommandItemStyle-HorizontalAlign="Right"

CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="<%$ Resources:PDICulture, GridAddNewRow %>"

EditMode="InPlace">

<telerik:GridTemplateColumn Visible="false" UniqueName="Key" DataField="Key">

<asp:Label ID="lblDailyOvertimeID" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Key") %>'>

</asp:Label>

</ItemTemplate>

<asp:HiddenField ID="hdnDailyOvertimeID" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"Key") %>' />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridEditCommandColumn HeaderText="<%$ Resources:PDICulture, grdEditColumnHeaderText %>"

HeaderStyle-Width="20%" ButtonType="ImageButton" UniqueName="EditColumn">

</telerik:GridEditCommandColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Resources:PDICulture, grdDailyOvertimeHours %>"

UniqueName="DailyHoursExceeding" DataField="DailyHoursExceeding">

<asp:Label ID="lblDailyHours" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"DailyHoursExceeding") %>'>

</asp:Label>

</ItemTemplate>

<telerik:RadTextBox ID="txtDailyHours" MaxLength="5" Width="53%" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"DailyHoursExceeding") %>'>

</telerik:RadTextBox>

<asp:HiddenField ID="hdnDailyHour" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"DailyHoursExceeding") %>' />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="<%$ Resources:PDICulture, grdDailyOvertimeRate %>"

UniqueName="DailyRate" DataField="DailyRate">

<asp:Label ID="lblDailyRate" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"DailyRate") %>'>

</asp:Label>

</ItemTemplate>

<telerik:RadTextBox ID="txtDailyRate" MaxLength="3" Width="65%" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"DailyRate") %>'>

</telerik:RadTextBox>

<asp:HiddenField ID="hdnDailyRate" runat="server" Value='<%#DataBinder.Eval(Container.DataItem,"DailyRate") %>' />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridButtonColumn HeaderText="<%$ Resources:PDICulture, grdDeleteColumnHeaderText %>"

ConfirmText="<%$ Resources:PDICulture, grdDailyDeleteConfirmText %>" ConfirmDialogType="RadWindow"

ConfirmTitle="<%$ Resources:PDICulture, grdDeleteColumnHeaderText %>" ButtonType="ImageButton"

CommandName="Delete" UniqueName="DeleteColumn">

</telerik:GridButtonColumn>

</Columns>

<asp:Label runat="server" ID="lblDOTGrdNoRecord" Text="<%$ Resources:PDICulture, GridEmptyMessage %>">

</asp:Label>

</NoRecordsTemplate>

</MasterTableView>

</telerik:RadGrid>

Thanks
Rajesh

Grid

answered on 18 Jan 2011

7 answers

974 views

Select a row using javascript

I am migrating an application from another company's control which selects an item in javascript under certain conditions. I can't seem to select a row.

    var grid = $find("<%=rgItems.ClientID%>").get_masterTableView();
    for(i=0;i<rowCount;i++) // rowCount set from hidden variable
{
   if (something is true)
   {
   grid.selectItem(i); // doesn't work
    }
}

Grid

answered on 18 Jan 2011

1 answer

131 views

Client-side data source manipulation

So I'm trying to accomplish something I'm finding a bit hard.

Grid on a page. I want to return to the grid a streamed set of records. JSON or XML or whatever. I need the grid to incorporate those records as they arrive on the client. Incorporating them will mean inserting them into the grid in the proper position based on some sort of sort criteria. Removing duplicates, expanding nodes, pushing results onto the next page.

Basically the server will take a long time to return all the results, and I want them to appear in the list as the server has them.

Doing this on the server isn't that hard. I already have the data being retrieved through a series of iterators just fine. Just trying to figure out the best way to deliver them client side.

Anybody have any examples of doing something like this?

Grid

answered on 18 Jan 2011

1 answer

222 views

RadListView and RadDataPager

Hi,

I am using the RadListView and RadDataPager but am getting some really bad results. I must be doing something very wrong. Please could you advise.

I shall explain the intended outcome, the result and paste my code below.

When the page first loads, a random selection of five database items is retrieved and the DataListView is databound. This happens in the page load event and only if the page is not a postback
After this, users can select an item from a RadComboBox. Depending on the selection any number of items may be retrieved from the database
Upon the server side event of RadComboBox firing, new database results are retrieved and the DataListView is rebound

Issues:
1. When the DataListView is rebound (step 3 above), the DataPager control only displays 2 new page buttons. The additional page buttons which should be there do not appear until after one of the buttons have been clicked. For example, if 3 pages of results are returned then the DataPager will show [1, 2], and if I click on 1 or 2 then it is refreshed and shows [1, 2, 3, n....]
2. Another hideous problem is that the DataListView "OnPageIndexChanged" event goes into a loop on the server side (ouch!!!)

Please could you advise as there are no examples of binding the DataListView and RadDataPager using anything other than a static datasource.

<telerik:RadListView ID="RadListView1" CssClass="dlProfiles" Width="97%" OnPageIndexChanged="RadListView2_PageIndexChanged" AllowPaging="True" runat="server" AllowSorting="true" DataKeyNames="EngID"
ItemPlaceholderID="EmployeesContainer">
<LayoutTemplate>
<telerik:RadDataPager ID="RadDataPager1" runat="server" PagedControlID="RadListView1" PageSize="6">
<Fields>
<telerik:RadDataPagerButtonField FieldType="FirstPrev" />
<telerik:RadDataPagerButtonField FieldType="Numeric" />
<telerik:RadDataPagerButtonField FieldType="NextLast" />
<telerik:RadDataPagerPageSizeField PageSizeText="Page size: " />
<telerik:RadDataPagerGoToPageField CurrentPageText="Page: " TotalPageText="of" SubmitButtonText="Go" TextBoxWidth="15" />
<telerik:RadDataPagerTemplatePageField>
<PagerTemplate>
<div style="float: right">
<b>Items
<asp:Label runat="server" ID="CurrentPageLabel" Text="<%# Container.Owner.StartRowIndex+1%>" />
to
<asp:Label runat="server" ID="TotalPagesLabel" Text="<%# Container.Owner.StartRowIndex+Container.Owner.PageSize %>" />
of
<asp:Label runat="server" ID="TotalItemsLabel" Text="<%# Container.Owner.TotalRowCount%>" />
<br />
</b>
</div>
</PagerTemplate>
</telerik:RadDataPagerTemplatePageField>
</Fields>
</telerik:RadDataPager>

<asp:PlaceHolder ID="EmployeesContainer" runat="server" />
</LayoutTemplate>
<ItemTemplate>
<div class="EngProfileContainer">
<div class="EngProfile_ImageContainer">
<img src='<%# returnImage(DataBinder.Eval(Container.DataItem, "EngProfileImage").ToString())%>' width="80" />
<p style="clear:both;height:0px;margin:3px 0px 0px 0px;"> </p>
<div class="EngProfileButton">
<%# CheckDescriptionLinks(DataBinder.Eval(Container.DataItem, "engDescription").ToString(), DataBinder.Eval(Container.DataItem, "EngID").ToString())%>
<p style="clear:both;height:0px;margin:3px 0px 0px 0px;"> </p>
<a class="viewEngineerProfile" href="engineerprofile.aspx?EngID=<%# DataBinder.Eval(Container.DataItem, "EngID")%>" target="_self">View full profile</a>
</div>
</div>
<div class="EngProfileTextContainer">
<p class="engname"><b><%# DataBinder.Eval(Container.DataItem, "EngName")%></b></p>
<p class="engSkills"><%# DataBinder.Eval(Container.DataItem, "skillDescriptions")%></p>
<%# CheckDescription(DataBinder.Eval(Container.DataItem, "engDescription").ToString(), DataBinder.Eval(Container.DataItem, "EngID").ToString())%>
</div>
<div class="EngProfileCommentContainer">
<p style="float:left;">Rating :</p>
<p style="float:left;"><telerik:RadRating ID="RadRating1" Enabled="false" AutoPostBack="true" runat="server" Value='<%# DataBinder.Eval(Container.DataItem, "ratings")%>' ItemCount="5" SelectionMode="Continuous" Precision="Item" EnableEmbeddedSkins="false" Skin="Smaller" /></p>
<p><a href="enginerreviews.aspx?engID=<%# DataBinder.Eval(Container.DataItem, "EngID")%>" target="_self"><%# DataBinder.Eval(Container.DataItem, "numofratings").ToString()%> Reviews</a></p>
</div>

<p style="clear:both;height:0px;margin:0;"> </p>
</div>
</ItemTemplate>
</telerik:RadListView>

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

IList<EngineerHelper.EngProfile> engProfiles = EngineerHelper.return_RandomEngineers(5);

RadListView1.DataSource = engProfiles;

RadListView1.DataBind();

}

protected void RadListView2_PageIndexChanged(object sender, RadListViewPageChangedEventArgs e)

{

IList<EngineerHelper.EngProfile> engProfiles = EngineerHelper.return_RandomEngineers(0);

RadListView1.DataSource = engProfiles;

RadListView1.DataBind();

}

protected void returnEngineers(object sender, RadComboBoxSelectedIndexChangedEventArgs e)

{

IList<EngineerHelper.EngProfile

> engProfiles = EngineerHelper.return_SelectedEngineers(EngineerHelper.engineerIDsBySkillGenre(Convert.ToInt16(e.Value)));

RadListView1.DataSource = engProfiles;

RadListView1.DataBind();

}

ListView

answered on 18 Jan 2011

1 answer

102 views

RequestTimeOut Exception for large number of rows

Hi,

I have a RadGrid with approximate 8,000 rows. When i perform any functionality (for example, paging, filtering or checking/unchecking the checkbox), it always throws RequestTimeOut Exception. I am not able to perform any of these operations for such large number of rows.

Because of this situation, i am not able to deliver the project to the client.

Kindly suggest me the possible solutions very urgently to overcome this problem.

Kind Regards.

Grid

answered on 18 Jan 2011

7 answers

326 views

RadGrid navigation with arrow keys

Hi,
I am developing a RadGrid in asp.net Ajax which has features same as that of the RadGrid of the Silverlight component. i have comboboxes as cells in my grid and have a code to navigate the grid with arrow keys.

<telerik:RadGrid AllowMultiRowSelection="True" ID="RadGrid1" runat="server"

DataSourceID="AccessDataSource1" GridLines="None"

OnPreRender="RadGrid1_PreRender" AllowFilteringByColumn="True"

AllowPaging="True" AllowSorting="True" PageSize="5"

AutoGenerateEditColumn="True">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="CustomerID" DataSourceID="AccessDataSource1">

<RowIndicatorColumn Visible="False">

<HeaderStyle Width="20px" />

</RowIndicatorColumn>

<ExpandCollapseColumn Resizable="False" Visible="False">

<HeaderStyle Width="20px" />

</ExpandCollapseColumn>

<Columns> <%-- removed onkeydown event from all text boxes --%>

<telerik:GridBoundColumn DataField="CustomerID" HeaderText="CustomerID" ReadOnly="True"

SortExpression="CustomerID" UniqueName="CustomerID">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="CompanyName" HeaderText="CompanyName" SortExpression="CompanyName"

UniqueName="CompanyName">

<ItemTemplate>

<telerik:RadComboBox ID="RadComboBox1" Runat="server"

DataTextField="CompanyName" AllowCustomText="True"

DataValueField="CompanyName"

Text="select value" AutoPostBack="True"

>

<Items>

<telerik:RadComboBoxItem runat="server" Text="arr" Value="arr" />

<telerik:RadComboBoxItem runat="server" Text="dep" Value="dep" />

</Items>

</telerik:RadComboBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="ContactName" HeaderText="ContactName" SortExpression="ContactName"

UniqueName="ContactName">

<ItemTemplate>

<asp:TextBox ID="box2" runat="server"

Text='<%#Eval("ContactName") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="ContactTitle" HeaderText="ContactTitle" SortExpression="ContactTitle"

UniqueName="ContactTitle">

<ItemTemplate>

<asp:TextBox ID="box3" runat="server"

Text='<%#Eval("ContactTitle") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Address" HeaderText="Address" SortExpression="Address"

UniqueName="Address">

<ItemTemplate>

<asp:TextBox ID="box4" runat="server"

Text='<%#Eval("Address") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="City" HeaderText="City" SortExpression="City"

UniqueName="City">

<ItemTemplate>

<asp:TextBox ID="box5" runat="server"

Text='<%#Eval("City") %>'></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

/Columns>

</MasterTableView>

<ClientSettings>

<Selecting AllowRowSelect="True" />

<ClientEvents OnKeyPress="keyPress" OnGridCreated="gridCreated" OnRowSelecting="rowSelecting" />

</ClientSettings>

<EditItemStyle BackColor="Yellow" />

</telerik:RadGrid>

<script type="text/javascript">

var RadGrid1;

var columnCounter = 0;

var rowCounter = 0;

var currentCell = null;

function getCell(grid) {

var cell;

var columnName = grid.get_masterTableView().get_columns()[columnCounter].get_uniqueName();

var row = grid.get_masterTableView().get_dataItems()[rowCounter];

cell = grid.get_masterTableView().getCellByColumnUniqueName(row, columnName);

return cell;

}

function getColumnName(grid) {

return grid.get_masterTableView().get_columns()[columnCounter].get_uniqueName();

}

function handleKeyPress(keyCode) {

if (keyCode == 39) {

if (columnCounter < RadGrid1.get_masterTableView().get_columns().length - 1) {

if (currentCell != null) {

currentCell.className = "";

}

columnCounter++;

currentCell = getCell(RadGrid1);

currentCell.className = "class1";

if (getColumnName(RadGrid1) == "CustomerID") {

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CompanyName") {

$telerik.findElement(currentCell, "RadComboBox1").focus();

}

if (getColumnName(RadGrid1) == "ContactName") {

$telerik.findElement(currentCell, "box2").focus();

}

if (getColumnName(RadGrid1) == "ContactTitle") {

$telerik.findElement(currentCell, "box3").focus();

}

if (getColumnName(RadGrid1) == "Address") {

$telerik.findElement(currentCell, "box4").focus();

}

if (getColumnName(RadGrid1) == "City") {

$telerik.findElement(currentCell, "box5").focus();

}

if (getColumnName(RadGrid1) == "Region") {

$telerik.findElement(currentCell, "box6").focus();

}

if (getColumnName(RadGrid1) == "PostalCode") {

$telerik.findElement(currentCell, "box7").focus();

}

if (getColumnName(RadGrid1) == "Phone") {

$telerik.findElement(currentCell, "box8").focus();

}

if (getColumnName(RadGrid1) == "Fax") {

$telerik.findElement(currentCell, "box9").focus();

}

else if (keyCode == 37) {

if (currentCell != null) {

currentCell.className = "";

}

if (columnCounter > 0) {

columnCounter--;

currentCell = getCell(RadGrid1);

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CustomerID") {

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CompanyName") {

$telerik.findElement(currentCell, "RadComboBox1").focus();

}

if (getColumnName(RadGrid1) == "ContactName") {

$telerik.findElement(currentCell, "box2").focus();

}

if (getColumnName(RadGrid1) == "ContactTitle") {

$telerik.findElement(currentCell, "box3").focus();

}

if (getColumnName(RadGrid1) == "Address") {

$telerik.findElement(currentCell, "box4").focus();

}

if (getColumnName(RadGrid1) == "City") {

$telerik.findElement(currentCell, "box5").focus();

}

if (getColumnName(RadGrid1) == "Region") {

$telerik.findElement(currentCell, "box6").focus();

}

if (getColumnName(RadGrid1) == "PostalCode") {

$telerik.findElement(currentCell, "box7").focus();

}

if (getColumnName(RadGrid1) == "Phone") {

$telerik.findElement(currentCell, "box8").focus();

}

if (getColumnName(RadGrid1) == "Fax") {

$telerik.findElement(currentCell, "box9").focus();

}

else if (keyCode == 38) {

if (rowCounter > 0) {

if (currentCell != null) {

currentCell.className = "";

}

rowCounter--;

currentCell = getCell(RadGrid1);

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CustomerID") {

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CompanyName") {

$telerik.findElement(currentCell, "RadComboBox1").focus();

}

if (getColumnName(RadGrid1) == "ContactName") {

$telerik.findElement(currentCell, "box2").focus();

}

if (getColumnName(RadGrid1) == "ContactTitle") {

$telerik.findElement(currentCell, "box3").focus();

}

if (getColumnName(RadGrid1) == "Address") {

$telerik.findElement(currentCell, "box4").focus();

}

if (getColumnName(RadGrid1) == "City") {

$telerik.findElement(currentCell, "box5").focus();

}

if (getColumnName(RadGrid1) == "Region") {

$telerik.findElement(currentCell, "box6").focus();

}

if (getColumnName(RadGrid1) == "PostalCode") {

$telerik.findElement(currentCell, "box7").focus();

}

if (getColumnName(RadGrid1) == "Phone") {

$telerik.findElement(currentCell, "box8").focus();

}

if (getColumnName(RadGrid1) == "Fax") {

$telerik.findElement(currentCell, "box9").focus();

}

else if (keyCode == 40) {

if (rowCounter < RadGrid1.get_masterTableView().get_dataItems().length - 1) {

if (currentCell != null) {

currentCell.className = "";

}

rowCounter++;

currentCell = getCell(RadGrid1);

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CustomerID") {

currentCell.className = "class1";

}

if (getColumnName(RadGrid1) == "CompanyName") {

$telerik.findElement(currentCell, "RadComboBox1").focus();

}

if (getColumnName(RadGrid1) == "ContactName") {

$telerik.findElement(currentCell, "box2").focus();

}

if (getColumnName(RadGrid1) == "ContactTitle") {

$telerik.findElement(currentCell, "box3").focus();

}

if (getColumnName(RadGrid1) == "Address") {

$telerik.findElement(currentCell, "box4").focus();

}

if (getColumnName(RadGrid1) == "City") {

$telerik.findElement(currentCell, "box5").focus();

}

if (getColumnName(RadGrid1) == "Region") {

$telerik.findElement(currentCell, "box6").focus();

}

if (getColumnName(RadGrid1) == "PostalCode") {

$telerik.findElement(currentCell, "box7").focus();

}

if (getColumnName(RadGrid1) == "Phone") {

$telerik.findElement(currentCell, "box8").focus();

}

if (getColumnName(RadGrid1) == "Fax") {

$telerik.findElement(currentCell, "box9").focus();

}

function textBoxKeyPress(e) {

var evt = e ? e : window.event;

//focus next control in the cell

//or if not any, continue to next cell.

handleKeyPress(e.keyCode);

}

function keyPress(sender, args) {

var keyCode = args.get_keyCode();

handleKeyPress(keyCode);

}

function gridCreated(sender, args) {

RadGrid1 = sender;

currentCell = RadGrid1.get_masterTableView().getCellByColumnUniqueName(RadGrid1.get_masterTableView().get_dataItems()[0], "CustomerID");

currentCell.className = "class1";

}

function rowSelecting() {

return false;

}

my problem is that on focus of the combobox, i want to navigate through the items in the combobox or in case of a text box edit the item, but as per above code when i press the arrow key i am moved onto next cell. can you please help me out with this?

an alternative solution that would be helpful:
in simple terms i want to have a radGrid in asp.net which has features of the silverlight radgrid controls. that is what i am trying to achieve through above code. A sample code for the same will be very helpful.

Grid

answered on 18 Jan 2011

1 answer

188 views

How and where to loop through all days on the calendar and show events from db

I have a list of events in the database for certain days. I need to display this on dropdown list inside each days cell in the calender. I know how to put a dropdown inside the calendar cell
1) but I dont know where and in what event I can loop through the days in the calendar
2) and how to get a reference to the dropdown list in its cell

I looked through the examples but still have not much clue. any help is appreciated.

Calendar

answered on 18 Jan 2011