Questions on UI for ASP.NET AJAX Forum

1 answer

46 views

Does RadMediaPlayer support files on Vimeo?

Hi all,

I can see support for Youtube and mp4 files, but can someone please confirm that videos hosted on Vimeo can be played using RadMediaPlayer?

MediaPlayer

answered on 09 Oct 2024

1 answer

111 views

Grid Column Read-Only setting in Batch Edit Mode

I need to set the GridBound column to read-only when in edit mode but editable when in insert mode (New row added). I've attempted using the Code-Behind "ItemDataBound" event as well as Client-Side "OnBatchEditOpend" event to set the read-only property on the column. Neither attempt work as the column always allows text to be entered. Below are my code snippets:

Thank you in advance for any help you can provide.

Grid Markup:

<telerik:RadAjaxLoadingPanel ID="CatLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
        <telerik:RadAjaxPanel ID="CatPanel1" runat="server" LoadingPanelID="CatLoadingPanel1">
               <telerik:RadGrid ID="grdCategory" runat="server" AutoGenerateColumns="false" CssClass="Gridheight4" 
                  Width="100%" AllowPaging="true" PageSize="10">
                     <ClientSettings> 
                              <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                              <KeyboardNavigationSettings AllowSubmitOnEnter="true" />  
                              <ClientEvents OnBatchEditGetCellValue="GetCellValue" />
                               <ClientEvents OnBatchEditSetCellValue="SetCellValue" />
                                <ClientEvents OnBatchEditGetEditorValue="GetEditorValue" />
                                <ClientEvents OnBatchEditSetEditorValue="SetEditorValue" />
                                <ClientEvents OnBatchEditOpened="BatchEditOpened" />
                       </ClientSettings>
                      <MasterTableView DataKeyNames="Category" EditMode="Batch" HeaderStyle-Font-Size="8pt" 
                              HeaderStyle-Font-Bold="true" ItemStyle-Font-Size="8pt" PagerStyle-AlwaysVisible="true" 
                               CommandItemDisplay="Top" InsertItemDisplay="Top" BatchEditingSettings-EditType="Cell" 
                                BatchEditingSettings-OpenEditingEvent="Click">
                              <CommandItemSettings ShowSaveChangesButton="true" ShowCancelChangesButton="true" 
                                ShowRefreshButton="true"/>                                
                              <Columns>
                                  <telerik:GridBoundColumn DataField="Category" UniqueName="Category" HeaderText="Category" 
                                   DataType="System.String" ItemStyle-CssClass="maximize" HeaderStyle-Width="250px" ItemStyle- 
                                  Font-Size="8pt">
                                 </telerik:GridBoundColumn>
                                 <telerik:GridTemplateColumn DataField="Is_Active" UniqueName="Is_Active"  HeaderText="Active" 
                                  HeaderStyle-Width="80px">
                                       <ItemTemplate>
                                            <telerik:RadSwitch runat="server" ID="CheckBox1" AutoPostBack="true" Enabled="false" 
                                            CssClass="elasticSwitch" Checked='<%# Eval("Is_Active") %>' OnClientClicking="checkbox1Click"> 
                                           </telerik:RadSwitch>
                                         </ItemTemplate>
                                         <EditItemTemplate>
                                               <telerik:RadSwitch runat="server" ID="CheckBox2" AutoPostBack="false" 
                                                 CssClass="elasticSwitch">
                                                </telerik:RadSwitch>
                                           </EditItemTemplate>
                                    </telerik:GridTemplateColumn>
                          <telerik:GridCheckBoxColumn DataField="CCD_Only" UniqueName="CCD_Only" HeaderText="CCD Only" 
                                 HeaderTooltip="Show for CCD UMs Only.." DataType="System.Boolean">
                            </telerik:GridCheckBoxColumn>
                            <telerik:GridCheckBoxColumn DataField="MMS_Only" UniqueName="MMS_Only" HeaderText="MMS Only" 
                                  HeaderTooltip="Medication Management UMs Only.."  DataType="System.Boolean"> 
                             </telerik:GridCheckBoxColumn>
                             <telerik:GridBoundColumn DataField="Comments" UniqueName="Comments" 
                                     HeaderText="Comments" DataType="System.String"></telerik:GridBoundColumn>
                         </Columns>
              </MasterTableView>
       </telerik:RadGrid>
