Questions on UI for ASP.NET AJAX Forum

15 answers

131 views

vertical scrolling with RadToolBarDropDown

Hello,

How do I add the support for vertical scrolling of the dropdown menu to RadToolBarDropDown like you have in your RadMenu component?

Regards.

ToolBar

answered on 02 Oct 2015

1 answer

126 views

Scatter marker size based on count in datasource?

Hello Stamo and others,

Is it possible to bind the marker size to a value like a count within the data source? Or will we have to programmatically create the ScatterSeriesItem and set the marker size within code? Or can we databind the scatter series items then iterate over the items (after binding) and set the marker size for each item in code?

Thanks in advance,
Bob Baldwin
Trabon Solutions

Chart (HTML5)

answered on 02 Oct 2015

1 answer

528 views

Filter radgrid based on datepicker

Hi Telerik team,

I am trying to filter date column on my radgrid by the following RadDatePicker:

<label>Start Date:</label>
        </div>
                                        <telerik:RadDatePicker ID="RadDatePicker1" Runat="server" AutoPostBack="True" Culture="en-ZA" MinDate="2015-01-01" SelectedDate="2015-01-01" Skin="BlackMetroTouch">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" EnableWeekends="True" FastNavigationNextText="&lt;&lt;" Skin="BlackMetroTouch"></Calendar>

<DateInput DisplayDateFormat="yyyy/MM/dd" DateFormat="yyyy/MM/dd" LabelWidth="40%" AutoPostBack="True" DisplayText="2015/01/01" SelectedDate="2015-01-01" value="2015/01/01">
<EmptyMessageStyle Resize="None"></EmptyMessageStyle>

<ReadOnlyStyle Resize="None"></ReadOnlyStyle>
<FocusedStyle Resize="None"></FocusedStyle>
<DisabledStyle Resize="None"></DisabledStyle>
<InvalidStyle Resize="None"></InvalidStyle>
<HoveredStyle Resize="None"></HoveredStyle>
<EnabledStyle Resize="None"></EnabledStyle>
</DateInput>
<DatePopupButton ImageUrl="" HoverImageUrl=""></DatePopupButton>
            </telerik:RadDatePicker>
        <div class="form-group">
        <label>End Date</label>
            </div>

                            <telerik:RadDatePicker ID="RadDatePicker2" Runat="server" AutoPostBack="True" Culture="en-ZA" MinDate="2015-01-01" SelectedDate="2015-01-01" Skin="BlackMetroTouch">
<Calendar UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" EnableWeekends="True" FastNavigationNextText="&lt;&lt;" Skin="BlackMetroTouch"></Calendar>

<DateInput DisplayDateFormat="yyyy/MM/dd" DateFormat="yyyy/MM/dd" LabelWidth="40%" AutoPostBack="True" DisplayText="2015/01/01" SelectedDate="2015-01-01" value="2015/01/01">
<EmptyMessageStyle Resize="None"></EmptyMessageStyle>

<ReadOnlyStyle Resize="None"></ReadOnlyStyle>
<FocusedStyle Resize="None"></FocusedStyle>
<DisabledStyle Resize="None"></DisabledStyle>
<InvalidStyle Resize="None"></InvalidStyle>
<HoveredStyle Resize="None"></HoveredStyle>
<EnabledStyle Resize="None"></EnabledStyle>
</DateInput>

And the following is my RadGrid:

