Questions on UI for ASP.NET AJAX Forum

1 answer

69 views

Visual que for button getting focus via Javascript

I have a aspx page that has a series of radTextBoxes. The behavior should be as follows: user enters a value, tabs to next control. If the user tabs again without entering any data, the focus should go to a button. I have the javascript that does this but there isn't any visual que to tell the user the button has focus. How do I get the visual que to show much like tabbing into a button where it changes color.

function SetFocSubmit(objTextCtrl) {

if (objTextCtrl.value == "") {

document.getElementById("btnCheckCodes_input").focus();

}

If I use the $find method I get the yellow screen of death.

System.Web.HttpException: The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

function SetFocSubmit(objTextCtrl) {

if (objTextCtrl.value == "") {

var btn = $find('<%= btnCheckCodes.clientID %>');

btn.focus();

}

If I use an asp:button and run this, the button will give a visual que that it has the focus

Button

answered on 19 Mar 2013

2 answers

156 views

Radmenu rendering Issue

Hi,

I have a dynamic menu fully through JavaScript which acts as a context menu and items keeps on changing based on the selection. The issue that I face is with rendering. First time when menu is invoked, it renders properly and all sub menus comes properly. However when same invoked second time, it seems each menu have different width and some of the images that lies underneath is visible through menu. See the image & code attached.

function resetMenu(menu) {

menu.get_items().clear();

}

function addMenuItem(menu, caption, value) {

var item = new Telerik.Web.UI.RadMenuItem();

item.set_text(caption);

item.set_value(value);

item.set_visible(

true);

menu.get_items().add(item);

}

function buildMenu(key) {

var menu = $find("<%= radActionMenu.ClientID %>");

var id = key.substring(key.indexOf("-", 0) + 1, key.length);

menu.trackChanges();

resetMenu(menu);

if (key.substring(0, 1) == "1") addMenuItem(menu, "View ", "1-" + id)

if (key.substring(1, 2) == "1") addMenuItem(menu, "Issue ", "2-" + id)

if (key.substring(2, 3) == "1") addMenuItem(menu, "Issue ", "3-" + id)

if (key.substring(3, 4) == "1") addMenuItem(menu, "History", "4-" + id)

if (key.substring(4, 5) == "1") addMenuItem(menu, "Add Add Add Add", "5-" + id)

menu.commitChanges();

}

function showMenu(e, key) {

var contextMenu = $find("<%= radActionMenu.ClientID %>");

$telerik.cancelRawEvent(e);

if ((!e.relatedTarget) || (!$telerik.isDescendantOrSelf(contextMenu.get_element(), e.relatedTarget))) {

buildMenu(key);

contextMenu.show(e);

}

<telerik:RadContextMenu ID="radActionMenu" runat="server" EnableRoundedCorners="True"

EnableShadows="True" OnClientItemClicked="onClicked" CausesValidation="False"

EnableViewState="False" ExpandDelay="50" >

<Items>

</Items>

</telerik:RadContextMenu>

Menu

answered on 19 Mar 2013

1 answer

71 views

Gantt Chart

HI

I have telerik gantt chart and database now i want to get that database item into gantt chart .

and also i have another question that is how to assign database column to x-axis and Y-axis.

i mean i have date column in my database i want to fix this one as Y-axis for telerik Gantt chart
and i have ID column we want to fix this id to X-axis How can we do this
can anyone help me for this

Thanking you,
P.Mugil

General Discussions

answered on 18 Mar 2013

1 answer

217 views

RadGrid Client Edit with Batch Server Update Only Updates One Row

I am testing out the demo on RadGrid Client Edit with Batch Server Update demonstrated here: http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultvb.aspx?#qsf-demo-source

The problem I am having is that when I make multiple cell changes on several rows, the grid only updates the record that was first modified. The changes made on the first record, including all the columns, are successfully saved to the database. However, the values of all other records modified, in rows, does not get updated. These values are retained, regardless of the values that were changed to.

Has anyone experienced this and have a solution?

Much appreciated.

ASPX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

<head>

<title>Applying AJAX Grid's client-side editing with batch server update | RadGrid demo</title>

</head>

<body>

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

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

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

//Custom js code section used to edit records, store changes and switch the visibility of column editors

//global variables for edited cell and edited rows ids

var editedCell;

var arrayIndex = 0;

var editedItemsIds = [];

function RowCreated(sender, eventArgs)

{

var dataItem = eventArgs.get_gridDataItem();

//traverse the cells in the created client row object and attach dblclick handler for each of them

for (var i = 1; i < dataItem.get_element().cells.length; i++)

{

var cell = dataItem.get_element().cells[i];

if (cell)

{

$addHandler(cell, "dblclick", Function.createDelegate(cell, ShowColumnEditor));

}

//detach the ondblclick handlers from the cells on row disposing

function RowDestroying(sender, eventArgs)

{

if (eventArgs.get_id() === "") return;

var row = eventArgs.get_gridDataItem().get_element();

var cells = row.cells;

for (var j = 0, len = cells.length; j < len; j++)

{

var cell = cells[j];

if (cell)

{

$clearHandlers(cell);

}

function RowClick(sender, eventArgs)

{

if (editedCell)

{

//if the click target is table cell or span and there is an edited cell, update the value in it

//skip update if clicking a span that happens to be a form decorator element (having a class that starts with "rfd")

if ((eventArgs.get_domEvent().target.tagName == "TD") ||

(eventArgs.get_domEvent().target.tagName == "SPAN" && !eventArgs.get_domEvent().target.className.startsWith("rfd")))

{

UpdateValues(sender);

editedCell = false;

}

function ShowColumnEditor()

{

editedCell = this;

//hide text and show column editor in the edited cell

var cellText = this.getElementsByTagName("span")[0];

cellText.style.display = "none";

//display the span which wrapps the hidden checkbox editor

if (this.getElementsByTagName("span")[1])

{

this.getElementsByTagName("span")[1].style.display = "";

}

var colEditor = this.getElementsByTagName("input")[0] || this.getElementsByTagName("select")[0];

//if the column editor is a form decorated select dropdown, show it instead of the original

if (colEditor.className == "rfdRealInput" && colEditor.tagName.toLowerCase() == "select") colEditor = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(colEditor);

colEditor.style.display = "";

colEditor.focus();

}

function StoreEditedItemId(editCell)

{

//get edited row key value and add it to the array which holds them

var gridRow = $find(editCell.parentNode.id);

var rowKeyValue = gridRow.getDataKeyValue("ID");

Array.add(editedItemsIds, rowKeyValue);

}

function HideEditor(editCell, editorType)

{

//get reference to the label in the edited cell

var lbl = editCell.getElementsByTagName("span")[0];

switch (editorType)

{

case "textbox":

var txtBox = editCell.getElementsByTagName("input")[0];

if (lbl.innerHTML != txtBox.value)

{

lbl.innerHTML = txtBox.value;

editCell.style.border = "1px dashed";

StoreEditedItemId(editCell);

}

txtBox.style.display = "none";

break;

case "checkbox":

var chkBox = editCell.getElementsByTagName("input")[0];

if (lbl.innerHTML.toLowerCase() != chkBox.checked.toString())

{

lbl.innerHTML = chkBox.checked;

editedCell.style.border = "1px dashed";

StoreEditedItemId(editCell);

}

chkBox.style.display = "none";

editCell.getElementsByTagName("span")[1].style.display = "none";

break;

case "dropdown":

var ddl = editCell.getElementsByTagName("select")[0];

var selectedValue = ddl.options[ddl.selectedIndex].value;

if (lbl.innerHTML != selectedValue)

{

lbl.innerHTML = selectedValue;

editCell.style.border = "1px dashed";

StoreEditedItemId(editCell);

}

//if the form decorator was enabled, hide the decorated dropdown instead of the original.

if (ddl.className == "rfdRealInput") ddl = Telerik.Web.UI.RadFormDecorator.getDecoratedElement(ddl);

ddl.style.display = "none";

default:

break;

}

lbl.style.display = "inline";

}

function UpdateValues(grid)

{

//determine the name of the column to which the edited cell belongs

var tHeadElement = grid.get_element().getElementsByTagName("thead")[0];

var headerRow = tHeadElement.getElementsByTagName("tr")[0];

var colName = grid.get_masterTableView().getColumnUniqueNameByCellIndex(headerRow, editedCell.cellIndex);

//based on the column name, extract the value from the editor, update the text of the label and switch its visibility with that of the column

//column. The update happens only when the column editor value is different than the non-editable value. We also set dashed border to indicate

//that the value in the cell is changed. The logic is isolated in the HideEditor js method

switch (colName)

{

case "changes":

HideEditor(editedCell, "textbox");

break;

case "note":

HideEditor(editedCell, "textbox");

break;

default:

break;

}

function CancelChanges()

{

if (editedItemsIds.length > 0)

{

$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest("");

}

else

{

alert("No pending changes to be discarded");

}

editedItemsIds = [];

}

function ProcessChanges()

{

//extract edited rows ids and pass them as argument in the ajaxRequest method of the manager

if (editedItemsIds.length > 0)

{

var Ids = "";

for (var i = 0; i < editedItemsIds.length; i++)

{

Ids = Ids + editedItemsIds[i] + ":";

}

$find("<%=RadAjaxManager1.ClientID %>").ajaxRequest(Ids);

}

else

{

alert("No pending changes to be processed");

}

editedItemsIds = [];

}

function RadGrid1_Command(sender, eventArgs)

{

//Note that this code has to be executed if you postback from external control instead from the grid (intercepting its onclientclick handler for this purpose),

//otherwise the edited values will be lost or not propagated in the source

if (editedItemsIds.length > 0)

{

if (eventArgs.get_commandName() == "Sort" || eventArgs.get_commandName() == "Page" || eventArgs.get_commandName() == "Filter")

{

if (confirm("Any unsaved edited values will be lost. Choose 'OK' to discard the changes before proceeding or 'Cancel' to abort the action and process them."))

{

editedItemsIds = [];

}

else

{

//cancel the chosen action

eventArgs.set_cancel(true);

//process the changes

ProcessChanges();

editedItemsIds = [];

}

window.onunload = function()

{

//this code should also be executed on postback from external control (which rebinds the grid) to process any unsaved data

if (editedItemsIds.length > 0)

{

if (confirm("Any unsaved edited values will be lost. Choose 'OK' to discard the changes before proceeding or 'Cancel' to abort the action and process them."))

{

editedItemsIds = [];

}

else

{

//process the changes

ProcessChanges();

editedItemsIds = [];

}

};

</script>

</telerik:RadCodeBlock>

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

DefaultLoadingPanelID="RadAjaxLoadingPanel1">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="RadInputManager1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="RadInputManager1"></telerik:AjaxUpdatedControl>

<telerik:AjaxUpdatedControl ControlID="Label1"></telerik:AjaxUpdatedControl>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Default">

</telerik:RadAjaxLoadingPanel>

<telerik:RadInputManager ID="RadInputManager1" EnableEmbeddedBaseStylesheet="False"

Skin="" runat="server">

<telerik:TextBoxSetting BehaviorID="StringBehavior" InitializeOnClient="true">

</telerik:TextBoxSetting>

</telerik:RadInputManager>

<telerik:RadGrid ID="RadGrid1" DataSourceID="SqlDataSource1" Width="97%" ShowStatusBar="True"

AllowSorting="True" PageSize="15" GridLines="None" AllowPaging="True" runat="server"

AutoGenerateColumns="False">

<MasterTableView TableLayout="Fixed" DataKeyNames="ID" EditMode="InPlace"

ClientDataKeyNames="ID" CommandItemDisplay="Bottom">

<CommandItemTemplate>

<div style="height: 30px; text-align: right;">

<asp:Image ID="imgCancelChanges" runat="server" ImageUrl="~/Images/cancel.gif"

AlternateText="Cancel changes" ToolTip="Cancel changes" Height="24px" Style="cursor: pointer;

margin: 2px 5px 0px 0px;" onclick="CancelChanges();"></asp:Image>

<asp:Image ID="imgProcessChanges" runat="server" ImageUrl="~/Images/ok.gif"

AlternateText="Process changes" ToolTip="Process changes" Height="24px" Style="cursor: pointer;

margin: 2px 5px 0px 0px;" onclick="ProcessChanges();"></asp:Image>

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn UniqueName="ID" DataField="ID" HeaderText="ID"

ReadOnly="True">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="NatlERX" DataField="NatlERX" HeaderText="NatlERX"

ReadOnly="True" HeaderStyle-Width="5%">

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="changes" SortExpression="changes"

HeaderText="changes">

<ItemTemplate>

<asp:Label ID="lblchanges" runat="server" Text='<%# Eval("changes")%>'></asp:Label>

<asp:TextBox ID="txtchanges" runat="server" Text='<%# Bind("changes")%>' Width="95%"

Style="display: none"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="changes" SortExpression="changes"

HeaderText="changes">

<ItemTemplate>

<asp:Label ID="lblnote" runat="server" Text='<%# Eval("note")%>'></asp:Label>

<asp:TextBox ID="txtnote" runat="server" Text='<%# Bind("note")%>' Width="95%"

Style="display: none"></asp:TextBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowCreated="RowCreated" OnRowClick="RowClick" OnCommand="RadGrid1_Command"

OnRowDestroying="RowDestroying"></ClientEvents>

</ClientSettings>

</telerik:RadGrid>

<br/>

<asp:Label ID="Label1" runat="server" EnableViewState="false"></asp:Label>

<br/>

<asp:SqlDataSource ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:OSMGRConnectionString %>"

ProviderName="System.Data.SqlClient" SelectCommand="SELECT id, changes, natlerx, note FROM tbl_scal_dpl where natlerx='132'"

runat="server" UpdateCommand="UPDATE [tbl_scal_dpl] SET [changes] = @changes, note = @note WHERE [ID] = @ID">

<UpdateParameters>

<asp:Parameter Name="changes" Type="String"></asp:Parameter>

<asp:Parameter Name="note" Type="String"></asp:Parameter>

<asp:Parameter Name="ID" Type="Int64"></asp:Parameter>

</UpdateParameters>

</asp:SqlDataSource>

</form>

</body>

</html>

VB

Imports System

Imports Telerik.Web.UI

Imports System.Collections

Imports Telerik

Partial Public Class DPLReport

Inherits System.Web.UI.Page

Private Sub SetMessage(ByVal message As String)

Label1.Text = String.Format("<span>{0}</span>", message)

End Sub

Protected Sub RadGrid1_ItemCreated(ByVal sender As Object, ByVal e As GridItemEventArgs) Handles RadGrid1.ItemCreated

If TypeOf e.Item Is GridDataItem Then

Dim dataItem As GridDataItem = CType(e.Item, GridDataItem)

Dim txtBox As TextBox = CType(dataItem.FindControl("txtchanges"), TextBox)

Dim stringSetting As TextBoxSetting = DirectCast(RadInputManager1.GetSettingByBehaviorID("StringBehavior"), TextBoxSetting)

stringSetting.TargetControls.Add(New TargetInput(txtBox.UniqueID, True))

txtBox = CType(dataItem.FindControl("txtnote"), TextBox)

stringSetting = DirectCast(RadInputManager1.GetSettingByBehaviorID("StringBehavior"), TextBoxSetting)

stringSetting.TargetControls.Add(New TargetInput(txtBox.UniqueID, True))

End If

End Sub

Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest

If e.Argument = String.Empty Then

RadGrid1.Rebind()

End If

Dim editedItemIds As String() = e.Argument.Split(":")

Dim i As Integer

For i = 0 To editedItemIds.Length - 2

Dim productId As String = editedItemIds(i)

Dim updatedItem As GridDataItem = RadGrid1.MasterTableView.FindItemByKeyValue("ID", Integer.Parse(productId))

UpdateValues(updatedItem)

Next

End Sub

Protected Sub UpdateValues(ByVal updatedItem As GridDataItem)

Dim txtBox As TextBox = CType(updatedItem.FindControl("txtchanges"), TextBox)

SqlDataSource1.UpdateParameters("changes").DefaultValue = txtBox.Text

txtBox = CType(updatedItem.FindControl("txtnote"), TextBox)

SqlDataSource1.UpdateParameters("note").DefaultValue = txtBox.Text

SqlDataSource1.UpdateParameters("ID").DefaultValue = updatedItem.GetDataKeyValue("ID").ToString()

Try

SqlDataSource1.Update()

Catch ex As Exception

SetMessage(Server.HtmlEncode("Unable to update Products. Reason: " + ex.StackTrace).Replace("'", "'").Replace(vbCrLf, "<br />"))

End Try

'SetMessage("Product with ID: " & updatedItem.GetDataKeyValue("ID") & " updated")

RadGrid1.Rebind()

End Sub

End Class

Grid

answered on 18 Mar 2013

1 answer

134 views

Table Inside ListView Rendering Issues?

I am having an issue with a table inside of a listview. Randomly cells inside of the table will shift to the right, pushing the rest of the row with it off the side of the grid. This happens randomly, not always in the same place. It also happens with the header row. If I take the column count down to 3 or less, the problem goes away.

I have tried manually setting all of the cell values to no avail.
Disabling AJAX on the radajaxmanager makes the problem go away.
This problem only occurs in IE 9. The page renders fine in IE 8 and latest Firefox.

Any help is appreciated!

ListView

answered on 18 Mar 2013

5 answers

231 views

Line spacing got removed when use Export to PDF functionalioty of RadEditor

Hi,

We are using Export to PDF functionality of Rad editor in our application. When try to Export some text content from Rad editor to PDF the line spacing between the paragraphs in text content got removed in Exported PDF file. Please help us to rectify the problem.

Find the attached document for your reference

Thanks in advance

Editor

answered on 18 Mar 2013

1 answer

79 views

Date Comparison

Hi

i Have a column like Start Date in database but it is in nvarchar data type
i want to select the data within particular date in the same column(Start Date)

Regards
P.Mugil

General Discussions

answered on 18 Mar 2013

3 answers

128 views

RadGrid sorting does not work on all types of data sources

I am using the default RadGrid sorting feature, but it only works in some cases. For example:

<telerik:RadGrid runat="server" ID="NumbersGrid" AllowSorting="true" OnNeedDataSource="NeedNumbers" />

protected void NeedNumbers(object sender, GridNeedDataSourceEventArgs e)

{

((RadGrid)sender).DataSource = Enumerable.Range(1, 10).Select(number => new { number });

}

This displays 10 numbers in a grid, as you would expect. If you click on the header, a sorting arrow appears but the grid does not actually become sorted. How come?

I am using Telerik 2012.1.

Grid

answered on 18 Mar 2013

3 answers

167 views

[Solved] Rad textbox getting lost on mouse over

I am using the code below to show/hide a Radtextbox on item selected from RadCombobox. For some reason the Radtextbox is disappearing on mouse over.
aspx file
--------------------
<td class="rowcontent">
<telerik:RadComboBox ID="ddIdentifiedBy" runat="server" DataTextField="FullName" DataValueField="UserId"
Font-Bold="False" Font-Names="Arial" Font-Overline="False" ForeColor="Black" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged">
</telerik:RadComboBox>
<telerik:RadTextBox ID="txtIdentifiedBy" runat="server" Style="margin-left:50px; visibility:hidden;">
</telerik:RadTextBox>
</td>
<script type="text/javascript">
function OnClientSelectedIndexChanged(sender, args) {
var textbox = $find("<%= txtIdentifiedBy.ClientID %>");
if (args._item._text == "Other") {
textbox._element.style.visibility = "visible";
}
else {
textbox._element.style.visibility = "hidden";
}
}
</script

code behind to for the RadComboBox
-------------------------------------------------

ddIdentifiedBy.Items.Insert(1, new RadComboBoxItem("Other"));

General Discussions