Questions on UI for ASP.NET AJAX Forum

110,765 questions

1 answer

198 views

RadGrid WebUserControl edit form blinks badly on postback after Telerik upgrade

We have an older application that was using the 2015 version of Telerik.Web.UI control. We use a RadGrid that employs a web user control for adding and editing rows.

<telerik:RadGrid ID="gvSamples" runat="server" AutoGenerateColumns="False" OnUpdateCommand="gvSamples_UpdateCommand" OnItemCommand="gvSamples_ItemCommand"

OnDeleteCommand="gvSamples_DeleteCommand"

EnableEmbeddedBaseStylesheet="false"

CssClass="table table-striped table-condensed table-bordered table-hover">

<MasterTableView Width="100%" CommandItemDisplay="Top" EditMode="PopUp" CssClass="table table-condensed table-striped table-hover" DataKeyNames="sample.SampleId">

<EditFormSettings PopUpSettings-Height="1000px" PopUpSettings-Width="1150px" PopUpSettings-Modal="True" UserControlName="~/UserControls/SampleControl.ascx"

EditFormType="WebUserControl"/>

<CommandItemTemplate>

<asp:Button ID="btnAddNewSample" Text="Add New Sample" runat="server" CommandName="InitInsert" CssClass="btn-sm btn-primary"></asp:Button>

</CommandItemTemplate>

<Columns>

<telerik:GridEditCommandColumn UniqueName="EditCommandColumn" EditText="View/Edit" ButtonType="PushButton">

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn UniqueName="SampleName" HeaderText="Sample ID" DataField="Location.SampleName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SampleType" HeaderText="Sample Type" DataField="sample.SampleType">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="LabID" HeaderText="Lab ID" DataField="sample.LabNumber">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="Technician" HeaderText="Sample Taken By" DataField="sample.Technician">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="SampleDate" HeaderText="Date of Sample Collected" DataField="sample.SampleDate" DataFormatString="{0:d}">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ConfirmText="Are you sure to Delete the Sample?" ConfirmDialogType="RadWindow" ConfirmTitle="Delete Sample" UniqueName="btnDeleteSample" ButtonType="FontIconButton" CommandName="Delete" />

</Columns>

</MasterTableView>

<ClientSettings>

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

</ClientSettings>

</telerik:RadGrid>

Before the upgrade, working with any of the dropdowns, radio buttons, and calendar controls on the ascx web edit control worked smoothly. However, after upgrading to 2021.1.224.45, the entire edit webform blinks out and back in, which is very jarring to the end user.

Here is the code for the edit form:

<div runat="server" id="dvDataGrid" style="width: 100%" Visible="True">

<div style="background-color: lightgrey; height: 25px">

<asp:Label ID="lblSectionC" runat="server" CssClass="labelHeader" Text="Lab Results"></asp:Label>

</div>

<table style="width: 100%">

<tr>

<td>

<asp:Label ID="lblDirty" runat="server"></asp:Label>

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>

<table style="width: 100%">

<tr>

<td align="right">

<asp:Label ID="lblPPMTop" runat="server" Text="Total Quantity PPM: " CssClass="labelNormal"></asp:Label>

<asp:Label ID="lblTotalPPMTop" runat="server" CssClass="labelNormal" ForeColor="Green"></asp:Label>

</td>

</tr>

<tr>

<td>

<asp:DataGrid ID="dgLabResults" runat="server" AutoGenerateColumns="False" HeaderStyle-BackColor="CadetBlue"

HeaderStyle-Font-Names="arial" HeaderStyle-ForeColor="Wheat" OnItemCommand="dgLabResults_InsertCommand"

OnItemDataBound="dgLabResults_ItemDataBound" CellPadding="3" CellSpacing="0"

Width="100%" CssClass="table table-bordered table-hover table-striped table-condensed">

<Columns>

<asp:TemplateColumn HeaderText="LabID" Visible="false">

<ItemTemplate>

<asp:Label ID="LabID" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "LabID")%>'></asp:Label>

</ItemTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="PCBTypeID" Visible="false">

<ItemTemplate>

<asp:Label ID="PCBTypeID" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "PCBTypeID")%>'></asp:Label>

</ItemTemplate>

<HeaderStyle CssClass="thead" />

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="UnitID" Visible="false">

<ItemTemplate>

<asp:Label ID="UnitID" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "UnitID")%>'></asp:Label>

</ItemTemplate>

<HeaderStyle CssClass="thead" />

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="PCB Type" ItemStyle-Width="130px">