<telerik:RadGrid ID="RadGrid1" runat="server" DataSourceID="SqlSalesReport" Skin="BlackMetroTouch" AllowFilteringByColumn="True">
                <MasterTableView EnableHierarchyExpandAll="true" AutoGenerateColumns="False" DataSourceID="SqlSalesReport" DataKeyNames="Vin">
                    <DetailTables>
                        <telerik:GridTableView EnableHierarchyExpandAll="true" runat="server" DataSourceID="SqlParts" DataKeyNames="Vin" AutoGenerateColumns="False" AllowFilteringByColumn="False">
                            <ParentTableRelation>
                                <telerik:GridRelationFields DetailKeyField="Vin" MasterKeyField="Vin" />
                            </ParentTableRelation>
                                <Columns>
                                    <telerik:GridBoundColumn SortExpression="PartNumber" HeaderText="Part Number" HeaderButtonType="TextButton"
                                        DataField="PartNumber" UniqueName="PartNumber">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>

                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="CaptureDate" HeaderText="Capture Date" HeaderButtonType="TextButton"
                                        DataField="CaptureDate" UniqueName="CaptureDate" DataFormatString="{0:D}">
                                    <ColumnValidationSettings>
                                    <ModelErrorMessage Text=""></ModelErrorMessage>
                                    </ColumnValidationSettings>
                                        <FilterTemplate>
                            From
                        <telerik:RadDatePicker ID="FromOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="FromDateSelected"
                            MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="07-04-1996" DbSelectedDate='<%# startDate %>' />
                            to
                        <telerik:RadDatePicker ID="ToOrderDatePicker" runat="server" Width="140px" ClientEvents-OnDateSelected="ToDateSelected"
                            MinDate="07-04-1996" MaxDate="05-06-1998" FocusedDate="05-06-1998" DbSelectedDate='<%# endDate %>' />
                            <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
                                <script type="text/javascript">
                                    function FromDateSelected(sender, args) {
                                        var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
                                        var ToPicker = $find('<%# TryCast(Container, GridItem).FindControl("ToOrderDatePicker").ClientID %>');

                                        var fromDate = FormatSelectedDate(sender);
                                        var toDate = FormatSelectedDate(ToPicker);

                                        tableView.filter("CaptureDate", fromDate + " " + toDate, "Between");

                                    }
                                    function ToDateSelected(sender, args) {
                                        var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");
                                        var FromPicker = $find('<%# TryCast(Container, GridItem).FindControl("FromOrderDatePicker").ClientID %>');

                                        var fromDate = FormatSelectedDate(FromPicker);
                                        var toDate = FormatSelectedDate(sender);

                                        tableView.filter("CaptureDate", fromDate + " " + toDate, "Between");
                                    }
                                    function FormatSelectedDate(picker) {
                                        var date = picker.get_selectedDate();
                                        var dateInput = picker.get_dateInput();
                                        var formattedDate = dateInput.get_dateFormatInfo().FormatDate(date, dateInput.get_displayDateFormat());

                                        return formattedDate;
                                    }
                                </script>
                            </telerik:RadScriptBlock>
                        </FilterTemplate>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Quantity" HeaderText="Quantity" HeaderButtonType="TextButton"
                                        DataField="Quantity" UniqueName="Quantity">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="PartSoldPrice" HeaderText="Part Sold Price" HeaderButtonType="TextButton"
                                        DataField="PartSoldPrice" UniqueName="PartSoldPrice" DataFormatString="{0:C}">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="TotalPrice" HeaderText="Total Price" HeaderButtonType="TextButton"
                                        DataField="TotalPrice" UniqueName="TotalPrice" DataFormatString="{0:C}">
                                            <ColumnValidationSettings>
                                            <ModelErrorMessage Text=""></ModelErrorMessage>
                                            </ColumnValidationSettings>
                                    </telerik:GridBoundColumn>
                                    <telerik:GridBoundColumn SortExpression="Commission" HeaderText="Commission" HeaderButtonType="TextButton"
                                        DataField="Commission" UniqueName="Commission" DataFormatString="{0:C}">
<ColumnValidationSettings>
<ModelErrorMessage Text=""></ModelErrorMessage>
</ColumnValidationSettings>
                                    </telerik:GridBoundColumn>
                                </Columns>
                        </telerik:GridTableView>
                    </DetailTables>
                    <Columns>
                        <telerik:GridBoundColumn DataField="Vin" FilterControlAltText="Filter Vin column" HeaderText="Vin" SortExpression="Vin" UniqueName="Vin">
                            <ColumnValidationSettings>
                                <ModelErrorMessage Text="" />
                            </ColumnValidationSettings>
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>

Note: i dont want to use the radgrid template i want to use the first two RadDatePickers to filter inside the radgrid.

thanks

Grid

answered on 02 Oct 2015

3 answers

138 views

RibbonBar use SplitButton in Menu

If I use a SplitButton inside of a Menu when creating my xml to load in to the ASP.NET RibbonBar, it does not place the SplitButton buttons in any kind of dropdown. It places them at the same level of Menu. Here is the XML:

