Questions on UI for ASP.NET AJAX Forum

0 answers

88 views

Hi
I have a datalist(looking like a dropdown:- clicking on an expand button pops up the datalist) with links clicking on which calls a pagemethod to update one status field in the database. I have a rad grid which is showing the status-change history.So after the update in the database, i need to rebind the radgrid, here i am doing it using a RaiseCallbackEvent .
<script type="text/javascript">
var usrid;var jid;var st;
function updatestatus(id,stat)
{
st=stat;
usrid = $get("ctl00_CPHMain_Applicantsdetails_hdusrid");
jid = $get("ctl00_CPHMain_Applicantsdetails_hdjbid");
if (usrid.value.length > 0) {
PageMethods.UpdateStatus(usrid.value,jid.value,id,OnCheckUpdate);
}

CallServer("", "");
}
in code behind

public string GetCallbackResult()
{
return "true";
}
public void RaiseCallbackEvent(string eventArgument)
{
RGHistory.Rebind();
}
i could see the data fetching in the needdatasource event and binding to the radgrid using break points.
but the fetched data is not rendering in the grid.
is this coz of a partial postback?
Is there any way to render the grid?

Grid

asked on 02 Sep 2011

2 answers

250 views

No RadAjaxLoadingPanel animation when content is “display: none”

Hi Experts,

I am building a page divided in two sections. The first section is a table of SellingSubjects and the second a form where the details of the selected SellingSubject are displayed (<div class="divDetails" style="display: none">).

In order to enhance the user experience I wrapped each section in RadPane and use some client script to trigger the upload of the appropriate details when a line in a table is selected.

When the page is first loaded no line in the table is selected and I do not want to show an empty form. Therefore the details are hidden with “display: none”.

With this configuration I noticed that the RadAjaxLoadingPanel animation is not shown at first click on the table line in order to show the SellingSubject details. After some investigation I found out that the cause is in the “display: none” of the details. Do you have any suggestion to overcome this problem without changing the main functionality?

My site is a DNN 6.00 module and I am using the embedded Telerik Ajax Controlls.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SellingSubjectsView.ascx.cs"

Inherits="Vits.Modules.VipCrm.Controls.Admin.SellingSubjectsView" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>

<%@ Register Src="~/DesktopModules/VipCrm/Controls/Admin/SellingSubjectsBasic.ascx"

TagName="SellingSubjectsBasic" TagPrefix="vits" %>

<telerik:RadAjaxLoadingPanel ID="ralPanel" runat="server" BackgroundPosition="Center"

Transparency="60" Skin="Windows7">

</telerik:RadAjaxLoadingPanel>

<asp:Button runat="server" Text="abc" ID="btnSaveDetails" CausesValidation="false"

CssClass="AllTrigger" OnClick="btnSave_Click" Style="display: none;" />

<telerik:RadSplitter ID="RadSplitter" runat="server" Width="100%" Height="855px" CssClass="MainSplitter">

<telerik:RadPane ID="rpTable" runat="server">

<telerik:RadAjaxPanel ID="raxTable" runat="server" LoadingPanelID="ralPanel" ClientEvents-OnRequestStart="HideDetails">

<asp:Panel ID="panTable" runat="server">

<telerik:RadGrid ID="rgvMain" runat="server" OnInit="InitRagGrid" DataSourceID="gridData"

Height="850px" OnItemCreated="rgvMain_ItemCreated" CssClass="MainGrid" OnItemCommand="rgvMain_ItemCommand"

AllowPaging="True" PageSize="10">

<MasterTableView DataKeyNames="Id" AutoGenerateColumns="false" AllowFilteringByColumn="True"

AllowSorting="True" TableLayout="Auto" CssClass="fSelectable" OverrideDataSourceControlSorting="true"

CommandItemDisplay="Top">

<CommandItemTemplate>

<telerik:RadButton ID="btnAdd" runat="server" AutoPostBack="false" OnClientClicked="NewSellingSubject">

<Icon PrimaryIconUrl="~/images/Add.gif" PrimaryIconLeft="5px" />

</telerik:RadButton>

<telerik:RadButton ID="btnDelete" runat="server" CommandName="DeleteCMD" OnClientClicking="AlertDelete">

<Icon PrimaryIconUrl="~/images/delete.gif" PrimaryIconLeft="5px" />

</telerik:RadButton>

</CommandItemTemplate>

<Columns>

<telerik:GridBoundColumn DataField="Id" DataType="System.Int32" ItemStyle-CssClass="fId"

SortExpression="Id" />

