Questions on UI for ASP.NET AJAX Forum

1 answer

103 views

Control BackColor for each single TileList from XMLDatasource

Hi All,

how can i control the background color for each TileList from XML File...

Something like DataTitleTextField="Text" ... DataBGColorField="BGColor" ?

Thanks

TileList

answered on 25 Feb 2016

5 answers

117 views

Error when double clicking empty space

I am updating a project to the latest version of Telerik UI for AJAX, and have noticed that if Idouble click on empty space below my text in the editor I get a javascript error "Unable to get property 'nextSibling' of undefined or null reference", relating to the following segment of code:

var h=function(o){while(!o.nextSibling){o=o.parentNode;
}return o.nextSibling;
};

As I have been unable to determine the source of this problem I am hoping you can help me out.

Editor

answered on 25 Feb 2016

9 answers

516 views

RadEditor Client side validation

Hi All,

I am facing problems with client side validation of RadEditor.
I want to put a check on length of the string entered in editor.

Following is the code, I have written:

    
            ========ASPX======== 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title></title> 
        
                <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1"> 
        
                <script type="text/javascript" language="javascript"> 
        
                function ValidateEditor() 
        
                { 

                    alert($find("<%=editor1.ClientID %>").get_text().length); 
        
                    alert($find("<%=editor1.ClientID %>").get_html().length); 
        
                    alert($find("<%=editor1.ClientID %>").get_html(true).length); 
        
                } 
        
                function ValidateEditor1(sender, args) 
        
                { 
        
                    alert("args.Value.length = "+args.Value.length); 
        
                } 
        
                </script> 
        
                </telerik:RadScriptBlock> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <div> 
        
                    <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    </telerik:RadScriptManager> 
        
                    <asp:CustomValidator ID="val1" Display="None" runat="server" ClientValidationFunction="ValidateEditor" 
        
                        ValidationGroup="group1"></asp:CustomValidator> 
        
                    <asp:CustomValidator ID="CustomValidator1" Display="None" runat="server" ClientValidationFunction="ValidateEditor1" 
        
                        ValidationGroup="group1" ControlToValidate="editor1"></asp:CustomValidator> 
        
                    <telerik:RadEditor ID="editor1" runat="server" Width="400" Height="100" 
        
                        Skin="Vista" EditModes="Design"> 
        
                        <Tools> 
        
                            <telerik:EditorToolGroup> 
        
                                <telerik:EditorTool Name="Bold" /> 
        
                                <telerik:EditorTool Name="Italic" /> 
        
                                <telerik:EditorTool Name="Underline" /> 
        
                                <telerik:EditorTool Name="InsertOrderedList" /> 
        
                                <telerik:EditorTool Name="InsertUnorderedList" /> 
        
                                <telerik:EditorTool Name="Indent" /> 
        
                                <telerik:EditorTool Name="Outdent" /> 
        
                                <telerik:EditorTool Name="JustifyLeft" /> 
        
                                <telerik:EditorTool Name="JustifyCenter" /> 
        
                                <telerik:EditorTool Name="JustifyRight" /> 
        
                            </telerik:EditorToolGroup> 
        
                        </Tools> 
        
                    </telerik:RadEditor> 
        
                    <asp:Button Text="SAVE" ID="button16" OnClick="Save_Click" 
        
                        runat="server" ValidationGroup="group1" /> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            ========CODE BEHIND======== 
        
                public partial class EditorValidation : System.Web.UI.Page 
        
                { 
        
                    protected void Page_Load(object sender, EventArgs e) 
        
                    { 
        
                    } 
        
                    protected void Save_Click(object sender, EventArgs e) 
        
                    { 
        
                        int len = editor1.Content.Length; 
        
                    } 
        
                }

