Questions on UI for ASP.NET AJAX Forum

7 answers

102 views

Radspell for radeditors which are dynamically created on page

Hi,

I have a radeditor with id="RadEditor1" on the page and a dropdown of numbers from 1-10. If i select a number from the dropdown i get those many radeditors with id= " RadEditor2" on the page(repeater is used to generate dynamically). I am using the Radspell button which should check the spellings of RadEditor1 as well as all the dynamically generated RadEditor2. How Can i do that? I want to use it for both static and dynamic controls of the page. If i assign controlstocheck property of the RadEditor as RadEditor1 and RadEditor2, and when i click Radspell button, if there are no RadEditor2 on the page, it throws an error.

Spell

answered on 31 Oct 2012

2 answers

74 views

upgrade to Q# adds scrollbar to dock

I just upgraded to Q3 (I had to uninstall Kendo to stop VS2012 from crashing)

I noticed my dock now has a scroll bar, I tried to add overflow: hidden; but that broke all of the form decorations in the dock.

I am dynamically creating the form elements. The dock height cannot be fixed, the height varies.
It worked fine in Q2.

I need to remove the unwanted scroll bar in IE9.

thanks, Marty

Dock

answered on 31 Oct 2012

2 answers

101 views

Question about DataKeyNames

With regard to Atchut's thread: http://www.telerik.com/community/forums/aspnet-ajax/grid/datakeynames.aspx

Please clarify. I needed to access the value of a bound column so I added it to DataKeyNames as suggested. The grid still appears to be working normally and I'm getting the data I need.

However, this column is not a key field in the database sense, not in this table. Does this matter?

Grid

answered on 31 Oct 2012

8 answers

493 views

Nested View Template in Grid Not Firing DetailTableDataBind

I have the following markup to create a grid with a nested view template and I cannot get the DetailTableDataBind event to fire. Could someone please review my code and walk me through the steps needed to get the detail tables to bind programmatically?

Here is my .aspx markup and code behind:

<telerik:RadGrid ID="RadGrid" OnItemCreated="RadGrid_ItemCreated" OnItemCommand="RadGrid_ItemCommand" OnPreRender="RadGrid_PreRender" runat="server" AllowSorting="true" AllowPaging="false" AutoGenerateColumns="false" AllowFilteringByColumn="true" OnNeedDataSource="RadGrid_NeedDataSource" OnDetailTableDataBind="RadGrid_DetailTableDataBind">

<MasterTableView AutoGenerateColumns="false" HierarchyLoadMode="ServerBind" AllowFilteringByColumn="true" ShowFooter="true" AllowPaging="false" AllowMultiColumnSorting="true" DataKeyNames="UnitId">

<NestedViewSettings>

<telerik:ParentTableRelation>

<telerik:GridRelationFields MasterKeyField="UnitId" DetailKeyField="UnitId" />

</telerik:ParentTableRelation>

</NestedViewSettings>

<NestedViewTemplate>

<asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">

<telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1" SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Orders" PageViewID="PageView1">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="PageView1">

<telerik:RadGrid runat="server" ID="Orders" ShowFooter="true"

AllowSorting="true" EnableLinqExpressions="false" OnDetailTableDataBind="RadGrid_DetailTableDataBind">

<MasterTableView HierarchyLoadMode="ServerOnDemand" ShowHeader="true" DataKeyNames="UnitId" AutoGenerateColumns="false" AllowFilteringByColumn="true" ShowFooter="true" AllowPaging="false" AllowMultiColumnSorting="true">

<Columns>

<telerik:GridBoundColumn SortExpression="UnitId" HeaderText="UnitId" HeaderButtonType="TextButton"

DataField="UnitId" UniqueName="UnitId">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Date" HeaderText="Date" HeaderButtonType="TextButton"

DataField="Date" UniqueName="Date">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="BillNumber" HeaderText="Bill Number" HeaderButtonType="TextButton"

DataField="BillNumber" UniqueName="BillNumber">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Status" HeaderText="Status" HeaderButtonType="TextButton"

