Questions on UI for ASP.NET AJAX Forum

2 answers

67 views

Hello,

We have a Radgrid in one of our web pages. The user can upload the documents here and they should be able to view the documents they have already uploaded. I have a image button as one of the columns in the RadGrid. Idea being, when the user clicks on that button, a RadWindow should open. I have the byte array of the document. With this, how do i open the document in a new window.
One way is to pass the byte array(which is saved in the database) to the RadWindow. How do i do this?

Appreciate the help
Thanks

Window

answered on 13 Jul 2012

0 answers

200 views

Radgrid export to pdf problem

Hi, I am pretty new to using the Telerik controls and am trying to clean up some pre-existing code. It seems pretty straightforward as I am just exporting a grid to pdf. The issue I am having is that I can load the page, not resize any columns, click the export to pdf button and my grid formats and looks fantastic. if i resize ANY of the columns though, not all my columns show up. This even happens if i resize and make my columns smaller. Help?

<telerik:RadGrid ID="grdEmployee" runat="server" AllowPaging="True"

AllowSorting="True" GroupingEnabled="False" AllowMultiRowSelection="True"

GridLines="None" AutoGenerateColumns="False" PageSize ="20"

AllowCustomPaging="True" Height="400px" CellSpacing="0"

OnPageIndexChanged="grdEmployee_PageIndexChanged"

OnPageSizeChanged="grdEmployee_PageSizeChanged"

OnItemCommand="grdEmployee_ItemCommand"

OnItemCreated="grdEmployee_ItemCreated"

OnPreRender="grdEmployee_PreRender"

OnSortCommand="grdEmployee_SortCommand"

OnExportCellFormatting="grdEmployee_ExportCellFormatting"

meta:resourcekey="grdEmployee">

<ClientSettings AllowColumnHide="True" AllowColumnsReorder="True" ReorderColumnsOnClient="true">

<Selecting AllowRowSelect="True" />

<Scrolling AllowScroll="True" EnableVirtualScrollPaging="True" UseStaticHeaders="True" />

<Resizing AllowColumnResize="True" AllowResizeToFit="True" />

</ClientSettings>

<MasterTableView AllowNaturalSort="False" DataKeyNames="EmployeeId" EnableHeaderContextMenu="False">

<NestedViewTemplate>

<asp:Panel ID="pnlEmployeeDetails" runat="server" CssClass="GridDetailPanel">

<table>

<tr>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailFirstNameText" runat="server" meta:resourceKey="lblDetailFirstNameText" />

</td>

<td class="gdpValueColumn" colspan="3">

<asp:Label ID="lblDetailFirstNameValue" runat="server" />

<asp:Label ID="lblDetailMiddleInitialValue" runat="server" />

<asp:Label ID="lblDetailLastNameValue" runat="server" />

</td>

<td rowspan="5">

</td>

</tr>

<tr>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailBirthDateText" runat="server" meta:resourceKey="lblDetailBirthDateText" />

</td>

<td class="gdpValueColumn">

<asp:Label ID="lblDetailBirthDateValue" runat="server" />

</td>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailGenderText" runat="server" meta:resourceKey="lblDetailGenderText" />

</td>

<td class="gdpValueColumn">

<asp:Label ID="lblDetailGenderValue" runat="server" />

</td>

</tr>

<tr>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailHireDateText" runat="server" meta:resourceKey="lblDetailHireDateText" />

</td>

<td class="gdpValueColumn">

<asp:Label ID="lblDetailHireDateDetailValue" runat="server" />

</td>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailTerminationDateText" runat="server" meta:resourceKey="lblDetailTerminationDateText" />

</td>

<td class="gdpValueColumn">

<asp:Label ID="lblDetailTerminationDateValue" runat="server" />

</td>

</tr>

<tr>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailSiteText" runat="server"

meta:resourceKey="lblDetailSiteText" />

</td>

<td class="gdpValueColumn">

<asp:Label ID="lblDetailSiteValue" runat="server" />

</td>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailDepartmentText" runat="server" meta:resourceKey="lblDetailDepartmentText" />

</td>

<td class="gdpValueColumn">

<asp:Label ID="lblDetailDepartmentValue" runat="server" />

</td>

</tr>

<tr>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailClassificationText" runat="server" meta:resourceKey="lblDetailClassificationText" />

</td>

<td class="gdpValueColumn">

<asp:Label ID="lblDetailClassificationValue" runat="server" />

</td>

<td class="gdpLabelColumn">

<asp:Label ID="lblDetailEmployeeGroupText" runat="server" meta:resourceKey="lblDetailEmployeeGroupText" />

</td>

<td class="gdpValueColumn">

<asp:Label ID="lblDetailEmployeeGroupValue" runat="server" />

</td>

</tr>

</table>

</asp:Panel>

</NestedViewTemplate>

<CommandItemSettings ExportToPdfText="Export to PDF" ShowAddNewRecordButton="False" ShowRefreshButton="false" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" />

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True" />

<Columns>

<telerik:GridClientSelectColumn UniqueName="Select">

