Questions on UI for ASP.NET AJAX Forum

4 answers

307 views

Batch grid, add new row, create template column elements

As I understand from reading various posts, when the Grid is in Batch mode, and you add a new row (via "Add new record" button or with the javascript addNewRecord function via batch manager) it only creates a new tr element, but doesn't populate it with the components that make up the columns you've defined. Instead, it appears you have to manually create those elements in code. This doesn't make sense to me, but seems it should be part of the built-in functionality when the tr element is added. The current result is the new row is basically worthless.

Still, if that's how you insist it must be done, please help me with my grid below. After a new row is added (via the javascript below which is called from a button separate from the grid) it appears I need to use OnRowCreated to populate all the columns with the necessary elements. Is that correct? If so, can you take my grid below and give me the javascript for how this is done? I can't find any concrete examples on the forum or in your help docs.

var grd = GetControlRAD("grdPODetails");

var masterTable = grd.get_masterTableView();

var batchManager = grd.get_batchEditingManager();

batchManager.addNewRecord(masterTable);

<telerik:RadGrid ID="grdPODetails" runat="server" AllowSorting="True" AutoGenerateColumns="False" Skin="Office2010Blue" GridLines="None">

<HeaderContextMenu EnableAutoScroll="True">

</HeaderContextMenu>

<MasterTableView CommandItemDisplay="Top" EditMode="Batch" InsertItemDisplay="Bottom"

ClientDataKeyNames="PurchaseOrderDetailKey"

DataKeyNames="PurchaseOrderDetailKey">

<BatchEditingSettings EditType="Cell" OpenEditingEvent="Click" />

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

<NoRecordsTemplate>

No detail lines to display.

</NoRecordsTemplate>

<Columns>

<telerik:GridTemplateColumn DataField="PrintOnPurchaseOrder" HeaderText="Print" UniqueName="PrintOnPurchaseOrder" DataType="System.Boolean">

<HeaderStyle Width="40px" />

<ItemStyle Width="40px" />

<ItemTemplate>

<input id="chkPrintRead" type="checkbox" checked='<%# Eval("PrintOnPurchaseOrder") %>' onclick="changeCheckbox(this);" />

</ItemTemplate>

<EditItemTemplate>

<asp:CheckBox ID="chkPrint" runat="server" Checked='<%# Bind("PrintOnPurchaseOrder") %>' />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="ChartOfAccountNumber" UniqueName="ChartOfAccountNumber" HeaderText="Account Number" DataType="System.String" >

<ItemTemplate>

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

Text='<%# Eval("ChartOfAccountNumber") %>'>

</asp:Label>

</ItemTemplate>

<EditItemTemplate>

<span style="width:100%; display:inline-block; white-space:nowrap">

<telerik:RadTextBox ID="txtChartOfAccountNumber" runat="server" MaxLength="36" Width="90%"

Text='<%# Bind("ChartOfAccountNumber") %>'>

<ClientEvents OnValueChanged="Grid_COANumChanged" />

</telerik:RadTextBox>

<asp:ImageButton ID="imgChartOfAccountNumber" OnClientClick="Grid_COANumSearch(this); return false;" runat="server"

ImageUrl="images/icons/search-16.png" TabIndex="-1" ToolTip="Search" style="vertical-align:middle" />

</span>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="PurchaseOrderDetailQuantity" HeaderText="Quantity" UniqueName="PurchaseOrderDetailQuantity" DataType="System.Double">

<ItemTemplate>

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

Text='<%# Eval("PurchaseOrderDetailQuantity") %>'>

</asp:Label>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadNumericTextBox ID="txtPurchaseOrderDetailQuantity" runat="server" DataType="System.Decimal" MaxLength="23" Width="100%"

IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"

DbValue='<%# Bind("PurchaseOrderDetailQuantity") %>' Type="Number" NumberFormat-DecimalDigits="4" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="UnitPrice" HeaderText="UnitPrice" UniqueName="UnitPrice" DataType="System.Double">