<telerik:GridBoundColumn DataField="Name" HeaderText="Name" ItemStyle-CssClass="fName"

SortExpression="Name" DataType="System.String" UniqueName="Name" CurrentFilterFunction="StartsWith"

AutoPostBackOnFilter="true" FilterDelay="801" FilterControlWidth="100%" ShowFilterIcon="false" />

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="Id" SortOrder="Descending" />

</SortExpressions>

</MasterTableView>

<FilterMenu EnableImageSprites="False" />

<GroupingSettings CaseSensitive="false" />

<ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">

<Resizing AllowColumnResize="true" />

<Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

</ClientSettings>

<PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true"></PagerStyle>

</telerik:RadGrid>

<asp:ObjectDataSource ID="gridData" runat="server" TypeName="Vits.Modules.VipCrm.Dal.Admin.DaoSellingSubjects"

SelectMethod="GetAll" />

</asp:Panel>

</telerik:RadAjaxPanel>

</telerik:RadPane>

<telerik:RadSplitBar ID="spliteBar" runat="server" CollapseMode="Both" />

<telerik:RadPane ID="rpDetails" runat="server">

<telerik:RadAjaxPanel ID="raxDetails" runat="server" LoadingPanelID="ralPanel" ClientEvents-OnResponseEnd="ShowDetails">

<vits:SellingSubjectsBasic ID="sellingSubjectsBasic" runat="server" Visible="true" />

</telerik:RadAjaxPanel>

</telerik:RadPane>

</telerik:RadSplitter>

Details:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SellingSubjectsBasic.ascx.cs"

Inherits="Vits.Modules.VipCrm.Controls.Admin.SellingSubjectsBasic" %>

<%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<asp:Panel ID="panDetails" runat="server" OnLoad="panDetails_Load">

<div class="divDetails" style="display: none">

<a href="#" class="selected" onclick="__doPostBack('<%= panDetails.ClientID %>', '');">

</a>

<asp:HiddenField ID="hdCmd" runat="server" />

<asp:HiddenField ID="hdId" runat="server" />

<div class="divDetailsHead NoMenu fDetHead">

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

</div>

<div class="fEditCommand">

<telerik:RadButton ID="btnEdit" runat="server" AutoPostBack="false" OnClientClicked="EditDetails">

<Icon PrimaryIconUrl="~/images/edit_pen.gif" PrimaryIconLeft="5px" />

</telerik:RadButton>

</div>

<table class="VitsDetails">

<tr>

<td>

<dnn:label id="lblName" runat="server" controlname="lblName" />

</td>

<td>

<asp:TextBox ID="txtName" CssClass="NormalTextBox fEdit fName NotAllowed" runat="server" />

<asp:RequiredFieldValidator ID="rfvName" ControlToValidate="txtName" Display="Dynamic"

CssClass="dnnFormMessage dnnFormError" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>

</td>

</tr>

<tr>

<td>

<dnn:label id="lblDescription" runat="server" controlname="lblDescription" />

</td>

<td>

<asp:TextBox ID="txtDescription" CssClass="NormalTextBox fEdit Wider NotAllowed" runat="server"

TextMode="MultiLine" />

</td>

</tr>

</table>

<table class="fCommand Commands Hidden">

<tr>

<td>

<telerik:RadButton ID="btnSave" runat="server" AutoPostBack="false" OnClientClicked="SubmitAll">

<Icon PrimaryIconUrl="~/images/save.gif" PrimaryIconLeft="5px" />

</telerik:RadButton>

</td>

<td>

<telerik:RadButton ID="btnCancel" runat="server" CausesValidation="false" OnClick="btnCancel_Click">

<Icon PrimaryIconUrl="~/images/cancel.gif" PrimaryIconLeft="5px" />

</telerik:RadButton>

</td>

</tr>

</table>

</div>

</asp:Panel>

Thank you,

Kristijan

Ajax

answered on 02 Sep 2011

2 answers

137 views

client side row select not working

HI all,

I've got a grid that uses a web service as a datasource. I've got a method in the web service to retrieve and filter data as needed.
The data retrieves and filter okay but when I select a row from the filter, client-side, then try to retrieve a value from the selected row in the filter it comes up with &nbsp& or no value. However it works if I physically click on a row when I set up a row selected event to retrieve the value.

In other words, selecting a row in javascript code doesn't work. Do I need to rebind the grid or something. I've tried many different samples/solutions and nothing seems to work.

Here's the service, Grid, and Javascript from the client.

using System;

using System.Linq;

using System.Runtime.Serialization;

using System.Web.Services;

using System.ServiceModel;

using System.ServiceModel.Activation;