</telerik:RadAjaxPanel>

Client Script

<script type="text/javascript">
        function GetCellValue(sender, args) {
            if (args.get_columnUniqueName() == "Is_Active") {
                args.set_cancel(true);
                var container = args.get_container();
                var displaySwitch = $telerik.findControl(container, "CheckBox1");
                if (displaySwitch) {
                    args.set_value(displaySwitch.get_checked());
                }
               
            }
        }
        function SetCellValue(sender, args) {
            if (args.get_columnUniqueName() == "Is_Active") {
                args.set_cancel(true);
                var container = args.get_container();
                var displaySwitch = $telerik.findControl(container, "CheckBox1");
                if (displaySwitch) {
                    displaySwitch.set_checked(args.get_value());
                }
            }
        }
        function GetEditorValue(sender, args) {
            if (args.get_columnUniqueName() == "Is_Active") {
                args.set_cancel(true);
                var container = args.get_container();
                var editorSwitch = $telerik.findControl(container, "CheckBox2");
                if (editorSwitch) {
                    args.set_value(editorSwitch.get_checked());
                }
            }
        }
        function SetEditorValue(sender, args) {
            if (args.get_columnUniqueName() == "Is_Active") {
                args.set_cancel(true);
                var container = args.get_container();
                var editorSwitch = $telerik.findControl(container, "CheckBox2");
                if (editorSwitch) {
                    editorSwitch.set_checked(args.get_value());
                }
            }
        }
        function BatchEditOpened(sender, args) {
            var tblView = args.get_tableView();
            var dataIem = tblView.get_dataItems();
            var item = args.get_row().control;
            var index = item.get_itemIndex();
            var colCategory = tblView.getColumnByUniqueName("Category");
            var colelement = colCategory.get_element();
            if (index < 0) {
                colelement.setAttribute("readonly", false);
            }
            else {
                colelement.setAttribute("readonly", true);
            }
        }
        function checkbox1Click(sender, args) {
            args.set_cancel(true);
            var grid = $find("<%= grdCategory.ClientID %>");
            var batchEditingManager = grid.get_batchEditingManager();
            var parentCell = $telerik.$(sender.get_element()).closest("td")[0];
            var initialValue = sender.get_checked();
            batchEditingManager.changeCellValue(parentCell, initialValue);
        }
    </script>

VB Code Behind

Private Sub grdCategory_ItemDataBound(sender As Object, e As GridItemEventArgs) Handles grdCategory.ItemDataBound
        If TypeOf e.Item Is GridEditableItem Then
            If e.Item.IsInEditMode Then
                Dim itemIndex As Integer = e.Item.ItemIndex
                Dim CateGoryColumn As GridColumn = grdCategory.MasterTableView.GetColumn("Category")
                If itemIndex < 0 Then
                    CType(CateGoryColumn, GridEditableColumn).ReadOnly = False
                Else
                    CType(CateGoryColumn, GridEditableColumn).ReadOnly = False
                End If

            End If
        End If

    End Sub

Grid

answered on 09 Oct 2024

1 answer

108 views

Display Spinner When User Has To Wait

Hi Everyone,

I need to display something (as spinner?) to indicate the application is running, because I have a process that forces the user to wait for 30-60 seconds. I think a spinner would be helpful. What I'm not sure is, how to accomplish this. Ironically, when loading this page, this webpage displays two circles each rotating/spinning in different directions. Something like that would be perfect.

How can I duplicate this in my ASP.NET AJAX project?

Essentially, the user presses the RADButton. So, I'd like to pop the spinners when the long process begins, and then hide it when the process is over. Is there a way to launch the spinner from within my C# function?

Thanks,

