Questions on UI for ASP.NET AJAX Forum

0 answers

91 views

RadProgressBar with RenderMode="Auto" does not work(not visible) in Mobile device (chrome on iphone)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabInputs.aspx.cs" Inherits="TabInputs" %>
<%@ 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></title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<script>
function OnClientTabSelected(sender, eventArgs) {
var tab = eventArgs.get_tab();
var htmlShow = document.getElementById("divProgressBar");
htmlShow.style.display = "block";
}
function OnClientMouseOut(sender, eventArgs) {
var tab = eventArgs.get_tab();
var htmlShow = document.getElementById("divProgressBar");
htmlShow.style.display = "none";
}
</script>

<div>
<telerik:RadTabStrip ID="RadTabStrip1" RenderMode="Auto" runat="server"
OnClientTabSelected="OnClientTabSelected"
OnClientMouseOut="OnClientMouseOut"
MultiPageID="RadMultiPage1" Skin="MetroTouch">
</telerik:RadTabStrip>
<telerik:RadProgressManager runat="server" ID="rpm" />
<div id="divProgressBar" runat="server" style="display: none; position: absolute; top: 180px; z-index: -1;">
<telerik:RadProgressBar RenderMode="Auto" runat="server" ID="RadProgressBar4"
Indeterminate="true">
</telerik:RadProgressBar>
</div>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server">
</telerik:RadMultiPage>
</div>
</form>
</body>
</html>

ProgressBar

asked on 07 Apr 2023

0 answers

190 views

Bound controls losing their values after modal popup

I've run into an issue using modal popups and controls on a page, and I've created a test scenario. What I'm trying to do is, when the user submits a form to save data to a database, the application first validates if everything is correct. If not, display a modal popup. This works find the first time I press "Save Data" in my test, but the 2nd time, any bound controls seem to lose their values. For example, the line -

Dim value As String = RadComboBox1.SelectedItem.Value