DataField="Status" UniqueName="Status">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Origin" HeaderText="Origin" HeaderButtonType="TextButton"

DataField="Origin" UniqueName="Origin">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="Destination" HeaderText="Destination" HeaderButtonType="TextButton"

DataField="Destination" UniqueName="OrDestinationigin">

</telerik:GridBoundColumn>

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataField="XCharges" HeaderText="Acc. Charges" SortExpression="XCharges" UniqueName="XCharges" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataField="TotalCharge" HeaderText="Total Charges" SortExpression="TotalCharge" UniqueName="TotalCharge" DataType="System.Decimal" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</NestedViewTemplate>

<Columns>

<telerik:GridBoundColumn HeaderStyle-Width="10" DataField="Division" HeaderText="Division" SortExpression="Division" UniqueName="Division" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" />

<telerik:GridBoundColumn DataField="Subdivision" HeaderText="Subdivision" SortExpression="Subdivision" UniqueName="Subdivision" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" />

<telerik:GridBoundColumn DataField="UnitId" HeaderText="Unit" SortExpression="UnitId" UniqueName="UnitId" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataField="GrossRevenue" HeaderText="Revenue" SortExpression="GrossRevenue" UniqueName="GrossRevenue" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataField="TotalPay" HeaderText="Driver Pay" SortExpression="TotalPay" UniqueName="TotalPay" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataField="TotalFuel" HeaderText="Fuel Cost" SortExpression="TotalFuel" UniqueName="TotalFuel" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataField="TotalMaintenance" HeaderText="Maint. Cost" SortExpression="TotalMaintenance" UniqueName="TotalMaintenance" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Sum" FooterAggregateFormatString="{0:C}" DataField="Contribution" HeaderText="Contribution" SortExpression="Contribution" UniqueName="Contribution" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Avg" FooterAggregateFormatString="{0:C}" DataField="TotalCPM" HeaderText="Total CPM" SortExpression="TotalCPM" UniqueName="TotalCPM" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Avg" FooterAggregateFormatString="{0:C}" DataField="PayCPM" HeaderText="Pay CPM" SortExpression="PayCPM" UniqueName="PayCPM" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Avg" FooterAggregateFormatString="{0:C}" DataField="FuelCPM" HeaderText="Fuel CPM" SortExpression="FuelCPM" UniqueName="FuelCPM" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Currency" Aggregate="Avg" FooterAggregateFormatString="{0:C}" DataField="MaintenanceCPM" HeaderText="Maint. CPM" SortExpression="MaintenanceCPM" UniqueName="MaintenanceCPM" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Number" DataFormatString="{0:N2}" Aggregate="Sum" FooterAggregateFormatString="{0:N2}" DataField="TotalMiles" HeaderText="Total Miles" SortExpression="TotalMiles" UniqueName="TotalMiles" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

<telerik:GridNumericColumn NumericType="Number" DataFormatString="{0:N2}" Aggregate="Avg" FooterAggregateFormatString="{0:N2}" DataField="MPG" HeaderText="MPG" SortExpression="MPG" UniqueName="MPG" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo" ShowFilterIcon="true" DataType="System.Decimal" />

</Columns>

</MasterTableView>

</telerik:RadGrid

>