To put check on length, I used function get_html() and get_text(). But length of string returned by these function is sometimes smaller than length of server side attribute "Content".
Then I found online demo(http://demos.telerik.com/aspnet-ajax/editor/examples/validators/defaultcs.aspx) which had implementation like function "ValidateEditor1". But that also returned smaller length.

I observed that this problem consistently occurs with strings spanning over multiple lines. You can try this by entering any multi-line string in the editor.

So I think I will be able to solve this problem if I find some api on client side, which returns string exactly equal to the one returned by server side attribute "Content". Can anyone provide more insight into this problem?

Regards
Shrikant

General Discussions

answered on 25 Feb 2016

4 answers

190 views

How do I set the data source for built in field editors?

Specifically a RadFilterDropDownEditor, but I will also need date editors as well. I can't find any good documentation explaining how to set something up. My current strategy is based off of the code here: http://docs.telerik.com/devtools/aspnet-ajax/controls/filter/field-editors/programmatic-creation. I have to set the field editor's values with a list, but using the code below, there are no values in the drop down. I have also seen the code here but it is a completely different and unexplained approach, and involving data tables is, in my opinion, bad.

Here is essentially what I have:

<telerik:RadFilter runat="server" ID="rfFilter" RenderMode="Lightweight" FilterContainerID="RadGrid1" ShowApplyButton="False" ViewStateMode="Enabled" OnApplyExpressions="rfFilter_ApplyExpressions"/>

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

RadFilterDropDownEditor districtFilter = new RadFilterDropDownEditor();

rfFilter.FieldEditors.Add(districtFilter);

statusFilter.FieldName = "District";

statusFilter.DataType = typeof(string);

var list = new ArrayList(GetDistrictList());

statusFilter.SetEditorValues(list);

}

Filter

answered on 25 Feb 2016

2 answers

174 views

Pop-up doesn't show when webusercontrol contains a radDatePicker

Hi,

I have a RadGrid with popup edit mode enabled. This popup is populated by a WebUserControl that contains asp.net controls et 2 RadDatePicker. The popup doesn't show and I just have an empty row added in the grid (cf attached picture). The popup appears only if I replace the RadDatePickers by textboxes or if I open the popup server-side on page prerender editing an item.

I guess I have an ajax problem but I can't solve this by myself. Please Help !

Page with grid :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VueGlobaleDossiers.ascx.cs" Inherits="tech.Web.UI.VueGlobaleDossiers" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<style type="text/css">

#GridViewDossiers tr.rowHover:Hover

{

background-color: #6F9702;

color: Black;

}

.HeaderStyle

{

border: solid 1px White;

background-color: #ACD184;

color:#122246;

font-size: 11px;

font-weight: bold;

text-align: center;

vertical-align: middle;

text-shadow: 0px 1px white;

}

.RowStyleSelected

{

background-color: #AECCF0;

font-weight: bold;

color: #333333;

height: 10px;

}

.visibility {Display : none}

</style>

<div >

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label1" runat="server" Text="Nombre de lignes :"></asp:Label>

<asp:DropDownList ID="PageSizeDropDownList" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server" AutoPostBack="true" >

<asp:ListItem Text="50" Value="50" Selected="True" />

<asp:ListItem Text="70" Value="70" />

<asp:ListItem Text="100" Value="100" />

<asp:ListItem Text="200" Value="200" />

<asp:ListItem Text="500" Value="500" />

<asp:ListItem Text="1000" Value="1000" />

</asp:DropDownList>

</div>

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label3" runat="server" Text="Etat :"></asp:Label>

<asp:DropDownList ID="DDL_Etat" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server" AutoPostBack="true" >

<asp:ListItem Text="en cours" Value="en cours" Selected="True" />

<asp:ListItem Text="rendu" Value="rendu" />

<asp:ListItem Text="Archive" Value="Archive" />

<asp:ListItem Text="Tous" Value="" />

</asp:DropDownList>

</div>

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label4" runat="server" Text="Coordinateur :"></asp:Label>

<asp:TextBox runat="server" ID="TB_Coord" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="30px" ></asp:TextBox>

</div>

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label5" runat="server" Text="Client :"></asp:Label>

<asp:TextBox runat="server" ID="TB_client" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="100px" ></asp:TextBox>

</div>

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label6" runat="server" Text="Nom dossier contient :"></asp:Label>

<asp:TextBox runat="server" ID="TB_StrDossier" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="100px" ></asp:TextBox>

