I am very new to Telerik, so forgive my nearly total lack of knowledge in this area. I am coming from Selenium and having a difficult time trying to find the equivalent ways to do things in Telerik.

One example is simply invoking JavaScript by reference elements that are available in c#. For example,

C# fake code of what I'm trying to accomplish:

var inputbox = myclass.FindElement.ByXPath<HtmlInputText>("//*[@id='someid']//input[@type='someotherid']");
mybrowser.Actions.InvokeScript( inputbox.HowToReferToThisInJS?? +".some_method_like_click_or_whatever_in_js()" );

Sorry if this isn't clear and I'm missing something super obvious. This was relatively straight forward in Selenium (at least I was used to it) and I'm sure there is an easy way to do this using Telerik, I'm just having a hard time bridging the gap.

Something similar that works in Java+Selenium (the arguments[0-1] are magically brought in from the parameters in the method call - this is essentially what I'm trying to accomplish):

WebElement dropdown = driver().findElement(By.xpath(xpath)); // A dropdown box
int index = 5;
((JavascriptExecutor)driver()).executeScript("var select = arguments[0]; select.options[arguments[1]].selected = true;", dropdown, index);

Thanks.

Hello,

What Im trying to do, is setting up a radgrid to use paging, and when the user selects the export to csv option it should export all of the records, not just the current page.

Ive looked into other posts, but ive tried everything and i just cant get it working. Right now it just exports the current page, when i try other things, the paging stops working and the export of all records works.

Here is my aspx:

<%@ Page Title="Nut Runners Data" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="NutRunnersReport.aspx.cs" Inherits="DataServer.Reports.NutRunnersReport" %>
<asp:Content ID="Content1" ContentPlaceHolderID="MainContent" runat="server">
    <link href="../Css/print.css" rel="stylesheet">
    <link href="../Css/radGrid.css" rel="stylesheet">

    <telerik:RadAjaxLoadingPanel ID="LoadingPanel1" runat="server" EnableAjaxSkinRendering="true" Skin="Black" RenderMode="Mobile" AnimationDuration="500">

    </telerik:RadAjaxLoadingPanel>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"  OnAjaxRequest="RadAjaxManager1_AjaxRequest" DefaultLoadingPanelID="LoadingPanel1">

        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="StartDate">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="EndDate">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadGrid1"/>
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="form-horizontal">
        <div class="row">
            <div class="col-md-12">
                <h3>Nut Runners Data</h3>
                <hr />
                The following nut runners data is between the range of dates selected.
               <br />
                From
                <telerik:RadDatePicker ID="StartDate" runat="server" OnSelectedDateChanged="StartDate_SelectedDateChanged" AutoPostBack="true"></telerik:RadDatePicker>
                To
                <telerik:RadDatePicker ID="EndDate" runat="server" OnSelectedDateChanged="EndDate_SelectedDateChanged" AutoPostBack="true"></telerik:RadDatePicker>
                <br />
            </div>

        </div>
        <div class="row" style="margin-top: 20px;">
            <div class="col-md-12">
                <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" OnAjaxRequest="RadAjaxPanel1_AjaxRequest" LoadingPanelID="LoadingPanel1"  ClientEvents-OnRequestStart="onRequestStart" >
                    <telerik:RadGrid ID="RadGrid1" runat="server" Width="100%" OnGridExporting="RadGrid1_GridExporting" OnItemDataBound="RadGrid1_ItemDataBound" OnItemCommand="RadGrid1_ItemCommand" AllowFilteringByColumn="true"
                                     Skin="Office2010Black" GroupPanelPosition="Top" OnNeedDataSource="RadGrid1_NeedDataSource">
                        <ClientSettings> 
                            <Resizing AllowColumnResize="false" ResizeGridOnColumnResize="false" />
                            <ClientEvents OnCellSelected="" /> 
                            <Selecting AllowRowSelect="true" />
                            <Scrolling AllowScroll="true" UseStaticHeaders="true" SaveScrollPosition="true" ScrollHeight="500"/>
                        </ClientSettings>

                        <MasterTableView AllowAutomaticDeletes="false"
                                         AllowAutomaticInserts="false"
                                         AllowAutomaticUpdates="false"
                                         AllowFilteringByColumn="true"
                                         AllowMultiColumnSorting="true"
                                         AllowPaging="true"
                                         AllowSorting="true"
                                         HorizontalAlign="Center"
                                         ShowHeader="true"
                                         Font-Size="Large"
                                         CommandItemDisplay="Top"                      
                                         Width="100%"
                                         PageSize="20">
                            
                            <PagerStyle Position="Bottom"/>
                            
                            <CommandItemSettings ShowAddNewRecordButton="false" ShowCancelChangesButton="false" ShowExportToCsvButton="true" ShowExportToExcelButton="false" ShowRefreshButton="true" />
                        </MasterTableView>
                    </telerik:RadGrid>
                </telerik:RadAjaxPanel>
                <br />
            </div>
        </div>
    </div>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script src="../Scripts/initialize.js"></script>
        <script src="../Scripts/radChart.js"></script>
        <script src="../Scripts/radGrid.js"></script>
        <script src="../Scripts/radAjaxManager.js"></script>
    </telerik:RadCodeBlock>
</asp:Content>

And here is my c#:
using System;
using System.Linq;
using System.Web.UI;
using System.Web.UI.WebControls;
using DataServer.App_Code;
using DataServer.Content.Models;
using Telerik.Web.UI;
using Telerik.Web.UI.GridExcelBuilder;

namespace DataServer.Reports
{
    public partial class NutRunnersReport : System.Web.UI.Page
    {

        public void RadGrid1_ItemCommand(object sender, GridCommandEventArgs e)
        {
            RadDataGridControl.SetPageSizeForExport(sender, e);
        }

        public void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
        {
            if (e.Item is GridDataItem)
            {
                GridDataItem dataItem = e.Item as GridDataItem;
                TableCell dateCell = dataItem["Date"];

                dateCell.Text = Convert.ToDateTime(dateCell.Text).ToString("d");
            }
            RadDataGridControl.CenterFilterColumn(RadGrid1);
        }

        ~NutRunnersReport()
        {
        }

        public DateTime? StartDateTime
        {
            get
            {
                return this.StartDate.SelectedDate;
            }
            set
            {
                this.StartDate.SelectedDate = value;
            }
        }

        public DateTime? EndDateTime
        {
            get
            {
                return this.EndDate.SelectedDate;
            }
            set
            {
                this.EndDate.SelectedDate = value;
            }
        }

        public void EndDate_SelectedDateChanged(object sender,
            Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
        {
            this.GetProductionResults();
        }

        public void RadAjaxPanel1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            this.GetProductionResults();
        }

        public void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)
        {
            this.GetProductionResults();
        }

        public void Page_PreRender(object sender, EventArgs e)
        {
            this.EditColumns();

            this.RadGrid1.Rebind();
        }

        public void EditColumns()
        {
            GridColumn[] columns = this.RadGrid1.MasterTableView.AutoGeneratedColumns;
            foreach (GridColumn column in columns)
            {
                switch (column.UniqueName)
                {
                    case "Date":
                        column.HeaderStyle.Width = Unit.Pixel(130);
                        column.FilterControlWidth = Unit.Pixel(90);
                        column.ItemStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                        break;
                    case "Shift":
                        column.HeaderStyle.Width = Unit.Pixel(70);
                        column.FilterControlWidth = Unit.Pixel(30);
                        column.ItemStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                        break;
                }

                column.HeaderStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                column.HeaderStyle.VerticalAlign = System.Web.UI.WebControls.VerticalAlign.Middle;
                //column.ItemStyle.HorizontalAlign = System.Web.UI.WebControls.HorizontalAlign.Center;
                column.ItemStyle.VerticalAlign = System.Web.UI.WebControls.VerticalAlign.Middle;
            }
        }

        protected void Page_Load(object sender, EventArgs e)
        {
            
            if (!this.IsPostBack)
            {
                this.StartDateTime = DateTime.Today;
                this.EndDateTime = DateTime.Today.AddDays(1);
            }

        }

        protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
        {
            this.GetProductionResults();
        }

        public void RadGrid1_GridExporting(object source, GridExportingArgs e)
        {
            RadDataGridControl.GridExporting(source, e);
        }

        protected void StartDate_SelectedDateChanged(object sender,
            Telerik.Web.UI.Calendar.SelectedDateChangedEventArgs e)
        {
            this.GetProductionResults();
        }



        private void GetProductionResults()
        {
            this.RadGrid1.DataSource = null;
            using (var entities = new NutRunnersEntities())
            {
                this.RadGrid1.DataSource = entities.p_GetNutRunnersByDate(this.StartDateTime,
                                                                                   this.EndDateTime).ToList();
            }
        }
    }
}