<ItemTemplate>

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

Text='<%# Eval("UnitPrice") %>'>

</asp:Label>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadNumericTextBox ID="txtUnitPrice" runat="server" DataType="System.Decimal" MaxLength="23" Width="100%"

IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"

DbValue='<%# Bind("UnitPrice") %>' Type="Number" NumberFormat-DecimalDigits="4" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="UnitDescription" UniqueName="UnitDescription" HeaderText="Unit Desc" DataType="System.String">

<ItemTemplate>

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

Text='<%# Eval("UnitDescription") %>'>

</asp:Label>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadTextBox ID="txtUnitDescription" runat="server" MaxLength="10" Width="100%"

Text='<%# Bind("UnitDescription") %>' >

</telerik:RadTextBox>

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridTemplateColumn DataField="PurchaseOrderDetailAmount" HeaderText="Amount" UniqueName="PurchaseOrderDetailAmount" DataType="System.Double">

<ItemTemplate>

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

Text='<%# Eval("PurchaseOrderDetailAmount") %>'>

</asp:Label>

</ItemTemplate>

<EditItemTemplate>

<telerik:RadNumericTextBox ID="txtPurchaseOrderDetailAmount" runat="server" DataType="System.Decimal" MaxLength="21" Width="100%"

IncrementSettings-InterceptArrowKeys="false" Culture="English (United States)"

DbValue='<%# Bind("PurchaseOrderDetailAmount") %>' Type="Number" NumberFormat-DecimalDigits="2" />

</EditItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridNumericColumn DataField="PurchaseOrderDetailKey" HeaderText="PurchaseOrderDetailKey"

UniqueName="PurchaseOrderDetailKey" DataType="System.Int32" Visible="False" ReadOnly="True">

</telerik:GridNumericColumn>

<telerik:GridClientDeleteColumn ConfirmText="Are you sure you want to delete the selected item?"

ButtonType="LinkButton" Text="Delete" UniqueName="DeleteColumn" >

<HeaderStyle Width="50px" HorizontalAlign="Right" />

<ItemStyle Width="50px" HorizontalAlign="Right" />

</telerik:GridClientDeleteColumn>

</Columns>

</MasterTableView>

<ClientSettings AllowKeyboardNavigation="true">

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowSelected="RowSelected" OnBatchEditCellValueChanged="BatchEditCellValueChanged" />

</ClientSettings>

</telerik:RadGrid>

Grid

answered on 01 Apr 2016

1 answer

121 views

RowDragDrop + Add New Record

Hi - I've been able to setup RadGrids which use either the row dragging functionality to reorder rows OR the batch edit command to allow for batch editing / inserting of data. However, I'm trying to combine the two in one grid now and I'm having an issue if I try to move a record which I've created.

<telerik:RadGrid ID="rg" runat="server" OnNeedDataSource="rg_NeedDataSource" OnRowDrop="rg_RowDrop"

OnBatchEditCommand="rg_BatchEditCommand" Width="550px">

<ClientSettings AllowRowsDragDrop="true">

<Selecting AllowRowSelect="true" />

</ClientSettings>

<MasterTableView AutoGenerateColumns="False" DataKeyNames="ID" EditMode="Batch" CommandItemDisplay="Top">

<BatchEditingSettings EditType="Row" />

<Columns>

<telerik:GridBoundColumn DataField="Name" HeaderText="Name" HeaderStyle-Width="100px" />

<telerik:GridBoundColumn DataField="Value" HeaderText="Value" HeaderStyle-Width="50px" />

</Columns>

</MasterTableView>

</telerik:RadGrid>

protected void rg_NeedDataSource(object sender, EventArgs e)

{

DataTable dt = new DataTable();

dt.Columns.Add("ID");

dt.Columns.Add("Name");

dt.Columns.Add("Value");

dt.Rows.Add(1, "Name 1", "Value 1");

dt.Rows.Add(2, "Name 2", "Value 2");

rg.DataSource = dt;

}