</div>

<div style="float: right;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label2" runat="server" Text="Agence :"></asp:Label>

<asp:DropDownList ID="AgenceGlobaleDropDownList" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server" AutoPostBack="true" ></asp:DropDownList>

</div>

<div style="clear:both;"></div>

<asp:HiddenField ID="indexTable" runat="server" Value="-1" />

<div>

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

<script type="text/javascript">

function RowDblClick(sender, eventArgs) {

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

}

function onPopUpShowing(sender, args) {

popUp = args.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";

}

</script>

</telerik:RadCodeBlock>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server">

</telerik:RadAjaxLoadingPanel>

<div id="demo" class="demo-container no-bg">

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" ShowFooter="true"

AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true"

OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand" OnItemDataBound="RadGrid1_ItemDataBound"

OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand" OnPreRender="RadGrid1_PreRender">

<ClientSettings>

<Scrolling AllowScroll="True" SaveScrollPosition="true" ></Scrolling>

</ClientSettings>

<MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="DossierID" EditMode="PopUp">

<CommandItemSettings ShowSaveChangesButton="False" ShowCancelChangesButton="False" ShowRefreshButton="False" />

<EditFormSettings>

<PopUpSettings Modal="true" ZIndex="100010" />

</EditFormSettings>

<Columns>

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn">

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="DossierID" HeaderText="ID" SortExpression="DossierID" HeaderStyle-ForeColor="Black" />

<telerik:GridBoundColumn DataField="CodeDossier" HeaderText="Code Dossier" SortExpression="CodeDossier" HeaderStyle-ForeColor="Black" />

<telerik:GridBoundColumn DataField="Nom" HeaderText="Client" SortExpression="Nom" HeaderStyle-ForeColor="Black"/>

<telerik:GridBoundColumn DataField="Description" HeaderText="Description" SortExpression="Description" HeaderStyle-ForeColor="Black" />

<telerik:GridBoundColumn DataField="Coordinateurs" HeaderText="Coordinateurs" SortExpression="Coordinateurs" HeaderStyle-ForeColor="Black" />

<telerik:GridTemplateColumn HeaderText="Date commande" SortExpression="DateDebutDossier" HeaderStyle-ForeColor="Black">

<ItemTemplate>

<asp:Label ID="DateDebut" runat="server" Text='<%# ((DateTime)Eval("DateDebutDossier")).ToShortDateString() %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Date fin prévue" SortExpression="DateFinTheorique" HeaderStyle-ForeColor="Black">

<ItemTemplate>

<asp:Label ID="DateFin" runat="server" Text='<%# ((DateTime)Eval("DateFinTheorique")).ToShortDateString() %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="TempsPrevu" HeaderText="Temps prévu" SortExpression="TempsPrevu" HeaderStyle-ForeColor="Black"/>

<telerik:GridBoundColumn DataField="SoldeTemps" HeaderText="Solde Temps" SortExpression="SoldeTemps" HeaderStyle-ForeColor="Black" />

<telerik:GridTemplateColumn HeaderText="Etat" SortExpression="Fini" HeaderStyle-ForeColor="Black">

<ItemTemplate>

<asp:Label ID="Etat" runat="server" Text='<%# ((string)Eval("Fini")) %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Ville" HeaderText="Agence" SortExpression="Ville" HeaderStyle-ForeColor="Black" />

</Columns>

<EditFormSettings UserControlName="~/Dossier/Controls/EditDossier.ascx" EditFormType="WebUserControl" >

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="onPopUpShowing" />

</ClientSettings>

</telerik:RadGrid>

</div>

webusercontrol :

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VueGlobaleDossiers.ascx.cs" Inherits="tech.Web.UI.VueGlobaleDossiers" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<style type="text/css">

#GridViewDossiers tr.rowHover:Hover

{

background-color: #6F9702;

color: Black;

}

.HeaderStyle

{

border: solid 1px White;

background-color: #ACD184;

color:#122246;

font-size: 11px;

font-weight: bold;

text-align: center;

vertical-align: middle;

text-shadow: 0px 1px white;

}