The method SetPageSizeForExport:
internal static void SetPageSizeForExport(object sender, Telerik.Web.UI.GridCommandEventArgs e)
{
var grid = (Telerik.Web.UI.RadGrid)sender;
            int count = grid.Items.Count;
            if (count == 0)
            {
                count++;
            }

            grid.PageSize = count * grid.MasterTableView.PageCount;
}

And the method GridExporting:
internal static void GridExporting(object source, Telerik.Web.UI.GridExportingArgs e)
{
var grid = (Telerik.Web.UI.RadGrid)source;
grid.ExportSettings.IgnorePaging = true;
grid.ExportSettings.ExportOnlyData = false;
grid.ExportSettings.OpenInNewWindow = true;
grid.ExportSettings.HideStructureColumns = false;
grid.MasterTableView.CommandItemDisplay = Telerik.Web.UI.GridCommandItemDisplay.None;
grid.ExportSettings.FileName = string.Format("{0} Exported Grid Data",
(System.Web.HttpContext.Current.Handler as System.Web.UI.Page).Title);

switch (e.ExportType)
{
case Telerik.Web.UI.ExportType.Excel:
grid.ExportSettings.Excel.Format = Telerik.Web.UI.GridExcelExportFormat.Xlsx;
grid.MasterTableView.ExportToExcel();
break;
case Telerik.Web.UI.ExportType.Csv:
grid.MasterTableView.ExportToCSV();
break;
case Telerik.Web.UI.ExportType.Word:
grid.ExportSettings.Word.Format = Telerik.Web.UI.GridWordExportFormat.Html;
grid.MasterTableView.ExportToWord();
break;
case Telerik.Web.UI.ExportType.WordDocx:
grid.ExportSettings.Word.Format = Telerik.Web.UI.GridWordExportFormat.Docx;
grid.MasterTableView.ExportToWord();
break;
case Telerik.Web.UI.ExportType.Pdf:
grid.MasterTableView.ExportToPdf();
break;
}
}


