Questions on UI for ASP.NET AJAX Forum

1 answer

102 views

Telerik radcalendar hover colour change during checkbox status is checked

Hi Team ,

1. The below style i have to trigger during checkbox check status change

2. I need to change the same radcalendar hover colour change when the checkbox status change

checkbox1 ✅️

radcalendar control

I have to change the radcalendar date hovering to red if i check the checkbox and normal colour if unchecked

Calendar

answered on 19 Oct 2023

1 answer

94 views

Examining the Excel-like Filtering example, how would you set/remove filtering with javascript?

In the Excel-like Filtering example for ASP.NET AJAX, the RadGrid utilizes filtering by way of a HeaderContextFilterMenu. Because of this distinction, the coding samples for setting/removing filters via javascript seem to be incompatible.

For example, with a standard RadGrid you could set a filter with the following javascript:

var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
masterTable.filter("OrderID", 10254, Telerik.Web.UI.GridFilterFunction.GreaterThan, true);

OR

var masterTable = $find("<%= RadGrid1.ClientID %>").get_masterTableView();
masterTable.filter("AccessLevel", "User", "EqualTo");
masterTable.sort("Name");

But since I'm using the "Excel-like Filtering" mode/style, when I try this same logic, it returns the following error after calling getElementByClassName:

Uncaught TypeError: d is null

My assumption is that there is a different set of steps/calls needed to set filtering when HeaderContextFilterMenu is involved. Any ideas?

DefaultCS.aspx:

<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Functionality.Filtering.ExcelLikeFiltering.DefaultCS" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableAJAX="true">
     <div class="demo-container no-bg">
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AllowFilteringByColumn="true" runat="server" FilterType="HeaderContext" EnableHeaderContextMenu="true" 
                EnableHeaderContextFilterMenu="true" AllowPaging="True" PagerStyle-AlwaysVisible="true" OnFilterCheckListItemsRequested="RadGrid1_FilterCheckListItemsRequested" DataSourceID="SqlDataSource1" AllowSorting="true" GroupingEnabled="true">
                <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="CustomerID">
                    <Columns>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="ContactName" FilterControlAltText="Filter ContactName column" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="ContactTitle" FilterControlAltText="Filter ContactTitle column" HeaderText="ContactTitle" SortExpression="ContactTitle" UniqueName="ContactTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Address" FilterControlAltText="Filter Address column" HeaderText="Address" SortExpression="Address" UniqueName="Address">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="City" FilterControlAltText="Filter City column" HeaderText="City" SortExpression="City" UniqueName="City">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="Country" FilterControlAltText="Filter Country column" HeaderText="Country" SortExpression="Country" UniqueName="Country">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

DefaultCS.aspx.cs:

using Telerik.Web.UI;
using System;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
namespace Telerik.GridExamplesCSharp.Functionality.Filtering.ExcelLikeFiltering
{
    public partial class DefaultCS : System.Web.UI.Page
    {
        protected void RadGrid1_FilterCheckListItemsRequested(object sender, GridFilterCheckListItemsRequestedEventArgs e)
        {
            string DataField = (e.Column as IGridDataColumn).GetActiveDataField();
 
            e.ListBox.DataSource = GetDataTable(DataField);
            e.ListBox.DataKeyField = DataField;
            e.ListBox.DataTextField = DataField;
            e.ListBox.DataValueField = DataField;
            e.ListBox.DataBind();
        }
 
        public DataTable GetDataTable(string field)
        {
            string query = string.Format("SELECT DISTINCT {0} FROM Customers", field);
 
            String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            SqlConnection conn = new SqlConnection(ConnString);
            SqlDataAdapter adapter = new SqlDataAdapter();
            adapter.SelectCommand = new SqlCommand(query, conn);
 
            DataTable myDataTable = new DataTable();
 
            conn.Open();
            try
            {
                adapter.Fill(myDataTable);
            }
            finally
            {
                conn.Close();
            }
 
            return myDataTable;
        }
    }
}