<HeaderStyle HorizontalAlign="Left" Width="20px" />

</telerik:GridClientSelectColumn>

<telerik:GridImageColumn UniqueName="CombinedEmployeeStatus"

DataAlternateTextField="CombinedEmployeeStatus"

DataImageUrlFields="EnabledStatus,ActiveStatus"

DataImageUrlFormatString="~/Style/Images/Grid/Employee {0} {1}.bmp"

ImageAlign="Middle"

ImageHeight="16px" ImageWidth="16px">

<HeaderStyle Width="20px" />

</telerik:GridImageColumn>

<telerik:GridTemplateColumn UniqueName="FirstName" SortExpression="FirstName"

meta:resourceKey="grdEmployee_FirstName">

<ItemTemplate>

<asp:HyperLink ID="hlkSelect" runat="server" ForeColor="#3B3B3B"

Text='<%# DataBinder.Eval(Container, "DataItem.FirstName") %>'

meta:resourceKey="hlkSelect" />

</ItemTemplate>

<HeaderStyle Width="15%" />

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="MiddleInitial" DataField="MiddleInitial"

SortExpression="MiddleInitial" meta:resourceKey="grdEmployee_MiddleInitial">

<HeaderStyle Width="35px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LastName" DataField="LastName"

SortExpression="LastName" meta:resourceKey="grdEmployee_LastName">

<HeaderStyle Width="25%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="EmployeeNumber" DataField="EmployeeNumber"

SortExpression="EmployeeNumber" meta:resourceKey="grdEmployee_EmployeeNumber">

<HeaderStyle Width="15%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SSN" DataField="SSN"

SortExpression="SSN" meta:resourceKey="grdEmployee_SSN" />

<telerik:GridBoundColumn UniqueName="BirthDate" Display="False" DataField="BirthDate"

SortExpression="BirthDate" meta:resourceKey="grdEmployee_BirthDate" />

</Columns>

<SortExpressions>

<telerik:GridSortExpression FieldName="LastName" />

</SortExpressions>

</MasterTableView>

<PagerStyle Mode="Slider" />

<FilterMenu EnableImageSprites="False" />

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default" />

</telerik:RadGrid>

#region Grid Events

/// <summary>

/// Handles the ItemCreated event of the grdEmployee control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="Telerik.Web.UI.GridItemEventArgs"/> instance containing the event data.</param>

protected void grdEmployee_ItemCreated(object sender, GridItemEventArgs e)

