Questions on UI for ASP.NET AJAX Forum

2 answers

90 views

I have an autocompletebox set up with the following settings

                            <telerik:RadAutoCompleteBox ID="RadAutoCompleteBox1" RenderMode="Lightweight" runat="server"
                                MaxResultCount="100" MinFilterLength="2"
                                AllowCustomEntry="true"
                                InputType="Text" Width="100" DropDownWidth="100px"
                                DataTextField="My_Text" DataValueField="My_Value" >
                                <TextSettings SelectionMode="Single" />
                            </telerik:RadAutoCompleteBox>

When entering text, if any items match partially on the entry, the top entry from those will be selected. For instance, if I have an option for '1234' and the user has typed '123', the entry for '1234' will be selected and the user is unable to add a custom entry for '123'.

Is there any way to get around this behavior? The users really need to be able to add custom entries.

AutoCompleteBox

answered on 06 Mar 2019

13 answers

107 views

Totally stuck! Need assistance, please.

I'm new to Telerik and am having trouble trying to write the correct code to do the following scenario.

I have a SQL Server 2008 as backend. Here is the scenario. A new employee needs to have her photo taken and added to a webpage. The photo is not committed to the database until the Save button is pressed.

I need to present a default image in a "new employee" entry screen. A button is pressed to popup the image capture. The image is saved to a work table in the database (WRK_PHOTO). I need to now take the image from WRK_PHOTO and replace the default image on the page. Once the save button is pressed, the new image is saved to the database in the EMPLOYEE table.

I have the whole web cam capture and save to WRK_PHOTO in place and working.

What I don't have is the display of the temporary default image on the screen, and replacing it with the newly captured photo stored in WRK_PHOTO. Also, I don't know how to save the new image to the EMPLOYEE table when the save button is pressed.

I attached a .PNG graphic image of what I'm looking to do. The capture of the webcam is done. I just to know how to handle the interaction with the Telerik image control.

BinaryImage

answered on 06 Mar 2019

4 answers

1.1K+ views

ItemDataBound - conditionally disable command link button?

hello,

in my grid's edit-mode i am using some conditional code to disable column editing for certain columns, like so:

protected void gridItems_ItemDataBound(object source, GridItemEventArgs e)

{

if (e.Item.IsInEditMode && e.Item is GridEditableItem)

{

//NOTE: if this grid supported inserts, we'd have to test against "e.Item.ItemIndex == -1", since -1 is used by inserts.

GridEditableItem editableItem = e.Item as GridEditableItem;

//get test status status

string status = ((TextBox)editableItem["Status"].Controls[0]).Text;

switch (status.ToLower())

{

case "rejected":

editableItem["UseInAllocation"].Enabled = false;

editableItem["UseInToleranceCalculation"].Enabled = false;

editableItem["AcceptanceStatus"].Enabled = false;

break;

//[set others case conditions here]

}

...my question -- how can i similarly disable:

a) the "Edit" command column link-button before a row enters edit-mode
b) the "Update" command link-button while in edit-mode

i will post the solution if i find it.

thanks,
matt

Grid

answered on 06 Mar 2019

6 answers

602 views

Stacked Column series item label getting overlapping

Hi,

I am using StackedBar series in RadHtml Chart.
In the chart xaxis having both positive and negative values data. When it is having negative and postive data it is getting overlapping the item labels.
Can you please let me know how to make them display in different locations?

Regards
Kannan S

Chart (HTML5)

answered on 06 Mar 2019

1 answer

173 views

RadWindow issue on iOS, can't click button

We are having problems with the RadWindow on iPhone. First is if we use RadAsyncUpload on the page the popup window/RadWindow it loses its responsiveness. We use bootstrap, I've attached screenshot of how it looks like. The controls overflows on the right.

Next is within the Radwindow we have a panel which is visible=false by default and is ajaxified to show when a checkbox is ticked. When those panels are shown, it won’t let you click on the button. Meaning whenever you click on the button the page jumps up and focuses on the other fields above it. And sometimes it wont let you scroll up or down within the RadWindow