public partial class UtilizationReport : System.Web.UI.Page
    {
        private BTReports.Repository.UnitUtilizationRepository rep = new Repository.UnitUtilizationRepository();
 
        protected void Page_Load(object sender, EventArgs e)
        {           
            
        }
        protected void RadGrid_NeedDataSource(object source, GridNeedDataSourceEventArgs e)
        {
            if (Cache["UtilzationData"] == null)
            {
                if (StartDatePicker.SelectedDate.HasValue && EndDatePicker.SelectedDate.HasValue)
                {
                    RadGrid.DataSource = rep.GetUnitUtilization(StartDatePicker.SelectedDate.Value, EndDatePicker.SelectedDate.Value);
                }
            }
            else
            {
                RadGrid.DataSource = Cache["UtilzationData"];
            }
        }
 
 
        protected void GenerateButton_Click(object sender, EventArgs e)
        {
            Cache.Remove("UtilzationData");
            Cache["UtilzationData"] = rep.GetUnitUtilization(StartDatePicker.SelectedDate.Value, EndDatePicker.SelectedDate.Value);
             
            RadGrid.DataSource = rep.GetUnitUtilization(StartDatePicker.SelectedDate.Value, EndDatePicker.SelectedDate.Value);
            RadGrid.DataBind();
             
        }
 
        protected void RadGrid_DetailTableDataBind(object source, Telerik.Web.UI.GridDetailTableDataBindEventArgs e)
        {
            GridDataItem dataItem = (GridDataItem)e.DetailTableView.ParentItem;
            switch (e.DetailTableView.Name)
            {
                case "Orders":
                    {
                        DataTable table = new DataTable();
                        table.Columns.Add("UnitId", typeof(string));
                        table.Columns.Add("Date", typeof(DateTime));
                        table.Columns.Add("BillNumber", typeof(string));
                        table.Columns.Add("Status", typeof(string));
                        table.Columns.Add("Origin", typeof(string));
                        table.Columns.Add("Destination", typeof(string));
                        table.Columns.Add("XCharge", typeof(decimal));
                        table.Columns.Add("TotalCharges", typeof(decimal));
 
                        string UnitId = dataItem.GetDataKeyValue("UnitId").ToString();
                        IQueryable<UnitUtilization> data = (IQueryable<UnitUtilization>)Cache["UtilzationData"];
                        var results = from i in data
                                      where i.UnitId == UnitId 
                                      select i.Orders; 
 
                        foreach (var order in results)
                        {
                            foreach (Order o in order)
                            {
                                table.Rows.Add(o.UnitId, o.Date, o.BillNumber, o.Status, o.Origin, o.Destination, o.XCharges, o.TotalCharges);
                            }
                        }
                        e.DetailTableView.DataSource = table;
                        break;
                    }
 
            }
        }
 
        protected void RadGrid_PreRender(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                //RadGrid.MasterTableView.Items[0].Expanded = true;
                //RadGrid.MasterTableView.Items[0].ChildItem.FindControl("InnerContainer").Visible = true;
            }
        }
 
        protected void RadGrid_ItemCommand(object source, GridCommandEventArgs e)
        {
            if (e.CommandName == RadGrid.ExpandCollapseCommandName && e.Item is GridDataItem)
            {
                ((GridDataItem)e.Item).ChildItem.FindControl("InnerContainer").Visible =
                    !e.Item.Expanded;
            }
        }
 
        protected void RadGrid_ItemCreated(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridNestedViewItem)
            {
                e.Item.FindControl("InnerContainer").Visible = ((GridNestedViewItem)e.Item).ParentItem.Expanded;
                 
            }
        }
 
        protected void ExportButton_Click(object sender, System.EventArgs e)
        {
            RadGrid.MasterTableView.ExportToExcel();
        }
 
        protected void ChartButton_Click(object sender, EventArgs e)
        {
            foreach (GridDataItem item in RadGrid.MasterTableView.Items)
            {
                string UnitId = item["UnitId"].ToString();
            }
        }
    }

Grid

answered on 31 Oct 2012

1 answer

97 views

RadChart with another detailed chart as tooltip

Hi,
I have two requirements -
1. I have a RadChart in my asp.net web application. It is a Bar Chart. On Click of one BAR on the chart, I have to make the Chart blurred and go away and a chart shud get displayed with details of that Bar (which is clicked).
In short, I need to display a chart with details of the BAR that is clicked and when I dispay the second Chart, the first one shud disappear with some smooth transitions.

2. I have a RadChart in my asp.net web application and when I hover the mouse on a perticular BAR, I need to display another chart with details of the BAR as tooltip. How do I achive this?

Thanks in Advance,
Deepika Karanth

Chart (Obsolete)

answered on 31 Oct 2012

1 answer