.RowStyleSelected

{

background-color: #AECCF0;

font-weight: bold;

color: #333333;

height: 10px;

}

.visibility {Display : none}

</style>

<div >

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label1" runat="server" Text="Nombre de lignes :"></asp:Label>

<asp:DropDownList ID="PageSizeDropDownList" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server" AutoPostBack="true" >

<asp:ListItem Text="50" Value="50" Selected="True" />

<asp:ListItem Text="70" Value="70" />

<asp:ListItem Text="100" Value="100" />

<asp:ListItem Text="200" Value="200" />

<asp:ListItem Text="500" Value="500" />

<asp:ListItem Text="1000" Value="1000" />

</asp:DropDownList>

</div>

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label3" runat="server" Text="Etat :"></asp:Label>

<asp:DropDownList ID="DDL_Etat" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server" AutoPostBack="true" >

<asp:ListItem Text="en cours" Value="en cours" Selected="True" />

<asp:ListItem Text="rendu" Value="rendu" />

<asp:ListItem Text="Archive" Value="Archive" />

<asp:ListItem Text="Tous" Value="" />

</asp:DropDownList>

</div>

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label4" runat="server" Text="Coordinateur :"></asp:Label>

<asp:TextBox runat="server" ID="TB_Coord" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="30px" ></asp:TextBox>

</div>

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label5" runat="server" Text="Client :"></asp:Label>

<asp:TextBox runat="server" ID="TB_client" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="100px" ></asp:TextBox>

</div>

<div style="float: left;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label6" runat="server" Text="Nom dossier contient :"></asp:Label>

<asp:TextBox runat="server" ID="TB_StrDossier" AutoPostBack="true" OnTextChanged="OnAgenceGlobaleSelectedChanged" Width="100px" ></asp:TextBox>

</div>

<div style="float: right;padding:6px;" class="HeaderStyle">

<asp:Label ID="Label2" runat="server" Text="Agence :"></asp:Label>

<asp:DropDownList ID="AgenceGlobaleDropDownList" OnSelectedIndexChanged="OnAgenceGlobaleSelectedChanged" runat="server" AutoPostBack="true" ></asp:DropDownList>

</div>

<div style="clear:both;"></div>

<asp:HiddenField ID="indexTable" runat="server" Value="-1" />

<div>

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

<script type="text/javascript">

function RowDblClick(sender, eventArgs) {

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

}

function onPopUpShowing(sender, args) {

popUp = args.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";

}

</script>

</telerik:RadCodeBlock>

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

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server">

</telerik:RadAjaxLoadingPanel>

<div id="demo" class="demo-container no-bg">

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" ShowFooter="true"

AllowSorting="True" AutoGenerateColumns="False" ShowStatusBar="true"

OnNeedDataSource="RadGrid1_NeedDataSource" OnUpdateCommand="RadGrid1_UpdateCommand" OnItemDataBound="RadGrid1_ItemDataBound"

OnInsertCommand="RadGrid1_InsertCommand" OnDeleteCommand="RadGrid1_DeleteCommand" OnPreRender="RadGrid1_PreRender">

<ClientSettings>

<Scrolling AllowScroll="True" SaveScrollPosition="true" ></Scrolling>

</ClientSettings>

<MasterTableView Width="100%" CommandItemDisplay="TopAndBottom" DataKeyNames="DossierID" EditMode="PopUp">

<CommandItemSettings ShowSaveChangesButton="False" ShowCancelChangesButton="False" ShowRefreshButton="False" />

<EditFormSettings>

<PopUpSettings Modal="true" ZIndex="100010" />

</EditFormSettings>

<Columns>

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn">

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn DataField="DossierID" HeaderText="ID" SortExpression="DossierID" HeaderStyle-ForeColor="Black" />

<telerik:GridBoundColumn DataField="CodeDossier" HeaderText="Code Dossier" SortExpression="CodeDossier" HeaderStyle-ForeColor="Black" />

<telerik:GridBoundColumn DataField="Nom" HeaderText="Client" SortExpression="Nom" HeaderStyle-ForeColor="Black"/>