Below is the html code. How can we get around this issue?

<telerik:RadAjaxLoadingPanel ID="loadingInjured" runat="server"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="ajxInjured" runat="server" LoadingPanelID="loadingInjured">

<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>What was damaged?</label>
<p>
Select equipment that was damaged.
</p>
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel2">
<telerik:RadComboBox ID="ddEquipment" runat="server" DataSourceID="SqlAssets" DataTextField="OrganisationName" DataValueField="OUID" Width="100%" Filter="Contains">
<DefaultItem Text=" - select - " Value="" />
</telerik:RadComboBox>
<asp:SqlDataSource ID="SqlEquionentInvolved" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommand="SELECT ListID, ItemName FROM [_FFList] WHERE (([TenantID] = @TenantID) AND ItemTypeID = 87) ORDER BY ItemName">
<SelectParameters>
<asp:SessionParameter DefaultValue="0" Name="TenantID" SessionField="TenantID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
<asp:SqlDataSource ID="SqlAssets" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommandType="StoredProcedure"
SelectCommand="_FFLocationSelectAssets">
<SelectParameters>
<asp:SessionParameter Name="TenantID" SessionField="TenantID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>
</telerik:RadAjaxPanel>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label style="width:100%">&nbsp</label>
<p>
or input what was damaged.
</p>
<asp:TextBox ID="txtOtherDamage" runat="server" Width="100%" CssClass="form-control" placeholder="others"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>Property Damage Type</label>
<telerik:RadComboBox ID="ddPropertyType" Width="100%" runat="server" required="" MarkFirstMatch="true" AllowCustomText="false" DataSourceID="SqlPropertyDamage" DataTextField="ItemName" DataValueField="ListID">
<DefaultItem Text="Select an option..." Value="0" />
</telerik:RadComboBox>
<asp:SqlDataSource ID="SqlPropertyDamage" runat="server" ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" SelectCommand="SELECT ListID, ItemName FROM [_FFList] WHERE (([TenantID] = @TenantID) AND ItemTypeID = 124) ORDER BY ItemName">
<SelectParameters>
<asp:SessionParameter DefaultValue="0" Name="TenantID" SessionField="TenantID" Type="Int32" />
</SelectParameters>
</asp:SqlDataSource>

</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="form-group">
<label>Cost</label>
<asp:TextBox ID="txtCost" runat="server" TextMode="Number" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<label>Description</label>
<asp:TextBox ID="txtDescription" runat="server" TextMode="MultiLine" Rows="4" Width="100%" CssClass="form-control" MaxLength="500"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="form-group">
<asp:CheckBox ID="chkIsInsurance" runat="server" Text=" Insurance?" AutoPostBack="true" OnCheckedChanged="chkIsInsurance_OnCheckedChanged" />
</div>
</div>
</div>

<asp:Panel ID="pnlInsurance" runat="server" Visible="false">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Company Insurer Name</label>
<asp:TextBox ID="txtInsuranceName" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Company Insurance Claim Number</label>
<asp:TextBox ID="txtInsuranceClaimNumber" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>3rd Party Insurer Name</label>
<asp:TextBox ID="txtThirdPartyInsurerName" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>3rd Party Insurance Claim Number</label>
<asp:TextBox ID="txtThirdInsurerClaimNumber" runat="server" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<asp:CheckBox ID="chkIsRecoverable" runat="server" Text=" Recoverable?" AutoPostBack="true" OnCheckedChanged="chkIsRecoverable_OnCheckedChanged"/>
</div>
</div>
<asp:Panel ID="pnlRecoverableAmount" runat="server" Visible="false">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Recoverable Amount</label>
<asp:TextBox ID="txtRecoverableAmount" runat="server" TextMode="Number" Width="100%" CssClass="form-control"></asp:TextBox>
</div>
</div>
</asp:Panel>
</div>
</asp:Panel>