protected void rg_RowDrop(object sender, GridDragDropEventArgs e)

{

// Update datasource

}

protected void rg_BatchEditCommand(object sender, GridBatchEditingEventArgs e)

{

// Update datasource

}

The error occurs if the user creates a new row and then attempts to drag that row - I've attached a screenshot that shows the error as well as the steps necessary to produce it. The user can still drag existing rows without any issues, although this causes the new row to disappear and it does not appear to be accessible in the server-side RowDrop event (which is understandable, although still undesirable). My ideal solution would be a way to allow the user to add and edit rows, as well as being able to drag the rows to reorder them, all on the client-side without any server-side postbacks, before hitting a save button (either internal to the RadGrid or outside of it) which causes a single postback and allows all of the information necessary for each row (the data values as well as its row index) to be available on the server-side. If that is not possible, I could live with a single postback after each row is added or moved, but I'm not sure how to make the RadGrid cause a postback after an item is added.

Thanks.

Grid

answered on 01 Apr 2016

9 answers

445 views

[Solved] RadWizard control in ASP.NET AJAX?

I have found a number of pages in the demos about an ASP.NET AJAX Wizard control (for example http://demos.telerik.com/aspnet-ajax/wizard/overview/defaultcs.aspx?skin=Sunset). But this control does not seem to exist in my Visual Studio toolbox and if I type the actual control name into a Visual Studio project .aspx file I receive compilation errors.

What am I missing? Does this control exist or not? If so, how do I access it/use it?

Thanks in advance for any assistance!

Lynn

Wizard

answered on 01 Apr 2016

9 answers

214 views

getSelectedElement issue in Chrome selects entire body

We have a custom dialog added to the radeditor that allows a user to select an image and open a pop-up window. Everything has worked as expected until recently. The functionality still works correctly in Firefox, but not in Chrome, Safari, or Opera; I believe those 3 use web-kit

When choosing 'inspect element' in Chrome, the body tag is highlighted for the image in the 'Elements' tab of the developer tools window, whereas, when doing the same thing in Firefox, the image tag is highlighted for the image in the 'Inspector' tab of the developer tools window.

There is an older post that references this same issue: http://www.telerik.com/forums/getselectedelement-issue-on-ff-e-chrome

The version of Telerik we are using is: 2015.3.930.45

However, we've been on that version for a while now. The issue we're experiencing seems to be relatively new as our users would have already alerted us since the related functionality is used quite frequently.

The version of Chrome that I used to test the issue is: Version 46.0.2490.86 m (64-bit). I suspect our users are at the same version since Chrome auto-updates itself.

Please let me know what additional information I can provide.

Thanks!

Editor

answered on 31 Mar 2016

2 answers

138 views

[Solved] Issue while using Javascript

Hi i am Akhtar Abbas i am using telerik controls in my ASP.NET web application. I am currently designig a login page i am using RadStyleSheetManager, RadAjaxManager, RadAjaxLoadingPanel and RadCodeBlock. the HTML for the page is below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AccessCenter.Login" %>

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">

    <title>Log In</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
    <div class="wrapper">
        <div class="back1">

            <p class="title">Evac</p>
            <form runat="server" id="form1" class="login">
                <asp:ScriptManager runat="server" ID="smLogin"></asp:ScriptManager>

                <telerik:RadStyleSheetManager runat="server">
                    <StyleSheets>
                        <telerik:StyleSheetReference Path="css/normalize.css" />
                        <telerik:StyleSheetReference Path="css/login.css" />
                    </StyleSheets>
                </telerik:RadStyleSheetManager>

                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="btnLogin">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="form1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="txtUserName"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="txtPassword"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>

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

                <asp:TextBox runat="server" ID="txtUserName" placeholder="Username" autofocus></asp:TextBox>

                <asp:TextBox runat="server" ID="txtPassword" placeholder="Password"></asp:TextBox>

                <asp:TextBox runat="server" ID="txtCaptcha" CssClass="captcha-fld"></asp:TextBox>

                <asp:TextBox runat="server" ID="txtCaptchaText" CssClass="captcha-fld-type"></asp:TextBox>

                <button>
                    <i class="spinner"></i>
                    <asp:Button runat="server" ID="btnLogin" CssClass="login-submit" OnClick="btnLogin_Click" />
                </button>
                <asp:Label ID="lblError" runat="server" ForeColor="Red" Visible="false"></asp:Label>
                <a href="#">Forgot your password?</a>
                <a class="right2" href="#">Sign Up</a>

                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                    <script src="js/index.js" type="text/javascript"></script>
                </telerik:RadCodeBlock>
            </form>
        </div>
        <footer></footer>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

I also have added settings in web.config.

<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
    <add key="Telerik.Web.UI.StyleSheetFolders" value="~/css" />
</appSettings>
<system.web>
    <httpHandlers>
      <add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI" validate="false" />
    </httpHandlers>

</system.web>
<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules>
      <remove name="ApplicationInsightsWebTracking"/>
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler"/>
    </modules>
    <handlers>
      <add name="Telerik_Web_UI_DialogHandler_aspx" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler"/>
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler"/>
      <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource"/>
    </handlers>
</system.webServer>

when i load my page then i have got the following error on the page

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

How to resolve this?
Note: These controls are purchased controls
I neet urgent responce please reply me as fast as possible because i have deadline of the project

ScriptManager and StyleSheetManager

answered on 31 Mar 2016

8 answers

119 views

[Solved] Parent Grid Record selection movement with Window next /Prev Last First Button

Hi

I have a scenario...

1. Grid with data is generated in Parent page.

2. On Double click of the any record in grid its opening details in a rad window.

3. From the window If i have next previous buttons i nee to get id of the next or previous record of the parent grid and same time its need to highlight the next/previous record. Also need to move to next page first record if last record of first page.

Please help with a sample code.

Please see attached image

Grid

answered on 31 Mar 2016

1 answer

306 views

Image does not display for Telerik RadCaptcha control

I have a Telerik RadCaptcha control on my login page. However, despite all the settings and references included, the image does not display. It is working alright though, it is validating the captcha. The only problem is that since the image does not display, there is no way anybody can get it right. Have attached a snapshot too.

Captcha

answered on 31 Mar 2016

6 answers

518 views

Filter - Contains not working

Hi,
I have a radgrid. Within this I have enabled filtering. I have set the filter type to Combined.
In the gridboundcolumn I have specified ‘Contains’ as the CurrentFilterFunction. However despite this when I filter the column I only ever get rows returned that exactly match the filter, so I presume it’s enforcing an ‘EqualsTo’ filter.
Is this by design or a bug?

Thanks.

Grid

answered on 31 Mar 2016

6 answers

197 views

Key board Navigation in radgrid

Hi,

I am having an issue with the rad grid with keyboard navigation. I am in trial version and new to Telerik. When I use the below code for the key board navigation ,the keys doesn't works. But it works when I remove the EnablePostBackOnRowClick but the grid is not populated.

ClientSettings AllowKeyboardNavigation="true" EnablePostBackOnRowClick="true" >
<Selecting AllowRowSelect="true" />
<Scrolling AllowScroll="True" UseStaticHeaders="True" />

</ClientSettings>

Thanks,

Sindhu

Grid

answered on 31 Mar 2016

1 answer

151 views

Issue with Loading Panel while using Javascript

Hi i am Akhtar Abbas i am using telerik controls in my ASP.NET web application. I am currently designig a login page i am using RadStyleSheetManager, RadAjaxManager, RadAjaxLoadingPanel and RadCodeBlock. the HTML for the page is below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="AccessCenter.Login" %>

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta charset="utf-8">

    <title>Log In</title>
    <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,700' rel='stylesheet' type='text/css'>
      <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
</head>
<body>
    <div class="wrapper">
        <div class="back1">

            <p class="title">Evac</p>
            <form runat="server" id="form1" class="login">
                <asp:ScriptManager runat="server" ID="smLogin"></asp:ScriptManager>

                <telerik:RadStyleSheetManager runat="server">
                    <StyleSheets>
                        <telerik:StyleSheetReference Path="css/normalize.css" />
                        <telerik:StyleSheetReference Path="css/login.css" />
                    </StyleSheets>
                </telerik:RadStyleSheetManager>

                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
                    <AjaxSettings>
                        <telerik:AjaxSetting AjaxControlID="btnLogin">
                            <UpdatedControls>
                                <telerik:AjaxUpdatedControl ControlID="form1" LoadingPanelID="RadAjaxLoadingPanel1"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="txtUserName"></telerik:AjaxUpdatedControl>
                                <telerik:AjaxUpdatedControl ControlID="txtPassword"></telerik:AjaxUpdatedControl>
                            </UpdatedControls>
                        </telerik:AjaxSetting>
                    </AjaxSettings>
                </telerik:RadAjaxManager>

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

                <asp:TextBox runat="server" ID="txtUserName" placeholder="Username" autofocus></asp:TextBox>

                <asp:TextBox runat="server" ID="txtPassword" placeholder="Password"></asp:TextBox>

                <asp:TextBox runat="server" ID="txtCaptcha" CssClass="captcha-fld"></asp:TextBox>

                <asp:TextBox runat="server" ID="txtCaptchaText" CssClass="captcha-fld-type"></asp:TextBox>

                <button>
                    <i class="spinner"></i>
                    <asp:Button runat="server" ID="btnLogin" CssClass="login-submit" OnClick="btnLogin_Click" />
                </button>
                <asp:Label ID="lblError" runat="server" ForeColor="Red" Visible="false"></asp:Label>
                <a href="#">Forgot your password?</a>
                <a class="right2" href="#">Sign Up</a>

                <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
                    <script src="js/index.js" type="text/javascript"></script>
                </telerik:RadCodeBlock>
            </form>
        </div>
        <footer></footer>
    </div>
    <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
</body>
</html>

I also have added settings in web.config.

<appSettings>
    <add key="ValidationSettings:UnobtrusiveValidationMode" value="None"/>
    <add key="Telerik.Web.UI.StyleSheetFolders" value="~/css" />
</appSettings>
<system.web>
    <httpHandlers>
      <add path="Telerik.Web.UI.WebResource.axd" verb="*" type="Telerik.Web.UI.WebResource, Telerik.Web.UI" validate="false" />
    </httpHandlers>

</system.web>
<system.webServer>
    <validation validateIntegratedModeConfiguration="false"/>
    <modules>
      <remove name="ApplicationInsightsWebTracking"/>
      <add name="ApplicationInsightsWebTracking" type="Microsoft.ApplicationInsights.Web.ApplicationInsightsHttpModule, Microsoft.AI.Web" preCondition="managedHandler"/>
    </modules>
    <handlers>
      <add name="Telerik_Web_UI_DialogHandler_aspx" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.DialogHandler.aspx" type="Telerik.Web.UI.DialogHandler"/>
      <add name="Telerik_Web_UI_SpellCheckHandler_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.SpellCheckHandler.axd" type="Telerik.Web.UI.SpellCheckHandler"/>
      <add name="Telerik_Web_UI_WebResource_axd" verb="*" preCondition="integratedMode" path="Telerik.Web.UI.WebResource.axd" type="Telerik.Web.UI.WebResource"/>
    </handlers>
</system.webServer>

when i load my page then i have got the following error on the page

The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>).

How to resolve this?
Note: These controls are purchased controls
I neet urgent responce please reply me as fast as possible because i have deadline of the project

AjaxLoadingPanel

answered on 31 Mar 2016