Questions on UI for ASP.NET AJAX Forum

7 answers

167 views

I'm implementing the ASP.NET/AJAX ComboBox as a grid, starting from the samples. This is my first time using 3rd party controls in ASP, and the documentation is great to get me started, thanks!
The samples work great at a broad level, and I can load my data, all the basics work and initial prototyping was nice and fast. Then I started tweaking bugs down at the next level, and I'm having problems.

Specifically, I'm having trouble with my RadComboBox Grid. Following the sample, every combo box dropdown row is an individual table, the columns don't line up as my database-loaded data exceeds the hard-coded column width. Once I strayed from the sample, things went poorly.

I originally expected the "combo grid" items to be all one table. Looking at the HTML page source, it looks like the Template items are added to an HTML list, one item per row, <ul><li></li>...</ul>? That was a surprise. Can I control whether a list or a table is used by the RadComboBox to generate the items? It would work fine if the RadComboBox emitted a wrapping <table>...<table>, and each template item were wrapped in a <tr>...</tr> or something similar.

Or, to ask more generally, is there a way I can have all my combo box grid items be in one table rather than many small 1-row tables?

ComboBox

answered on 29 Aug 2017

4 answers

614 views

Listen to GridButtonColumn click in javascript

Hi, i have a grid with a GridButtonColumn. When the button is clicked i want to redirect the user (in javascript, and pass a long the bound value of the GridButtonColumn). i found how to do this serverside, but i cant figure out how to catch the click (and the value) in javascript.

Any help would be appriciated.

Grid

answered on 29 Aug 2017

4 answers

944 views

radwindow hide bottom address bar

I would like to hide bottom address bar on Radwindow, how do I do this?

Window

answered on 29 Aug 2017

2 answers

109 views

How can we define different Timeline slot for different doctors in RadSchedular control?

Dear Team,
I would like share requirement in RadScheduler control.
I would like to mention current feature before describing requirement below:

Time Doctor1 Doctor2 Doctor3
9:00 am
9:10 am
9:20 am
9:30 am

Requirement is to define different Timeline slot (TimelineView-SlotDuration and MinutesPerRow property) for each doctors if select multiple doctors like Doctor1 is 10 minutes, Doctor2 is 15 minutes and Doctor3 is 20 minutes etc.
Also draw table below:

Time Doctor1 Time Doctor2 Time Doctor3
9:00 am 9:00 am 9:00 am
9:10 am 9:15 am 9:20 am
9:20 am 9:30 am 9:40 am
9:30 am 9:45 am 10:00 am

I will appreciate if you give me solution for above requirement.

Please inform me whether this type of feature is available in the existing or new version.
Please look attached screen shot.

Thanks & Regards,
Jiten Mutum

Scheduler

answered on 29 Aug 2017

0 answers

380 views

Uncaught TypeError: Cannot read property 'left' of undefined

I am using autocomplete box and when i am typing the letters in am getting the javascript error, but when i am using the same datasource (data table) and compoent inside the radwindow it works fine.

UI:

<telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="rad_txtTo" runat="server" InputType="Token" EmptyMessage="Select Contacts" Width="95%" DropDownPosition="Automatic"> </telerik:RadAutoCompleteBox>

Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:11507 Uncaught TypeError: Cannot read property 'left' of undefined
at c.DropDown._getDropDownHorizontalOffset (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:11507)
at c.DropDown.position (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:11406)
at c.DropDown._onDropDownReflowed (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:11467)
at b.DropDown.trigger (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:1789)
at b.DropDown.reflow (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:10232)
at b.DropDown.show (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:10151)
at c.DropDown.open (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:11404)
at c.RadAutoCompleteBox._populateDropDown (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:10963)
at c.RadAutoCompleteBox._onCallbackResponse (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bTelerik.Web.UI%2c+Version%3d2016.2.504.45%2c+Culture%3dneutral%2c+PublicKeyToken%3d121fae78165ba3d4%3aen-US%3a90ca7d67-b00e-437e-ad14-27cf2faf3a32%3a16e4e7cd%3af7645509%3a24ee1bba%3ac128760b%3a874f8ea2%3ab2e06756%3af46195d3%3a92fe8ea0%3afa31b949%3a4877f69a%3a33715776%3a19620875%3a490a9d4e%3abd8f85e4%3ab7778d6c%3ae085fe68%3aed16cbdc%3a1e771326%3a88144a7a%3a78b9daca%3a6d43f6d9%3a8674cba1%3a7c926187%3ac08e9f8a%3a59462f1%3aa51ee93e%3a58366029:10855)
at Object.eventCallback (Telerik.Web.UI.WebResource.axd?_TSM_HiddenField_=ctl00_rsmDefaultSiteMaster_TSM&compress=2&_TSM_CombinedScripts_=%3b%3bSystem.Web.Extensions%2c+Version%3d4.0.0.0%2c+Culture%3dneutral%2c+PublicKeyToken%3d31bf3856ad364e35%3aen-US%3a0506169f-fccc-46f8-a5ec-5e7be35dfbdd%3aea597d4b%3ab25378d2:6)

