Questions on UI for ASP.NET AJAX Forum

1 answer

111 views

Updating RadGrid nested within a RadGrid Edit FormTemplate

If I have a parent RadGrid1 which implements a FormTemplate for editing containing RadGrid2 and RadGrid 3 which are databound...

Is it possible to perform a drag drop operation between RadGrid2 and RadGrid3 without triggering an Ajax update for RadGrid1 yet still responding to the server side OnRowDrop command?

I would like to see only RadGrid2 and RadGrid3 updating with an Ajax refresh.

Is this possible?

Thanks

Ajax

answered on 19 Mar 2013

3 answers

70 views

In press in edit button want to check if drop doen list contain value or n't

Hi ,
i've a drop down list in the edit mode, i just want to check while i prees in the edit button if the drop down list have value " Confirmed " and " N't Confirmed " if it have anyone from the two values , don't open edit and give him message that's already edited

Grid

answered on 19 Mar 2013

1 answer

142 views

[Solved] Creating folder.

Hi Experts,

I am using RadFileExplorer for the user to navigate to a particular directory. How to create a new folder inside the navigated path using this control on clicking an icon?

Thanks and Regards,
Anto Berkman.

FileExplorer

answered on 19 Mar 2013

3 answers

489 views

GridEditCommandColumn not working.

Hi ...
I have a grid , while pressing the edit button only two columns ,one is a Dropdown & another one is texteditor must be in edit mode.I used in-Line edit mode & i used a code to check remaining columns as ReadOnly. wat my prob is when i press the edit button the grid disappears. Please help me with a solution..
MY code is
Aspx:
<telerik:RadGrid ID="RadGrid2" runat="server"
         AllowPaging="True" AllowSorting="True" AutoGenerateColumns="False"
         CellSpacing="0" GridLines="None" AllowAutomaticInserts="True" PageSize="10" AllowAutomaticUpdates="True">

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>

         <telerik:GridBoundColumn DataField="Notes" HeaderText="Notes" SortExpression="Notes"
                    UniqueName="Notes" ColumnEditorID="GridTextBoxColumnEditor">
                    </telerik:GridBoundColumn>

        <telerik:GridEditCommandColumn ButtonType="PushButton" UpdateText="Update" CancelText="Cancel" EditText="Edit"
            FilterControlAltText="Filter EditCommandColumn column">

        </telerik:GridEditCommandColumn>
    </Columns>

<FilterMenu EnableImageSprites="False"></FilterMenu>

            </telerik:RadGrid>
             <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="200px" TextBoxStyle-Height="500px">
    </telerik:GridTextBoxColumnEditor>

Aspx.cs:

protected void RadGrid2_ItemCommand(object source, GridCommandEventArgs e)
{

if (e.CommandName == "Edit")
{

            (RadGrid2.MasterTableView.GetColumn("Id") as GridBoundColumn).ReadOnly = true;
            (RadGrid2.MasterTableView.GetColumn("Date reported") as GridBoundColumn).ReadOnly = true
  .
  .
  .
  RadGrid2.MasterTableView.Rebind();
  }

wat i am missing..? Also i need to add the dropdown list values in GridDropdown column, how to do it

Grid

answered on 19 Mar 2013

5 answers

180 views

Cannot set "02:00" in TimePicker

I don't know if it's a new bug but it's impossible to set 02:00 in a TimePicker as you can see in your example at:

http://demos.telerik.com/aspnet-ajax/calendar/examples/datetimepicker/overview/defaultcs.aspx

Each time we enter or select 02:00, it automatically change for 01:00. All other times in the picker from the demo works but I didn't check for all times we can enter manually.

Someone can fix that please...

Thanks

Calendar

answered on 19 Mar 2013

1 answer

76 views

Telerik :Radgrid Paging issue

I'm using Export to excel feature in my Telerik Radgrid, for this i'm using UseAllDataFields="true"
<MasterTableView CommandItemDisplay="Top" UseAllDataFields="true"> and working fine,
also the paging is working fine with internal filtering but the panel which shows ' 6 items in 1 Pages' after filtering i have only 1 record in Radgrid but the panel again shows ' 6 items in 1 Pages'
also if i change UseAllDataFields="false" then it works fine but then the export to excel feature stops.

Thanks,

Grid

answered on 19 Mar 2013

1 answer

67 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

155 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

70 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

213 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)