<div class="row">
<hr />
<div id="pnlDropZone">
<asp:Panel ID="pnlFiles" runat="server">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12">
<div class="form-group">
<label>Files</label>
<div class="dropzone" onclick="OpenUploadDialogPopup();">
<div class="dz-default dz-message" style="margin: 2em 0;text-align:center;">
<span>
<strong>Drop files here or click to upload. </strong>
</span>
</div>
</div>
<telerik:RadAsyncUpload ID="uplFiles" runat="server" MultipleFileSelection="Automatic" DropZones=".dropzone" HideFileInput="true" CssClass="radasyncAttachment"></telerik:RadAsyncUpload>
</div>
</div>
</asp:Panel>
</div>

<div class="col-lg-6 col-md-6 col-sm-6 col-xs-12" id="simpleUpload" style="display:none;">
<div class="form-group">
<label>Files</label>
<telerik:RadAsyncUpload ID="btnUploadSimple" runat="server" MultipleFileSelection="Automatic"></telerik:RadAsyncUpload>
</div>
</div>

<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<uc1:uFiles runat="server" ID="uFiles" />
</div>
</div>

<asp:Panel runat="server" ID="pnlError" Visible="false">
<div class="alert alert-danger">
<button aria-hidden="true" data-dismiss="alert" class="close" type="button">&#215</button>
<asp:Literal ID="lblError" runat="server"></asp:Literal>
</div>
</asp:Panel>
<div class="row" id="pnlSave">
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
<asp:Button ID="btnSave" runat="server" Text="Save" CssClass="btn btn-success btn-block" OnClick="btnSave_Click"/>
</div>
<div class="col-lg-2 col-md-2 col-sm-2 col-xs-6">
<asp:Button ID="btnCancel" runat="server" Text="Cancel" CssClass="btn btn-default btn-block" OnClick="btnCancel_Click"/>
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
</div>
</div>
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
 
</div>
</div>

</telerik:RadAjaxPanel>

to open the radwindow, we use this code to resize the window, so it will be responsive:

function SetWindowWidth() {
var winWidth = $(window).width();
if (winWidth < 900) {
console.log("Window width: " + $(window).width());
var radWindowId = '<%=RadWindowAddPropertyDamage.ClientID%>';
$find(radWindowId).set_maxWidth(winWidth - 50);
}

$find(radWindowId).show();
}

Window

answered on 05 Mar 2019

15 answers

1.6K+ views

Using DynamicObject as a datasource (or ExpandoObject)

Hello,

I did find some information, but that was on other forums.

