Questions on UI for ASP.NET AJAX Forum

4 answers

867 views

Cannot Remove Visual Studio Project Dependency on Telerik

I was exploring Telerik AppBuilder in a work solution to show my client. They were debating on a deployment manager and ended up going with SOTI. I then tried to remove the Telerik dependency from the solution and am absolutely unable to do so.

The project was created with cordova & ionic command lines and then AppBuilder was added from within visual studio. My client doesn't have Telerik and doesn't want Telerik. How do I remove the dependency to it. I can't even add JavaScript classes on right-click - they become "Telerik JavaScript" files.

This is ridiculous - you have to allow people to NOT choose you, otherwise you become responsible for corrupting their codebase. Not only that, but this reflects badly on my reputation when it looks like I've damaged their repository.

Installer and VS Extensions

answered on 02 Mar 2016

6 answers

382 views

Hash table values Incorrect on in BatchEdit Mode

I currently have a Grid with two rad comboboxes that are being displayed in the grid using tooltips and being handled by the batchManagerExtentions.js library. The first combobox selection populates the second combobox and once that selection is made that is the value I need to be stored inside of the Database. Once the selections have been made and the save all changes button has been clicked on the BatchEditCommand function where I am creating the newValues Hashtables the values are all thrown off, but they are being populated inside of the List<> correctly with the correct name / value / relation. I've attached screenshots, JS code, markup and code behind. Any help would be great!

Markup:

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGridUser">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGridUser" />

<telerik:AjaxUpdatedControl ControlID="RadGridWorkArea" LoadingPanelID="RadAjaxLoadingPanel1" />

<telerik:AjaxUpdatedControl ControlID="RelatedComboBoxesToolTip" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadGridWorkArea">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RelatedComboBoxesToolTip" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadToolTip runat="server" ID="RelatedComboBoxesToolTip" OffsetY="0" RenderInPageRoot="false"

HideEvent="FromCode" AutoCloseDelay="0" RelativeTo="Element" CssClass="RelatedCombosToolTip"

ShowEvent="FromCode" Position="Center" Skin="Default">

<telerik:RadComboBox runat="server" Width="100%" EnableLoadOnDemand="true" OnItemsRequested="RadComboBox1_ItemsRequested">

</telerik:RadComboBox>

<telerik:RadToolTip runat="server" Skin="Metro" OffsetY="0" EnableShadow="false" ShowEvent="FromCode" Position="TopCenter"></telerik:RadToolTip>

</telerik:RadToolTip>

<telerik:RadGrid ID="RadGridWorkArea" runat="server" DataSourceID="WorkAreaDataSource" Width="1000px" OnItemCommand="RadGridWorkArea_ItemCommand"

AutoGenerateDeleteColumn="true" OnItemDataBound="RadGridWorkArea_ItemDataBound" ShowFooter="true" AllowAutomaticUpdates="false" OnBatchEditCommand="RadGridWorkArea_BatchEditCommand">

<MasterTableView EditMode="Batch" CommandItemDisplay="Top" AutoGenerateColumns="false" DataKeyNames="bpSystemUserAssignID">

<ItemStyle Height="40px" />

<AlternatingItemStyle Height="40px" />

<Columns>

<telerik:GridBoundColumn DataField="bpSystemUserAssignID" UniqueName="bpSystemUserAssignID" ReadOnly="true" HeaderText="ID" Visible="false"></telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="bpSystemID" UniqueName="bpSystemID" HeaderText="System" HeaderStyle-Width="250px">

<ItemTemplate>

<%# Eval("bpSystemName") %>

</ItemTemplate>

<EditItemTemplate></EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="bpSubSystemID" UniqueName="bpSubSystemID" HeaderText="Sub-System" HeaderStyle-Width="250px">

<ItemTemplate>

<%# Eval("bpSubSystemName")%>

</ItemTemplate>

<EditItemTemplate></EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn UniqueName="Template1" HeaderStyle-Width="60px" HeaderText="Work Area Percentage">

<ItemTemplate>

