Questions on UI for ASP.NET AJAX Forum

2 answers

127 views

I am attempting to develop a solution based on the example provided at:

https://demos.telerik.com/aspnet-ajax/grid/examples/data-binding/client-side/client-data-source-binding/defaultcs.aspx?product=clientdatasource

As such, I am using BatchMode editing, binding a client datasource and all insert, update, delete done by calling Web Services from the clientside.

The grid is retrieving and displaying data successfully. I can update records and delete records, with the respective Web Services being called to update and delete successfully.

However, when I "Add new record", type in values, and hit "Save Changes", I can see in Chrome developer mode that there is no call to the Web Service so my data is not actually saved. There are no errors in the console either.

<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" AllowPaging="false" AllowSorting="true" AllowFilteringByColumn="false" ClientDataSourceID="RadClientDataSource1" >

<MasterTableView ClientDataKeyNames="KeyName" EditMode="Batch" CommandItemDisplay="Top" BatchEditingSettings-HighlightDeletedRows="true" >

<Columns>

<telerik:GridBoundColumn DataField="KeyName" HeaderText="Parameter" DataType="System.String" HeaderStyle-Font-Bold="true" />

<telerik:GridBoundColumn DataField="KeyValue" HeaderText="Value" DataType="System.String" HeaderStyle-Font-Bold="true" />

<telerik:GridBoundColumn DataField="KeyType" HeaderText="Type" DataType="System.String" HeaderStyle-Font-Bold="true" />

<telerik:GridBoundColumn DataField="Description" HeaderText="Description" DataType="System.String" HeaderStyle-Font-Bold="true" />

<telerik:GridBoundColumn DataField="SplitPassword" HeaderText="Split Password" DataType="System.String" HeaderStyle-Font-Bold="true" />

<telerik:GridClientDeleteColumn HeaderText="Delete" HeaderStyle-Width="70px" HeaderStyle-Font-Bold="true" />

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="500px" />

</ClientSettings>

</telerik:RadGrid>

<telerik:RadClientDataSource ID="RadClientDataSource1" runat="server" AllowBatchOperations="true">

<ClientEvents OnCustomParameter="ParameterMap" />

<DataSource>

<WebServiceDataSourceSettings BaseUrl="API/SysParm.asmx/">

<Insert Url="InsertSystemParameters" RequestType="Post" ContentType="application/json" DataType="JSON" />

<Select Url="GetSystemParameters" RequestType="Post" ContentType="application/json" DataType="JSON" />

<Update Url="UpdateSystemParameters" RequestType="Post" ContentType="application/json" DataType="JSON" />

<Delete Url="DeleteSystemParameters" RequestType="Post" ContentType="application/json" DataType="JSON" />

</WebServiceDataSourceSettings>

</DataSource>

<Schema ResponseType="JSON" DataName="d" >

<Model ID="KeyName">

<telerik:ClientDataSourceModelField FieldName="KeyName" DataType="String" />

<telerik:ClientDataSourceModelField FieldName="KeyValue" DataType="String" />

<telerik:ClientDataSourceModelField FieldName="Description" DataType="String" />

<telerik:ClientDataSourceModelField FieldName="KeyType" DataType="String" />

<telerik:ClientDataSourceModelField FieldName="SplitPassword" DataType="String" />

</Model>

</Schema>

<SortExpressions>

<telerik:ClientDataSourceSortExpression FieldName="KeyName" SortOrder="Desc" />

</SortExpressions>

</telerik:RadClientDataSource>

This is an example of a record in the dataset:

{

"d": [{

"__type": "CAMAPI.SystemParameter",

"KeyName": "AD_GROUPS_APP_ID",

"KeyValue": "2",

"Description": "",

"KeyType": "APP_ID",

"SplitPassword": ""

}]

}

My ParameterMap function is as follows:

function ParameterMap(sender, args) {

if (args.get_type() != "read" && args.get_data()) {

var data = "{ \"parameters\": " + JSON.stringify(args.get_data().models) + "}";

args.set_parameterFormat(data);

}

Can you see anything to explain why inserts are not working?

Grid

answered on 17 Dec 2019

4 answers

710 views

Change Active Tab and Step Title

Hello, I am running into two issues with the RadWizard and related controls. Here is the scenario we have for our page setup:

The first "step" of the wizard contains a RadSearchBox and a RadGrid. The user locates a client from the SearchBox and their information is loaded into the grid. The user can then click on an Edit button on the grid row for the record they want to edit.

At this point we then load all of the data for that record into the next wizard step. What we want to do at this point is automatically switch to the next step from the server and then update the step's title from "Add New Record" to "Edit Record".

I have been searching for a way to do this about six months. We are using a fairly old build of Telerik, I believe circa Q1 or Q2 2013. I have tried the following but they have not worked:

Changing the active step via the RadWizard1.ActiveStepIndex property, setting RadWizard1.Steps(0).Active to false and (1) to true

For changing the Title I have tried RadWizard1.Steps(1).Title and tried setting the title directly using RadWizardStep2.Title

None of those have worked either within the Edit button OnClick function nor within the PageLoad or PageLoadCompleted functions for the page (I had thought maybe the default properties for the wizard ands steps were overwriting the changes on postback).

I have not tried using a Javascript function yet but we would like to do this server-side if possible.

Thanks.

Wizard

answered on 17 Dec 2019

4 answers

286 views

Table Wizard - "scope" attribute for tables

these pages shows the accessibility standards for tables.
https://www.w3.org/WAI/tutorials/tables/
https://www.w3.org/WAI/tutorials/tables/two-headers/
https://www.w3.org/WAI/tutorials/tables/irregular/

For these two sub links "Tables with two headers" & "Tables with irregular headers", they are looking for "scope=col", "scope=row", "scope=colgroup", "scope=rowgroup".

There doesn't seem to be any built in support for "scope" to be added when using the table wizard, having set on the Accessibility tab a Heading for both a Row & Column.

How can support for "scope" be added to tables created in the Rich Text Editor?

Editor

answered on 17 Dec 2019

2 answers

499 views

Display RadioButtonList Items as Buttons

We would like to have a radioButtonList with the ButtonListItems displayed as buttons (preferably toggle buttons) as shown in the example URL.

https://docs.telerik.com/devtools/aspnet-ajax/controls/radiobuttonlist/appearance-and-styling/skins

It appears that the RadioButtonList is like other controls in that we just set the Skin. The instructions say "To apply a skin to a RadRadioButtonList control, set its Skin property." which I did, and I see the style change. However, the items do not appear like the screenshot (i.e. as buttons) and remain radio/text items.

I have included my testpage that has a RadioButtonList and Toggle Buttons. It also has a SkinManager so I can see the skin changes taking effect on the controls, but unfortunately they do not appear as buttons in any skin.

Is there some property I am missing?

Thanks for any help

Telerik.Web.UI Version 2019.3.903.40

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestingPage.aspx.vb" Inherits="TelerikQuickQuote.TestingPage" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
            <telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager1" />
            <telerik:RadSkinManager runat="server" ID="RadSkinManager1" ShowChooser="true" RenderMode="Lightweight" />

            <hr />

            <telerik:RadRadioButtonList ID="RBL_Gender" runat="server"
                 RenderMode="Lightweight" Layout="Flow" >
                <Items>
                    <telerik:ButtonListItem Text="Male" Value="1" />
                    <telerik:ButtonListItem Text="Female" Value="2" />

                </Items>
            </telerik:RadRadioButtonList>

            <hr />

            <telerik:RadButton ID="TBTN_Male" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="Gender">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Male" />
                    <telerik:RadButtonToggleState Text="Male" />
                </ToggleStates>
            </telerik:RadButton>
            <telerik:RadButton ID="TBTN_Female" runat="server" ToggleType="Radio" ButtonType="StandardButton" GroupName="Gender">
                <ToggleStates>
                    <telerik:RadButtonToggleState Text="Female" />
                    <telerik:RadButtonToggleState Text="Female" />
                </ToggleStates>
            </telerik:RadButton>

        </div>
    </form>
</body>
</html>

RadioButtonList

answered on 17 Dec 2019

1 answer

114 views

Date Localization in javascript

Hello,

We have an application that is being hosted both USA and UK.

In there we have few javascriptf unctions.

1. Copy a date from raddatepicker to another

e.g. StartDate to SalaryStartDate in certain situaltions

2. Compares a manually entered date to be in a range

e.g. SalaryStartDate should be between StartDate and EndDate

It loads the date properly from server side, also when manually selected it shows in correct format but it fails in javascript while assigning or comparing

Can anyone please help me figure out the solution?

Thanks

Calendar

answered on 17 Dec 2019

1 answer

210 views

Disabling Embedded Resources

Hello!

I'm in the process of upgrading our product from version 2013.1.403.35 to the latest version. I understand that in the 2014 Q1 release, there has been some restructuring done to the scripts and the skins. While I've figured out how to handle the deprecated skins, I'm running into script errors when rendering to the page. We're making use of the "EnableEmbeddedScripts = false" to ensure faster rendering via script proxies. Can you please provide the exact list of files needed along with the proper order that needs to be observed? I'm following this KB article, but I'm still unable to get my component working. The component consists of:
RadAjaxPanel
RadAjaxLoadingPanel
RadToolBar
RadTextBox
RadGrid
RadContextMenu
RadWindowManager
RadWindow

Thank you very much for you attention! I hope my error is something simple.

Grid

answered on 17 Dec 2019

2 answers

115 views

Rad Tilelist Server-side click event Primary Key?

Hi There

I'm using a RadTileList to display a range of items from a SQL DB.
I want each tile to link to a certain (the same) page and also provide the "ID" field of that item in a querystring. But I'm not sure how to accomplish this.

So I currently have this:

<telerik:RadTileList runat="server" ID="tileListSticky" AppendDataBoundItems="true" RenderMode="Classic"

Width="100%" TileRows="4" OnTileDataBound="RadTileList1_OnTileDataBound" OnTileCreated="RadTileList1_OnTileCreated" Skin="Sunset" ScrollingMode="Auto" SelectionMode="Single" AutoPostBack="true" OnTileClick="tileListSticky_TileClick">

Importantly, the "OnTileClick" part fires an event, but I'm not sure how to go about getting the "ID" field of the item in the DB. It's not specifically bound to the tile either.

Regards
JohannS

TileList

answered on 16 Dec 2019

6 answers

242 views

Invalid JSON primitive after bulk update of all date pickers

Hello,

I have a RadGrid used in EditMode. One of the column has a RadDatePicker in the EditItemTemplate. I want to update all these RadDatePicker on the client side when the value of another RadDatePicker is changed. I manage to update all the date picker in the grid with JQuery doing this:

function rdpPaymentDate_ClientClick() {

var rdp = $find("<%= rdpPmtDate.ClientID %>");

var date = rdp.get_selectedDate();

$("input[id*='rdpPaymentDate_dateInput']").val(date.mmddyy());

}

Date.prototype.mmddyy = function () {

var mm = this.getMonth() + 1; // getMonth() is zero-based

var dd = this.getDate();

return [

(mm > 9 ? '' : '0') + mm,

(dd > 9 ? '' : '0') + dd,

this.getFullYear()

].join('/');

};

When i submit my page to update my data, it says Invalid JSON primitive: 29/2019. Where 29 and 2019 are the day and year of the new date I had selected.

How can I update client side all the RadDatePicker controls at once please?

Thank you

Gregory

DatePicker

answered on 16 Dec 2019

1 answer

90 views

Any new skin release in Telerik version 2019

Hi,
Any new skin release with latest version 2019 ? i am used Metro Theme , but it not look to good -- screenshot https://prntscr.com/qaaikf.
Any other new skin released, where i can see new release notes.

Thanks

General Discussions

answered on 16 Dec 2019

3 answers

201 views

RadGrid in content page not updating

Hello,

I have the following structure:

Master Page
Master Menu
Contentplaceholder (side bar)
Contentplaceholder (main content)

The master menu loads content pages that have content specific navigation in the side bar.

The problem I'm having is with a content page that has a dropdown and a RadMenu in the "side bar" placeholder that are used to change selectparameters for a grid in the "main content" placeholder.
I can get a label in the "main content" to update, but the grid won't rebind. SQL server profiler shows no activity, so the rebind isn't firing for some reason.

Thx in advance for help and/or pointers !!

Mater Page

<telerik:RadScriptManager runat="server"></telerik:RadScriptManager>

<telerik:RadAjaxManager ID="AjaxMgr1" runat="server" />

< ... some RadPageLayout directives ... >

<%--Main Nav--%>

<telerik:RadMenu ID="RadMenu1" runat="server" RenderMode="Auto">

<Items>

<telerik:RadMenuItem Text="Home" NavigateUrl="Default.aspx" />

< .. more stuff .. >

</Items>

</telerik:RadMenu>

<%--Main--%>

<telerik:LayoutRow>

<Columns>

<%--Sidebar--%>

<telerik:LayoutColumn Span="2" HiddenMd="true" HiddenSm="true" HiddenXs="true">

<asp:ContentPlaceHolder ID="SidebarPlaceHolder" runat="server">

</asp:ContentPlaceHolder>

</telerik:LayoutColumn>

<%--Content--%>

<telerik:CompositeLayoutColumn Span="10" SpanMd="12" SpanSm="12" SpanXs="12">

<Content>

<asp:panel runat="server" ID="GridPanel">

<asp:ContentPlaceHolder ID="MainPlaceHolder" runat="server">

</asp:ContentPlaceHolder>

</asp:panel>

</Content>

</telerik:CompositeLayoutColumn>

</Columns>

</telerik:LayoutRow>

Content Page

<asp:Content ID="SBContent" ContentPlaceHolderID="SidebarPlaceHolder" Runat="Server">

<telerik:RadAjaxManagerProxy runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="usrDD">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="RadMenu2">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="GridPanel" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

<telerik:RadDropDownList ID="usrDD" runat="server" Width="205px" ZIndex="10000" AutoPostBack="true"

DataSourceID="employeeDS" DataValueField="idx" DataTextField="FullName" OnItemSelected="usrDD_ItemSelected">

<Items><telerik:DropDownListItem Selected="true" Text="Select Employee" /></Items>

</telerik:RadDropDownList>

<telerik:RadMenu ID="RadMenu2" CssClass="sidebar" Flow="Vertical" runat="server" OnItemClick="RadMenu2_ItemClick" >

<Items>

<telerik:RadMenuItem Text="Common Systems" Value="1" Selected="true"/>

< .. more stuff .. >

</Items>

</telerik:RadMenu>

<asp:SqlDataSource ID="employeeDS" .......

</asp:Content>

<asp:Content ID="MainContent" ContentPlaceHolderID="MainPlaceHolder" runat="server">

<telerik:RadAjaxManagerProxy runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

<telerik:AjaxUpdatedControl ControlID="SavedChangesList" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManagerProxy>

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

<h3><asp:Label runat="server" ID="lblHeader" Text="some text" /></h3>

<telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" GridLines="None" runat="server" AllowAutomaticDeletes="True"

MasterTableView-CommandItemSettings-ShowAddNewRecordButton="false"

AllowAutomaticInserts="true" PageSize="10" OnItemDeleted="RadGrid1_ItemDeleted" OnItemInserted="RadGrid1_ItemInserted"

OnItemUpdated="RadGrid1_ItemUpdated" OnPreRender="RadGrid1_PreRender" AllowAutomaticUpdates="True" AllowPaging="True"

AutoGenerateColumns="False" OnBatchEditCommand="RadGrid1_BatchEditCommand" DataSourceID="SqlDataSource1">

<MasterTableView CommandItemDisplay="TopAndBottom" DataKeyNames="idx"

DataSourceID="SqlDataSource1" HorizontalAlign="NotSet" EditMode="Batch" AutoGenerateColumns="False">

< .. more grid stuff .. >

<asp:SqlDataSource ID="SqlDataSource1" ......

</asp:Content>

Content page Code

protected void RadMenu2_ItemClick(object sender, RadMenuEventArgs e)

{

lblHeader.Text = e.Item.Text;

SqlDataSource1.SelectParameters.Add("parent", e.Item.Value);

SqlDataSource1.SelectParameters.Add("employee", usrDD.SelectedValue);

}

protected void usrDD_ItemSelected(object sender, DropDownListEventArgs e)

{

SqlDataSource1.SelectParameters.Add("employee", e.Value);

SqlDataSource1.SelectParameters.Add("parent", RadMenu2.SelectedValue);

RadGrid1.Rebind();

}

Ajax

answered on 16 Dec 2019