<?xml version="1.0"?>
<RibbonBar>
<ApplicationMenu Text="Home">
<ApplicationMenuItem Text="Item1" />
</ApplicationMenu>
<Tab Text="Tab1" Size="Small" ImageUrl="/Images/Image1.png">
<Group Text="Group1">
<Button Text="Button1" Size="Large" ImageUrl="/Images/Image2.png" />
<Menu Text="A Menu" Size="Medium" ImageUrl="/Images/Image3.png">
<MenuItem Text="MenuItem1" Size="Large" ImageUrl="/Images/Image4.png"></MenuItem>
<SplitButton Text="SplitButton" Size="Large" ImageUrl="/Images/Image5.png" ImageUrlLarge="/Images/Image5.png">
<Button Text="SplitButton_Button1" Size="Medium" ImageUrl="/Images/Image6.png" />
</SplitButton>
</Menu>
</Group>
</Tab>
</RibbonBar>

RibbonBar

answered on 02 Oct 2015

13 answers

188 views

Remove Gray area with child menu items.

In the attached screen shot, you will notice there is a gray area to the left of each of the child menu items.

How do I get rid of that gray area so it shows all white background for all the child menu items?

Menu

answered on 02 Oct 2015

1 answer

105 views

Drilldown chart: how to get non-charted data

With RadGrid I frequently use a SQL data source which returns data columns with "display=false" so that I can use a value for inclusion in a templated column. Typically this is for purposes of building a hyperlink with a client-friendly display value, but with a database code for the querystring.

"<a href='whatever.aspx?id=category_code>category_name</a>

When using HTML Pie Chart, I know how to retrieve the values of "DataFieldY" and "Name_Field".

The "NameField" is my "category_name" but when clicked, I really want "category_code", i.e. a value known to the underlying data source but not displayed on the chart itself.

Any suggestions on a potential solution?

Note that I could do I reverse lookup back into the database, but there are cases where we trim long "Name_Field" values to avoid messing up chart presentation.

Chart (HTML5)

answered on 02 Oct 2015

4 answers

173 views

Count of detail tables in radgrid

Hello,
I need to get the count of details tables added in the radgrid..not the count of row
thanks..

Grid

answered on 02 Oct 2015

4 answers

367 views

Telerik UI ASP.net RADGRID set Columns width programmatically

Hi

I am trying to display a Telerik RadGrid in my project.
I have a problem with changing the column width.
The data source of my grid is a list of objects.
When I add filters to the grid, the columns' width is fixed and I cannot change it / resize it.

P.S. I want to solve this programmatically(in vb code)

my vb code:

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

If Not IsPostBack Then

setColumnsOnGrid(Of object)(lst, RadGrid1, ArrayNameFilds:={"column1", "column2", "column3 ", "etc."})

End If

End Sub

Private Sub setColumnsOnGrid(Of T)(ByVal lst As List(Of T), ByVal grdName As RadGrid, ByVal ArrayNameFilds As Array)

Dim nameFiled As String

grdName.DataSource = lst

grdName.AllowMultiRowSelection = True

grdName.MasterTableView.AutoGenerateColumns = False

Dim boundColumn As GridBoundColumn

For i As Integer = 0 To ArrayNameFilds.Length - 1

nameFiled = ArrayNameFilds(i).ToString()

boundColumn = New GridBoundColumn()

grdName.MasterTableView.Columns.Add(boundColumn)

boundColumn.DataField = nameFiled

boundColumn.HeaderText = nameFiled

Next

End Sub

my aspx:

<telerik:RadGrid ID="grd_test" runat="server" AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" CellSpacing="0" GridLines="None">

<ClientSettings>

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

</ClientSettings>

</telerik:RadGrid>

Grid

answered on 01 Oct 2015

4 answers

125 views

HyperLinkColumn : URL lost with PageMethods

Hello,

Below is some code to demonstrate my problem :

I use a grid with 3 pages, each containing only one row for simplicity.. The grid contains an hyperlink column (another is visible here only for verification).

The first page is displayed by default and then we can observe a correct URL to the passage of the mouse over it.
Changing page calls PageMethods to get data client side, and oddly the url is lost... However, verification column displays the correct URL.

Thank you in advance for your help.

TestHyperLinkColumn.aspx :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TestHyperLinkColumn.aspx.cs" Inherits="Test.TestHyperLinkColumn" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

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