AutoCompleteBox

asked on 28 Aug 2017

14 answers

243 views

Chrome and Rad Grid Rendering issue

Hi Just wondering if someone can help.

I have a strange issue with Chrome and the way it seems to render my rad grid.
Zibrant Test Site

In firefox 10.0.2, IE 7,8,9 the grid renders correctly but in Chrome it seems to create a grid with a massive width on it and also messes up the grouping panel section as well. below is the grid.

<telerik:RadGrid ID="radGrid" runat="server" AutoGenerateColumns="False" OnNeedDataSource="radGrid_NeedDataSource"

AllowFilteringByColumn="True" AllowPaging="True" AllowSorting="True" ShowFooter="True"

ShowGroupPanel="True" ShowStatusBar="True" CellSpacing="0" OnColumnCreating="radGrid_ColumnCreating"

OnItemCommand="radGrid_ItemCommand" EnableLinqExpressions="false" Width="900px" >

<ExportSettings IgnorePaging="True" ExportOnlyData="true" OpenInNewWindow="true"

FileName="Event List" HideStructureColumns="true">

</ExportSettings>

<ClientSettings AllowColumnsReorder="True" AllowDragToGroup="True" AllowKeyboardNavigation="True">

<Scrolling AllowScroll="false" EnableVirtualScrollPaging="True" />

<Animation AllowColumnReorderAnimation="True" AllowColumnRevertAnimation="True" />

<ClientEvents OnRowDblClick="RowDblClick" />

</ClientSettings>

<MasterTableView NoDetailRecordsText="No Events Currently Listed" NoMasterRecordsText="No Events Currently Listed"

CommandItemDisplay="None" AllowMultiColumnSorting="True" EditMode="PopUp">

<CommandItemSettings ExportToPdfText="Export to PDF" ShowAddNewRecordButton="False"

ShowExportToExcelButton="True" ShowExportToCsvButton="True" ShowExportToPdfButton="True"

ShowExportToWordButton="True" />

<RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">

</RowIndicatorColumn>

<ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">

</ExpandCollapseColumn>

<Columns>

</Columns>

<EditFormSettings EditFormType="WebUserControl" UserControlName="~/Controls/EventEmailer.ascx"

PopUpSettings-Modal="true" PopUpSettings-Height="500" PopUpSettings-Width="900" CaptionDataField="TitleOfEvent">

<EditColumn FilterControlAltText="Filter EditCommandColumn column" UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<FilterMenu EnableImageSprites="False" EnableRoundedCorners="True">

</FilterMenu>

</telerik:RadGrid>

The columns are added at run time as I am using the google like filtering feature as demo'd on the site.

They are added like this:

if (!IsPostBack)

{

//clear items.

radGrid.MasterTableView.Columns.Clear();

//add events

EventList = LoadEvents(CurrentStyle);

CustomFilteringDropDown title = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(title);

AddGridColumns(ref title, "HtmlEncodeTitle", "Title", string.Empty, "portaltablelink", true, "TitleOfEvent", 400);

CustomFilteringDropDown startDate = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(startDate);

AddGridColumns(ref startDate, "startDate", "Start", "ddd, dd MMM yy", string.Empty, false, "startDate", 100);

CustomFilteringDropDown endDate = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(endDate);

AddGridColumns(ref endDate, "endDate", "End", "ddd, dd MMM yy", string.Empty, false, "endDate", 100);

CustomFilteringDropDown town = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(town);

AddGridColumns(ref town, "Town", "Town", string.Empty, string.Empty, true, "Town", 150);

CustomFilteringDropDown country = new CustomFilteringDropDown();

radGrid.MasterTableView.Columns.Add(country);

AddGridColumns(ref country, "Country", "Country", string.Empty, string.Empty, true, "Country", 150);

GridEditCommandColumn editColumn = new GridEditCommandColumn();

radGrid.MasterTableView.Columns.Add(editColumn);

editColumn.UniqueName = "EditCommandColumn";

editColumn.ButtonType = GridButtonColumnType.ImageButton;

editColumn.EditImageUrl = "~/Styles/ClientDefault/Images/ContactUs/email_dialog_icon.png";

editColumn.EditText = "Email Delegates this link";

}