<ItemTemplate>

<asp:Label ID="lblPCBType" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "PCBType")%>'></asp:Label>

</ItemTemplate>

<HeaderStyle CssClass="thead" />

<EditItemTemplate>

<asp:DropDownList ID="dpPCBType" runat="server" CssClass="form-control input-sm">

</asp:DropDownList>

<asp:Label ID="ecPCBType" runat="server" Text="" ForeColor="Red"></asp:Label>

</EditItemTemplate>

<FooterTemplate>

<asp:DropDownList ID="dpPCBTypeNew" runat="server" CssClass="form-control input-sm">

</asp:DropDownList>

<asp:Label ID="ecPCBTypeNew" runat="server" Text="" ForeColor="Red"></asp:Label>

</FooterTemplate>

<HeaderStyle CssClass="thead" />

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Detection Reporting Limit">

<ItemTemplate>

<asp:Label ID="lblReportLimit" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "ReportLimit")%>'></asp:Label>

</ItemTemplate>

<HeaderStyle CssClass="thead" />

<EditItemTemplate>

<asp:TextBox ID="txtReportLimit" runat="server" CssClass="form-control input-sm" Text='<%#DataBinder.Eval(Container.DataItem, "ReportLimit")%>'

Width="80px">

</asp:TextBox>

<asp:Label ID="ckReportLimit" runat="server" Text="" ForeColor="Red"></asp:Label>

</EditItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtReportLimitNew" runat="server" CssClass="form-control input-sm" Text=""

Width="110px">

</asp:TextBox>

<asp:Label ID="ckReportLimitNew" runat="server" Text="" ForeColor="Red"></asp:Label>

</FooterTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Measured Quantity">

<ItemTemplate>

<asp:Label ID="lblQuantity" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "Quantity")%>'></asp:Label>

</ItemTemplate>

<HeaderStyle CssClass="thead" />

<EditItemTemplate>

<asp:TextBox ID="txtQuantity" runat="server" Text='<%#DataBinder.Eval(Container.DataItem, "Quantity")%>'

Width="80px" CssClass="form-control input-sm">

</asp:TextBox>

<asp:Label ID="ecQuantity" runat="server" Text="" ForeColor="Red"></asp:Label>

</EditItemTemplate>

<FooterTemplate>

<asp:TextBox ID="txtQuantityNew" runat="server" CssClass="form-control input-sm" Text="" Width="80px">

</asp:TextBox>

<asp:Label ID="ecQuantityNew" runat="server" Text="" ForeColor="Red"></asp:Label>

</FooterTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Unit">

<ItemTemplate>

<asp:Label ID="lblUnit" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "Unit")%>'></asp:Label>

</ItemTemplate>

<HeaderStyle CssClass="thead" />

<EditItemTemplate>

<asp:DropDownList ID="dpUnit" runat="server" CssClass="form-control input-sm" DataTextField="Unit"

DataValueField="Unit">

</asp:DropDownList>

<asp:Label ID="ecdpUnit" runat="server" Text="" ForeColor="Red"></asp:Label>

</EditItemTemplate>

<FooterTemplate>

<asp:DropDownList ID="dpUnitNew" runat="server" CssClass="form-control input-sm">

</asp:DropDownList>

<asp:Label ID="ecdpUnitNew" runat="server" Text="" ForeColor="Red"></asp:Label>

</FooterTemplate>

</asp:TemplateColumn>

<asp:TemplateColumn HeaderText="Quantity ppm">

<ItemTemplate>

<asp:Label ID="lblQuantityPPM" runat="server" CssClass="labelNormal" Text='<%#DataBinder.Eval(Container.DataItem, "QuantityPPM")%>'></asp:Label>

</ItemTemplate>

<HeaderStyle CssClass="thead" />

</asp:TemplateColumn>

<asp:EditCommandColumn UpdateText="Update" CancelText="Cancel" EditText="Edit" ValidationGroup="PCBType">

<HeaderStyle CssClass="thead" />

</asp:EditCommandColumn>

<asp:ButtonColumn CommandName="Delete" Text="Delete">

<HeaderStyle CssClass="thead" />

</asp:ButtonColumn>

<asp:TemplateColumn Visible="False">

<FooterTemplate>

<asp:LinkButton ID="lbnInsert" runat="server" CommandName="Insert" Text="Save" ValidationGroup="PCBTypeNew"

Font-Underline="True" />

<asp:LinkButton ID="lbnCancel" runat="server" CommandName="Cancel" Text="Cancel"

Font-Underline="True" CausesValidation="false" />