Mike

Button

answered on 09 Oct 2024

1 answer

26 views

Layered Bar Chart

Does anyone know how to create a layered bar chart like the sample image I have included? I do not want to stack the data because that misrepresents the Y axis value. I am programming this chart for a sales pipeline.

Ajax

Chart (HTML5)

answered on 07 Oct 2024

1 answer

23 views

Adding a telerik through codebehind with custom assembly skin is throwing an error

Hi,

I have built a custom assembly skin, and I know that it is working correctly as the controls on the page are showing the correct skin.

However, if I am to add a simple control telerik raddatepicker like the below

protected void Page_Load(object sender, EventArgs e)
{
RadDatePicker oDate = new RadDatePicker();
oDate.Skin = "IWCL";
pnlMain.Controls.Add(oDate);
}

The following error is thrown

Telerik.Web.UI.DatePickingInput with ID='dateInput' was unable to find an embedded skin with the name 'IWCL'. Please, make sure that the skin name is spelled correctly and that you have added a reference to the Telerik.Web.UI.Skins.dll assembly in your project. If you want to use a custom skin, set EnableEmbeddedSkins=false.

I am pretty sure that there isn't any issue with the custom assembly, as without adding a control through a code behind, the page runs ok without any error.

You can reproduce the same error by using the sample project that telerik have provided in the below

https://docs.telerik.com/devtools/aspnet-ajax/styling/controlling-visual-appearance/how-to-load-skins-from-external-assemblies?_gl=1*p0oqmn*_gcl_au*MTU5OTE5Mjc3Mi4xNzIzMjIyMDU5*_ga*ODM2NTIzMjk2LjE3MjMyMjIwNTk.*_ga_9JSNBCSF54*MTcyNzgxODEwNC4yOS4xLjE3Mjc4MjIwNTUuNTAuMC4w

Thank you and I look forwards to hear from you

SkinManager

answered on 04 Oct 2024

1 answer

50 views

Calendar Scheduler

Hi Guys

How to validate the following in the RadScheduler

I have a Webform with the RadScheduler and in the Popup form I the following dropdown list that I would like to be mandatory, user must select an item in order to continue saving the scheduler.

private void getReasons(int pReasonId)
    {
        // Create a new DataTable.        
        DataTable dtReason = new DataTable("scheduler_reasons");
        DataColumn dtColumn;

        // Create id column
        dtColumn = new DataColumn();
        dtColumn.DataType = typeof(Int32);
        dtColumn.ColumnName = "ID";
        dtColumn.Caption = "Reason ID";
        dtColumn.ReadOnly = false;
        dtColumn.Unique = true;
        // Add column to the DataColumnCollection.
        dtReason.Columns.Add(dtColumn);

        // Create Name column.
        dtColumn = new DataColumn();
        dtColumn.DataType = typeof(String);
        dtColumn.ColumnName = "calendar_reason";
        dtColumn.Caption = "Calendar Reason";
        dtColumn.AutoIncrement = false;
        dtColumn.ReadOnly = false;
        dtColumn.Unique = false;
        /// Add column to the DataColumnCollection.
        dtReason.Columns.Add(dtColumn);
                
        // Make id column the primary key column.
        DataColumn[] PrimaryKeyColumns = new DataColumn[1];
        PrimaryKeyColumns[0] = dtReason.Columns["id"];
        dtReason.PrimaryKey = PrimaryKeyColumns;

        // Create a new DataSet
        DataSet dtSet = new DataSet();

        // Add custTable to the DataSet.
        dtSet.Tables.Add(dtReason);

        DataRow workRow = dtReason.NewRow();        
        workRow["ID"] = "1";
        workRow["calendar_reason"] = "Day Off";
        dtReason.Rows.Add(workRow);
        workRow = dtReason.NewRow();        
        workRow["ID"] = "2";
        workRow["calendar_reason"] = "Jury Duty";
        dtReason.Rows.Add(workRow);
        workRow = dtReason.NewRow();        
        workRow["ID"] = "3";
        workRow["calendar_reason"] = "Sick Day";
        dtReason.Rows.Add(workRow);
        workRow = dtReason.NewRow();        
        workRow["ID"] = "4";
        workRow["calendar_reason"] = "Vacation";
        dtReason.Rows.Add(workRow);

        //- Telerik Advanced Edit Form
        Telerik.Web.UI.ResourceType ResReasons = new Telerik.Web.UI.ResourceType("CaleReasons");
        //- Telerik Advanced Edit Form Dropdownlist
        ResReasons.DataSource = dtReason;
        ResReasons.ForeignKeyField = "reasonId";
        ResReasons.KeyField = "ID";
        ResReasons.Name = "Reason";
        ResReasons.TextField = "calendar_reason";
        RadScheduler1.ResourceTypes.Add(ResReasons);

    }

