Questions on UI for ASP.NET AJAX Forum

3 answers

234 views

I implemented the image gallery and all works properly but the thumbnails. They are not showing.

<telerik:RadImageGallery AllowPaging="true" PageSize="10" runat="server" DisplayAreaMode="Image" ID="RadImageGallery1" Height="600px" Width="900px" ImagesFolderPath="~/GalleryPics/2014 Football">

<ClientSettings>

<AnimationSettings>

<NextImagesAnimation Type="VerticalSlide" />

<PrevImagesAnimation Type="VerticalSlide" />

</AnimationSettings>

</ClientSettings>

</telerik:RadImageGallery>

ImageGallery

answered on 24 Aug 2016

3 answers

276 views

dynamic step content addhandler problem

Hi,

I have set up a small testpage to show my problem: When i Click on [Generate wizardsteps] the steps are created and [Next step] is working. When I click the [Generate wizardsteps] button again the steps are re-created, but I have to hit a [Next step] button twice in order to go to a next step. What could cause this behavior?

Here is my page code:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="test2.aspx.vb" Inherits="test2" %>

<!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 runat="server"></telerik:RadScriptManager>

         <telerik:RadButton RenderMode="Lightweight" runat="server" ID="RadButton1" Text="Generate wizardsteps" OnClick="RadButton1_Click"></telerik:RadButton>

        <telerik:RadWizard DisplayNavigationButtons="false" OnWizardStepCreated="RadWizard1_WizardStepCreated" RenderMode="Lightweight" runat="server" ID="RadWizard1" Height="360px">

        </telerik:RadWizard>

    </div>
    </form>
</body>
</html>

and this is the code-behind:

Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Imports Telerik.Web.UI

Partial Public Class test2
    Inherits System.Web.UI.Page

    Protected Sub RadButton1_Click(sender As Object, e As EventArgs)

        RadWizard1.WizardSteps.Clear()

        For i As Integer = 0 To 4
            Dim [step] As New RadWizardStep()
            [step].ID = "Step " + (i + 1).ToString()
            RadWizard1.WizardSteps.Add([step])
        Next
        Dim completeStep As New RadWizardStep()
        completeStep.ID = "Complete"
        RadWizard1.WizardSteps.Add(completeStep)

        RadWizard1.ActiveStepIndex = RadWizard1.WizardSteps(0).Index

    End Sub

    Protected Sub RadWizard1_WizardStepCreated(sender As Object, e As WizardStepCreatedEventArgs)

        Dim lc As New RadButton()
        lc.Text = "Next step"
        AddHandler lc.Command, AddressOf RadButton2_Click

        e.RadWizardStep.Controls.Add(lc)

    End Sub

    Protected Sub RadButton2_Click(sender As Object, e As EventArgs)
        Dim [step] As RadWizardStep = DirectCast(DirectCast(sender, RadButton).Parent, RadWizardStep)
        RadWizard1.ActiveStepIndex = RadWizard1.WizardSteps([step].Index).Index + 1
    End Sub

End Class

I really hope you can find something.

This is an excerpt from an important project.

Thanks, Marc

Wizard

answered on 24 Aug 2016

1 answer

159 views

Unexpected disabled button behavior

Hi i used your example http://demos.telerik.com/aspnet-ajax/asyncupload/examples/persistuploadedfiles/defaultvb.aspx?show-source=true

I modified it a bit to be more simple:

TestUpload.aspx

001.<%@ Page Language="vb" CodeFile="TestUpload.aspx.vb" AutoEventWireup="true" Inherits="TestUpload" %>

002.

003.<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

004.

005.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

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

007.<head runat="server">

008. <title>Telerik ASP.NET Example</title>

009. <style type="text/css">

010. /** Customize the demo canvas */

011. #example .demo-container {

012. padding: 28px 0;

013. width: 882px;

014. height: 330px;

015. background: transparent url("Images/background.png") top left no-repeat;

016. position: relative;

017. }

018.

019. #example .demo-container h2 {

020. margin: 0 -30px 15px;

021. padding: 25px 30px 0;

022. color: #ffffff;

023. background: #4ba2d1;

024. font-size: 36px;

025. line-height: 1;

026. }

027.

028. .demo-container h2 sup {

029. font-size: 14px;

030. line-height: 1;

031. }

032.

033.

034. .demo-container .qsf-fb {

035. padding: 30px;

036. width: 327px;

037. overflow: hidden;

038. }

039.

040. .demo-container .qsf-fb ul {

041. margin: 0;

042. padding: 0;

043. list-style-type: none;

044. }

045.

046. .demo-container .qsf-fb label {

047. width: auto;

048. display: block;

049. }

050.

051. .demo-container .qsf-fb .buttons {

052. margin-top: 13px;

053. }

054.

055.

056. .demo-container .preview {

057. width: 495px;

058. height: 331px;

059. position: absolute;

060. top: 28px;

061. left: 387px;

062. }

063.

064. /* Customize uploaded file name */

065. html .RadUpload .ruUploadProgress {

066. display: inline-block;

067. max-width: 200px;

068. overflow: hidden;

069. text-overflow: ellipsis;

070. white-space: nowrap;

071. vertical-align: top;

072. }

073.

074. html div.photo-upload {

075. font-size: 12px;

076. }

077. </style>

078.</head>

079.

080.<body>

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

082. <telerik:RadScriptManager ID="RadScriptManager1" runat="server">

083. <Scripts>

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

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

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

087. </Scripts>

088. </telerik:RadScriptManager>

089. <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

090. <telerik:RadFormDecorator RenderMode="Lightweight" runat="server" DecoratedControls="Buttons, TextBox" />

091.

092. <div class="demo-container no-bg">

093. <div class="qsf-demo-canvas" id="qsfexWrapper">

094. <div class="qsf-fb">

095. <h2>Dream Holiday <sup>Contest</sup></h2>

096. <ul>

097. <li>

098. <label>Upload a photo of your dream holiday:</label>

099. <telerik:RadAsyncUpload RenderMode="Lightweight" CssClass="photo-upload" runat="server" ID="RadAsyncUpload1" OnClientFileUploaded="onClientFileUploaded" PostbackTriggers="RadButton1"

100. MaxFileInputsCount="1" AllowedFileExtensions=".jpg" Skin="Outlook" />

101. </li>

102. </ul>

103.

104. <p class="buttons">

105. <asp:Button runat="server" ID="RadButton1" Text="Submit your picture and information" OnClientClick="updatePictureAndInfo(); return false;" />

106. </p>

107. </div>

108.

109. <telerik:RadBinaryImage runat="server" ID="RadBinaryImage1" ImageUrl="images/blank.png"

110. Width="495" Height="331" ResizeMode="Fit" AlternateText="No picture available"

111. CssClass="preview"></telerik:RadBinaryImage>

112. </div>

113. <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

114. <script type="text/javascript">

115. //<![CDATA[

116. Sys.Application.add_load(function () {

117. window.upload = $(".RadAsyncUpload");

118. window.button = $("#RadButton1");

119. demo.initialize();

120. });

121.

122.

123. //]]>

124. </script>

125. </telerik:RadScriptBlock>

126. <script type="text/javascript">

127. (function () {

128. var $;

129. var upload;

130. var button;

131. var demo = window.demo = window.demo || {};

132.

133. demo.initialize = function () {

134. $ = $telerik.$;

135. button = window.button;

136. upload = window.upload;

137. };

138.

139. window.onClientFileUploaded = function (sender, args) {

140. button.removeAttr('disabled');

141. };

142.

143. window.updatePictureAndInfo = function () {

144. var uploadedRows = upload.find(".ruUploadSuccess");

145. if (uploadedRows.length > 0) {

146. alert('postback');

147. __doPostBack('RadButton1', 'RadButton1Args');

148. }

149. else {

150. alert("Please select a picture/country");

151. }

152. };

153.

154.

155. })();

156. </script>

157. </div>

158.

159. </form>

160.</body>

161.</html>

And the VB.net code

01.Imports System

02.Imports System.Drawing

03.

04.Partial Class TestUpload

05. Inherits System.Web.UI.Page

06.

07. Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load

08.

09. If (Not IsPostBack) Then

10. RadButton1.Enabled = False

11. Else

12.

13. RadButton1.Enabled = True

14. End If

15.

16. End Sub

17.

18. Protected Sub FileUploaded() Handles RadAsyncUpload1.FileUploaded

19.

20. Dim bitmapImage As Bitmap = ResizeImage(RadAsyncUpload1.UploadedFiles(0).InputStream)

21. Dim stream As System.IO.MemoryStream = New System.IO.MemoryStream()

22. bitmapImage.Save(stream, System.Drawing.Imaging.ImageFormat.Bmp)

23. RadBinaryImage1.DataValue = stream.ToArray()

24.

25. End Sub

26.

27. Protected Sub RadButton1_Click() Handles RadButton1.Click

28.

29.

30. End Sub

31.

32. Public Function ResizeImage(ByVal stream As IO.Stream) As Bitmap

33. Dim originalImage As System.Drawing.Image = Bitmap.FromStream(stream)

34.

35. Dim height As Integer = 331

36. Dim width As Integer = 495

37.

38. Dim scaledImage As New Bitmap(width, height)

39.

40. Using g As Graphics = Graphics.FromImage(scaledImage)

41. g.InterpolationMode = System.Drawing.Drawing2D.InterpolationMode.HighQualityBicubic

42. g.DrawImage(originalImage, 0, 0, width, height)

43. Return scaledImage

44. End Using

45.

46. End Function

47.

48.End Class

On line 99 of the aspx file you can see that the postbacktrigger is set to RadButton1. RadButton1 fires updatePictureAndInfo (line 143) I added a alert('postback') just before the __doPostBack() but this is never triggered.

Now in the VB file. If i were to change RadButton1.enabled = False to Radbutton1.enabled = True (line 10). Then press the button after uploading a JPG image the postback alert is fired but I get a server error:

Invalid postback or callback argument. Event validation is enabled using <pages enableEventValidation="true"

/> in configuration or <%@ Page EnableEventValidation="true" %> in a page.  For security purposes, this feature verifies that arguments to postback or callback events originate from the server control that originally rendered them.  If the data is valid and expected, use the ClientScriptManager.RegisterForEventValidation method in order to register the postback or callback data for validation.

Any help? I need the function updatePictureAndInfo() to fire even when the submit button initially would be disabled.

Thanks

AsyncUpload

answered on 24 Aug 2016

3 answers

690 views

Telerik Grid Filter Template RadCombobox with multiple selection

Hi,

How to implement multi select dropdown with checkbox filter in rad grid column with server side binding same as shown in below demo with client side binding.

http://demos.telerik.com/aspnet-ajax/examples/functionality/filtering/basic-filtering/defaultcs.aspx

Column [Contact Title] under FILTERING WITH CLIENT-SIDE BINDING

Thank you.

Grid

answered on 24 Aug 2016

3 answers

83 views

[Solved] RadGrid - canceling update due to missing value

Hello.

I have the Radgrid using a template edit form. How to cancel the on-going update, if the certain control doesn't have the appropriate value? I can reference the certain control in the template edit form and read it's new value (from within the "OnItemUpdated" event), but I don't know how to cancel the on-going update? On the update button I'am using CommandName="Update" Please advise.

Regards, E.

Grid

answered on 24 Aug 2016

1 answer

97 views

Exporting to xlsx also export GridEditCommandColumn but should not

Until recently I was exporting to Excel using ExcelML format. The GridEditCommandColumn was not exported (ExportOnlyData is set to true).
I am now exporting using XLSX format. Since then, the GridEditCommandColumn is exported along with data.
I would expect the same behaviour (no edit column).

Is it a bug ?
Is there an option to hide GridEditCommandColumn when exporting to xlsx ?

<telerik:RadButton ID="ButtonExportExcelML" runat="server" Text="Export to ExcelML" OnClick="ButtonExportExcelML_Click" />

<telerik:RadButton ID="ButtonExportXLSX" runat="server" Text="Export to XLSX" OnClick="ButtonExportXLSX_Click" />

<telerik:RadGrid ID="RadGrid1" runat="server" AutoGenerateColumns="true" ExportSettings-ExportOnlyData="true" OnNeedDataSource="RadGrid1_NeedDataSource">

<MasterTableView>

<Columns>

<telerik:GridEditCommandColumn ButtonType="ImageButton" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

RadGrid1.DataSource = new List<int> { 1,2,3,4,5,6};

}

protected void ButtonExportExcelML_Click(object sender, EventArgs e)

{

RadGrid1.ExportSettings.FileName = "TestExcelML";

RadGrid1.ExportSettings.Excel.Format = GridExcelExportFormat.ExcelML;

RadGrid1.ExportToExcel();

}

protected void ButtonExportXLSX_Click(object sender, EventArgs e)

{

RadGrid1.ExportSettings.FileName = "TestXlsx";

RadGrid1.ExportSettings.Excel.Format = GridExcelExportFormat.Xlsx;

RadGrid1.ExportToExcel();

}

Grid

answered on 24 Aug 2016

15 answers

406 views

Upload and delete buttons are disabled when using custom content provider

Hi,

I have to customise File Explorer to save and read files from a UNC path (eg.\\ComputerName\SharedFolder\Resource) that resides on a shared folder. I am saving the file definitions on database except the content which is being saved on the above path.

I am able to achieve file save functionality with simple c# code. Selecting the file from gridview is reading the file from above path and creating a preview successfully (making use of a generic handler here). However, I can't delete this file, as the delete icon is disabled.

I can make sure that user has got full permissions on this path.

Another issue is that, when the control is loaded for the first time and there is no content in it, all the control buttons i.e upload, delete etc.. are disabled.

Can you please suggest any solution to this issue?

Thanks.

FileExplorer

answered on 24 Aug 2016

13 answers

229 views

[Solved] Data not populating on expand - several tables at a level

I am using the exact example as shown here -http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/hierarchical-grid-types-and-load-modes/several-tables-at-a-level

I am using SeverOnDemand on Master and DetailTables.

Using below line in RadGrid1_DetailTableDataBind(), all the rows in the masterTable gets expanded on click of the Expand toggle button.

RadGrid1.MasterTableView.HierarchyDefaultExpanded = True
e.DetailTableView.HierarchyDefaultExpanded = True

How to make the row expand or collapse on toggle sever side?

Any help is appreciated. Thanks.

Grid

answered on 24 Aug 2016

5 answers

189 views

Appointment Description Not Displayed

G'Day,

I am using the RadScheduler (Q3 2009) within moss and all was fine until our client requsted additional information be displayed within the scheduler.

It looks like the information can be displayed by populating the Appointment.Description property with the required text should be the solution, however it does not get displayed on screen. Only the Appointment.Title is shown.

The data is bound to the RadScheduler via a custom Provider, which returns a Generic list of Appointments.

If I interrogate the data being bound to the RadScheduler during the RadScheduler_AppointmentInsert I find that the Description property holds the expected text.

Thanks

Andrew

Scheduler

answered on 24 Aug 2016

2 answers

82 views

White gaps at begin and end

Hi,

We're using your radhtmlchart to display subscriptions data by month, and this data is dynamically. Sometimes, there is a huge white gap at beginning and ending of the chart which i can't remove (see the attachment).

For the X axis, i have set the MaxDate and MinDate values with the first and last possible dates and tried to set Step config but it don't works. The MinValue and MaxValue for Y axis works as expected.

Is there something i can try to minimalize this white gaps?

Kind regards,

Jelle

Chart (HTML5)

answered on 24 Aug 2016