</FooterTemplate>

<HeaderStyle CssClass="thead" />

</asp:TemplateColumn>

</Columns>

</asp:DataGrid>

</td>

</tr>

<tr>

<td align="right">

<asp:Label ID="lblPPMBottom" runat="server" Text="Total Quantity PPM: " CssClass="Badge"></asp:Label>

<asp:Label ID="lblTotalPPMBottom" runat="server" CssClass="Badge" ForeColor="Green"></asp:Label>

</td>

</tr>

</table>

<asp:CustomValidator ID="cvLabResults" runat="server" OnServerValidate="LabResults_ServerValidate"

ValidationGroup="SubmitValidation" ErrorMessage="* Enter lab result"></asp:CustomValidator>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="btnAddLab" />

</Triggers>

</asp:UpdatePanel>

</td>

</tr>

<tr>

<td align="right">

<asp:Button ID="btnAddLab" runat="server" CausesValidation="false" Text="Insert Lab Result" CssClass="btn-sm btn-primary" />

</td>

</tr>

</table>

</div>

<div align="center" style="position: relative; bottom: 0; right: 0">

<asp:Button ID="btnUpdate" Text="Update Sample" CssClass="btn-sm btn-primary" runat="server" CommandName="Update" Visible='<%# Not (TypeOf DataItem Is Telerik.Web.UI.GridInsertionObject) %>'></asp:Button>

<asp:Button ID="btnInsert" Text="Insert Sample" CssClass="btn-sm btn-primary" runat="server" CommandName="PerformInsert" Visible='<%# (TypeOf DataItem Is Telerik.Web.UI.GridInsertionObject) %>'></asp:Button>

<asp:Button ID="btnCancel" Text="Cancel" runat="server" CssClass="btn-sm btn-primary" CausesValidation="False" CommandName="Cancel"></asp:Button>

</div>

</asp:PlaceHolder>

The majority of the control data on this edit form is loaded when the form loads, so there are no real performance bottlenecks on each individual control.

I'm not sure why postbacks with the newest version appear to be slower. Before the upgrade, only one of the text fields (which has a name lookup function) would very slightly flicker. The entire form never flickered or blinked.

Is there anything I can do on the grid via settings that would remedy this issue? I'm working under a time constraint to get Telerik upgraded on this application to ensure the application no longer has the AsyncUpload vulnerability of version older than the 2020 version, so I'm trying to not delay the upgrade process by reworking the entire edit form.

Thank you.

Grid

answered on 15 Mar 2021

2 answers

197 views

Getting exception when trying to filter in radgrid after upgrading Telerik

I upgraded Telerik from version 2013.1.220 to version 2020.3.1021. I am using .Net Framework 4.0.

After upgrading, the filter fails and throws following exception

Uncaught TypeError: Cannot read property 'getElementsByClassName' of null
at Object.getElementByClassName (ScriptResource.axd?d=lJXgEP7wI3nlIkPPahFXpT5FyJRZNWmWFcbonPaNzQCr29d51fiQxZcKKz-XZVzVisx5XLZpVB-NztvzK3iRe1psnHhhTJI425cB8TVWgyl46g2BotFpZEOXuvA1&t=22bb6c4f:535)
at Telerik.Web.UI.GridTableView.filter (ScriptResource.axd?d=kaODL2VRQAnyVu9y_F-sZ7AnJ-iRePgztIkR-jgmqCfB8tzNjqjoAgqOvRzhPCQkTOZ_yldfO9sTzLKCGG5S-TZNyrYIiWLuhLUovQ48NtZMgR6eER0lSZdv3BqM_8k7mggqLg2&t=22bb6c4f:5130)
at ScriptResource.axd?d=kaODL2VRQAnyVu9y_F-sZ7AnJ-iRePgztIkR-jgmqCfB8tzNjqjoAgqOvRzhPCQkTOZ_yldfO9sTzLKCGG5S-TZNyrYIiWLuhLUovQ48NtZMgR6eER0lSZdv3BqM_8k7mggqLg2&t=22bb6c4f:3427

On debugging in chrome, I see that _getFilterCellByColumnUniqueName returns null because _getTableFilterRow returns null. This is causing the exception to be thrown.

My aspx code is given below :-

<telerik:RadAjaxPanel runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
<telerik:RadGrid RenderMode="Lightweight" AutoGenerateColumns="false" ID="gvUsers" OnNeedDataSource="RadGrid1_NeedDataSource"
AllowFilteringByColumn="True" AllowSorting="True" Width="100%" EnableLinqExpressions="false"
ShowFooter="True" AllowPaging="True" runat="server">
<GroupingSettings CaseSensitive="false"></GroupingSettings>
<MasterTableView AutoGenerateColumns="false" AllowFilteringByColumn="True" ShowFooter="True">
<Columns>
<telerik:GridBoundColumn FilterControlWidth="120px" DataField="email" HeaderText="email" AutoPostBackOnFilter="true">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
</telerik:RadGrid>
</telerik:RadAjaxPanel>

My cs code is given below :-

protected void RadGrid1_NeedDataSource(object sender, Telerik.Web.UI.GridNeedDataSourceEventArgs e)
{
var users = Membership.GetAllUsers().Cast<MembershipUser>();
if (ddlActiveFilter.SelectedValue.Equals("Active"))
{
(sender as RadGrid).DataSource = users.Where(u => !u.IsLockedOut && u.IsApproved);
}
else
{
(sender as RadGrid).DataSource = users.Where(u => u.IsLockedOut || !u.IsApproved);
}
}

Could someone please help me with this?

Grid

answered on 15 Mar 2021

8 answers

598 views

How to disable time-slots(like 12-4PM)

HI All,

I have gone throught the Article http://www.telerik.com/support/kb/aspnet-ajax/scheduler/setting-special-days-or-time-slots-in-radscheduler.aspx

But I have different requirement. I am using Scheduler only for View mode.
Suppose I have created a recurring appointment between 12PM- 4PM for one month.I have to enable Only this slot of (12PM-4PM) enable and all other slots disable.
Please let me know of any other event than TimeSlotCreated.

Thanks
Prashant

Scheduler

answered on 14 Mar 2021

3 answers

109 views

Rad Grid Filter not working with special chanracters like ?

Hi,

I am using Rad grid filter.

When I try to search with special characters like ? its not working.

I have attached the screenshot.

Please help.

Grid

answered on 12 Mar 2021

3 answers

118 views

nodeselect client side

Hi,

I managed to tab through nodes with the arrow keys. Now I want to take an action client side when a node is focused.

This is used to page through a library of PDFs. I cannot find a client-side event which triggers when a node is selected.

Suggestions?

Marc

TreeView

answered on 12 Mar 2021

3 answers

193 views

Column Unique Name unknown when using Custom Filter Options with Handling

Following this example: https://docs.telerik.com/devtools/aspnet-ajax/controls/grid/how-to/Filtering/custom-filter-options-with-handling

Everything works in this example, except when the Menu Item is clicked and FilterCommandEvent is fired, there is no unique column name in the RadGrids Item Command.

e.Item.Attributes["columnUniqueName"] does not have unique name of column.

protected void filterMenu_ItemClick(object sender, RadMenuEventArgs e)

{

GridFilteringItem filterItem = RadGrid1.MasterTableView.GetItems(GridItemType.FilteringItem)[0] as GridFilteringItem;

filterItem.FireCommandEvent("Filter", new Pair(e.Item.Value, e.Item.Attributes["columnUniqueName"]));

}

Looking through the RadMenuItem object and GridFilteringItem object, I do not see any reference to the column that is trying to be filtered.

Is there a way to know the column that the filter option being selected is from? There would have to be, otherwise there would be no reason to allow customer filter Options if you never knew the column to filter on.

I am using 2021 Q1 Telerik.Web.UI

Grid

answered on 12 Mar 2021

1 answer

83 views

Disabling column resizing disables custom header classes

When I set DisableResizeing="true" on RadGrid, it disables any HeaderStyle CssClasses. When I remove that setting, I am able to set classes. Also, last column is exempt from creating custom classes in any case. There needs to be an empty last column for that purpose.

Grid

answered on 12 Mar 2021

1 answer

126 views

Gantt Dependency links to the end of the Task

When dragging from the end of a task (on the right side white dot) to the start of the second task (left side on the white dot) the dependency links to the right side of the second task.

Code image attached has nothing crazy going on, Img1 and Img2 show the dependency link and the Data is written to the database.

Can't work out why it's doing this, any ideas?

Steve

Gantt

answered on 12 Mar 2021

2 answers

192 views

Chart Auto Height

Hi, I have a HtmlChart that I databind to the Sql stored procedure. The number of records returned is based on the parameters that user selects from the few dropdowns. So sometimes you have 50 records, sometimes 1.

Is it possible to set chart height based on the number of records?

Currently I set height to 1000px but it does look very funny when I display 1 records.

Chart (HTML5)