Questions on UI for ASP.NET AJAX Forum

0 answers

92 views

I have a radgrid which holds a table to be modified by the user.

The columns are ID (hidden as its the identity in the table), Name, Phone number, Address etc.

When I click the btnAdd button, i get the popup and it shows ID, Name and Phone number, Address etc.

All good, but I want to hide the ID, so the user cannot insert a value.

For the grid itself I use

Private Sub dgGrid_ColumnCreated(sender As Object, e As GridColumnCreatedEventArgs) Handles dgGrid.ColumnCreated
If e.Column.UniqueName <> "Actions" AndAlso e.Column.UniqueName <> "EditColumn" Then
If e.Column.UniqueName = "ID" Then
e.Column.Display = False
Exit Sub
End If

...

Grid

asked on 06 Jun 2017

6 answers

845 views

how to show tooltip (html) onMouseOver

I have reviewed this demo but it seems to call to code behind and I am using a webservice and doing the tooltip client side.
http://demos.telerik.com/aspnet-ajax/tooltip/examples/overview/defaultvb.aspx?show-source=true

I currently have it working as a click on the event.
how can I do it as a Mouse Over?

function OnClientAppointmentClick(sender, args) {

var apt = args.get_appointment();

showTooltip(apt);

}

function showTooltip(apt) {

var tooltip = $find('<%=RadToolTip1.ClientID %>');

tooltip.set_targetControl(apt.get_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("TitleDiv").innerHTML = apt.get_subject();

$get("descriptionDiv").innerHTML = decodeEntities(apt.get_description());

tooltip.set_text($get("contentContainer").innerHTML);

setTimeout(function () {

tooltip.show();

}, 20);

}

function decodeEntities(encodedString) {

var textArea = document.createElement('textarea');

textArea.innerHTML = encodedString;

return textArea.value;

}

<telerik:RadScheduler RenderMode="Lightweight" runat="server" ID="RadScheduler1" SelectedView="MonthView"

StartEditingInAdvancedForm="true" OnClientTimeSlotClick="OnClientTimeSlotClick"

OnClientAppointmentsPopulating="OnClientAppointmentsPopulating" OnClientTimeSlotContextMenu="OnClientTimeSlotContextMenu"

OnClientAppointmentWebServiceInserting="OnClientAppointmentWebServiceInserting"

EnableDescriptionField="true" AppointmentStyleMode="Default"

OnClientAppointmentDoubleClick="hideTooltip" OnClientAppointmentContextMenu="hideTooltip"

OnClientAppointmentClick="OnClientAppointmentClick"

OnClientDataBound="onSchedulerDataBound" ShowAllDayRow="False" OverflowBehavior="Expand" Height="100%">

<telerik:RadToolTip ID="RadToolTip1" runat="server" RelativeTo="Element" Position="BottomCenter"

AutoCloseDelay="0" ShowEvent="FromCode" Width="250px" >

<div id="contentContainer">

Starts on: <span id="startTime"></span>

<br />

Ends on: <span id="endTime"></span>

<br />

<div id="TitleDiv"></div>

<hr />

<div id="descriptionDiv"></div>

</div>

</telerik:RadToolTip>

Scheduler

answered on 06 Jun 2017

4 answers

473 views

RadGrid with multiple edit Buttons

hello

i have the following problem. i have a radgrid which is totally created at runtime and i need to add two ways of editing

i mean, i added a GridEditCommandColumn and then, because only one GridEditCommandColumn can be added to radgrid, i created a GridButtonColumn

here is the code:

GridEditCommandColumn eCol = new GridEditCommandColumn();

eCol.HeaderStyle.Width = Unit.Pixel(30);

eCol.UniqueName = "EditCommandColumn";

eCol.ItemStyle.CssClass = "edit_btn";

eCol.UpdateText = "Save changes";

grid.MasterTableView.Columns.Add(eCol);

GridButtonColumn cCol = new GridButtonColumn();

cCol.ButtonType = GridButtonColumnType.LinkButton;

cCol.UniqueName = "CorrectColumn";

cCol.ItemStyle.CssClass = "edit_btn";

cCol.CommandName = "Edit";

cCol.Text = "Correct";

grid.MasterTableView.Columns.Add(cCol);

the problem rises when in the radGrid_ItemCommand event i need to execute two different operations due to which button has been clicked

here is the pseudocode:

if (e.CommandName == "Edit")

{

//get button name or id

}

if (e.CommandName == "Update")

{

if (button_name=='Edit') do exec 1

else if (button_name=='Correct') do exec 2

}

how can i solve ?

thanks in advance

Grid

answered on 06 Jun 2017

0 answers

155 views

scrolling RadMenu farther

Hello!
I have horisontal scrolling bar, in aspx file it looks like:

<telerik:RadMenu ID="ActionListMenu" SkinID="Menu" OnItemDataBound="OnActionButtonDataBound"
Width="100%" Flow="Horizontal" runat="server" DefaultGroupSettings-Flow="Horizontal" DefaultGroupSettings-RepeatColumns="1" CssClass="ActionsBar">
</telerik:RadMenu>

and in website it's:

<div class="rmScrollWrap rmRootGroup rmHorizontal" style="overflow-x: hidden; overflow-y: hidden; width: 100%; overflow: visible;">
  <ul class="rmRootScrollGroup" style="position: relative; width: 519px; display: block; left: -35px;">
<li class="rmItem " ... />
...
<li class="rmItem " ... />
</ul>
  <a class="rmLeftArrow" style="z-index: 2000; top: 0px; left: -1px;" href="#" jQuery191013909904974899967="13">
  <a class="rmRightArrow" style="z-index: 2000; top: 0px; right: -1px;" href="#" jQuery191013909904974899967="11">
</div>

Now I'm trying to make it scroll farther (more than one "rmItem").
To do so I tried to add events to "rmLeftArrow" and "rmRightArrow" that would change "rmRootScrollGroup" "left" css property, but after all it comming back to the place it shuld be without my stript.
I think that after clicking on arrow Telerik's script sets expected value of "rmRootScrollGroup" "left" css property to some variable, and after moving it by any way (mouse scrolling, clicking/mouseovering arrows) it will start from the point it shuld be.

Example:
After clicking on the right arrow, position of rmRootScrollGroup shuld change from 0px to -25px.
I add another -200px (by attatching click event on arrow, something like .style.left = (.style.left - 200) + 'px' ))
so now rmRootScrollGroup has property left: -225px. And it really appears on -225px.
The problem is, that after mouseovering on arrow it will return to -25px :(

Is there any way to make it moving further?

Menu

asked on 06 Jun 2017

0 answers

137 views

Grid Header Display incorrectly with Frozen Header

I try to use FrozenColumn for Grid after Read Demo. But when I apply FrozenColumn & UseStaticHeader, Column will always display only with match width of grid (Other column will lost) and When Scroll, only data will scroll while header still the same (that doesn't match with data column). Freeze column doesn't work too.

I have attached picture of My Grid (I using Simple Databinding) , "Initial" is when data loaded and "Scrolled" is when I scrolled Horizontal.

Below is my code

<telerik:RadGrid ID="RadGridBudgetDataEntry" runat="server" AutoGenerateColumns="False"

CellSpacing="-1" GridLines="Both" AllowSorting="True"

AllowPaging="True" PageSize="20" Width="800px" Height="500px"

OnItemDataBound="RadGridBudgetDataEntry_ItemDataBound">

<ClientSettings>

<Scrolling AllowScroll="True" SaveScrollPosition="true" UseStaticHeaders="true"

FrozenColumnsCount="1" >

</Scrolling>

</ClientSettings>

<MasterTableView TableLayout="Fixed">

<Columns>

<telerik:GridTemplateColumn DataField="AccountCode" FilterControlAltText="Filter TemplateColumn column" HeaderText="Code" ReadOnly="True" UniqueName="AccountCode" HeaderStyle-Width="200px">

<ItemTemplate>

<telerik:RadLabel ID="RadLabelAccountCode2" runat="server" Text='<%# Eval("AccountCode") %>'>

</telerik:RadLabel>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="AccountName" FilterControlAltText="Filter TemplateColumn1 column" HeaderText="Full Description" UniqueName="AccountName" HeaderStyle-Width="200px">

<ItemTemplate>

<telerik:RadLabel ID="RadLabelAccountName" runat="server" Text='<%# Eval("AccountName") %>'>

</telerik:RadLabel>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"/>

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Jan_Amt" FilterControlAltText="Filter TemplateColumn1 column" HeaderText="Jan" UniqueName="Jan_Amt" HeaderStyle-Width="200px">

<ItemTemplate>

<telerik:RadLabel ID="RadLabelJan_Amt" runat="server" Text='<%# Eval("Jan_Amt") %>'>

</telerik:RadLabel>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Feb_Amt" FilterControlAltText="Filter TemplateColumn1 column" HeaderText="Feb" UniqueName="Feb_Amt" HeaderStyle-Width="200px">

<ItemTemplate>

<telerik:RadLabel ID="RadLabelFeb_Amt" runat="server" Text='<%# Eval("Feb_Amt") %>'>

</telerik:RadLabel>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Mar_Amt" FilterControlAltText="Filter TemplateColumn1 column" HeaderText="Mar" UniqueName="Mar_Amt" HeaderStyle-Width="200px">

<ItemTemplate>

<telerik:RadLabel ID="RadLabelMar_Amt" runat="server" Text='<%# Eval("Mar_Amt") %>'>

</telerik:RadLabel>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"/>

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="Apr_Amt" FilterControlAltText="Filter TemplateColumn1 column" HeaderText="Apr" UniqueName="Apr_Amt" HeaderStyle-Width="200px">

<ItemTemplate>

<telerik:RadLabel ID="RadLabelApr_Amt" runat="server" Text='<%# Eval("Apr_Amt") %>'>

</telerik:RadLabel>

</ItemTemplate>

<HeaderStyle HorizontalAlign="Center"/>

<ItemStyle HorizontalAlign="Left" />

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

<PagerStyle PageSizeControlType="RadDropDownList" Mode="NextPrevAndNumeric"></PagerStyle>

</telerik:RadGrid>

Grid

asked on 06 Jun 2017

3 answers

333 views

Radgrid row added on page refresh

I have a radgrid on my .aspx page.

When I click the plus on the radgrid and insert a new row, the row inserts without any problems. However... if I then refresh the page by pressing F5, another row is added that matches the last. I can keep pressing F5 and it keeps adding that same row with the information I entered.

If I edit a row in the radgrid and then press F5, it won't add a new row... it will simply perform a postback as expected. The same is true if I delete a row. It's as if editing or deleting a row clears something out so that it stops inserting.

Any idea what's going on?

Grid

answered on 06 Jun 2017

1 answer

451 views

Filter Template with RadComboBox

I've been trying to get the Filter Template on the grid to work with a RadComboBox, but have not been successful. I'm binding to a dataset which is a little different than the example at Filter Template Example. The dropdown seems to load correctly the first time, but then when I make a selection it fails. I'm guessing it's in the client code because it never gets back to the .

I'm getting the error:

Selection out of range
Parameter name: value

Below is my code:

<telerik:RadGrid

ID="rgAudits"

runat="server"

OnPreRender="rgAudits_PreRender"

AllowPaging="True"

AllowSorting="True"

AutoGenerateColumns="False"

CellSpacing="0"

ClientSettings-AllowColumnsReorder="false" ClientSettings-Resizing-AllowColumnResize="false" ClientSettings-Scrolling-UseStaticHeaders="true"

EnableLinqExpressions="False"

ExportSettings-ExportOnlyData="false" ExportSettings-IgnorePaging="true" ExportSettings-OpenInNewWindow="true"

ExportSettings-HideStructureColumns="true" ExportSettings-FileName="Audit"

GridLines="None"

GroupingSettings-CaseSensitive="false" MasterTableView-AllowMultiColumnSorting="false" MasterTableView-AllowNaturalSort="false"

AllowFilteringByColumn="true" MasterTableView-CommandItemDisplay="Top"

MasterTableView-CommandItemSettings-ShowAddNewRecordButton="false"

MasterTableView-CommandItemSettings-ShowRefreshButton="false"

MasterTableView-CommandItemSettings-ShowExportToCsvButton="false"

MasterTableView-CommandItemSettings-ShowExportToExcelButton="true" ExportSettings-Excel-Format="Xlsx"

MasterTableView-CommandItemSettings-ShowExportToPdfButton="true" ExportSettings-Pdf-AllowCopy="true" ExportSettings-Pdf-AllowPrinting="true"

ExportSettings-Pdf-AllowModify="true"

MasterTableView-CommandItemSettings-ShowExportToWordButton="true" ExportSettings-Word-Format="Docx"

MasterTableView-PagerStyle-PagerTextFormat="{4} Page {0} of {1}, rows {2} to {3} of {5}"

MasterTableView-PagerStyle-Position="TopAndBottom" MasterTableView-PagerStyle-PageButtonCount="10" MasterTableView-PagerStyle-EnableAllOptionInPagerComboBox="false"

PagerStyle-PageSizes="10,25,50,100" PageSize="25" PagerStyle-AlwaysVisible="true"

MasterTableView-TableLayout="Fixed">

<GroupingSettings CaseSensitive="false" />

<MasterTableView>

<NoRecordsTemplate>

<div>

There are no records to display select a system from the drop down list.

</div>

</NoRecordsTemplate>

<CommandItemSettings ShowExportToPdfButton="true" ShowExportToExcelButton="true" ShowAddNewRecordButton="false"

ShowRefreshButton="false" />

<SortExpressions>

<telerik:GridSortExpression FieldName="CREATEDON" SortOrder="Descending" />

</SortExpressions>

<Columns>

<telerik:GridBoundColumn UniqueName="AUDITID" DataField="AuditId" HeaderText="Audit ID" AutoPostBackOnFilter="true" CurrentFilterFunction="EqualTo"

ShowFilterIcon="false" FilterControlWidth="75px" ItemStyle-HorizontalAlign="Left"

DataType="System.Int32" SortExpression="AUDITID">

<HeaderStyle Width="110px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="FULLNAME" DataField="FullName" HeaderText="Created By" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

ShowFilterIcon="false" DataType="System.String" SortExpression="FULLNAME" ItemStyle-HorizontalAlign="Left">

<HeaderStyle Width="160px" />

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn UniqueName="CREATEDON" DataField="CreatedOn" HeaderText="Created On" AutoPostBackOnFilter="true"

PickerType="DatePicker"

DataFormatString="{0:dd MMM yyyy hh:mm:ss}" HtmlEncode="false" CurrentFilterFunction="GreaterThanOrEqualTo" ShowFilterIcon="false"

ItemStyle-HorizontalAlign="Left">

<HeaderStyle Width="170px" />

</telerik:GridDateTimeColumn>

<telerik:GridBoundColumn UniqueName="AUDITTYPEDESCRIPTION" DataField="AuditTypeDescription" HeaderText="Type" AutoPostBackOnFilter="true"

ShowFilterIcon="false" DataType="System.String" ItemStyle-HorizontalAlign="Left"

CurrentFilterFunction="Contains" SortExpression="AUDITTYPEDESCRIPTION">

<HeaderStyle Width="130px" />

<FilterTemplate>

<telerik:RadComboBox RenderMode="Lightweight" ID="rcbAuditTypes" Skin="Default" DropDownAutoWidth="Enabled"

Width="128px" AppendDataBoundItems="true" SelectedValue='<%# ((GridItem)Container).OwnerTableView.GetColumn("AUDITTYPEDESCRIPTION").CurrentFilterValue %>'

runat="server" OnClientSelectedIndexChanged="AuditTypeIndexChanged">

<Items>

<telerik:RadComboBoxItem Text="All" />

</Items>

</telerik:RadComboBox>

<telerik:RadScriptBlock ID="rsbAuditType" runat="server">

<script type="text/javascript">

function AuditTypeIndexChanged(sender, args) {

var tableView = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");

tableView.filter("AUDITTYPEDESCRIPTION", args.get_item().get_value(), "EqualTo");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="AUDITDESCRIPTION" DataField="AuditDescription" HeaderText="Description" AutoPostBackOnFilter="true"

ShowFilterIcon="false" DataType="System.String" ItemStyle-HorizontalAlign="Left"

CurrentFilterFunction="Contains" AllowSorting="false" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

private void refreshCombos()

{

AdminServiceClient adminProxy = new AdminServiceClient();

DataSet ds = adminProxy.GetUniqueAuditTypeCode(rgAudits.MasterTableView.FilterExpression.ToString());

RadComboBox rcb = new RadComboBox();

foreach (GridFilteringItem item in rgAudits.MasterTableView.GetItems(GridItemType.FilteringItem))

{

rcb = (RadComboBox)item.FindControl("rcbAuditTypes");

}

rcb.DataTextField = "AuditDescription";

rcb.DataValueField = "AuditTypeCode";

rcb.DataSource = ds;

rcb.DataBind();

//rgAudits.MasterTableView.Rebind();

}

Note, in the example you have the rebind that I've commented out above. When I do this, my ComboBox comes out empty. If I leave it out, then I get the values in the Combo Box.

I'm having a secondary problem with the ComboBox itself. Sometimes, the text in the is huge, other times it's the right size. I have no idea what's causing this.

Thanks
Rodney

Grid

answered on 06 Jun 2017

6 answers

520 views

Disable clickable legend

Hello,

I am using a pie chart which by default has a clickable legend. If you click on a legend item, you filter out that data Item. However, my client doesn't want this functionality because they find it confusing that the tooltip info doesnt change (the % stays the same and is not calculated back to be a total of 100% with the remaining items).

How do I disable this functionality? I cant find any property in the control for this.

Thanks!

Chart (HTML5)

answered on 06 Jun 2017

0 answers

97 views

SelectIndex=-1 when Item's value=empty if AllowCustomText=True

RadCombox version is 2017 R2 (2017.05.03).

When user chooses second item: "empty", the SelectedIndex=1 when AllowCustomText=False,
but SelectedIndex=-1 if the value is empty when AllowCustomText=True.

I think it's a bug for empty value in AllowCustomText mode.

<telerik:RadComboBox ID="Type" runat="server"

AllowCustomText="true"

RenderMode="Lightweight"

CollapseAnimation-Duration="0"

ExpandAnimation-Duration="0">

<Items>

<telerik:RadComboBoxItem Text="first" Value="1" />

<telerik:RadComboBoxItem Text="empty" Value="" />

<telerik:RadComboBoxItem Text="third" Value="2" />

</Items>

</telerik:RadComboBox>

ComboBox

asked on 05 Jun 2017

2 answers

562 views

[Solved] Programmatically adding multiple LineSeries with custom categories

I am having trouble upgrading some existing charts from ChartDirector into RadHTMLCharts. The existing charts have month names as categories on the x-axis and contain two series. I am adding these programmatically without the use of a databind, but the two series do not share the same x-values - there is a gap between the two and there can potentially be gaps in months within each series. It seems I cannot have months as the x-axis labels and have two series that do not have matching x-values. Is there a chart type that I can use to achieve the desired result, or is there a workaround?

I can have months as the x-axis labels if I use a line chart, but it has to have values for every category for both series. Or, I can have two series that have different x-values if I use a ScatterLine chart, but the x-axis labels are numeric and I cant seem to replace them with months.

Thanks

Chart (HTML5)

answered on 05 Jun 2017