59 views

setting cancel to true in Radrotator OnClientItemClicking is canceling my checkbox onClick Event

Hi.
I'm using a Radrotator with Item template inside as follows:

ASPX

<telerik:RadRotator runat="server" ID="rotatorImagesList" RotatorType="Buttons" Width="100%"

Height="150px" WrapFrames="false" OnItemClick="rotatorImagesList_SelectImage"

OnClientItemClicking="rotatorImagesList_OnClientItemClicking">

<ItemTemplate>

<div>

<asp:CheckBox ID="chkSel" runat="server" Checked='<%#Eval("isSelected")==DBNull.Value?false:Eval("isSelected") %>'

onclick="chkClick(this)" />

<asp:ImageButton ID="btnDel" runat="server" OnClientClick="CancelItemClick(this)"

CssClass="deletebutton" ImageUrl="~/App_Themes/Office2007/Grid/Cancel.gif"></asp:ImageButton>

</div>

<div>

<telerik:RadBinaryImage EnableTheming="false" runat="server" ID="binaryImageThumbnail"

Width="103px" Height="103px" ResizeMode="Fit" DataValue='<%# DataBinder.Eval(Container.DataItem,"ThumbnailData") %>'

BorderColor="Black" BorderStyle="Solid" onClick="ImageClick(this)" />

</div>

<div>

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

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

</div>

</ItemTemplate>

</telerik:RadRotator>

I only want to "Click" on the item when user clicks on the image, since at this time, I run the rotatorImagesList_SelectImage in which I do some server code. otherwise I do not want a postback to run the rotatorImagesList_SelectImage event.

I cancel ItemClick when I click the btnDel, since I will be deleting this image. this works fine.

but when I cancel click when the checkbox is clicked, the Checkbox can not be "checked".

here is my Javascript:

var currIndex;

var isDeleting;

var allowClick;

function pageLoad() {

isDeleting = false;

allowClick = false;

}

function CancelItemClick(sender, eventArgs) {

currIndex = getIndexFromId(sender.id);

allowClick = true;

isDeleting = true;

}

function ImageClick(sender) {

currIndex = getIndexFromId(sender.id);

isDeleting = false;

allowClick = true;

}

function chkClick(sender) {

currIndex = getIndexFromId(sender.id);

isDeleting = false;

allowClick = false;

}