{

//set the grid column properties

if ((e.Item is GridDataItem) && (_gridDataExport == false))

{

GridDataItem dataItem = e.Item as GridDataItem;

string employeeId = dataItem.GetDataKeyValue(_GRID_DATAKEY).ToString();

//Check the selected item, if any on the current page

MarkSelectedItems(dataItem, employeeId);

//Add the link to navigate to employee record

HyperLink selectLink = (HyperLink)dataItem.FindControl("hlkSelect");

selectLink.NavigateUrl = AptaFundUrl.ToEmployeeEdit() + "&EmployeeId=" + employeeId;

}

else if ((e.Item is GridDataItem) && (_gridDataExport == true) && (_gridDataPdfExport == true))//pdf export

{

//pdf export column formatting

e.Item.Style["text-align"] = "left";

}

/// <summary>

/// Handles the SortCommand event of the grdEmployee control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="Telerik.Web.UI.GridSortCommandEventArgs"/> instance containing the event data.</param>

protected void grdEmployee_SortCommand(object sender, GridSortCommandEventArgs e)

{

try

{

//cancel the current sort

e.Canceled = true;

GridSortExpression sortExpression = new GridSortExpression();

//get the new sort field name

sortExpression.FieldName = e.SortExpression;

//set the new sort order ascending/descending

sortExpression.SortOrder = e.NewSortOrder;

//store the sort expression, which can be used when they come back from another screen

StoreSortExpressionToSession(sortExpression);

//make sure only selected items are stored.(the user might have changed the selections

this.StoreGridSelectedItems(this.grdEmployee);

//bind the gird with new sort

this.DoSearch(false, sortExpression);

}

catch (Exception ex)

{

base.CatchPageErrorAndLog(ex);

}

/// <summary>

/// Handles the ItemCommand event of the grdEmployee control. Fired when the grid is expanded

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="Telerik.Web.UI.GridCommandEventArgs"/> instance containing the event data.</param>

protected void grdEmployee_ItemCommand(object sender, GridCommandEventArgs e)

{

try

{

if (e.CommandName == RadGrid.ExpandCollapseCommandName && !e.Item.Expanded)

{

//show the details of the employee

PopulateEmployeeDetailTemplate(e.Item as GridDataItem, e);

}

catch (Exception ex)

{

base.CatchPageErrorAndLog(ex);

}

/// <summary>

/// Handles the ExportCellFormatting event of the grdEmployee control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="Telerik.Web.UI.ExportCellFormattingEventArgs"/> instance containing the event data.</param>

protected void grdEmployee_ExportCellFormatting(object sender, ExportCellFormattingEventArgs e)

{

if (_gridDataExcelExport == true) //do this only for excel export

{

//header item formatting

GridHeaderItem HeaderItem = (GridHeaderItem)grdEmployee.MasterTableView.GetItems(GridItemType.Header)[0];

foreach (TableCell cell in HeaderItem.Cells)

{

cell.Style["text-align"] = "left";

}

// each column data formatting

e.Cell.Style["text-align"] = "left";

}

/// <summary>

/// Handles the PreRender event of the grdEmployee control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>

protected void grdEmployee_PreRender(object sender, EventArgs e)

{

//We are using our own select all record option

//We want to allow the user to uncheck rows after they do a select all first

//See below why we want do that

//The Telerik grid top header checkbox by default, only selects records listed on the page

//Also, the Telerik grid will check the top checkbox, if all the rows displayed in the page is checked(we may not want this, as user might have deselected some rows)

if (_gridDataExport == false) //do this only when not exporting data

{

foreach (GridHeaderItem headerItem in grdEmployee.MasterTableView.GetItems(GridItemType.Header))

{

//Find the SelectAll CheckBox in the header using the ClientSelectColumn's "UniqueName"

if (headerItem["Select"].Controls[0] != null)

{

CheckBox chkSelectAll = headerItem["Select"].Controls[0] as CheckBox;

if (chkSelectAll != null)

{

//hide it

chkSelectAll.Visible = false;

}

else if ((_gridDataExport == true) && (_gridDataPdfExport == true)) //pdf export

{

//format header columns for pdf export

foreach (GridHeaderItem headerItem in grdEmployee.MasterTableView.GetItems(GridItemType.Header))

{

headerItem["FirstName"].Style["text-align"] = "left";

headerItem["LastName"].Style["text-align"] = "left";

headerItem["MiddleInitial"].Style["text-align"] = "left";

headerItem["EmployeeNumber"].Style["text-align"] = "left";

headerItem["SSN"].Style["text-align"] = "left";

}

GridColumn column = grdEmployee.MasterTableView.GetColumn("FirstName");

column.HeaderStyle.Width = Unit.Pixel(50);

GridColumn column2 = grdEmployee.MasterTableView.GetColumn("MiddleInitial");

column2.HeaderStyle.Width = Unit.Pixel(50);

}

/// <summary>

/// Handles the PageSizeChanged event of the grdEmployee control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="Telerik.Web.UI.GridPageSizeChangedEventArgs"/> instance containing the event data.</param>

protected void grdEmployee_PageSizeChanged(object sender, GridPageSizeChangedEventArgs e)

{

try

{

if (_gridDataExport == false)

{

StoreGridSelectedItems(this.grdEmployee);

DoSearch(false);

}

catch (Exception ex) //capture any error here to show it as we use AJAX

{

base.CatchPageErrorAndLog(ex);

}

/// <summary>

/// Handles the PageIndexChanged event of the grdEmployee control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="Telerik.Web.UI.GridPageChangedEventArgs"/> instance containing the event data.</param>

protected void grdEmployee_PageIndexChanged(object sender, GridPageChangedEventArgs e)

{

try

{

StoreGridSelectedItems(this.grdEmployee);

DoSearch(false);

}

catch (Exception ex) //capture any error here to show it as we use AJAX

{

base.CatchPageErrorAndLog(ex);

}

/// <summary>

/// Handles the Click event of the btnGridExportToExcel control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>

protected void btnGridExportToExcel_Click(object sender, EventArgs e)

{

_gridDataExport = true; //set this so that other grid events can check for this and not execute it as we do not need that when exporting

_gridDataExcelExport = true;

//Following is necessary for getting all rows from database.

DoSearch(false);

grdEmployee.MasterTableView.RowIndicatorColumn.Visible = false;

//hide the select checkbox column

grdEmployee.MasterTableView.Columns.FindByUniqueName("Select").Visible = false;

grdEmployee.MasterTableView.Columns.FindByUniqueName("CombinedEmployeeStatus").Visible = false;

grdEmployee.ExportSettings.HideStructureColumns = true;

grdEmployee.ExportSettings.OpenInNewWindow = true;

grdEmployee.ExportSettings.ExportOnlyData = true;

grdEmployee.ExportSettings.IgnorePaging = true;

grdEmployee.MasterTableView.ExportToExcel();

}

/// <summary>

/// Handles the Click event of the btnGridExportToPDF control.

/// </summary>

/// <param name="sender">The source of the event.</param>

/// <param name="e">The <see cref="System.EventArgs"/> instance containing the event data.</param>

protected void btnGridExportToPDF_Click(object sender, EventArgs e)

{

_gridDataExport = true; //set this so that other gird events can check for this and not execute it as we do not need that when exporting

_gridDataPdfExport = true;

DoSearch(false);

//hide the select checkbox column

grdEmployee.MasterTableView.Columns.FindByUniqueName("Select").Visible = false;

grdEmployee.MasterTableView.Columns.FindByUniqueName("CombinedEmployeeStatus").Visible = false;

//format columns for fitting within page in portrait mode

grdEmployee.MasterTableView.Columns.FindByUniqueName("SSN").HeaderStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("SSN").ItemStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("EmployeeNumber").HeaderStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("EmployeeNumber").ItemStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("FirstName").ItemStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("FirstName").HeaderStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("LastName").HeaderStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("LastName").ItemStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("MiddleInitial").ItemStyle.Width = Unit.Pixel(100);

grdEmployee.MasterTableView.Columns.FindByUniqueName("MiddleInitial").HeaderStyle.Width = Unit.Pixel(100);

grdEmployee.ExportSettings.OpenInNewWindow = true;

grdEmployee.ExportSettings.ExportOnlyData = true;

grdEmployee.ExportSettings.IgnorePaging = true;

grdEmployee.ExportSettings.Pdf.PageLeftMargin = Unit.Pixel(0);

grdEmployee.ExportSettings.Pdf.PageRightMargin = Unit.Pixel(0);

grdEmployee.MasterTableView.ExportToPdf();

}

#endregion

Grid

asked on 13 Jul 2012

2 answers

266 views

Expand item in radGrid not work ..How use that ?

Hello, I'm having problems with the use of 'RadGrid' item to 'expand'. I used as reference the telerik demo on this link -> http://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/nestedviewtemplate/defaultcs.aspx. Everything works, however when I click to enlarge the view of an item expand nothing is displayed. I do not understand why. Here is my code

<asp:Panel ID="panelMonitoringSuiviFormation" runat="server" Visible="false" Width="100%" Height="100%" >

<div style="width:100%;height:30px"></div>

<asp:Label ID="lbl_TitreSuiviDeFormation" runat="server" Text="<%$ Resources:IRM,global_title_MonitoringUserFormation %>" Font-Size="26px" ForeColor="#454545" ></asp:Label>

<div style="margin:0 auto;text-align:center;height:100%;width:100%;">

<telerik:RadGrid ID="gridMonitoringUserFormation" CssClass="monitorUserTable" runat="server"

AutoGenerateColumns="False" AllowSorting="True" AllowMultiRowSelection="False"

AllowPaging="True" PageSize="15" GridLines="None" ShowGroupPanel="true"

OnItemCommand="RadGrid1_ItemCommand" OnPreRender="gridMonitoringUserFormation_PreRender" OnItemCreated="gridMonitoringUserFormation_ItemCreated" >

<MasterTableView runat="server" ShowHeader="true" DataKeyNames="userID" AllowMultiColumnSorting="True"

GroupLoadMode="Server">

<asp:Panel runat="server" ID="InnerContainer" CssClass="viewWrap" Visible="false">

<telerik:RadTabStrip runat="server" ID="TabStip1" MultiPageID="Multipage1" SelectedIndex="0">

<Tabs>

<telerik:RadTab runat="server" Text="Sales" PageViewID="RadPageView1">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Contact Information" PageViewID="RadPageView2">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Statistics Chart" PageViewID="RadPageView3">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage runat="server" ID="Multipage1" SelectedIndex="0" RenderSelectedPageOnly="false">

<telerik:RadPageView runat="server" ID="RadPageView1" BackColor="Black">

<asp:Label ID="Label1" Font-Bold="true" Font-Italic="true" Text='Sous-page 1'

Visible="false" runat="server" />

<telerik:RadGrid runat="server"></telerik:RadGrid>

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="PageView2" Width="460px" BackColor="Blue">

<asp:Label ID="Label2" Font-Bold="true" Font-Italic="true" Text='Sous-page 2'

Visible="false" runat="server" />

</telerik:RadPageView>

<telerik:RadPageView runat="server" ID="RadPageView3">

<asp:Label ID="Label3" Font-Bold="true" Font-Italic="true" Text='Sous-page 3'

Visible="false" runat="server" />

</telerik:RadPageView>

</telerik:RadMultiPage>

</asp:Panel>

</NestedViewTemplate>

<Columns>

<telerik:GridBoundColumn SortExpression="lastName" HeaderText="Nom de famille" HeaderButtonType="TextButton"

DataField="lastName" UniqueName="lastName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="firstName" HeaderText="Prénom" HeaderButtonType="TextButton"

DataField="firstName" UniqueName="firstName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="login" HeaderText="Identifiant" HeaderButtonType="TextButton"

DataField="login" UniqueName="login">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="creationDate" DataFormatString="{0:MM/dd/yyyy}"

HeaderText="creationDate" HeaderButtonType="TextButton" DataField="creationDate" UniqueName="creationDate">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

</asp:Panel

>

And my c# code for databinding




string idUser = myPanelBar.SelectedItem.Value;
                //Load description User on radGrid
                myDataSql.connectionString = myConnectionString;
                myDataSql.SelectCommand = "SELECT * FROM [tblUser] WHERE userID = "+idUser.ToString()+"";
                myGrid.DataSource = myDataSql;
                myGrid.MasterTableView.DataSource = myDataSql;
                myGrid.MasterTableView.DataBind();
                myGrid.DataBind();

Thans a lots if you can help me ^^

Grid

answered on 13 Jul 2012

0 answers

108 views

MSDN-Like Website!

Hello,

I'm working on translating some parts of MSDN website into Persian language,

but have some problems: when the user clicks on tree at left side of page, associated contents to that node must be shown in content place holder but i don't know how to do that.

I have typed docs in word and then saved it as .mht document which are saved in sql server as FILE STREAM so it will not be save in database itself.

the problem still remains please help me it is very important for my future because of its wonderful income!

Editor

asked on 13 Jul 2012

1 answer

59 views

Use of ".sortable()" jQuery method in dock title

Hi there,

I have a page that dynamically loads Dock Controls, themselves loading custom DockTitleTemplate:

public class DockTitleTemplate : ITemplate // creating a class, implementing the ITemplate interface

{

RadDock dock;

Stop stop;

public DockTitleTemplate(RadDock dock, Stop s)

{

this.dock = dock;

this.stop = s;

}

public void InstantiateIn(Control container)

{

var t = new StopTitle()

{

Title = string.Format("{0}{1}", stop.Name, stop.Id < 0 ? "" : " (" + stop.Id + ")"),

iconSrc = GlobalUtils.iconsUrls[stop.Type],

PoIs = stop.PoisId

};

container.Controls.Add(t);

}

My StopTitle object is a server control that basically spits out the following Html code :

<div class='sdTitle'>

<img class='transportIcon' src='bla.png' />

<span class='StopTitle'>Hello World</span>

<span>

<ul class='PoiList'>

<li id='Poi_0'><img src='blah0.png' alt='X' /></li>

<li id='Poi_1'><img src='blah1.png' alt='X' /></li>

<li id='Poi_2'><img src='blah2.png' alt='X' /></li>

<li id='Poi_3'><img src='blah3.png' alt='X' /></li>

</ul>

</span>

</div>

What I'm trying to achieve here is to be able to sort those images from this <ul> list and fire an event when sorted. I tried to call the .sortable() method from jQuery but I keep getting error messages such as "$(".PoiList") is null" or ".sortable() is not a function".

This list is dynamic as well and items are loaded from a RadComboBox with check boxes enabled. (see the pictures attached) so I must be able to call $(".PoiList").sortable("refresh"); when I add or remove an item from <ul> using the following function :

function PoiClientItemChecked(dockClientId, sender, eventArgs) {

var dock = $find(dockClientId).get_element();

if (dock != null) {

var PoiList = $(dock).find(".PoiList").first();

var item = eventArgs.get_item();

if (PoiList != null) {

if (item.get_checked()) {

PoiList.append('<li id="Poi_' + item.get_value() + '"><img src="../' + item.get_imageUrl() + '" alt="X" /></li>').fadeIn();

}

else {

PoiList.find('li#Poi_' + item.get_value()).remove();

}

Check images attached for a better understanding of my goal here ;)

Thanks for your help.

Dock

answered on 13 Jul 2012

1 answer

98 views

Is it possible to use extended radcomboboxitem for databound combobox

I have an extended radcombobox item call FeatureComboBoxItem that adds a featureID to the radcomboboxitem. I'd like to have these types of objects used instead of the normal radcombobox item when automatically databinding from a sqldatasource control. To support this I extended the radcombobox to include a string property that tells the name of the column used to populate the featureID of the FeatureComboBoxItem. I figured there was a function I could overwrite to return FeatureComboBoxItems instead of the normal radcomboboxitem but I got lost. Is it possible to use a different type of object for the item or am I stuck with using a radcomboboxitem?

Public Class FeatureBoxItem
   Inherits Telerik.Web.UI.RadComboBoxItem
   Implements IFeatureItem

   Public Property FeatureID As System.Guid Implements IFeatureItem.ID
   Get
   Return If(ViewState("FeatureID"), Guid.Empty)
   End Get
   Set(ByVal value As System.Guid)
   ViewState("FeatureID") = value
   End Set
   End Property

   'IFeatureItem implementation hidden

   End Sub
End Class

Public Class FeatureComboBox
Inherits Telerik.Web.UI.RadComboBox

'What do I do in here?
End Class

ComboBox

answered on 13 Jul 2012

10 answers

496 views

select button with not show the select files window

hi, being new to the telerik controls i am having a frustrating problem, and probably a so simple one to fix! when using the radupload control (and the standard .net upload file control) i get no issues, when trying to use the asyncupload control i cannot seem to see why the select file button does not bring the window to select the file from the users machine, i at first thought it could be something to do with the control being inside a multiview so moved the control to a simple aspx page and still the select button didnt work, any ideas would be greatly appreciated.

Edited: this is only happening with IE9, firefox and chrome are working fine.

Edited: IE9 in compatibility mode is also working, any advice on how to get this control working for IE9 would be great as the app. is close to being finished.

AsyncUpload

answered on 13 Jul 2012

1 answer

89 views

Getting Error: Sys.WebForms.PageRequestManagerServerErrorException

Hi, my Default.aspx looks like:

<telerik:RadScheduler ID="RadScheduler1" runat="server" Culture="de-DE"

DataEndField="BIS" DataKeyField="RAUMID" DataSourceID="SqlDataSource1"

DataStartField="VON" DataSubjectField="RAUMBEZEICHNUNG" Height="600px"

HoursPanelTimeFormat="HH:mm" Skin="Black" SelectedView="TimelineView">

<ResourceTypes>

<telerik:ResourceType AllowMultipleValues="True" DataSourceID="SqlDataSource2"

ForeignKeyField="RAUMID" KeyField="RAUMID" Name="Resource Type 0"

TextField="BEZEICHNUNG" />

</ResourceTypes>

<TimelineView SlotDuration="01:00:00" NumberOfSlots = "24" ColumnHeaderDateFormat="HH:mm" />

<TimelineView UserSelectable="true" GroupBy="Resource Type 0"

GroupingDirection="Vertical" />

<DayView DayStartTime = "08:00:00" DayEndTime = "00:00:00" EnableExactTimeRendering= "true" ShowHoursColumn ="true"/>

</telerik:RadScheduler>

<asp:SqlDataSource ID="SqlDataSource1" runat="server"

ConnectionString="<%$ ConnectionStrings:Book-IT-LHConnectionString %>"

SelectCommand="SELECT [RAUMBEZEICHNUNG], [RAUMID], [VON], [BIS] FROM [VIEW_RAUMBUCHUNG]" >

</asp:SqlDataSource>

<asp:SqlDataSource ID="SqlDataSource2" runat="server"

ConnectionString="<%$ ConnectionStrings:Book-IT-LHConnectionString %>"

SelectCommand="SELECT [RAUMID], [BEZEICHNUNG] FROM [VIEW_RAUM]">

</asp:SqlDataSource>

The Data is displayed correctly. But if i want to switch for example between Timeline and DayView or i want to Edit an Appointment, i get an Error:

Sys.WebForms.PageRequestManagerServerErrorException

Why is that?

If i Delete the ResourceTyp so i can Switch between the different views and i can edit the Appointment. But theres another Problem. For Example: My Appointment is from 16:00 until 17:00 at 11.07.2012 which is correcly displayed in the Dayview, but in the editMode the Date and the time ist wrong. How can i synchronize that ?

Thanks in advance

Scheduler

answered on 13 Jul 2012

2 answers

157 views

Sorting columns of a Detail Table

On RadGrid1_DetailTableDataBind event I bound my detail table to a dataset based on parent grid key value
detail table has AutoGenerateColumns="True" and so can be a different set of colums

I need, then, to reorder colums working with their OrderIndex properties

I don't know where to place this feature (reorder)
I tried this

For Each col As GridColumn In RadGrid1.MasterTableView.DetailTables(0).RenderColumns

LogManager.WriteToDebugLog("c:\log\", "col.UniqueName " & col.OrderIndex & " " & col.UniqueName)

Next

on RadGrid1_PreRender and on RadGrid1_DetailTableDataBind events with no luck, the autogenerated columns are not yet there.

Do you know what event allows me to see detail tables columns?

Thank you

Grid

answered on 13 Jul 2012

1 answer

126 views

why my menu dropdown hides behind the header of the scheduler

Please refer to the attached file.
My submaster page:

<%@ Master Language="VB" MasterPageFile="~/Site.Master" AutoEventWireup="false" CodeBehind="AvailabilityLinksSubMaster.master.vb" Inherits="MSP.AvailabilityLinksSubMaster" %>
<%@ MasterType virtualpath="~/Site.master" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="ajaxToolkit" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
    .Visible
    {
        visibility: visible
    }
    .Invisible
    {
        visibility: hidden
    }
</style>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">
    </asp:ContentPlaceHolder>
    </asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="TabContent" runat="server">

    <table style="height: 100%; width: 100%; min-height: 420px; margin-top: 0px;">
        <tr>
            <td>
    <div style="position: relative">
<ul id="nav">
<li class="top"><a href="MyAvailability.aspx" class="top_link"><span>Home</span></a></li>
<li class="top"><a href="#nogo2" id="Availability_Selections" class="top_link"><span class="down">Availability Selections</span></a>
  <ul class="sub">
   <li><a href="MyAvailability.aspx">Availability</a></li>
   <li><a href="Sched_AssocSS_Availability_edit.aspx"> -Edit</a></li>
   <li><a href="Sched_AssocSS_Availability_Extend.aspx">Open Availability</a></li>
            <li><a href="Sched_AssocSS_Availability_Extend_edit.aspx"> -Edit</a></li>
            <li><a href="#nogo33" class="fly">Management</a>
      <ul>
       <li><a href="Availability_Manager_Reset.aspx">Reset</a></li>
       <li><a href="Sched_AssocSS_Availability_Impersonation.aspx">Impersonation</a></li>
      </ul>
     </li>
  </ul>
</li>
<li class="top"><a href="#nogo22" id="Documentation" class="top_link"><span class="down">Documentation</span></a>
  <ul class="sub">
   <li><a href="#nogo23">User Guide</a></li>
   <li><a href="#nogo24">Tips</a></li>
  </ul>
</li>

    </ul>

</div>

        </td>
        </tr>
        <tr>
            <td style=" height: 100%; vertical-align: top;" rowspan="0">
                <asp:ContentPlaceHolder ID="TabContent" runat="server">
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
                        <Scripts>
                            <%--Needed for JavaScript IntelliSense in VS2010--%>
                            <%--For VS2008 replace RadScriptManager with ScriptManager--%>
                            <asp:ScriptReference Assembly="Telerik.Web.UI"
                                Name="Telerik.Web.UI.Common.Core.js" />
                            <asp:ScriptReference Assembly="Telerik.Web.UI"
                                Name="Telerik.Web.UI.Common.jQuery.js" />
                            <asp:ScriptReference Assembly="Telerik.Web.UI"
                                Name="Telerik.Web.UI.Common.jQueryInclude.js" />
                        </Scripts>
                    </telerik:RadScriptManager>

                </asp:ContentPlaceHolder>
            </td>
        </tr>
    </table>

</asp:Content>
________________________________________________

My Page:

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/AvailabilityLinksSubMaster.master" CodeBehind="MyAvailability.aspx.vb" Inherits="MSP.MyAvailability" %>
<%@ MasterType virtualpath="~/AvailabilityLinksSubMaster.master" %>
<%@ Register assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" namespace="System.Web.UI.DataVisualization.Charting" tagprefix="asp" %>
<%@ Register namespace="Telerik.Web.UI" tagprefix="UI" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
    <style type="text/css">
        div.RadScheduler .rcOtherMonth
        {


        }
        div.RadScheduler .rsAllDayHeader,
        div.RadScheduler .rsVerticalHeaderTable div
        {
        font-weight: bold;
        text-align: right;
        }

        .rsApt
        {
        width: 45%!important;

        }
        .rsAllDayRow .rsWrap
        {
         display:none !important;
        }
        div.RadToolTip table.rtWrapper td.rtWrapperContent
        {
            background-color:none !important;
            background-image: url("../Images/Menu_Bkgrd_Normal2.png") !important;
        }

        .ScreenOnly {display : none;}
    </style>

    <link href="App_Themes/Default/Scheduler.Macys.css" rel="stylesheet"
        type="text/css" />
    <link href="App_Themes/Default/Calendar.Macys.css" rel="stylesheet"
        type="text/css" />

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="TabContent" runat="server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
  <script type="text/javascript">
            function TimeRangeOnclick() {

     var scheduler = $find('<%=RadScheduler1.ClientID %>');


    var appointment = scheduler.get_appointments().findByID(59);
    scheduler.editAppointmentWithConfirmation(appointment);
};
      function hideActiveToolTip()
            {
          var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
          if (tooltip)
                {
              tooltip.hide();
          }
      }

      Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequestHandler);
      function beginRequestHandler(sender, args)
            {
          var prm = Sys.WebForms.PageRequestManager.getInstance();
          if (args.get_postBackElement().id.indexOf('RadScheduler1') != -1)
                {
              hideActiveToolTip();
          }
      }

      function OnClientRequestStart(sender, args)
            {
          args.set_cancel(true);
          var tooltip = Telerik.Web.UI.RadToolTip.getCurrent();
          if (tooltip)
                {
              var element = tooltip.get_targetControl();
              var apt = $find("<%=RadScheduler1.ClientID %>").getAppointmentFromDomElement(element);
                    <%--
              $get("startTime").innerHTML = apt.get_start().format("MM/dd/yyyy HH:mm");
              $get("endTime").innerHTML = apt.get_end().format("MM/dd/yyyy HH:mm");
                    --%>
              $get("descriptionDiv").innerHTML = "double click to edit your preference";
              tooltip.set_text($get("contentContainer").innerHTML);
          }
      }

</script>
</telerik:RadCodeBlock>


    


                    <table cellpadding="0" cellspacing="0" class="style5" cols="1" width="100%">
                        <tr>
                            <td valign="top">
  

  
  
                          <div id="Workspace" align="left" class="style6">
                                    <div id="PrintViewHeader" style="display: none;">
                                        <table border="0" cellpadding="1" cellspacing="1" cols="2" width="98%">
                                            <tbody class="SiteTextSmall">
                                                <tr>
                                                    <td align="center" class="PageHeading">
                                                        Availability</td>
                                                </tr>
                                                <tr class="ScreenOnly">
                                                    <td align="left">
                                                        <span class="SiteTextboldRed">For best results, change your printer setting to
                                                        landscape. </span>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

<table border="0" cellpadding="1" cellspacing="1" cols="1" width="98%">
                                        <tbody class="SiteTextSmall">
                                            <tr>
                                                <td colspan="1" rowspan="1">
                                                    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" Width="100%">
                                                    <telerik:RadScheduler ID="RadScheduler1" runat="server" DayEndTime="23:59:59"
                                                        RowHeight="16px" SelectedView="WeekView"
                                                        WorkDayEndTime="8.00:00:00" WorkDayStartTime="00:00:00"
                                                        AllowDelete="False"
                                                        NumberOfHoveredRows="1" SelectedDate="2012-06-10"
                                                        EnableExactTimeRendering="True" Height="460px"
                                                        EnableEmbeddedSkins="False" Skin="Macys"
                                                        onclientappointmentcontextmenu="hideActiveToolTip"
                                                        onclientappointmentdoubleclick="hideActiveToolTip"
                                                        onclientrecurrenceactiondialogshowing="hideActiveToolTip"
                                                            OverflowBehavior="Expand">
                                                        <AdvancedForm Width="60%" Modal="True" />
                                                        <ResourceTypes>
                                                        <telerik:ResourceType DataSourceID="SqlDataSource2" ForeignKeyField="USERID"
                                                        KeyField="ID" Name="Users" TextField="USERNAME" />
                                                        </ResourceTypes>
                                                        <TimelineView UserSelectable="False" />
                                                        <WeekView DayEndTime="23:59:59" ColumnHeaderDateFormat="dddd, d"
                                                            GroupingDirection="Vertical" />
                                                        <Localization AdvancedEditAppointment="Edit" AdvancedNewAppointment="New"
                                                            AllDay="Range" />
                                                        <MonthView FirstDayHeaderDateFormat="MMMM dd" ColumnHeaderDateFormat="MMMM dddd"
                                                            HeaderDateFormat="MMMM, yyyy" />
                                                    </telerik:RadScheduler>

                                                    <div align="center">
                                                        <asp:ImageButton ID="btnSubmit" runat="server"
                                                            ImageUrl="../images/b_submit_sm.gif" onclick="btnSubmit_Click" />
                                                             
                                                        <asp:ImageButton ID="btnCancel" runat="server"
                                                            ImageUrl="../images/b_cancel.gif" onclick="btnSubmit_Click" />
                                                            
                                                        </div>

                                                         <asp:SqlDataSource

                                                        ID="SqlDataSource1" runat="server"
                                                        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                                                        DeleteCommand="DELETE FROM "AVAILABILITY_TEST" WHERE "ID" = :ID"
                                                        InsertCommand="INSERT INTO "AVAILABILITY_TEST" ("ID", "SUBJECT", "START_TIME", "END_TIME", "USERID", "RECURRENCERULE", "RECURRENCEPARENTID") VALUES (:ID, :SUBJECT, :START_TIME, :END_TIME, :USERID, :RECURRENCERULE, :RECURRENCEPARENTID)"
                                                        ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"
                                                        SelectCommand="SELECT * FROM "AVAILABILITY_TEST""
                                                        UpdateCommand="UPDATE "AVAILABILITY_TEST" SET "SUBJECT" = :SUBJECT, "START_TIME" = :START_TIME, "END_TIME" = :END_TIME, "USERID" = :USERID, "RECURRENCERULE" = :RECURRENCERULE, "RECURRENCEPARENTID" = :RECURRENCEPARENTID WHERE "ID" = :ID">
                                                        <DeleteParameters>
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                        </DeleteParameters>
                                                        <InsertParameters>
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                            <asp:Parameter Name="SUBJECT" Type="String" />
                                                            <asp:Parameter Name="START_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="END_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="USERID" Type="Decimal" />
                                                            <asp:Parameter Name="RECURRENCERULE" Type="String" />
                                                            <asp:Parameter Name="RECURRENCEPARENTID" Type="Decimal" />
                                                        </InsertParameters>
                                                        <UpdateParameters>
                                                            <asp:Parameter Name="SUBJECT" Type="String" />
                                                            <asp:Parameter Name="START_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="END_TIME" Type="DateTime" />
                                                            <asp:Parameter Name="USERID" Type="Decimal" />
                                                            <asp:Parameter Name="RECURRENCERULE" Type="String" />
                                                            <asp:Parameter Name="RECURRENCEPARENTID" Type="Decimal" />
                                                            <asp:Parameter Name="ID" Type="Decimal" />
                                                        </UpdateParameters>
                                                    </asp:SqlDataSource><asp:SqlDataSource
                                                        ID="SqlDataSource2" runat="server"
                                                        ConnectionString="<%$ ConnectionStrings:ConnectionString %>"
                                                        ProviderName="<%$ ConnectionStrings:ConnectionString.ProviderName %>"
                                                        SelectCommand="SELECT "ID", "USERNAME" FROM "AVAILABILITY_TEST_USERS"">
                                                    </asp:SqlDataSource>


                                                    <telerik:RadToolTipManager runat="server" ID="RadToolTipManager1" Width="130"
                                                            Height="40" Skin = ""
                                                            OnAjaxUpdate="RadToolTipManager1_AjaxUpdate" />
                                                    <div style="display: none;">
                                                        <div id="contentContainer">
                                                        <%--
                                                            Starts on: <span id="startTime"></span>
                                                            <br />
                                                            Ends on: <span id="endTime"></span>
                                                            <hr />

                                                            Description:
                                                        --%>
                                                            <div id="descriptionDiv">
                                                            </div>
                                                        </div>
                                                    </div>
                                                    </telerik:RadAjaxPanel>
                                                  </td>
                                            </tr>

                                        </tbody>
                                    </table>

    

                                </div>
                            </td>
                        </tr>
                    </table>
  

</asp:Content>

Scheduler

answered on 13 Jul 2012