Questions on UI for ASP.NET AJAX Forum

1 answer

180 views

How to upload files by default on RadAsyncUpload initialization

I've got a situation where I want to have a couple of files uploaded into a RadAsyncUpload instance when it first is initialized. I'm sure this must be possible via server-side functionality, but I haven't come across an example.

Any hints in this direction?

Thanks!

AsyncUpload

answered on 29 Oct 2010

3 answers

141 views

calculation inside radgrid..

hi,
i am trying to calculation in radgrid by some sample available in telerik site but getting error
System.NullReferenceException: Object reference not set to an instance of an object.

in my grid label display in label column on selection of dropdown and quantity insert by user and output should come in some other column label amount.

protected void radGrid1_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

GridDataItem item = (GridDataItem)e.Item;

DropDownList list = (DropDownList)item.FindControl("ddl1");

list.Items.Insert(0, new ListItem("select", "-1"));

SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["chalk_hillConnectionString"].ConnectionString);

SqlDataAdapter da = new SqlDataAdapter();

da.SelectCommand = new SqlCommand("select product_name from product_detail", con);

DataSet ds = new DataSet();

da.Fill(ds);

list.DataSource = ds;

list.DataBind();

//For calculate item Amount....

Label lbl_Rate = (Label)item.FindControl("lblRate");

TextBox txt_Quantity = (TextBox)item.FindControl("txtQuantity");

Label lbl_Amount = (Label)item.FindControl("lblAmount");

txt_Quantity.Attributes.Add("onFocusout", "return show('" + txt_Quantity.ClientID + "','" + lbl_Rate.ClientID + "','" + lbl_Amount.ClientID + "')");

lbl_Rate.Attributes.Add("onFocusout", "return show('" + txt_Quantity.ClientID + "','" + lbl_Rate.ClientID + "','" + lbl_Amount.ClientID + "')");

lbl_Amount.Attributes.Add("onFocusout", "return show('" + txt_Quantity.ClientID + "','" + lbl_Rate.ClientID + "','" + lbl_Amount.ClientID + "')");

}

<telerik:RadGrid ID="radGrid1" runat="server" OnInsertCommand="radGrid1_InsertCommand" AutoGenerateColumns="False" GridLines="None"

AllowMultiRowEdit="True" AllowAutomaticInserts="true" OnItemDataBound="radGrid1_ItemDataBound" OnNeedDataSource="radGrid1_NeedDataSource">

<MasterTableView AutoGenerateColumns="false" EditMode="InPlace" ShowFooter="false" CommandItemDisplay="Top" OnPreRender="radGrid1_PreRender">

<Columns>

<telerik:GridTemplateColumn HeaderText="Product Name" UniqueName="Product_Name">

<ItemTemplate>

<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true" DataTextField="product_Name"

DataValueField="product_Name" OnSelectedIndexChanged="ddl1_SelectedIndexChanged">

</asp:DropDownList>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Product_rate">

<ItemTemplate>

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

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Product Quantity">

<EditItemTemplate>

<asp:TextBox ID="txtQuantity" runat="server"/>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Product Amount">

<ItemTemplate>

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

</ItemTemplate>

<FooterTemplate>

<asp:Button ID="btn1" runat="server" Text="Add New Item" OnClick="btn1_click" />

</FooterTemplate>

</telerik:GridTemplateColumn>

<script type="text/javascript" language="javascript">

function show(labelrate, labelamount, txtqty) {

var txt_Quantity = $find(txtqty);

var lbl_Rate = $find(labelrate)

var lbl_Amount = $find(labelamount);

var total = txt_Quantity.Getvalue() * lbl_Rate.Getvalue();

labelamount.Setvalue(total);

}

</script>

now just tell me where is the prob???

Grid

answered on 29 Oct 2010

3 answers

271 views

Rad grid want to add text boxes on add new button

Hi,
I want to add text boxes on add new button.

for ex. if i click on add new button i want to generate text boxes on each and every row

and also want to catch its value of each and every text box that i want to generate after clicking on add new button.

Please help me on this.

Thank you.

Grid

answered on 29 Oct 2010

6 answers

135 views

Help with PanelBar styling

All,

I'm having an issue with my PanelBar header links or whatever they're called. I have two panel items. The background for the text in the panel should be Yellow for my active panel and Blue for my inactive panel. I've attached a screenshot of what I'm getting. I'm getting a white space above the correct background for each of these. Is there a css setting I'm missing or have incorrect somewhere? I've modified as many items in the .rpExpanded, .rpExpandable and .rpLink classes that I could think of, but I can't seem to figure it out.