Now we have DynamicObject (or ExpandoObject, that's an implementation of DynamicObject as I understood) we, of course, want it to bind to a RadGrid. There is no thread or blog I can find on this issue. It's also a bit of a Sunday afternoon thing for now.

I was wondering what Telerik thinks of this usage, what would be your approach..
And also this tread can grow to be of use to others, that's the main gaol..

We have a dynamic class:

Imports System.IO

Imports System.Dynamic

Public Class DynamicDictionary

Inherits DynamicObject

' The inner dictionary.

Dim mdic_PropertyHolder As New Dictionary(Of String, Object)

' This property returns the number of elements in the inner dictionary.

ReadOnly Property Count As Integer

Get

Return mdic_PropertyHolder.Count

End Get

End Property

ReadOnly Property Items As Dictionary(Of String, Object)

Get

Return mdic_PropertyHolder

End Get

End Property

Public Function GetMembers() As String()

Return mdic_PropertyHolder.Keys.ToArray

End Function

Public Property Item(ByVal PropertyName As String) As String

Get

Return mdic_PropertyHolder(PropertyName)

End Get

Set(ByVal value As String)

mdic_PropertyHolder(PropertyName) = value

End Set

End Property

' If you try to get a value of a property that is not defined in the class, this method is called.

Public Overrides Function TryGetMember(ByVal binder As System.Dynamic.GetMemberBinder, ByRef result As Object) As Boolean

' Converting the property name to lowercase

' so that property names become case-insensitive.

Dim name As String = binder.Name.ToLower()

' If the property name is found in a dictionary, set the result parameter to the property value and return true. Otherwise, return false.

Return mdic_PropertyHolder.TryGetValue(name, result)

End Function

Public Overrides Function TrySetMember(ByVal binder As System.Dynamic.SetMemberBinder, ByVal value As Object) As Boolean

' Converting the property name to lowercase so that property names become case-insensitive.

mdic_PropertyHolder(binder.Name.ToLower()) = value

' You can always add a value to a dictionary, so this method always returns true.

Return True

End Function

End Class

In a asp.net page we have:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" GridLines="None" Width="100%" ShowGroupPanel="True" AllowSorting="True" ShowStatusBar="true">

<MasterTableView RetrieveAllDataFields="true" AutoGenerateColumns="false">

<Columns>

<telerik:GridTemplateColumn HeaderText="Hopa" >

<ItemTemplate>

<span style="white-space:nowrap"><%# Container.DataItem.firstname%></span>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn HeaderText="FirstName" DataField="FirstName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="MiddleName" DataField="MiddleName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="LastName" HeaderText="LastName">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

In a asp.net page code we have:

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

Dim person As Object

Dim List As New ArrayList

' Adding new dynamic properties.

' The TrySetMember method is called.

person = New DynamicDictionary()

person.FirstName = "Ellen"

person.LastName = "Adams"

List.Add(person)

person = New DynamicDictionary()

person.FirstName = "Piet"

person.LastName = "Pietersen"

List.Add(person)

person = New DynamicDictionary()

person.FirstName = "Erik"

person.MiddleName = "van der"

person.LastName = "Heide"

List.Add(person)

person = New DynamicDictionary()

person.FirstName = "Jan"

person.LastName = "Janssen"

List.Add(person)

RadGrid1.DataSource = List

RadGrid1.DataBind()

End Sub

Private Sub RadGrid1_ItemDataBound(sender As Object, e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound

If TypeOf e.Item Is GridDataItem Then

Dim dataBoundItem As GridDataItem = e.Item

For Each Member As String In dataBoundItem.DataItem.GetMembers

Try

dataBoundItem(Member).Text = dataBoundItem.DataItem.Item(Member)

Catch ex As Exception

' Oops

End Try

Next

End If

End Sub

This is of course not verry fast, but verry flexible it is. Editing is an issue I think, but displaying is not.

Regards,

Erik

Grid

answered on 05 Mar 2019

5 answers

745 views

$find return null after PostBack

Hi,

I have a page where I user a RadWindowManager and buttons calling postback functions.
To open my RadWindow, I use this traditional code :

var oWnd = $find("<%= RadWindow.ClientID %>");
oWnd.show();

It work fine until one button is fired and postback is done.
After that postback, $find return null every time.

Does someone have a tips to resolve that issue ?

Thanks,
Corentin

Window

answered on 05 Mar 2019

20 answers

928 views

MultiColumn Headers and export to Excel

I implemented MultiColumn Headers on my radGrid, very cool!

Exporting to Excel however is not doing so great. It only takes the lowest level headers, but with column span of the top level, causing all sorts of wierdness....

Any suggestions on how to export the grid as is, meaning all levels of the headers and data?

Grid

answered on 05 Mar 2019

7 answers

625 views

Remove RadListItem from Code Behind

I have two RadListBoxes I am able to drag and drop items between the two without problems, but I have one specific RadlistItem that when I add it to the other listbox I want to remove the existing list items in the code behind, but so far it keeps giving and error like Outside Index or something similar when I try to remove those list Items. Any help or Ideas would be appreciated.

Thanks,

ListBox

answered on 05 Mar 2019

4 answers

360 views

conditional Alternating Item Style

hi,

just like james in this thread, I need to mark certain rows according to a condition.
every time the user opens and watch an idea, the row of the watched idea should be in lightblue.
that for itself works great.
My problem is, that when I click a row it gets lightblue, but then- when I click another row, the previous row change color to white.
How can I keep the condition working for alternating item style too?

that my code :

<telerik:RadGrid Skin="innovation" EnableEmbeddedSkins="false" ID="RadGrid1"

dir="rtl" HeaderStyle-ForeColor="White" AllowFilteringByColumn="True"

AllowSorting="True" AllowPaging="True" BorderColor="#74ABAE" BackColor="White"

BorderWidth="2px" runat="server" HeaderStyle-Font-Size="Small" ItemStyle-Font-Size="Small"

AlternatingItemStyle-Font-Size="Small" ItemStyle-BackColor="White" ItemStyle-ForeColor="Black"

PageSize="7" AutoGenerateColumns="False" PagerStyle-Font-Size="Small"

AlternatingItemStyle-ForeColor="Black"

Culture="Hebrew" GridLines="Vertical" Width="666px"

style="margin-right: 30px">

<HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Black">

</HeaderContextMenu>

<ItemStyle BackColor="White" Font-Size="Small" ForeColor="Black" />

<PagerStyle mode="NumericPages" ShowPagerText="false"></PagerStyle>

<MasterTableView>

<CommandItemSettings ExportToPdfText="Export to Pdf"></CommandItemSettings>

<Columns>

<telerik:GridBoundColumn CurrentFilterFunction="Contains"

DataField="IDEA_CODE" UniqueName="IDEA_CODE" HeaderText="ideanum"

AutoPostBackOnFilter="true" DataType="System.Int32">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LINK" DataField="LINK" HeaderText=""

DataType="System.String" Display="false">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ROWNUM" HeaderText="#" Visible="false"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.Int32">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SENDER_ID" HeaderText="id"

UniqueName="SENDER_ID" AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="FULLNAME" HeaderText="namef"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SUBJECT" HeaderText="sub"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="DESCRIPTION" HeaderText="status"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.String">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="SEND_DATE" HeaderText="sdate"

AutoPostBackOnFilter="true" CurrentFilterFunction="Contains"

DataType="System.DateTime" DataFormatString="{0:dd/MM/yy}">

</telerik:GridBoundColumn>

<telerik:GridImageColumn HeaderText="comments" UniqueName="FBIMG">

</telerik:GridImageColumn>

</Columns>

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">

<HeaderStyle Width="20px">

</HeaderStyle>

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">

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

</ExpandCollapseColumn>

<EditFormSettings>

<EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>

</EditFormSettings>

</MasterTableView>

<SelectedItemStyle BackColor="LightBlue" />

<HeaderStyle ForeColor="White"></HeaderStyle>

<ClientSettings>

<Selecting AllowRowSelect="true" />

<ClientEvents OnRowSelected="OpenIdea" />

</ClientSettings>

<FilterMenu EnableImageSprites="False"></FilterMenu>

</telerik:RadGrid>

Protected Sub RadGrid1_ItemDataBound(ByVal sender As Object, ByVal e As Telerik.Web.UI.GridItemEventArgs) Handles RadGrid1.ItemDataBound

Try

If TypeOf e.Item Is GridDataItem Then

Dim item As GridDataItem = CType(e.Item, GridDataItem)

Dim idea_code As Integer = CInt(item("IDEA_CODE").Text)

If (StoredProcedures.Is_Watched_Idea(idea_code, userID) = True) Then 'if the ideas was watched then

item.BackColor = Drawing.Color.LightBlue 'color the row

End If

….

End sub

by the way- I tried disable alternating row in client settings but all I got is a transparent back color for the alternative rows.

can anyone help with that?
kind regards, Dana

Grid

answered on 05 Mar 2019