<telerik:GridBoundColumn DataField="Description" HeaderText="Description" SortExpression="Description" HeaderStyle-ForeColor="Black" />

<telerik:GridBoundColumn DataField="Coordinateurs" HeaderText="Coordinateurs" SortExpression="Coordinateurs" HeaderStyle-ForeColor="Black" />

<telerik:GridTemplateColumn HeaderText="Date commande" SortExpression="DateDebutDossier" HeaderStyle-ForeColor="Black">

<ItemTemplate>

<asp:Label ID="DateDebut" runat="server" Text='<%# ((DateTime)Eval("DateDebutDossier")).ToShortDateString() %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn HeaderText="Date fin prévue" SortExpression="DateFinTheorique" HeaderStyle-ForeColor="Black">

<ItemTemplate>

<asp:Label ID="DateFin" runat="server" Text='<%# ((DateTime)Eval("DateFinTheorique")).ToShortDateString() %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="TempsPrevu" HeaderText="Temps prévu" SortExpression="TempsPrevu" HeaderStyle-ForeColor="Black"/>

<telerik:GridBoundColumn DataField="SoldeTemps" HeaderText="Solde Temps" SortExpression="SoldeTemps" HeaderStyle-ForeColor="Black" />

<telerik:GridTemplateColumn HeaderText="Etat" SortExpression="Fini" HeaderStyle-ForeColor="Black">

<ItemTemplate>

<asp:Label ID="Etat" runat="server" Text='<%# ((string)Eval("Fini")) %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn DataField="Ville" HeaderText="Agence" SortExpression="Ville" HeaderStyle-ForeColor="Black" />

</Columns>

<EditFormSettings UserControlName="~/Dossier/Controls/EditDossier.ascx" EditFormType="WebUserControl" >

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<ClientSettings>

<ClientEvents OnRowDblClick="RowDblClick" OnPopUpShowing="onPopUpShowing" />

</ClientSettings>

</telerik:RadGrid>

</div>

Grid

answered on 25 Feb 2016

5 answers

430 views

Percent Complete format

Hello,

It is not intuitive for my users to enter 35% as "0.35" the way the control expects it. Is there a way to override this format?

I can see from the generated source that there is a "k-format" CssClass applied to this field. Maybe this is a clue for possible override?

Thanks in advance for any help!

Gantt

answered on 25 Feb 2016

1 answer

158 views

Grid paging page number showing wrongly

I visited the following url: http://demos.telerik.com/aspnet-ajax/grid/examples/performance/virtualization/defaultcs.aspx (Grid - Virtualization)

Page Size: 1000

Records: 300000

Total Pages: 300

I scroll down the records. When I crossed the 500th record, the Current page number changed to 2 (it should be 1, because actual page size is 1000). Again I scroll down to check when the page number change to 3, when I crossed 1500th record it changed. Demo itself having this bug.

Grid

answered on 25 Feb 2016

7 answers

433 views

Drag and Drop onto RadScheduler

Hi All,

I have on asp table where I am filling appointments dynamically.
I want to give user facility to drag that appointment and drop onto a radscheduler.
After user drops that appointment onto Radscheduler that appointment's datetime should get set to the new date time where tit is dropped.

How can I achieve this?

Best Regards,.
Hrushikesh.

Scheduler

answered on 25 Feb 2016

2 answers

219 views

Update ListView inside RadWindow

Hello,

I have the following scenario: I have a RadGrid (parent) that has a nested RadGrid within it. Inside the nested grid I have a GridTemplateColumn that contains a RadButton.

<telerik:RadGrid ID="grdListEvents" runat="server" CssClass="RadGridEvents"

AutoGenerateColumns="false"

Skin="Default"

EnableEmbeddedSkins="true"

ShowGroupPanel="false"

ShowHeader="false"

OnNeedDataSource="grdListEvents_NeedDataSource">

<MasterTableView DataKeyNames="EventYear" Width="100%" HierarchyLoadMode="Client">

<Columns>

<telerik:GridBoundColumn DataField="EventYear" ReadOnly="True" UniqueName="EventYear">

<ItemStyle CssClass="BOLD_Labels" />

</telerik:GridBoundColumn>

</Columns>

<NestedViewTemplate>

<telerik:RadGrid ID="grdNestedEvents" runat="server" Skin="Default" EnableEmbeddedSkins="true" CssClass="NestedGridEvents"

AutoGenerateColumns="false"

Width="99.5%"

OnNeedDataSource="grdNestedEvents_NeedDataSource" OnItemCommand="grdNestedEvents_ItemCommand" OnItemDataBound="grdNestedEvents_ItemDataBound" OnItemCreated="grdNestedEvents_ItemCreated">

<MasterTableView EnableNoRecordsTemplate="true" ShowHeadersWhenNoRecords="true" TableLayout="Fixed" ShowGroupFooter="true" DataKeyNames="tEventID" ClientDataKeyNames="tEventID">

<Columns>

<telerik:GridTemplateColumn UniqueName="EditEvent" HeaderText="Event Details">

<HeaderStyle HorizontalAlign="Center" />

<ItemStyle HorizontalAlign="Center" />

<ItemTemplate>

<telerik:RadButton runat="server" ID="lnkEditEvent"

Text="Edit"

AutoPostBack="false"

EnableEmbeddedSkins="false"

EnableEmbeddedBaseStylesheet="false"

ButtonType="LinkButton"

CssClass="rbClearButton rbHyperlinkButton">

</telerik:RadButton>

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</NestedViewTemplate>

</MasterTableView>

</telerik:RadGrid>

The OnClick client-event of the RadButton is set in the Nested grid's ItemCreated event. This is done this way so that I can pass some needed parameters to the JavaScript function:

if (e.Item is GridDataItem)

{

GridDataItem item = (GridDataItem)e.Item;

RadGrid grid = (RadGrid)sender;

RadButton lnkEditEvent = (RadButton)item.FindControl("lnkEditEvent");

int index = item.ItemIndex;

int datakeyValue = Convert.ToInt32(item.GetDataKeyValue("tEventID"));

string cssSelector = "RadWindow_EditEvent";

string radWindow = "rdwEditEvent";

string radWidth = "610";

string radHeight = "610";

lnkEditEvent.Attributes.Add("OnClick", "btnEdit_OnClientClick('" + lnkEditEvent.ClientID

+ "', '" + index + "', '" + grid.ClientID + "', '" + datakeyValue

+ "', '" + cssSelector + "', '" + radWindow + "', '" + radWidth + "', '" + radHeight + "')");

}

The JavaScript function opens a RadWindow that contains a RadListView. The RadListView is populated via a $.getJSON JQuery function that executes a WCF service that returns a JSON list that populates the RadListView.

function btnEdit_OnClientClick(btnId, itemIndex, gridId, dataKeyValue, cssSelector, radWindow, radWidth, radHeight) {

var url = "";

//Open RadWindow

var oManager = GetRadWindowManager();

var oWnd = oManager.getWindowByName(radWindow);

var width = getWidth('#' + cssSelector + '', radWidth);

var height = getHeight('#' + cssSelector + '', radHeight);

if (oWnd) {

oWnd.show();

oWnd.setSize(width, height);

oWnd.center();

oWnd.setSize(width, height);

oWnd.set_modal(true);

oWnd.set_behaviors(Telerik.Web.UI.WindowBehaviors.none);

}

urlEventPhotos = '<%=strAppSettingEditEvents %>' + 'GetEventPhotos?EventID=' + dataKeyValue;

strTrainingPhotos = '<%=(String.Format(strTrainingPhotosPath).ToString()).Replace("\\", "\\\\")%>';

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

$.getJSON(urlEventPhotos, function (result) {

//if (result) {

$.each(result, function (a, item) {

tEvent_photo_name = item.tEvent_photo_name;

tEvent_photoPath = item.tEvent_photoPath;

});

//}

lstEventPhotosEdit.set_dataSource(result);

lstEventPhotosEdit.dataBind();

});

}

This all works fine. When the user clicks on the RadButton the Radwindow opens and the RadListView is loaded with values obtained from the WCF service.