Any help would be greatly appreciated.

PanelBar

answered on 29 Oct 2010

3 answers

70 views

RadFilter on RadGrid with Client Side binding

Hi,

We are using client side binding very similar to the example seen at:
http://demos.telerik.com/aspnet-ajax/grid/examples/client/databinding/defaultcs.aspx

We want to add the RadFilter to this, but looking at the code it does not appear like it will work.

How can we get the RadFilter filter object into javascript and post it back to a WebMethod?

Cheers,
Rich

Grid

answered on 29 Oct 2010

3 answers

258 views

Detail table horizontal Scroll

Is it possible to have a detail table with a separate horizontal scroll ? My detail table is wider than the Master table , scrolling works fine when useStaticHeaders is set to false but for visual reasons I would like to use static headers and have the detail table scroll is that possible?

Grid

answered on 29 Oct 2010

3 answers

175 views

DoubleClick Cell edit

Can someone review my code. I have been struggling for the last few days. Everything works except that it is not updating when I click the update. It posts back, but the values remain.

I am using this example as a template: http://demos.telerik.com/aspnet-ajax/grid/examples/dataediting/clienteditbatchupdates/defaultcs.aspx

It probably has to do with namespace. I'm just learning and took it out.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="test.aspx.vb" Inherits="WebDataInput.test" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">

</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

<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("ContributionMasterID");

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 "PayDate":

HideEditor(editedCell, "textbox");

break;

case "Totals":

HideEditor(editedCell, "textbox");

break;

case "UnitPrice":

HideEditor(editedCell, "textbox");

break;

case "UnitsInStock":

HideEditor(editedCell, "dropdown");

break;

case "Discontinued":

HideEditor(editedCell, "checkbox");

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:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="Default,Select,Textbox"

EnableRoundedCorners="false" />

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

<telerik:AjaxUpdatedControl ControlID="RadInputManager1" />

<telerik:AjaxUpdatedControl ControlID="Label1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

<UpdatedControls>

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

<telerik:AjaxUpdatedControl ControlID="RadInputManager1" />

<telerik:AjaxUpdatedControl ControlID="Label1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" />

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

Skin="" runat="server">

<telerik:TextBoxSetting BehaviorID="StringBehavior" EmptyMessage="type here" />

<telerik:NumericTextBoxSetting BehaviorID="CurrencyBehavior" EmptyMessage="type.."

Type="Currency" Validation-IsRequired="true" MinValue="0" MaxValue="100000" />

<telerik:NumericTextBoxSetting BehaviorID="NumberBehavior" EmptyMessage="type.."

Type="Number" DecimalDigits="0" MinValue="0" MaxValue="100" />

</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="ContributionMasterID" EditMode="InPlace"

ClientDataKeyNames="ContributionMasterID" CommandItemDisplay="Bottom">

<CommandItemTemplate>

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

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

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

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

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

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

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

</div>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn UniqueName="ContributionMasterID"

DataField="ContributionMasterID" HeaderText="ContributionMasterID"

ReadOnly="True" HeaderStyle-Width="25%"

SortExpression="ContributionMasterID" >

<HeaderStyle Width="25%"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn HeaderText="Totals" HeaderStyle-Width="15%" UniqueName="Totals">

<ItemTemplate>

<asp:Label ID="lblTotals" runat="server" Text='<%# Eval("Totals", "{0:C}") %>' />

<asp:TextBox ID="txtTotals" runat="server" Text='<%# Eval("Totals", "{0:C}") %>' Style="display: none" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

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

OnRowDestroying="RowDestroying" />

</ClientSettings>

<HeaderContextMenu EnableAutoScroll="True"></HeaderContextMenu>

</telerik:RadGrid>

<br />

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

<br />

<asp:SqlDataSource ID="SqlDataSource1"

ConnectionString="<%$ ConnectionStrings:RemoteSQLConnection %>" SelectCommand="SELECT ContributionMasterID, Totals FROM tblContributionMaster"

runat="server"

UpdateCommand="UPDATE tblContributionMaster SET Totals = @Totals WHERE (ContributionMasterID = @ContributionMasterID)">

<UpdateParameters>

<asp:Parameter Name="Totals"/>

<asp:Parameter Name="ContributionMasterID"/>