<head runat="server">

<title></title>

</head>

<body>

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

<div>

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

<script type="text/javascript">

//<![CDATA[

function RadGrid1_Command(sender, args) {

args.set_cancel(true);

$find("<%= RadAjaxLoadingPanel1.ClientID %>").show("<%= RadGrid1.ClientID %>");

var currentPageIndex = sender.get_masterTableView().get_currentPageIndex();

PageMethods.GetData(currentPageIndex + 1, updateGrid);

}

function updateGrid(result) {

//Bind Grid

var tableView = $find("<%= RadGrid1.ClientID %>").get_masterTableView();

var $ = $telerik.$;

result = $.parseJSON(result);

tableView.set_dataSource(result);

tableView.dataBind();

$find("<%= RadAjaxLoadingPanel1.ClientID %>").hide("<%= RadGrid1.ClientID %>");

}

//]]>

</script>

</telerik:RadCodeBlock>

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

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

</telerik:RadAjaxLoadingPanel>

<div>

<telerik:RadGrid runat="server" ID="RadGrid1" AllowFilteringByColumn="true" FilterType="CheckList" AllowPaging="true" PagerStyle-AlwaysVisible="true" AllowSorting="true">

<MasterTableView AutoGenerateColumns="False" PageSize="1" AllowFilteringByColumn="false">

<Columns>

<telerik:GridHyperLinkColumn DataTextField="Link" HeaderText="Link" Target="_blank" DataType="System.String" DataNavigateUrlFields = "LinkURL">

</telerik:GridHyperLinkColumn>

<telerik:GridBoundColumn DataField="LinkURL" HeaderText="LinkURL" DataType="System.String" Visible="true">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

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

<ClientSettings EnableRowHoverStyle="true">

<ClientEvents OnCommand="RadGrid1_Command" />

</ClientSettings>

</telerik:RadGrid>

</div>

</form>

</body>

</html>

TestHyperLinkColumn.aspx.cs :

using System;

using System.Collections.Generic;

using System.Data;

using System.Web.Services;

using System.Web.UI;

namespace Test

{

public partial class TestHyperLinkColumn : Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

RadScriptManager1.EnablePageMethods = true;

DataTable data = GetDataTable(1, true);

RadGrid1.MasterTableView.DataSource = data;

RadGrid1.DataBind();

}

private static string ConvertDataTabletoString(System.Data.DataTable dt)

{

System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();

List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();

Dictionary<string, object> row;

foreach (System.Data.DataRow dr in dt.Rows)

{

row = new Dictionary<string, object>();

foreach (System.Data.DataColumn col in dt.Columns)

{

row.Add(col.ColumnName, dr[col]);

}

rows.Add(row);

}

return serializer.Serialize(rows);

}

private static DataTable GetDataTable(int pageIndex, bool first = false)

{

DataTable dt = new DataTable();

dt.Columns.Add("Link", typeof(string));

dt.Columns.Add("LinkURL", typeof(string));

DataRow dr = dt.NewRow();

dr[0] = string.Format("Link{0}", pageIndex);

dr[1] = string.Format("http://www.link{0}.com", pageIndex);

dt.Rows.Add(dr);

pageIndex++;

if (first)

{ //Adds 2 rows only for pager because data not used (loaded from PageMethods)

dr = dt.NewRow();

dr[0] = "";

dr[1] = "";

dt.Rows.Add(dr);

pageIndex++;

dr = dt.NewRow();

dr[0] = "";

dr[1] = "";

dt.Rows.Add(dr);

}

return dt;

}

[WebMethod]

public static string GetData(int PageIndex)

{

DataTable dt = GetDataTable(PageIndex);

string result = ConvertDataTabletoString(dt);

return result;

}

Grid

answered on 01 Oct 2015

8 answers

259 views

HideEvent=LeaveTargetAndToolTip Problem

I have a RadGrid where an image in each row is added as the TargetControl to a RadToolTipManager to show a larger image when mousing over. I have the HideEvent set to "LeaveTargetAndToolTip" but it only works when keeping the mouse over the tooltip. If you leave the mouse over the target, it eventually goes away. This same behavior actually happens on your own site's demo of this exact property. What's the deal?

ToolTip

answered on 01 Oct 2015