Here's the markup for my RadWindow that resides inside a RadWindowManager:

<telerik:RadWindowManager ID="rwmEvents" runat="server"

EnableEmbeddedSkins="true"

Skin="Metro"

PreserveClientState="true"

EnableViewState="false"

ReloadOnShow="true"

VisibleOnPageLoad="false"

ShowContentDuringLoad="false">

<Windows>

<telerik:RadWindow ID="rdwEditEvent" runat="server" Title="Edit Event" Modal="true" CenterIfModal="true"

VisibleStatusbar="false">

<ContentTemplate>

<asp:UpdatePanel ID="pnlEditEvent" runat="server" UpdateMode="Conditional">

<ContentTemplate>

<div runat="server" id="divEditEvent">

<div id="EditEventDiv" runat="server" class="EVENT_Div Shadow">

<div class="DIV_One DIV_PhotoList">

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

Text="Event Photos: "

CssClass="BOLD_Labels"></asp:Label>

<telerik:RadListView ID="lstEventPhotosEdit" runat="server"

ItemPlaceholderID="pnlPhotos">

<LayoutTemplate>

<div id="pnlPhotos"></div>

</LayoutTemplate>

<ClientSettings>

<DataBinding ItemPlaceHolderID="pnlPhotos">

<ItemTemplate>

<a href="#= strTrainingPhotos ##= tEvent_photoPath #" target="_blank" class="GeneralFont">#= tEvent_photo_name #</a>

</ItemTemplate>

<EmptyDataTemplate><div class="GeneralFont">No photos have been uploaded.</div></EmptyDataTemplate>

</DataBinding>

</ClientSettings>

</telerik:RadListView>

</div>

<div>

<div id="divFileUpload" runat="server" class="DIV_PhotoUpload">

<div style="padding-bottom: 5px;">

<asp:Label ID="lblFileUpload" runat="server" AssociatedControlID="rauPhotoUpload" Text="Select a Photo for Uploading:" CssClass="GeneralFont"></asp:Label>

</div>

<script type="text/javascript">

Telerik.Web.UI.RadAsyncUpload.Modules.Flash.isAvailable = function () { return false; }

Telerik.Web.UI.RadAsyncUpload.Modules.FileApi.isAvailable = function () { return false; }

//Telerik.Web.UI.RadAsyncUpload.Modules.IFrame.isAvailable = function () { return false; };

//Telerik.Web.UI.RadAsyncUpload.Modules.Silverlight.isAvailable = function () { return false; }

</script>

<telerik:RadAsyncUpload ID="rauPhotoUpload" runat="server" HideFileInput="true" UploadedFilesRendering="BelowFileInput" MaxFileInputsCount="1" AllowedFileExtensions="jpeg,jpg,gif,tif,tiff,png"

MultipleFileSelection="Automatic"

UseApplicationPoolImpersonation="true"

OnFileUploaded="rauPhotoUpload_FileUploaded" Skin="Default" EnableEmbeddedSkins="true" Localization-Select="Browse" OnClientValidationFailed="validationFailed">

<FileFilters>

<telerik:FileFilter Description="Images(jpeg,jpg,gif,tif,tiff,png)" Extensions="jpeg,jpg,gif,tif,tiff,png" />

</FileFilters>

</telerik:RadAsyncUpload>

</div>

<div id="divFileUploadTitle" class="DIV_PhotoUploadTitle">

<div style="padding-bottom: 5px; padding-left: 5px;">

<asp:Label ID="lblPhotoTitle" runat="server" AssociatedControlID="" Text="Class Photo Title: " CssClass="GeneralFont"></asp:Label><br />

<telerik:RadTextBox ID="txtPhotoTitle" runat="server" Width="90%" Style="margin-top: 5px;"></telerik:RadTextBox>

</div>

<div class="DIV_One_Buttons">

<div class="DIV_One_Buttons_LFloat">

<telerik:RadButton ID="btnSaveEditEvent" runat="server"

CommandName="SaveEditEvent"

Text="Save Event" OnClick="btnSaveEditEvent_Click"