Thank you for your help

Al

Scheduler

answered on 03 Oct 2024

1 answer

76 views

DatePicker Month Year in Month View Title

DatePicker with Multiple Rows and or Multiple columns the Month View Title isn't honored until you navigate to the next or previous set of months and back, then the Month Year is shown. Or if you click to show the months and select a date, then click to show the dates again, then the Year is shown.

This only seems to be an issue if viewing a single month.

<telerik:RadDatePicker ID="DatePicker1" runat="server" Calendar-MultiViewColumns="3" Calendar-MultiViewRows="2" ShowPopupOnFocus="true"> </telerik:RadDatePicker>

Also applies if using a shared Calendar.

Workaround in prerender

For Each View In Me.rcCalendar.CalendarView.ChildViews
CType(View, MonthView).TitleFormat = "MMMM yyyy"
Next View

Version Used: 2024.2.513.462

Calendar

DatePicker

answered on 02 Oct 2024

1 answer

30 views

Day Template for RadCalendar

Hi-

Can you display the day of the month in a Day Template?

Thanks

-Thomas

General Discussions

answered on 30 Sep 2024

1 answer

39 views

FormDecorator is not theming scrollbars in a RadGrid

Please have a look at the following demo https://demos.telerik.com/aspnet-ajax/grid/examples/functionality/scrolling/scrolling/defaultcs.aspx?skin=Sunset.

I have a similar scenario of a page with a grid that also has a FormDecorator whose DecoratedControls property is set to All, yet the scrollbars in the grid on this page are not getting styled according to the Sunset theme. If I look at the FormDecorator theming demo at https://demos.telerik.com/aspnet-ajax/formdecorator/examples/overview/defaultcs.aspx then I can see that the scrollbars are being styled by the FormDecorator for the Sunset theme, but I don't see it for the grid scrollbars in my page even though the grid theme is set to Sunset.

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" 
DecoratedControls="All" EnableViewState="true" 
ViewStateMode="Disabled" ControlsToSkip="None" EnableAjaxSkinRendering="true" />

When I see the html tag in Chrome's DevTools > Elements, I see the rfdScrollBars class is there as in code below, yet its not getting applied to the grid.

<html xmlns="http://www.w3.org/1999/xhtml" 
class="t-chrome t-chrome129 t-chrome t-chrome129 k-webkit k-webkit129 
RadForm RadForm_Sunset rfdButton rfdScrollBars rfdZone rfdLabel
rfdTextbox rfdTextarea rfdFieldset rfdRadio
 rfdCheckbox rfdGrids rfdRoundedCorners" style="">

FormDecorator

Grid

answered on 26 Sep 2024

2 answers

42 views

Can a user control be excluded from RadFormDecorator's action?

I have an aspx page that has a user control with an id of MainMenu. This page also has a form decorator, which is decorating the elements in MainMenu user control.

Is it possible to exclude the user control MainMenu from having form decorator classes being applied to it? If yes, then how would I do it?

<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" RenderMode="Auto"  EnableAjaxSkinRendering="False"/>
<uc1:MainMenu runat="server" ID="MainMenu"/>

FormDecorator

answered on 26 Sep 2024