gives an 'Object reference not set to an instance of an object" error. Do I have to rebind every control on the page in the code-behind, or is there a better way to do this? Is this happening because I'm putting the RadWindowManager into the AjaxPanel? (I read a bit of documentation about it, but I couldn't clearly understand it).

EDIT: It also happens with another control (button) that does a postback. While rebinding does prevent the "Object Reference..." error, it loses its' selected value.

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="AjaxTest.aspx.vb" Inherits="ModalTest.AjaxTest" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            
            <telerik:RadScriptManager ID="RadScriptManager1" Runat="server">
            </telerik:RadScriptManager>

             <telerik:RadWindowManager ID="RadWindowManager1" runat="server" Skin="WebBlue">
            </telerik:RadWindowManager> 
            
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            </telerik:RadAjaxPanel>

            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">

                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadButton1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="RadAjaxPanel1" LoadingPanelID="RadAjaxPanel1" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>

            </telerik:RadAjaxManager>

            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" Runat="server" Skin="Default">                
            </telerik:RadAjaxLoadingPanel>

            <telerik:RadButton ID="btnSave" runat="server" Text="Save Data">
            </telerik:RadButton>

            <telerik:RadLabel ID="RadLabel1" runat="server">
            </telerik:RadLabel>
            <telerik:RadComboBox ID="RadComboBox1" Runat="server" DataSourceID="SqlDataSource1" DataTextField="Title" DataValueField="ID">
            </telerik:RadComboBox>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AppConnectionString %>" SelectCommand="SELECT [ID], [Title] FROM [luTest]"></asp:SqlDataSource>
        </div>
    </form>
</body>
</html>

Imports Telerik.Web.UI

Public Class AjaxTest
  Inherits System.Web.UI.Page
  Protected Sub RadButton1_Click(sender As Object, e As EventArgs) Handles btnSave.Click

    ' Simulate Data Validation.
    RadAjaxPanel1.Controls.Clear()
    RadAjaxPanel1.Controls.Add(RadWindowManager1)

    ' The commented out code also works, but the dropdown still loses its' values.
    RadWindowManager1.Windows.Clear()
    RadWindowManager1.RadAlert("Test Validation Message", 330, 180, "Error", "")

    ' CreateModalWindow(RadWindowManager1, "mModal\Modal.aspx")

    ' Simulating collecting data for saving to a database table.
    Dim value As String = RadComboBox1.SelectedItem.Value


  End Sub

  Private Sub CreateModalWindow(WindowManager As RadWindowManager, url As String)

    Dim RadWindow1 As New RadWindow
    With RadWindow1
      .ID = "rwTest"
      .Height = 600
      .Width = 800
      .Title = "Title"
      .DestroyOnClose = True
      .Skin = "WebBlue"
      .Modal = True
      .NavigateUrl = url
    End With

    WindowManager.Windows.Clear()
    WindowManager.Windows.Add(RadWindow1)

    Dim PageHandler As Page = HttpContext.Current.Handler

    Dim script As String = "function f(){$find(""" + RadWindow1.ClientID + """).show(); Sys.Application.remove_load(f);}Sys.Application.add_load(f);"

    RadAjaxPanel1.ResponseScripts.Add(script)
    ScriptManager.RegisterStartupScript(PageHandler, PageHandler.GetType(), "key", script, True)

  End Sub

End Class

Ajax

AjaxPanel

updated question on 06 Apr 2023

2 answers

316 views

RadComboBox Width and Labels not calculating correctly With and Without Bootstrap

I have an application that uses RadComboBoxes. I have noticed several issues regarding the width and labels. I have created two testing scenarios to demonstrate some of the
behavior. Also, I am using bootstrap in my application so to demonstrate the difference
in behavior between the two, I included examples of both. Attached are the pages rendered in Chrome.

Test 1 without Bootstrap:
Aspx:

<!DOCTYPE html>

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

<head runat="server">

    <title></title>

</head>

<body>

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

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

        <div class="container
vertical-center">

            <div class="row">

                <div class="col-sm-6
col-xs-12">

                    <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="50%" Label="50% With
Label:"></telerik:RadComboBox>

                    <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="100%" Label="100% With
Label:"></telerik:RadComboBox>

                    Label="100% w/o Label:
"

                    <telerik:RadComboBox ID="RadComboBox3" runat="server" Width="100%"></telerik:RadComboBox>

                    Label="50% w/o Label:
"<br />

                    <telerik:RadComboBox ID="RadComboBox4" runat="server" Width="50%"></telerik:RadComboBox>

                </div>

            </div>

        </div>

    </form>

</body>

</html>

Test 2
with bootstrap:
Aspx:

<!DOCTYPE html>

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

<head runat="server">

    <title></title>

    <link rel="stylesheet" href="~/content/bootstrap.min.css" />

    <link rel="stylesheet" href="~/content/bootstrap-theme.min.css" />

</head>

<body>

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

        <telerik:RadScriptManager ID="ScriptManager" runat="server">

            <Scripts>

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js"></asp:ScriptReference>

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js"></asp:ScriptReference>

                <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js"></asp:ScriptReference>

                <asp:ScriptReference Path="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" />

                <asp:ScriptReference Path="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js" />

            </Scripts>

        </telerik:RadScriptManager>

        <div class="container
vertical-center">

            <div class="row">

                <div class="col-sm-6
col-xs-12">

                    <telerik:RadComboBox ID="RadComboBox1" runat="server" Width="50%" Label="50% With
Label:"></telerik:RadComboBox>

                    <telerik:RadComboBox ID="RadComboBox2" runat="server" Width="100%" Label="100% With
Label:"></telerik:RadComboBox>

                    Label="100% w/o Label:
"

                    <telerik:RadComboBox ID="RadComboBox3" runat="server" Width="100%"></telerik:RadComboBox>

                    Label="50% w/o Label:
"<br />

                    <telerik:RadComboBox ID="RadComboBox4" runat="server" Width="50%"></telerik:RadComboBox>

                </div>

            </div>

        </div>

    </form>

</body>

</html>

ComboBox

updated answer on 06 Apr 2023

1 answer

158 views

How can i add checkbox property using mail merge field using Telerik Word Processing? could you please help?

I have added Mail Merge field and and try to add checkbox property using Telerik word processing. but not able to find the solution. and not able to extract Mail Merge fields also from word document.

CheckBox

Editor

answered on 05 Apr 2023

1 answer

229 views

Batch Edit Manipulate RadComboBox's in RadGrid on client with Javascript

We need to change the selected item of RadComboBox's hosted in RadGrid in BatchEdit mode.

We have a RadGrid with parent child relationships. If the parent row combobox is changed then the change needs to ripple through and change the same value in the child rows. If a child row is changed the parent may need to be changed as well.

The parent can be set to "Multiple,Detailed,Deferred" and a couple other values. If the parent is changed to Detailed then all the children become detailed. If the parent is Detailed and one of the children is changed to something other than Detailed then the parent must change to Multiple. If all the children changed to the same value then the parent should be changed to that value as well.

We are triggering processing with the grid OnBatchEditSetCellValue client event.

MasterTableView EditMode="Batch"

BatchEditSetting EditType="Cell"

ComboBox

Grid

answered on 05 Apr 2023

1 answer

128 views

Treelist (ASP.NET AJAX) child items not in edit mode

Hi,

I'm trying to use the Treelist for a data source with the following definition

public class MyGridItem
{
	public string ID { get; set; }
	public string Name { get; set; }
	public string ParentID { get; set; }
	public bool IsIncluded { get; set; }
	public bool IsExcluded { get; set; }
}

In markup I've got

<telerik:RadTreeList ID="RadTreeMarkers" runat="server" ParentDataKeyNames="ParentID" DataKeyNames="ID" AutoGenerateColumns="false"
	OnNeedDataSource="RadTreeMarkers_NeedDataSource" AllowMultiItemEdit="true" ExpandCollapseMode="Client" EditMode="InPlace"
	AllowPaging="false" AllowSorting="false" OnItemDataBound="RadTreeMarkers_ItemDataBound">
	<Columns>
		<telerik:TreeListBoundColumn DataField="ID" UniqueName="ID" Visible="false" ForceExtractValue="Always"></telerik:TreeListBoundColumn>
		<telerik:TreeListBoundColumn DataField="ParentID" UniqueName="ParentID" Visible="false"></telerik:TreeListBoundColumn>
		<telerik:TreeListBoundColumn DataField="Name" UniqueName="Name" HeaderText="Mark" ReadOnly="true"></telerik:TreeListBoundColumn>
		<telerik:TreeListCheckBoxColumn DataField="IsIncluded" UniqueName="IsIncluded" HeaderText="Included" ForceExtractValue="Always"></telerik:TreeListCheckBoxColumn>
		<telerik:TreeListCheckBoxColumn DataField="IsExcluded" UniqueName="IsExcluded" HeaderText="Excluded" ForceExtractValue="Always"></telerik:TreeListCheckBoxColumn>
	</Columns>
</telerik:RadTreeList>

And then in the code behind I've got

protected void RadTreeMarkers_NeedDataSource(object sender, TreeListNeedDataSourceEventArgs e)
{
	var treeData = MyFacade.GetTreeData();
	var treeDataGridItems = treeData.Select(m => new GridItem
	{
		ID = m.ID.ToString(),
		Name = m.Name,
		ParentID = m.ParentID.HasValue ? m.ParentID.Value.ToString() : string.Empty,
		IsIncluded = m.IsIncluded.HasValue && m.IsIncluded == true,
		IsExcluded = m.IsIncluded.HasValue && m.IsIncluded == false
	}
	).ToList();
	RadTreeMarkers.DataSource = treeDataGridItems;
}

protected void RadTreeMarkers_ItemDataBound(object sender, TreeListItemDataBoundEventArgs e)
{
	if (e.Item is TreeListDataItem item)
	{
		item.Edit = true;
	}
}

The intention is for (only) the two checkboxes to be always editable in the client.

However, when rendered in the client the root items are editable but none of the child items is editable.

What am I doing wrong?

TreeList

answered on 05 Apr 2023

0 answers

118 views

RadGrid Disable embedded scripts - what scripts to use?

I am trying to disable embeddedscripts for radgrid - everything works but context menu - which scripts altogether do I need to add?

This write up (linked below) is incorrect or out of date - can someone please help.

https://docs.telerik.com/devtools/aspnet-ajax/getting-started/performance/disabling-embedded-resources#disabling-embedded-resources

Grid

ScriptManager and StyleSheetManager

asked on 04 Apr 2023

8 answers

1.2K+ views

MonthYear Picker - Show Year Only

Hi guys,

I'm using 2 MonthYearPickers on a page and need that one of them to show only the year.

How can i do this? Tryed the css solution with #rcMView_month but that changes for both controls.

Thanks,

Antonio

MonthYearPicker

answered on 29 Mar 2023

5 answers

614 views

Prevent images to be pasted in Radeditor

I want to prevent users from pasting images inside the Radeditor. I don't want to prevent them pasting at all but if there is an image in the pasted content I want it to be filtered out and not pasted inside the editor.
I used this code to fire "PastePlainText" to do so:

function OnClientLoadRadEditor(editor, args) {
var element = document.all ? editor.get_document().body : editor.get_document();
$telerik.addExternalHandler(element, "paste", function (e) {
editor.fire("PastePlainText");
//cancel the browser's paste event
if (e.preventDefault) e.preventDefault();
if (e.stopPropagation) e.stopPropagation();
return false;
});
}

It works fine when I copy HTML code that has images inside, and it filters the images. But when I copy the image itself and paste it in the editor the above event won't be fired and the image will be copied.
I also tried OnClientPasteHtml() but I don't know how to filter the images with this function.

It seems that different browsers have different functionality on this issue and I'm a bit confused. Currently I'm testing by Chrome and IE.

I wonder if I went the wrong way from the beginning! Could you please suggest me a solution? I need the editor not to accept images at all.

Editor