OnClientClicking="btnSaveEditEvent_OnClientClicking"

ValidationGroup="vgpEditEvent"

CssClass="RB_Save_Close">

</telerik:RadButton>

</div>

<div class="DIV_One_Buttons_LFloat DIV_One_Buttons_LFloat_Padding">

<telerik:RadButton ID="btnCloseEditEvent" runat="server" AutoPostBack="false"

Text="Cancel"

OnClientClicked="function(sender, args){closeRadWindow(sender, args, 'rdwEditEvent');}"

OnClientClicking="OnClientClicking"

CssClass="RB_Save_Close">

</telerik:RadButton>

</div>

<div>

<asp:Label ID="lblEditEventMessage" runat="server" CssClass="LBL_AHU_Add_Message"></asp:Label>

</div>

</ContentTemplate>

</asp:UpdatePanel>

</ContentTemplate>

</telerik:RadWindow>

</Windows>

</telerik:RadWindowManager>

I have the following RadAjaxManagerProxy settings:

<telerik:RadAjaxManagerProxy ID="rampAddEditFilters" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="grdListEvents">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="grdListEvents" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="pnlEditEvent">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="pnlEditEvent" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

I also Ajaxify some of the controls during PageLoad event:

protected void Page_Load(object sender, EventArgs e)

{

Ajaxify();

}

private void Ajaxify()

{

AjaxSetting ajaxSetting = new AjaxSetting();

ajaxSetting.AjaxControlID = rauPhotoUpload.ID;

ajaxSetting.UpdatedControls.Add(new AjaxUpdatedControl { ControlID = grdListEvents.ID, LoadingPanelID = alpAddEditEvents.ID });

ajaxSetting.UpdatedControls.Add(new AjaxUpdatedControl { ControlID = lstEventPhotosEdit.ID, LoadingPanelID = null });

rampAddEditFilters.AjaxSettings.Add(ajaxSetting);

ajaxSetting = new AjaxSetting();

ajaxSetting.AjaxControlID = btnSaveEditEvent.ID;

ajaxSetting.UpdatedControls.Add(new AjaxUpdatedControl { ControlID = grdListEvents.ID, LoadingPanelID = alpAddEditEvents.ID });

ajaxSetting.UpdatedControls.Add(new AjaxUpdatedControl { ControlID = lstEventPhotosEdit.ID, LoadingPanelID = null });

rampAddEditFilters.AjaxSettings.Add(ajaxSetting);

}

I use a RadAsyncUpload control to upload a single file to a location on the server and then I save the name of the file within our database. That name is then displayed within the RadListView. This is done when the user clicks on the RadButton "btnSaveEditEvent". This mechanism also works. The file is uploaded, and the file name is saved within the database, and then the RadWindow is closed.

The problem is that if the user click on the "Edit" button within the Nested RadGrid again to open the RadWindow (for example, to add another file later on) the RadWindow opens, but does not display the previously added file name within the RadListView. The WCF service does not get invoked. I have looked all over the Telerik forums and I searched the Internet for an answer, but I have been unsuccessful. What am I doing wrong? I'd really appreciate any help.

ListView

answered on 25 Feb 2016

1 answer

129 views

Compare ItemTemplate value to RadTextBox

i have grid

<telerik:GridTemplateColumn DataField="Mark" DataType="System.Int16" FilterControlAltText="Filter Mark column" HeaderText="Mark" SortExpression="Mark" UniqueName="Mark">

<ItemTemplate>

<asp:TextBox ID="txtMark" runat="server" Text='<%# Bind("Mark") %>' Width="50px" AutoPostBack="True" Font-Names="Arial" Font-Size="Small"></asp:TextBox>

</ItemTemplate>

<HeaderStyle Font-Names="Arial" Font-Size="Small" />

<ItemStyle Font-Names="Arial" Font-Size="Small" />

</telerik:GridTemplateColumn>

and a Radtextbox outside the grid

i would like to compare the value from the ItemTeplate to the one in the RadTextbox and if the itemplate value is greater than the RadTextbox throw a msg.

Can anyone help?

Grid

answered on 25 Feb 2016