Hi,

I am playing with Radmenu on multiple devices, including desktop and mobile devices. I realize i can set "RenderMode" to "Auto" and it will adapt to devices automatically.

However, one issue i noticed is that once it is set to "Auto", it renders desktop menu in "Lightweight" mode. According to my research, it is the default behavior: if there is lightweight mode available, use lightweight mode for desktop and using Mobile mode for mobile devices. I also realized the lightweight mode has different HTML layout than the Classic one. That cause some styling issue cross my web application. I would prefer to show "Classic" on desktop, and "Mobile" for mobile devices. Is there any setting/configuration that can help with that?

In addition, is there any specific CSS files for lightweight mode that I need to download and add to my web application (because this is my first time play with lightweight render mode)?

Thanks

Kan

Hello All, 

I'm using the self hierarchy rad grid, in the second and third level I'm hiding few columns programmatically but the grid render is not happening.

please help me on this, its bit urgent.

Attached the image for reference.

With Thanks

Amjath

Hi guys,

I have created a Pie Chart for my application but appearance does not look good. If I have at least 6 items the % is squeezed and cannot be seen.

Please see attached file.

Help me with this issue.

Thanks so much.

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?