</UpdateParameters>

</asp:SqlDataSource>

</asp:Content>

Code behind

Imports System

Imports Telerik.Web.UI

Imports System.Collections

Public Class test

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

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

Dim currencySetting As NumericTextBoxSetting = DirectCast(RadInputManager1.GetSettingByBehaviorID("CurrencyBehavior"), NumericTextBoxSetting)

currencySetting.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 contributionmasterid As String = editedItemIds(i)

Dim updatedItem As GridDataItem = CType(RadGrid1.MasterTableView.FindItemByKeyValue("ContributionMasterID", "String"), GridDataItem)

UpdateValues(updatedItem)

Next

End Sub

Protected Sub UpdateValues(ByVal updatedItem As GridDataItem)

Dim txtBox As TextBox

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

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

' Dim ddl As DropDownList = CType(updatedItem.FindControl("ddlUnitsInStock"), DropDownList)

'SqlDataSource1.UpdateParameters("UnitsInStock").DefaultValue = ddl.SelectedValue

'Dim chkBox As CheckBox = CType(updatedItem.FindControl("chkBoxDiscontinued"), CheckBox)

'SqlDataSource1.UpdateParameters("Discontinued").DefaultValue = chkBox.Checked

SqlDataSource1.UpdateParameters("ContributionMasterID").DefaultValue = updatedItem.GetDataKeyValue("ContributionMasterID").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("ContributionMasterID") & " updated")

End Sub

End Class

Grid

answered on 29 Oct 2010

1 answer

50 views

RadGrid with NestesTamlet

Hi

My question is about RadGrid with NestedViewTemplate.

I Master Table I catch ItemCommand event, but when I'm in a NestedView, where I have another Grid, when I make Update/Insert, program gous through ItemCommand Event with I bind in MasterTable of the mother Grid. How to distinguish, understand who is the invoker - Mester Table Grid or Nested Grid or maybe there is a chance program not to fire Master Table ItemCommand ?

Thank for effort answer me

Best Regard

Grid

answered on 29 Oct 2010

1 answer

126 views

Why OnClientSelectedIndexChanged fires when control loose focus?

I have several related comboboxes that i populate through javascript. The purpose is to have them all populated and that each has selected value.

1.<telerik:RadComboBox ID="FirstComboBox" EnableLoadOnDemand="false" runat="server"

AllowCustomText="true" MarkFirstMatch="true"

OnClientSelectedIndexChanged="FirstComboSelectedIndexChanged" >

<WebServiceSettings Method="GetFirstItems" Path="ComboboxService.svc" /> </telerik:RadComboBox>

2.

3.<telerik:RadComboBox ID="SecondComboBox" EnableLoadOnDemand="false" runat="server"

AllowCustomText="true" MarkFirstMatch="true"

OnClientSelectedIndexChanged="SecondComboSelectedIndexChanged" />

<WebServiceSettings Method="GetSecondItems" Path="ComboboxService.svc" /> </telerik:RadComboBox>

4.

5.<telerik:RadComboBox ID="ThirdComboBox" EnableLoadOnDemand="false" runat="server"

AllowCustomText="true" MarkFirstMatch="true"

OnClientSelectedIndexChanged="ThirdComboSelectedIndexChanged" />

<WebServiceSettings Method="GetSecondItems" Path="ComboboxService.svc" /> </telerik:RadComboBox>

Here is script to populate data and select selected item.

all works great and all combo boxes have proper items and proper value and text.

01.function pageLoad() {

02.firstComboBox.requestItems(some argument);

03.firstComboBox.set_value(some webService result);

04.secondComboBox.requestItems(some argument);

05.secondComboBox.set_value(some webService result);

06.and so on...

07.

08.

09.

10.}

The problem is when I focus on a combobox and press TAB key and a combo loose focus. The OnClientSelectedIndexChanged event fires

even though selection did not changed! Why that happens?

I suspect that ComboBox.set_value() function does not set selected index and after loosing focus controls thinks

it has changed but how to fix it?

ComboBox

answered on 29 Oct 2010

2 answers

88 views

Problem Grouping on client side

Hello,

I can not get the Grouping to work on client side. The page always end up posting back after I drag a column to the grouping area. 

Column reordering works fine on the client-side...

 

What am i missing here? 



-Sadiq.





<

body>

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

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

</telerik:RadScriptManager>

<div>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="grdRad">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdRad" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>