Filter

Grid

answered on 19 Oct 2023

2 answers

119 views

how to add styles for radcalendar asp.net in the javascript

<style type="text/css">

 .RadCalendar .rcTitlebar .rcTitle

{

      color:#1F3E74 !important;

}

</style>
 
This same style i have to give inside javascript during checkbox click..dont know how to continue below

Calendar

answered on 17 Oct 2023

1 answer

121 views

RadDateRangePicker Start and End date Label Position

Is there a css solution to control the position of the Start and End date picker labels? Right now they are above the date boxes and I would like them to be to the left.

DatePicker

answered on 13 Oct 2023

0 answers

355 views

Client-side API Reference - Telerik.Web.UI.RadLabel

Hi

Due to PT testing on our code, we found an issue with Rad labels that executing a JS code.

In order to solve this issue, I was trying to set the HtmlEncode property to true from JS with no success,

Cause I'm trying to avoid changing this property for each web form manually.

The default value for this property is false.

So I need to know if there is a client-side API for this property?

If not, any other suggestions to solve this breach with code and not manually?

Thanks

Merav

Label

asked on 10 Oct 2023

1 answer

386 views

How do you change the filter icon on the Excel-like Filtering example to show filtered columns?

In the Excel-like Filtering example for ASP.NET AJAX, the RadGrid utilizes filtering by way of a HeaderContextFilterMenu. In the example, there is a filter icon/button that you'd click on to open the column's context filter menu. Once you apply the filter, the grid filters as you'd expect, but there is nothing to indicate which column is being filtered. For that matter, if there are filters applied to multiple columns, there is no obvious way of knowing which columns are being filtered.

Looking at the attached screenshot, I've filtered CONTACT TITLE column to only display records where the contact is an "Accounting Manager", but when you look at the results there is no visual clue that CONTACT TITLE has been filtered.

Using the provided sample code, how would you alter the code to have it toggle the column's filter icon/button to indicate which column(s) have an actively applied column filter?

DefaultCS.aspx:

<%@ Page Language="c#" AutoEventWireup="false" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.GridExamplesCSharp.Functionality.Filtering.ExcelLikeFiltering.DefaultCS" %>
 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" EnableAJAX="true">
     <div class="demo-container no-bg">
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" AllowFilteringByColumn="true" runat="server" FilterType="HeaderContext" EnableHeaderContextMenu="true" 
                EnableHeaderContextFilterMenu="true" AllowPaging="True" PagerStyle-AlwaysVisible="true" OnFilterCheckListItemsRequested="RadGrid1_FilterCheckListItemsRequested" DataSourceID="SqlDataSource1" AllowSorting="true" GroupingEnabled="true">
                <MasterTableView DataSourceID="SqlDataSource1" AutoGenerateColumns="False" DataKeyNames="CustomerID">
                    <Columns>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="ContactName" FilterControlAltText="Filter ContactName column" HeaderText="ContactName" SortExpression="ContactName" UniqueName="ContactName" AutoPostBackOnFilter="true" CurrentFilterFunction="StartsWith">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="ContactTitle" FilterControlAltText="Filter ContactTitle column" HeaderText="ContactTitle" SortExpression="ContactTitle" UniqueName="ContactTitle">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="Address" FilterControlAltText="Filter Address column" HeaderText="Address" SortExpression="Address" UniqueName="Address">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="City" FilterControlAltText="Filter City column" HeaderText="City" SortExpression="City" UniqueName="City">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn FilterCheckListEnableLoadOnDemand="true" DataField="Country" FilterControlAltText="Filter Country column" HeaderText="Country" SortExpression="Country" UniqueName="Country">
                        </telerik:GridBoundColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </telerik:RadAjaxPanel>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Customers]"></asp:SqlDataSource>
    </div>
    </form>
</body>
</html>