using System.ServiceModel.Web;

using System.Collections.Generic;

using System.Collections;

using Telerik.Web.UI;

using System.Reflection;

namespace DC

{

[DataContract]

public class POCN_hdr

{

[DataMember]

public int MfgAssocDocID { get; set; }

[DataMember]

public int? MfgOrderID { get; set; }

[DataMember]

public string ponumber { get; set; }

[DataMember]

public string vendname { get; set; }

[DataMember]

public string vendorid { get; set; }

[DataMember]

public string country { get; set; }

[DataMember]

public string vndclsid { get; set; }

[DataMember]

public DateTime? docdate { get; set; }

[DataMember]

public string hold { get; set; }

[DataMember]

public string shipmthd { get; set; }

}

[DataContract]

public class POCN_det

{

[DataMember]

public string ponumber { get; set; }

[DataMember]

public string itemnmbr { get; set; }

[DataMember]

public decimal? qtyorder { get; set; }

[DataMember]

public string itemdesc { get; set; }

[DataMember]

public string postatus { get; set; }

[DataMember]

public string shipmthd { get; set; }

[DataMember]

public DateTime? released_date { get; set; }

[DataMember]

public DateTime? prmdate { get; set; }

[DataMember]

public DateTime? reqdate { get; set; }

}

public class MyData

{

public int Count { get; set; }

public IList Data { get; set; }

}

[ServiceContract]

[ServiceKnownType("GetKnownTypes")]

[AspNetCompatibilityRequirements(RequirementsMode = AspNetCompatibilityRequirementsMode.Allowed)]

public class POCNAssocDocService

{

public static IEnumerable<Type> GetKnownTypes(ICustomAttributeProvider provider)

{

List<Type> knownTypes = new List<System.Type>();

knownTypes.Add(typeof(DC.POCN_hdr));

knownTypes.Add(typeof(DC.POCN_det));

return knownTypes;

}

[OperationContract]

public MyData retrievePOCN_HdrDataAndCount(int startRowIndex, int maximumRows, string sortExpression, string filterExpression)

{

maximumRows = 20;

if (filterExpression != "")

{

filterExpression = filterExpression.Replace("\"", string.Empty);

}

else

{

filterExpression = "MfgOrderID = -1";

}

GridBindingData data = RadGrid.GetBindingData("AppDataClassesDataContext", "MOAssocDocuments", startRowIndex, maximumRows, sortExpression, filterExpression);

MyData result = new MyData();

result.Data = data.Data.OfType<MOAssocDocument>().Select(c => new DC.POCN_hdr()

{

MfgAssocDocID = c.MfgAssocDocID,

MfgOrderID = c.MfgOrderID,

ponumber = c.POHdr.ponumber,

vendname = c.POHdr.vendname,

vendorid = c.POHdr.vendorid,

country = c.POHdr.country,

vndclsid = c.POHdr.vndclsid,

docdate = c.POHdr.docdate,

hold = c.POHdr.hold,

shipmthd = c.POHdr.shipmthd

}).ToList();

result.Count = data.Count;

return result;

}

[OperationContract]

public MyData retrievePOCN_DetDataAndCount(int startRowIndex, int maximumRows, string sortExpression, string filterExpression)

{

// maximumRows = 50;

if (filterExpression == "")

{

filterExpression = "qtyorder = -999999";

}

else

{

string sPoNumb = filterExpression.Substring(13, 8);

AppDataClassesDataContext appDB = new AppDataClassesDataContext();

var dq = from dqr in appDB.PODets where dqr.ponumber == sPoNumb select dqr;

if (dq.Count() == 0)

{

filterExpression = "qtyorder = -999999";

}

GridBindingData data = RadGrid.GetBindingData("AppDataClassesDataContext", "PODets", startRowIndex, maximumRows, sortExpression, filterExpression);

MyData result = new MyData();

result.Data = data.Data.OfType<PODet>().Select(o => new DC.POCN_det()

{

ponumber = o.ponumber,

itemnmbr = o.itemnmbr,

qtyorder = o.qtyorder,

itemdesc = o.itemdesc,

postatus = o.postatus,

shipmthd = o.shipmthd,

released_date = o.released_date,

prmdate = o.prmdate,

reqdate=o.reqdate

}).ToList();

result.Count = data.Count;

return result;

}

<telerik:RadGrid ID="rdGridAsgPOHdr" runat="server" AllowPaging="false" AllowSorting="false"

Height="100px" AllowFilteringByColumn="false"

GridLines="None" EnableEmbeddedSkins="false" Skin="WebBlue" AllowMultiRowSelection="false"

ItemStyle-Font-Names="'segoe ui',arial,sans-serif;" ItemStyle-Font-Size="9px"

AutoGenerateColumns="false" AlternatingItemStyle-Font-Names="'segoe ui',arial,sans-serif;"

AlternatingItemStyle-Font-Size="9px" HeaderStyle-Font-Names="'segoe ui',arial,sans-serif;"

HeaderStyle-Font-Size="9px">

<MasterTableView ClientDataKeyNames="ponumber" DataKeyNames="ponumber" AllowMultiColumnSorting="false"

TableLayout="Fixed" NoMasterRecordsText="<div style='width: 705px; font-size: 9px; font-family: 'segoe ui',arial,sans-serif;'>No assigned po details to display.</div>">

<CommandItemStyle CssClass="commViewCommand" />

<ItemStyle CssClass="comments" />

<AlternatingItemStyle CssClass="comments" />

<Columns>

<telerik:GridBoundColumn DataField="ponumber" HeaderText="PO#" UniqueName="ponumber"

ItemStyle-Width="40px" HeaderStyle-Width="40px" />

<telerik:GridBoundColumn DataField="vendname" HeaderText="Vendor" UniqueName="vendname"

ItemStyle-Width="400px" HeaderStyle-Width="400px" />

<telerik:GridBoundColumn DataField="vendorid" HeaderText="VID" UniqueName="vendorid"

ItemStyle-Width="40px" HeaderStyle-Width="40px" />

<telerik:GridBoundColumn DataField="docdate" HeaderText="Doc Dt" UniqueName="docdate"

DataFormatString="{0:MM/dd/yy}" ItemStyle-Width="35px" HeaderStyle-Width="35px" />

<telerik:GridBoundColumn DataField="shipmthd" HeaderText="Ship Via" UniqueName="shipmthd"

ItemStyle-Width="105px" HeaderStyle-Width="105px" />

<telerik:GridBoundColumn DataField="detCnt" ItemStyle-Width="1px" ItemStyle-BackColor="White"

HeaderStyle-Width="1px" ItemStyle-ForeColor="White" UniqueName="detCnt" ItemStyle-CssClass="commViewCommand">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="MfgOrderID" DataType="System.Int32" HeaderText="MfgOrderID" HeaderStyle-Width="1px"

UniqueName="MfgOrderID" ItemStyle-Width="1px" ItemStyle-CssClass="commViewCommand">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="MfgAssocDocID" DataType="System.Int32" HeaderText="MfgAssocDocID" HeaderStyle-Width="1px"

UniqueName="MfgAssocDocID" ItemStyle-Width="1px" ItemStyle-CssClass="commViewCommand">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<DataBinding Location="../Services/POCNAssocDocService.svc" FilterParameterType="Linq" SelectMethod="retrievePOCN_HdrDataAndCount"

SortParameterType="Linq">

</DataBinding>

<ClientEvents OnDataBinding="rdGridAsgPOHdr_DataBinding"/>

<Selecting AllowRowSelect="true" />

<Scrolling AllowScroll="True" UseStaticHeaders="True" SaveScrollPosition="true" />

</ClientSettings>

</telerik:RadGrid>

rdGridPOHdr = $find('<%= rlMOView.FindControl("rdGridAsgPOHdr").ClientID %>');

var tableView = rdGridPOHdr.get_masterTableView();

tableView.filter("MfgOrderID", mfgID, "EqualTo");

tableView.clearSelectedItems();

var dataItem = tableView.get_dataItems()[0];

dataItem.set_selected(true);

var selectedRows = tableView.get_selectedItems();

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

var row = selectedRows[i];

var cell = tableView.getCellByColumnUniqueName(row, "ponumber")

//here cell.innerHTML holds the value of the cell

}

Grid

answered on 02 Sep 2011

1 answer

184 views

Configuring Pie Chart to show multiple items in legend

Alright, I'm trying to create a pie chart that shows Locations in the Legend so that each location as a designated color, and the values assigned to each location is TotalSales. I thought it would be an easy thing to implement, but I'm running into issues.

When I implement the code below, it shows the TotalSales all around the pie chart (I know that's because of LabelLocation="Auto") but the legend on the right would just say "Series xx". I know how to get the name to change, but I don't know how to get it to create a new item for each location.

Can someone help me out with this?

Here's my code:

<telerik:RadChart ID="radSales" AutoLayout="true" runat="Server" Width="900px" Skin="Web20"

Style="margin: 0px auto;">

<Legend Visible="true">

<Appearance GroupNameFormat="#VALUE">

</Appearance>

</Legend>

<ChartTitle TextBlock-Text="Total Sales">

<TextBlock>

<Appearance TextProperties-Font="Verdana, 20px, style=Bold" TextProperties-Color="#00529B">

</Appearance>

</TextBlock>

</ChartTitle>

<PlotArea>

<Appearance Dimensions-Margins="18%, 22%, 12%, 14%">

</Appearance>

<XAxis DataLabelsColumn="Location">

<Appearance>

<TextAppearance TextProperties-Font="Verdana, 8pt, style=Bold">

</TextAppearance>

</Appearance>

</XAxis>

</PlotArea>

<Series>

<telerik:ChartSeries DataXColumn="Location" DataYColumn="TotalSales" DefaultLabelValue="#Y{C}"

Type="Pie">

<Appearance>

<LabelAppearance LabelLocation="Auto">

</LabelAppearance>

<TextAppearance TextProperties-Font="Verdana, 11pt, style=Bold" TextProperties-Color="#00529B">

</TextAppearance>

</Appearance>

</telerik:ChartSeries>

</Series>

</telerik:RadChart>

Chart (Obsolete)

answered on 02 Sep 2011

3 answers

147 views

Dll version Problem

hi,

i used RadScheduler control got an dll problem, when clicking the "Week" tab in the top right side corner , it shows the all the week days bellow,we have an option to click the particular day tab on top , it shows the all the schedules on the day.

using the telerik dll (2010.1.519.40) version
my problem is
when click the week tab  its not working ( select the Browser mode : IE7,IE8,IE9 and Document Model (Quirks ,IE7,IE8 )
but its working at the time of ( select the Browser mode : IE7,IE8,IE9 and Document Model (IE9 Standards (default) )

I took the latest dll (2011.1.413.40) , using this its working fine at all Document model ( Quirks ,IE7,IE8 and (IE9 Standards (default))

As per the client requirement doesn't replace the  existing dll.

How to solve this problem with out change the dll.

Scheduler

answered on 02 Sep 2011

2 answers

253 views

Loading image while export to excel radgrid data

Hi i am using Terik.web.ui.dll

on the exporttoexcel option i want to dispaly loading image .

could you please help me.

Grid

answered on 02 Sep 2011

7 answers

456 views

Remove the window border

Hi,

I have one Rad Window, inside the rad window am calling an aspx page with some controls. I am getting border for Rad window and also for the aspx page. I want to display the Rad window without any border.

Is it possible for me to hide the border of the rad window.?

i tried to give BorderStyle="None" But still border is comming.

Please help me to sort it out.

Thanks & Regards,
Sushanth Mathew

Window

answered on 02 Sep 2011

2 answers

277 views

[Solved] Find control inside window from parent window

Hello,
I have a page, which opens a dialog window (Window1). In Window1 there's a custom AJAX control with button which in turn opens new dialog window (Window2). When Window2 closes, a page must handle Window2's OnClientClose event, and Window2 must pass some data to my custom control on WIndow1. To avoid stack overflow, as you adviced here, I put handler on main page.
And now I want to get data sent by Window2 and put them to my control on Window1. This is how I'm doing that now:

 function referenceWindowClose(sender, args) {
            sender.remove_close(referenceWindowClose);
            var arg = args.get_argument();
            if (!arg) return;
            var ctl = $find(arg.TargetControlID);
            if (ctl == null) return;
            ctl.set_text(arg.Caption);
            ctl.set_value(arg.RefID);
        }

Variable named ctl is my custom AJAX control. Problem is ctl is always null. I know this happens because Window1 is in IFRAME. But how do I find it from main page? Using sender parameter? Please help.

Window

answered on 02 Sep 2011

1 answer

135 views

[Solved] Drag & Drop Images

Hello,

I'm looking for code to drag and drop an image from a listbox to another listbox or another solution to achieve this functionality. The usecase is that a user can select from a list of images and drag & drop one or more images to another "placeholder". The next step is that I can save the dropped images to a database of filesystem. Can anyone point me to some examples or solution?

Thanks in advance

Patrick

ListBox

answered on 02 Sep 2011

15 answers

639 views

Disabling Flash/Silverlight (for testing)

I have a RadAsyncUpload control on my page and I want to test all of my functionality for those clients that can't/don't have either Flash or Silverlight installed.

Using code found in this forum I have this in my markup just before the definition of the AsyncUpload control ...

<para xmlns="http://ddue.schemas.microsoft.com/authoring/2003/5">

<script type="text/javascript">

Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function () { return false; }

</script>

</para>

Now, when testing, I was expecting to: