Questions on UI for ASP.NET AJAX Forum

2 answers

178 views

Radgrid not rebinding/refreshing on button submit

Not sure why.

protected void Button1_Click(object sender, EventArgs e)

{

try

{

Executefirst();

Button1.Enabled = false; }

catch { }

finally { Executelast(); }

}

<asp:Button ID="Button1" runat="server" CssClass="button" input="" OnClick="Button1_Click" Text="Process Files" AutoPostBack="true" type="button" />

<telerik:RadGrid ID="RadGrid1" runat="server" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"

OnItemUpdated="RadGrid1_ItemUpdated" OnPreRender="RadGrid1_PreRender" AllowAutomaticUpdates="True"

AutoGenerateColumns="False" OnBatchEditCommand="RadGrid1_BatchEditCommand" DataSourceID="SqlDataSource1" GroupPanelPosition="Top" CellSpacing="-1" GridLines="Both" Width="1200px" Height="400px" AllowPaging="True">

<MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="ID"

DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">

<BatchEditingSettings EditType="Cell" />

<CommandItemSettings ShowAddNewRecordButton="false" />

<Columns>

<telerik:GridBoundColumn DataField="ID" FilterControlAltText="Filter ID column" HeaderText="ID" SortExpression="ID" UniqueName="ID" DataType="System.Int32" ReadOnly="True" Display="False">

<ColumnValidationSettings>

<ModelErrorMessage Text="" />

</ColumnValidationSettings>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Employee_code" FilterControlAltText="Filter Employee_code column" HeaderText="Employee_code" SortExpression="Employee_code" UniqueName="Employee_code">

<ColumnValidationSettings>

<ModelErrorMessage Text="" />

</ColumnValidationSettings>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Client" FilterControlAltText="Filter Client column" HeaderText="Client" SortExpression="Client" UniqueName="Client">

<ColumnValidationSettings>

<ModelErrorMessage Text="" />

</ColumnValidationSettings>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="Matter" FilterControlAltText="Filter Matter column" HeaderText="Matter" SortExpression="Matter" UniqueName="Matter">

<ColumnValidationSettings>

<ModelErrorMessage Text="" />

</ColumnValidationSettings>

</telerik:GridBoundColumn>

<telerik:GridCheckBoxColumn DataField="invalidemployee" DataType="System.Boolean" FilterControlAltText="Filter invalidemployee column" HeaderText="Invalid Employee" SortExpression="invalidemployee?" UniqueName="invalidemployee" ReadOnly="True">

</telerik:GridCheckBoxColumn>

<telerik:GridCheckBoxColumn DataField="invalidmatter" DataType="System.Boolean" FilterControlAltText="Filter invalidmatter column" HeaderText="Invalid Client/Matter" SortExpression="invalidmatter?" UniqueName="invalidmatter" ReadOnly="True">

</telerik:GridCheckBoxColumn>

</Columns>

</MasterTableView>

<PagerStyle Mode="NextPrev" />

</telerik:RadGrid>

Grid

answered on 30 Jun 2015

3 answers

186 views

Image Editor inside of FileExplorer

Hello,
I'm trying to put Image Editor in File Explorer and I have some progress, but there is still a bugs. This code open image editor instead of default image preview.

In aspx page:

    
            <table cellspacing="4"> 
        
                <tr> 
        
                  <td rowspan="2" style="vertical-align: top;"> 
        
                    Browse to an image and click to preview. 
        
                    <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Width="500px" Height="300px" 
        
                      OnClientItemSelected="OnClientItemSelected" EnableOpenFile="true" OnClientFileOpen="LoadImageEditor" > 
        
                      <Configuration ViewPaths="~/images" UploadPaths="~/images" 
        
                        DeletePaths="~/images" MaxUploadFileSize="5242880" /> 
        
                    </telerik:RadFileExplorer> 
        
                  </td> 
        
                  <td> 
        
                    <fieldset style="width: 270px; height: 270px"> 
        
                      <telerik:dialogopener runat="server" id="DialogOpener1"></telerik:dialogopener> 
        
                      <legend>Preview</legend> 
        
                      <img id="pvwImage" src="" alt="" style="display: none; margin: 10px; width: 250px; 
        
                        height: 225px;" /> 
        
                    </fieldset> 
        
                  </td> 
        
                </tr> 
        
              </table>

    
            function OnClientItemSelected(sender, args) 
        
                    { 
        
                        var pvwImage = $get("pvwImage"); 
        
                        var imageSrc = args.get_item().get_url(); 
        
                        if (imageSrc.match(/\.(gif|jpg)$/gi)) 
        
                        { 
        
                            pvwImage.src = imageSrc; 
        
                            pvwImage.style.display = ""; 
        
                        } 
        
                        else 
        
                        { 
        
                            pvwImage.src = imageSrc; 
        
                            pvwImage.style.display = "none"; 
        
                        } 
        
                    } 
        
                    function LoadImageEditor(sender, e) 
        
                      { 
        
                        var pvwImage = $get("pvwImage"); 
        
                        if (!pvwImage.src.match(/\.(gif|jpg)$/gi)) return; 
        
                        var args = {}; 
        
                        args.imageSrc = e.get_item().get_path(); 
        
                        $find('<%= DialogOpener1.ClientID %>').open('ImageEditor', args); 
        
                        e.set_cancel(true); 
        
                      } 
        
                    function ImageEditor_Callback(sender, args) 
        
                    { 
        
                      if(typeof(args) == "undefined") return; 
        
                      $find('<%= FileExplorer1.ClientID %>').refresh(); 
        
                    }

Code behind:

    
            ImageManagerDialogParameters imageEditorParameters = new ImageManagerDialogParameters(); 
        
                    imageEditorParameters.ViewPaths = new string[] { "~/images" }; 
        
                    imageEditorParameters.UploadPaths = new string[] { "~/images" }; 
        
                    imageEditorParameters.DeletePaths = new string[] { "~/images" }; 
        
                    imageEditorParameters.MaxUploadFileSize = 5000000; 
        
                    DialogDefinition imageEditor = new DialogDefinition(typeof(ImageEditorDialog), imageEditorParameters); 
        
                    imageEditor.Width = Unit.Pixel(832); 
        
                    imageEditor.Height = Unit.Pixel(520); 
        
                    imageEditor.ClientCallbackFunction = "ImageEditor_Callback"; 
        
                    DialogOpener1.DialogDefinitions.Add("ImageEditor", imageEditor);

I hope this article to be helpful.

Best wishes,
A. Simeonov

FileExplorer

answered on 30 Jun 2015

1 answer

193 views

Detail Item Template row click event

I am using Detail Item Template for displaying some extra information on radgrid. I want to highlight the Detail Item Template row as well as its parent row while clicking on the Detail Item Template row. Is there any way to handle Detail Item Template row's click event? Any help will be highly appreciated.
Thanks in advance.

Grid

answered on 30 Jun 2015

3 answers

199 views

Thumbnails image caching problem on renaming file?

I use a FileExplorer to list images on a folder with its ExplorerMode="Thumbnails". The snapshot is as : http://i.imgur.com/cpKRY9j.png

<telerik:RadFileExplorer runat="server" ID="RadFileExplorer2"

Height="200px" Width="100%"

DisplayUpFolderItem="true"

VisibleControls="Toolbar,FileList,ContextMenus"

ExplorerMode="Thumbnails"

EnableCreateNewFolder="false"

AvailableFileListControls="All"

>

<Configuration

ViewPaths="~/File/Product/5/Image/L"

UploadPaths="~/File/Product/5/Image/L"

DeletePaths="~/File/Product/5/Image/L"

AllowMultipleSelection="true"

EnableAsyncUpload="true"

MaxUploadFileSize="20971520"

SearchPatterns="*.jpg" />

</telerik:RadFileExplorer>

I want to swap two images by renaming its name. The rename operation is succeeded but its image is wrong.
The image seems to be caching and show the old image after ranamed.

These client functions have be tested such as clearFolderCache(), refresh(), loadFolder(path) on OnClientMove() client event (see official help).
Unfortunately, it's not working.

Please kindly give some advices for this, thanks.

FileExplorer

answered on 30 Jun 2015

6 answers

694 views

RadAsyncUpload add image to button

I have a RadAsyncUpload , i just want to show an image on this button.Itried using

#AsyncUpload1 .ruButton
{
/*it is an example URL*/
background-image: url("../Images/eClose.png");
}

but no luck.

<telerik:RadAsyncUpload ID="AsyncUpload1" Width="5px" runat="server" Localization-Remove="" HideFileInput="true" Skin="Office2010Silver" OnClientFileUploaded="AsyncUpload1_OnClientFileUploaded"
MaxFileSize="10485760" OnFileUploaded="AsyncUpload1_FileUploaded" MultipleFileSelection="Disabled" OnClientValidationFailed="validationFailed"
AutoAddFileInputs="false" UploadedFilesRendering="BelowFileInput">
<Localization Select="Attach" />
</telerik:RadAsyncUpload>

Please help

AsyncUpload

answered on 30 Jun 2015

1 answer

338 views

assign value to RadDatePicker from database

I've to populate the RadDatePicker from database. From database, i am accessing the data value as string. I am having problem to set that value to RadDatePicker.

Form sample ::

<table>

<tr>

<td>Date of Birth : </td>

<td>

<telerik:RadDatePicker ID="dtp_DOB" runat="server"></telerik:RadDatePicker>

</td>

</tr>

</table>

in code behing page ::

DataTable dt = GetPersonalDetails(p_id);

if (dt != null && dt.Rows.Count > 0)

{

DataRow dr = dt.Rows[0];

string DOB_ = dr["DateOfBirth"].ToString();

dtp_DOB.SelectedDate = ????

}

How to show the date retrieved from database to RadDatePicker? Please help.

DatePicker

answered on 30 Jun 2015

2 answers

78 views

Add to dictionary not showing up for few words in firefox and chrome

Hi,

In RadEditor Add to dictionary not showing up for few words in firefox and chrome. We are using word leachate in our application.

Even in the demo page not recognized that. Please let me know how to fix that.

Please find the attached screenshot for the reported issue.

Editor

answered on 30 Jun 2015

2 answers

54 views

Chrome rotator.showNext (Left) issue

We have an issue using Chrome where the rotator show empty image on showNext with left navigation, right works fine but when clicking left again two times the empty/white space appears and it wont restart from index 0 when navigating left. please see site below,

http://www.mrplant.se/

<div style="position:relative;">

<div ID="rotatorRight" style="display:none;" onclick="navigate('Right'); return false;"></div>

<div ID="rotatorLeft" style="display:none;" onclick="navigate('Left'); return false;"></div>

<div class="rotatorContainer">

<telerik:RadRotator ID="RadRotator1" runat="server" PauseOnMouseOver="false" OnClientItemShowing="slideShowHandler" OnClientLoad="rotatorLoad" SlideShowAnimation-Type="CrossFade" SlideShowAnimation-Duration="8000" FrameDuration="4000" ScrollDuration="1200" ScrollDirection="Left" RotatorType="AutomaticAdvance" Visible="false">

<ItemTemplate>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem %>' AlternateText=""/>

</ItemTemplate>

</telerik:RadRotator>

</div>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

<script type="text/javascript">

function rotatorLoad(sender, eventArgs)

{

var count = sender.get_items().length;

var rotatorRight = document.getElementById('rotatorRight');

var rotatorLeft = document.getElementById('rotatorLeft');

if (count < 2 || count == null || count == 'undefined') {

rotatorRight.style.display = 'none';

rotatorLeft.style.display = 'none';

}

else if (count > 0)

{

rotatorRight.style.display = 'block';

rotatorLeft.style.display = 'block';

}

function navigate(navigation)

{

var rotator = $find("<%=RadRotator1.ClientID %>");

switch (navigation)

{

case "Right":

rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Right);

break;

case "Left":

rotator.showNext(Telerik.Web.UI.RotatorScrollDirection.Left);

break;

}

function slideShowHandler(sender, args)

{

var count = sender.get_items().length;

var currentIndex = args.get_item().get_index() + 1;

var rotatorRight = document.getElementById('rotatorRight');

var rotatorLeft = document.getElementById('rotatorLeft');

if (!sender.isScrollingForward())

{

if (currentIndex == 1)

{

rotatorRight.style.visibility = 'none';

}

else

{

rotatorRight.style.visibility = 'visible';

}

if (count == 1) {

rotatorLeft.style.visibility = 'none';

rotatorRight.style.visibility = 'none';

}

if (currentIndex == count)

{

rotatorLeft.style.visibility = 'none';

}

else

{

rotatorLeft.style.visibility = 'visible';

}

</script>

</telerik:RadCodeBlock>

public partial class ucImageRotator : System.Web.UI.UserControl

{

private string path;

public string Path

{

get { return path; }

set { path = value; }

}

protected void Page_Load(object sender, EventArgs e)

{

if (path != "")

{

string virtualPath = "~/images/rotators/" + path;

RadRotator1.DataSource = GetFilesInFolder(virtualPath);

RadRotator1.DataBind();

}

protected List<string> GetFilesInFolder(string path)

{

string physicalPathToFolder = Server.MapPath(path);

List<string> virtualPathsCollection = new List<string>();

if (Directory.Exists(physicalPathToFolder))

{

string[] physicalPathsCollection = System.IO.Directory.GetFiles(physicalPathToFolder);

foreach (String file in physicalPathsCollection)

{

string virtualPath = VirtualPathUtility.AppendTrailingSlash(path) + System.IO.Path.GetFileName(file);

if (System.IO.Path.GetExtension(file) == ".png")

{

System.Drawing.Image objImage = System.Drawing.Image.FromFile(file);

int width = objImage.Width;

int height = objImage.Height;

RadRotator1.Height = height;

RadRotator1.Width = width;

virtualPathsCollection.Add(virtualPath);

}

if (virtualPathsCollection.Count > 0)

{

this.Visible = true;

RadRotator1.Visible = true;

}

else

{

this.Visible = false;

RadRotator1.Visible = false;

}

return virtualPathsCollection;

}

Rotator

answered on 30 Jun 2015

1 answer

175 views

onclick event

The onclick to the code behind event handler only fires if autopostback='true' is set for the tilelist apparently, but this disables the navigateurl's on the other tiles, how do I use both in the same tilelist, I tried AutoPostBack="true" on the tile with the onclick but no joy.

<telerik:RadTileList ID="RadTileList1" runat="server" TileRows="1" Width="1000px" ScrollingMode="None" >
<Groups>
<telerik:TileGroup>
<telerik:RadImageAndTextTile runat="server" ImageHeight="100px" ImageWidth="100px" NavigateUrl="student-Program-progress.aspx" Target="_self" Text="Gradebook">
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile runat="server" ImageHeight="100px" ImageWidth="100px" NavigateUrl="/Help/MyPage.htm" Target="_blank" Text="Help" BackColor="#f8b617">
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="TextTileProfile" Name="TextTileProfile" runat="server" ImageHeight="100px" ImageWidth="100px" NavigateUrl="/MyPage-UserInfo.aspx" Target="_blank" Text="Profile" BackColor="#f37928">
</telerik:RadImageAndTextTile>
<telerik:RadImageAndTextTile ID="tileLogout" runat="server" ImageHeight="100px" ImageWidth="100px" OnClick="btnLogout_Click" Text="Logout" BackColor="#03953f" AutoPostBack="true">
</telerik:RadImageAndTextTile>
</telerik:TileGroup>
</Groups>
</telerik:RadTileList>