private void AddGridColumns(ref CustomFilteringDropDown item, string dataField, string headerText, string dataFormat, string cssClass, bool enableFilter, string groupByClause, int width)

{

item.DataField = dataField;

item.UniqueName = dataField;

item.HtmlEncode = false;

item.Groupable = true;

item.GroupByExpression = string.Format("{0} Group By {1}", groupByClause, groupByClause);

item.AllowSorting = true;

item.AllowFiltering = enableFilter;

item.SortExpression = dataField;

item.HeaderText = headerText;

item.DataFormatString = "{0:" + dataFormat + "}";

item.ItemStyle.CssClass = cssClass;

item.HeaderStyle.Width = Unit.Pixel(width);

item.FilterControlWidth = Unit.Pixel(width);

}

If anyone can shed any light on why this is happening it would be great.

Grid

answered on 28 Aug 2017

4 answers

133 views

[Solved] AsyncUpload Demo does not work (in chrome)

Just an FYI. "async file upload via ajax" in chrome does not seem to work

thx

AsyncUpload

answered on 28 Aug 2017

2 answers

133 views

RadWizard Skin Images

I was following this sample I found online that shows how to overwrite the telerik skin for a combo box control with your own custom css file in a separate project and it adds the images as WebResources like this:

[assembly: WebResource("TelerikCustomSkins.ComboBox_Images.rcbArrowCell.gif", "image/gif")]

I was trying to do this for the radwizard control but its missing the arrow that shows on the current step when you use one of the default skins. I'm guessing that must be an image but where can I get the default images for these skins so I can add them as Web Resources to my skin project class?

SkinManager

answered on 28 Aug 2017

0 answers

90 views

Responsive Chart Code - 3 Charts

Using the code from this page.... https://demos.telerik.com/aspnet-ajax/htmlchart/examples/functionality/responsive-chart/defaultvb.aspx?show-source=true

It only resizes 1 of the 3 Charts on the page when you resize the window in Chrome.

Can you guys confirm if I'm crazy or it's for sure an issue?

Chart (HTML5)

asked on 28 Aug 2017

2 answers

2.9K+ views

Error: “Maximum call stack size exceed” AJAX calling WebMethod

I'm trying to send a GridDataItem object that's retrieved from the selected row of a RadGrid.
But I'm getting an Uncaught RangeError: Maximum call stack size exceeded error when I make this AJAX call.

When I run the code, my AJAX success fires, but the breakpoint I have on the WebMethod never hits. After this, the pages freezes momentarily, then I get the error I mentioned above.

$(document).ready(function () {
$('#<%=btnTransferIn.ClientID%>').on('click', function () {
var grid = $find("<%= gridStudents.ClientID %>"); //Returns an Object
var gridSelItems = grid.get_selectedItems(); //Returns Array
var selectedItem = gridSelItems[0]; //Returns an Object

AjaxTransfer(gridSelItems);
});
});

function AjaxTransfer(selectedItem) {
$.ajax({
type: "POST",
url: "GradeSheet2.aspx/btnTransferIn_Click",
data: { 'gsi': selectedItem },
dataType: "json",
contentType: "application/json; charset=utf-8",
success: alert('Complete')
})
}

This is the WebMethod I want to call:

[System.Web.Services.WebMethod]
public static string btnTransferIn_Click(GridDataItem gsi)
{
return "Done";
}

I noticed, if I change the WebMethod's parameter to a string and I pass in a string instead of an object, it works. So it seems like there's something wrong with the object or the way I'm passing it to the WebMethod.

I checked the object in the console before I make the AJAX call and I think it looks alright.. Although, I don't have a high understanding of all of it.

http://i.stack.imgur.com/TUv8C.png

Please let me know if more information is needed.

Thanks in advance!

Ajax

answered on 28 Aug 2017