<asp:Label ID="percentLbl" runat="server" Text='<%# Eval("bpWorkPercentage") %>'></asp:Label>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadNumericTextBox ID="TextBox1" runat="server" DbValue='<%# Eval("bpWorkPercentage") %>' Type="Percent" NumberFormat-DecimalDigits="0">

<ClientEvents OnBlur="Blur" OnFocus="Focus" />

</telerik:RadNumericTextBox>

</EditItemTemplate>

<FooterTemplate>

<telerik:RadNumericTextBox ID="TextBox2" runat="server" Type="Percent" NumberFormat-DecimalDigits="0">

<ClientEvents OnLoad="Load" />

</telerik:RadNumericTextBox>

</FooterTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<ClientEvents OnUserAction="userAction" OnGridCreated="gridCreated" />

</ClientSettings>

</telerik:RadGrid>

Code-Behind

protected void RadGridWorkArea_BatchEditCommand(object sender, GridBatchEditingEventArgs e)

{

List<DemoItem> subsystemIDs = (List<DemoItem>)Session["subsystems"];

foreach (GridBatchEditingCommand command in e.Commands)

{

if (command.Type == GridBatchEditingCommandType.Update)

{

Hashtable newValues = command.NewValues;

Hashtable oldValues = command.OldValues;

string id = newValues["bpSubSystemID"].ToString();

}

JS

var grid1Validator;

function gridCreated(sender, args) {

// == Batch Editing - Related ComboBoxes Manager ==

var relatedComboBoxesManager = new BatchExtensions.RelatedComboBoxesManager().init({

grid: sender,

toolTipID: "<%=RelatedComboBoxesToolTip.ClientID%>",

relations: [

{

columnName: "bpSystemID"

},

{

columnName: "bpSubSystemID",

relatedTo: "bpSystemID"

}

]

});

// == Batch Editing - Validation Manager ==

grid1Validator = new BatchExtensions.ValidationManager().init({

grid: sender,

validators: [

{

columnName: "bpSystemID",

errorMessage: "- Required -"

},

{

columnName: "bpSubSystemID",

errorMessage: "- Required -"

},

{

columnName: "Template1",

errorMessage: "",

toolTipMessage: "Select a positive number",

validationFunction: function (value) {

return value >= 0;

}

},

]

});

}

function userAction(sender, args) {

//You can use this event to alert the user that there are changes in the grid and

//cancel operations like paging, filtering, etc.

//debugger;

if (!grid1Validator.isValid()) {

args.set_cancel(true);

}

function PopUpShowing(sender, eventArgs) {

popUp = eventArgs.get_popUp();

var gridWidth = sender.get_element().offsetWidth;

var gridHeight = sender.get_element().offsetHeight;

var popUpWidth = popUp.style.width.substr(0, popUp.style.width.indexOf("px"));

var popUpHeight = popUp.style.height.substr(0, popUp.style.height.indexOf("px"));

popUp.style.left = ((gridWidth - popUpWidth) / 2 + sender.get_element().offsetLeft).toString() + "px";

popUp.style.top = ((gridHeight - popUpHeight) / 2 + sender.get_element().offsetTop).toString() + "px";

}

function RowDblClick(sender, eventArgs) {

sender.get_masterTableView().editItem(eventArgs.get_itemIndexHierarchical());

}

Thanks,

Ramey

Grid

answered on 02 Mar 2016

3 answers

387 views

I want to change folders in treeview icon or color?

Hi,

How to get to underlying css of folder icon in treeview?

This answer presented here doesn't help much:

http://www.telerik.com/forums/icon-override

The idea is to have different icon for differnt root folders.

thanks

FileExplorer

answered on 02 Mar 2016

1 answer

129 views

Telerik rad window issue

Hi

I have main page and I am using rad window in it like below.

Main Page

<telerik:RadWindowManager RegisterWithScriptManager="true" ID="wmgWindowManager" ReloadOnShow="true" runat="server"
Behavior="Move" ShowContentDuringLoad="false" DestroyOnClose="true">
<windows>
<telerik:RadWindow ID="wndAssignPerformer" RegisterWithScriptManager="true" ShowContentDuringLoad="false" runat="server" OnClientClose="RefreshPerformer" />
</windows>
<confirmtemplate>
<uc:Confirm ID="confirmValidation" runat="server"></uc:Confirm>
</confirmtemplate>
</telerik:RadWindowManager>

Inside above rad window I am opening another page "Sub_Page.aspx". Inside "Sub_Page" I am using pop up extender like below.

<telerik:radpopupextender id="extPopup" runat="server" OnOkSelected="extPopup_OkSelected" >
<telerik:RadPopupControl UniqueId="ReassignPerformer" WindowManagerId="wmgWindowManager" Disabled="true" ControlId="btnSave"
MessageType="Confirm" Height="120" Width="450" PostBackOnOk="true" PostBackOnCancel="false"
StartupScript="true" TitleKey="CONFIRMATION" MessageKey="REASSIGNPERFORMER" />
<afs:RadPopupControl UniqueId="ReassignClaimOwner" WindowManagerId="wmgWindowManager" Disabled="true" ControlId="btnSave"
MessageType="Confirm" Height="120" Width="450" PostBackOnOk="true" PostBackOnCancel="false"
StartupScript="true" TitleKey="CONFIRMATION" MessageKey="REASSIGNCLAIMOWNER" />
</telerik:radpopupextender>

<telerik:radwindowmanager id="wmgWindowManager" runat="server">
<Windows>
<telerik:RadWindow ID="wndAssignPerformer" runat="server" />
</Windows>
<ConfirmTemplate>
<uc:Confirm ID="confirmValidation" runat="server"></uc:Confirm>
</ConfirmTemplate>
</telerik:radwindowmanager>

on OnOkSelected event of pop up extender I am calling "extPopup_OkSelected" function of code behind file like below.

private void extPopup_OkSelected(System.Object sender, System.EventArgs e)
{

//do some server coding
System.Web.UI.ScriptManager.RegisterStartupScript(this, this.GetType(),
"Javascript", "function closeWindowOnSave(){var oWnd = $find(\"<%= wndAssignPerformer.ClientID%>\"); if(oWnd !=null){oWnd.close()} else {window.parent.close();} ;} closeWindowOnSave();", true);
}
}

My issue is that when I click on OK button my modal pop up get spinning. I want that when I click on Ok, after server processing complete my modal pop up

should close. But my javascript is not getting called from page behind

When I am opening "Sub_Page" directly from browser javascript is getting executed but when it opens inside rad window it is not.

Can you please help on this?

Window

answered on 02 Mar 2016

1 answer

85 views

Telerik hide PivotGridCalculatedItem programmatically

Hi ,

I want to hide PivotGridCalculatedItem column programmatically on checkbox change event,is there any provision to do so.

Thanks,

Sagar Jaunjalkar

PivotGrid

answered on 02 Mar 2016

1 answer

191 views

Error with 2 Charts on same page

I have a page with 2 html chart controls on it. When I set the datasource of both charts to an empty list of objects I get this error when the charts are rendered:

TypeError: this._chartObject is undefined
b.RadHtmlChart.prototype._setSeriesPropertyAsSeriesDefaults()
ScriptResource.axd:127
b.RadHtmlChart.prototype._loadData()
ScriptResource.axd:122
b.RadHtmlChart.prototype.createChart()
ScriptResource.axd:50
b.RadHtmlChart.prototype.initialize()
ScriptResource.axd:31
Sys.Component.prototype.endUpdate()
ScriptResource.axd:5
Sys.Component.create()
ScriptResource.axd:5
<anonymous>
dashboard.aspx:970
Sys.EventHandlerList.prototype.getHandler/<()
ScriptResource.axd:5
Sys._Application.prototype._raiseInit()
ScriptResource.axd:5
Sys._Application.prototype.initialize()
ScriptResource.axd:5
b()
ScriptResource.axd:5
Sys._Application.prototype._domReady/a()
ScriptResource.axd:5
ScriptResource.axd:127:59

I am using the latest version (2016.1.225.45) and I also saw the error in version (2016.1.113.45)

Chart (HTML5)

answered on 02 Mar 2016

2 answers

364 views

[Solved] Validate Phone Number for Telerik RadAutoCompleteBox Not Working in C#

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>

<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<div>
<div>
<h2>Token mode</h2>

<telerik:RadAutoCompleteBox RenderMode="Lightweight" runat="server" ID="RadAutoCompleteBox2"
DataSourceID="SqlDataSource1" DataTextField="PhoneNumber" InputType="Token" Width="350" DropDownWidth="150px" Skin="Default" OnClientEntryAdded="onEntryAdded" OnClientEntryAdding="OnClientEntryAddingHandler">
</telerik:RadAutoCompleteBox>
</div>

<telerik:RadWindowManager runat="server" id="RadWindowManager1"></telerik:RadWindowManager>
</div>

<telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
<script type="text/javascript">
function onEntryAdded(sender, eventArgs) /*Validate PhoneNumber On OnClientEntryAdded Event of Telerik RadAutoCompleteBox*/
{
var autoCompleteBox = $find("<%= RadAutoCompleteBox2.ClientID %>");
var getphonenumber = eventArgs.get_entry().get_text();
var keycode = eventArgs.get_entry().get_keyCode();
if (!(keycode >= 48 && keycode <= 57) || (keycode >= 96 && keycode <= 105))
{
eventArgs.set_cancel(true);
alert("Only Phone Numbers are Allowed");
}
}
function OnClientEntryAddingHandler(sender, eventArgs) /*Check Max 10 PhoneNumbers On OnClientEntryAddingHandler of Telerik RadAutoCompleteBox*/
{
if (sender.get_entries().get_count() > 10)
{
eventArgs.set_cancel(true);
alert("Maximum 10 Phone Numbers are Allowed");
}
}
</script>
</telerik:RadScriptBlock>

<asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:sampleConnectionString %>" SelectCommand="SELECT [PhoneNumber] FROM [tbl_PhNo]"></asp:SqlDataSource>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
<telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox2" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />
</form>

</body>
</html>

I'm currently working with telerik AutoCompleteTextBox ASP.NET Ajax, and i want to create client side validation in PhoneNumber for my page.I Referred TUTORIAL How is it Possible??

AutoCompleteBox

answered on 02 Mar 2016

3 answers

468 views

Refresh RadHtmlChart with Javascript and show loading spinner

In case of RadGrid I can do this:

var RadGrid = $find('<%=RadGrid.ClientID %>').get_masterTableView();

RadGrid.fireCommand("Update", 0);

This refreshs my RadGrid and is showing the ajaxLoadingPanel with the spinner.

I try to do the same for RadHtmlChart like this:

var radHtmlChartObject = $find("<%=VersionsChart.ClientID %>");

radHtmlChartObject.repaint();

//or

radHtmlChartObject.loadData();

It refreshes/repaints the chart but I cannot see the loading animation. The RadAjaxManager is configured the same way for both controls, here for the RadHtmlChart:

<telerik:AjaxSetting AjaxControlID="VersionsChart">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="VersionsChart" LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

How can I make the spinner appear also in case of the RadHtmlChart?

Ajax

answered on 01 Mar 2016

1 answer

240 views

Disable autogenerated styles

Hi all,

I need the radbutton control not to autogenerate styles. I'd like to style the control with my css style sheet.

To put it simple, if I check the generated HTML for the control, I find something like:

class="RadButton RadButton_Default rbSkinnedButton myCssClass"

I don't want the first 3 class, but only my own class, myCssClass

Is there anyway to work it around?

Thank you

Button

answered on 01 Mar 2016

1 answer

111 views

RadGrid resizetoFit doesn't honor the grouped by sub headers

resizeToFit(false, true) works perfectly when the grid doesn't have group by. When the group by is applied to the grid, the resizeToFit(false, true) doesn't honor the group by sub headers. The data seems to be overflowing in the grouped by header as shown in the screenshot.

How can I achieve the autofit all the contents in the grid including the grouped by sub headers?

Grid

answered on 01 Mar 2016