DefaultCS.aspx.cs:

using Telerik.Web.UI;
using System;
using System.Web.UI;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
 
namespace Telerik.GridExamplesCSharp.Functionality.Filtering.ExcelLikeFiltering
{
    public partial class DefaultCS : System.Web.UI.Page
    {
        protected void RadGrid1_FilterCheckListItemsRequested(object sender, GridFilterCheckListItemsRequestedEventArgs e)
        {
            string DataField = (e.Column as IGridDataColumn).GetActiveDataField();
 
            e.ListBox.DataSource = GetDataTable(DataField);
            e.ListBox.DataKeyField = DataField;
            e.ListBox.DataTextField = DataField;
            e.ListBox.DataValueField = DataField;
            e.ListBox.DataBind();
        }
 
        public DataTable GetDataTable(string field)
        {
            string query = string.Format("SELECT DISTINCT {0} FROM Customers", field);
 
            String ConnString = ConfigurationManager.ConnectionStrings["NorthwindConnectionString"].ConnectionString;
            SqlConnection conn = new SqlConnection(ConnString);
            SqlDataAdapter adapter = new SqlDataAdapter();
            adapter.SelectCommand = new SqlCommand(query, conn);
 
            DataTable myDataTable = new DataTable();
 
            conn.Open();
            try
            {
                adapter.Fill(myDataTable);
            }
            finally
            {
                conn.Close();
            }
 
            return myDataTable;
        }
    }
}

Filter

Grid

answered on 06 Oct 2023

1 answer

231 views

Expand all nodes inside the RadTreeView of a RadFileExplorer on page load

Hi. I have a RadFileExplorer and I would like to expand all of the nodes in its RadTreeView in the left hand panel on page load.

I have tried numerous ways in the code behind as well as JavaScript. The best I could manage was to expand the first node, but nothing more.

I appreciate any suggestions.

Thanks.

FileExplorer

answered on 05 Oct 2023

0 answers

91 views

Closing RadDateRangePicker popup

Is there a way to close the date range popup automatically once the end date has been chosen? I know you can close it by clicking somewhere outside the popup, but users are dumb and that may not be intuitive enough.

DateRangePicker

asked on 04 Oct 2023

2 answers

309 views

RadGrid Previous and Next buttons not working

Hi,
I have a RadGrid that displays the page numbers and the previous and Next buttions for paging functionality. The paging works when I click on the page number but not when I click on the previous/next buttons. The following is the skeleton of my code. Please suggest a solution to make this work.

It works fine if I take out the rebind() call in the page load event. However I need this to support other functionality.

protected void Page_Load(object sender, EventArgs e)

{

cboSelectReport.Attributes.Add("onchange", "DisplayNewReport();");

string sqlString ="declare @startdate datetime; declare @enddate datetime;";

sqlString = sqlString + "set @startdate = '" + dtpStart.SelectedDate.ToString() + "';";

sqlString = sqlString + "set @enddate = '" + dtpEnd.SelectedDate.ToString() + "';";

radgrid.Skin = "Outlook";

ReportSource.SelectCommand = sqlString + ConfigurationManager.AppSettings["sqlcommand6"];

ReportSource.DataBind();

radgrid.Rebind();

}



    public void radgrid_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

    {

        radgrid.DataSource = ReportSource;

    }

Thanks
Mahipal

Grid

updated answer on 04 Oct 2023

1 answer

121 views

Issue with finding element in grid edit with ascx WebUserControl

Hi
I am really struggling to find a how to edit a textbox. I have a grid edited with a ascx WebUserControl. Within the ascx I the following

var pSalesOrderNumber = $find("<%= txtOrderNumber.ClientID %>");
It is undefined. I tried using $telerik.findControl but still no luck. Sadly out of my depth. Any help would be much appreciated

Grid

UI for ASP.NET AJAX in ASP.NET MVC

answered on 04 Oct 2023