function rotatorImagesList_OnClientItemClicking(sender, eventArgs) {

if (allowClick == true) {

var hfVal = document.getElementById(sender.get_id() + "_i" + currIndex + "_" + "hiddenFieldPhotoRIDContainer").value;

if (isDeleting == true) {

__doPostBack("btnDel", hfVal);

eventArgs.set_cancel(true);

}

else {

eventArgs.set_cancel(true);

}

function getIndexFromId(string) {

var matches = string.match(/_i([0-9]+)/);

return matches[1];

}

Any Suggestions?

Thanks.

Rotator

answered on 31 Oct 2012

1 answer

40 views

Does the RAD Scheduler having option create Tasks?

Hi,

I have been working with RAD Scheduler, Its providing option to create Appointments.

Is there any way to create Tasks from RADScheduler?

Regards,
Saravanan M

Editor

answered on 31 Oct 2012

1 answer

55 views

ExpandAll on LoadOnDemand TreeList

Is there a way to Expand all Nodes of a "LoadOnDemand" RadTreeList with a Button-Click or similar event?

If I use the ExpandAllItems it simply takes away the (+) Signs (i.e. it tries to expand but does not call the ChildItemsDataBind-Method).
Any Ideas?

Our customer most often only needs to view some path of the tree, which would load on demand more applicable, but sometimes want's to view all nodes or use the ExcelExport Function to Export the whole tree.

TreeList

answered on 31 Oct 2012

34 answers

1.5K+ views

I Had To Build My Own Because...

The new RadFileExplorer is a wonderful new addition to the Telerik lineup, and once the few remaining minor bugs are worked out it will really be a great control. For a majority of scenarios where all you need to do is list raw directories and files, and pick one, it works great. Both as a stand-alone as well as a part of one of the Editor's dialogs. Part of the beauty of the control is its simplicity. However, there are no doubt some more complicated situations where the built-in functionality falls short.

This thread is not about bashing the RadFileExplorer. It is about describing scenarios in which the need arose for a custom-built way of navigating & selecting files because it simply wasn't possible with the current RadFileExplorer. In doing so, Telerik can make the decision about whether or not to add functionality to tackle some of these scenarios. If possible, suggest a solution to the problem in terms of a "feature request".

And with that, I'll start things off...

The problem I ran into was that there is no way for the folders in the tree or grid to be "labeled" with anything other than the actual directory or file name. I'm actually quite certain that this must be a common scenario. In a specific case for a sports website we've built, the database allows for multiple teams to be setup for a given season, and each team has its own images directory created using the ID of that team. So the directory structure on the disk is something like /images/teams/1000/ (which belongs to "Team A") and /images/teams/1001/ (which belongs to "Team B"). The problem with this is that the average user only knows of their team by its name and not its ID, and this is particularly true when a user wants to borrow an image from another team (they definitely won't know the ID, they'd have to look it up).

So, here's a "Feature Request": Have the abilty to create a custom FileSystemContentProvider where each directory can have both a path as well as a label - and the label is what shows up in the tree / grid but it uses the path for navigating around.

Another situation, related to the one above, is something that we're realizing now after having gone live with our product for a few years. We didn't decide to group the team folders on the file system according to the season they participated - the directory structure is simply /images/teams/team ID. So, we've learned that not only is it important to be able to label a directory but it's equally important in our case to be able to put a directory into a context (parent node) which makes sense. In the terms of the FileExplorer, we needed the tree to look like this: season 1 -> team A, season 1 -> team B, season 2 -> team C, and so on. However, the "season" node wouldn't actually correspond to any actual directory, it is simply used as a logical grouping of other directories.

Feature Request: Have the ability to create a custom FileSystemContentProvider where a "directory" can actually be a node in the tree which does not represent a physical folder.

My last situation for this post has to do with usability. My target audience in terms of technical capabilities is the below-average computer/web user, and since I'm a bit of a control freak I prefer to control what these people are doing so they can't mess things up too badly. So, when it comes to an ImageManager I pre-create several folders for the user to keep their images organized, and then only allow for the user to upload into the folder that makes the most sense given the context of what they're doing. So, the user is presented with, say, five folders in the tree of the RadFileExplorer; all of which are available to pick images to use, but only one of which allows for them to upload. While having the upload button enable/disable depending on the currently selected folder is an improvement from the past, there still is no way to provide a visual clue in the tree of folders as to the read/write permissions available for each.

Feature Request: Have the ability to specifiy an icon (or css class) to be used for a folder when it is displayed in the tree (and perhaps the grid as well) that indicates whether or not that folder has write permissions or any other special attributes.

So, again, I'm not trying to bash the RadFileExplorer control since it does work great in a number of other, more simple (normal) scenarios. The only reason I start this thread is because I've been around Telerik long enough to know that they're still working on the RadDoAllMyWorkForMe control and take pride in delivering more than expected. That, and given that I was able to make my own using the same components as the RadFileExplorer makes me think it could one day be included in the control.

Please add your own scenarios where you had to build your own control and maybe they could be included in vNext of the RadFileExplorer.

FileExplorer

answered on 31 Oct 2012

2 answers

81 views

RadGrid style row at server side

Hello,

I have grid in which I have populate the data for two dates , Now I want to show the future date data in gray color and todays date data in white color at runtime(Server side). or any how.
How should I do this Please give me suggestion.

like this grid rows
_______________________________________
|                   Header row                                       |
_______________________________________
|           Todays date data in white                         |
_______________________________________
|          Future date data in gray color                   |
_______________________________________
|          Future date data in gray color                   |
_______________________________________
|           Future date data in gray color                   |
_______________________________________

Grid

answered on 31 Oct 2012