Any suggestion of what im doing wrong? 

Sorry for all the mess.

Thanks,

Alex

I am having issues adding a dropdown combo box to my UI grid.

Context: A user is setting up a batch of jobs. Each job is for a single customer. That is, a batch can have multiple jobs, each job is for one customer. My structure is ManageJobs, which holds JobDetails and each JobDetails has a Customer ID and Customer name.

The JobDetailsViewModel holds the Customer ID for whom the job is for and a name for display purposes. I have taken out any extraneous fields that are not relevant, there are other columns in the grid which do not require a dropdown. When the user is setting up a particular JobDetail, the dropdown needs to display a list of possible customers and select which one they want. ManageJobs contains a list of possible customers they can choose from, when selected this entry is stored on the JobDetails.

Here is where I am at:

BatchViewModel contains (amongst others) a list of JobDetails and the master customer list. The master customer list is populated by the controller.

This is the view:

//Omitted crud operations for simplicity

My viewmodel:

I have tried various things via tutorials and whatever else, but I cannot get the dropdowns working at all. Can you suggest which way I need to go for this? I am really stuck.

Many thanks

Hello, 

I am currently Databinding elements from server side database(DB) to my grid and would like the Filter and Sort to be managed Server side too (Client side is too slow).

Is there any options available for this ? 

If no, is there a way to use the filter and sort from Grid to launch my own code using the values to do my own server-side query to my DB and refresh the data ? 

Thanks for the help.

In the Telerik Comment Widget, a button called "Accept All Track Changes", which accepts everything within the body, has a popup when a user clicks on it. The problem is I'm trying to make it 508 compliant so that when the popup happens, it focus's on the "OK" button so the user can tab back and forth between that and Cancel. Currently there is no way to tab onto this button since it is a popup. I tried:

    $('.Default').on('show', function () {
        $('.ok').focus();
    });

The .Default class is the the container and the "ok" class is the button. Is there a way to have the OK button be the focus on popup?

Hi,

Can description handle the html tag and also scrollable if out width and height.?

thanks.

Hi

I'm having some issues with a very big organisation chart (it contains about 3500 items in 1700 groups).

1. The first issue is that it takes a long time to load (about 20 seconds untill the control displays on the page). Is this normal for charts this size or should this be faster?

2. When I drill down and go back to the parent level, some errors occur. I noticed while debugging that the following line returns null, which then makes the rest of the javascript fail. This line is located in the pageLoad() method, so as I understand all controls should be initialized at the moment the line below is executed. I checked using the developer tools in IE and the control is still visible in the markup.

var orgChart = $find("<%=MyOrgChartControl.ClientID%>");

This only happens after a postback. So the initial request never returns an error. The weird thing is that it does not happen all the time, I can for example do 1 postback (drill down) without it failing, but during the next postback (go to parent level) the error occurs...

Do you guys have any idea on what might be causing this issue? Any help would be much appreciated!

Kind regards

Jens

Hi,

I have a RadGrid which I am trying to export to PDF. When I open PDF I want to see highlighted row based on criteria. I have a column in RadGrid call "TotHrs".

if  (TotHrs) > 500 highlight the entire row in PDF.

How can I do this.

Thanks so much for your help.

I have a RadContentTemplateTile with a default Title colour of Black set via

Sometimes I have the need to change the Black to Red and I'd like to do it via CSS as below.

The trouble is, I don't know how/where to apply this CSS in code behind. Please assist.