0 answers

222 views

Hello,

I have utilized the virtual scrolling example provided by the Telerik website verbatim - with exception to the implemented DataSource (which I'm doing programmatically for the sake of the example), and am getting issues. The website is here: Virtual Scrolling and Paging.

The problems are as follows:

When I scroll to the bottom of the list, the AJAX request runs properly (seen during debugging), but the grid does not update with more records. Also, all other attempts to scroll cause the loading animation to appear and simply hang on the screen so that the page must be reloaded
After clicking on either of the heading columns to sort, it's successful the 1st time, but afterwards it hangs, nothing is clickable, and the page must be reloaded

Please see the attached image 'ScrollingHangingIllustration.png'. Also, see below for the code. Please help!!

Client-Side RadCodeBlock

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

<script type="text/javascript">

function HandleScrolling(e) {

var grid = $find("<%=RadGrid1.ClientID %>");

var scrollArea = document.getElementById("<%= RadGrid1.ClientID %>" + "_GridData");

if (IsScrolledToBottom(scrollArea)) {

var currentlyDisplayedRecords = grid.get_masterTableView().get_pageSize() * (grid.get_masterTableView().get_currentPageIndex() + 1);

//if the visible items are less than the entire record count

//trigger an ajax request to increase them

if (currentlyDisplayedRecords < 100)

{ $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadMoreRecords"); }

}

//calculate when the scroll bar is at the bottom

function IsScrolledToBottom(scrollArea) {

var currentPosition = scrollArea.scrollTop + scrollArea.clientHeight;

return currentPosition == scrollArea.scrollHeight;

}

</script>

</telerik:RadCodeBlock>

Client-Side AJAX Manager

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

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

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"

Width="75px" Transparency="25">

<img alt="Loading..." src='<%= RadAjaxLoadingPanel.GetWebResourceUrl(Page, "Telerik.Web.UI.Skins.Default.Ajax.loading.gif") %>'

style="border: 0;" /></telerik:RadAjaxLoadingPanel>

Client-Side RadGrid

<telerik:RadGrid ID="RadGrid1" runat="server" Skin="Silk" AllowSorting="True" AllowPaging="True" PageSize="15" Width="97%" AutoGenerateColumns="False" GridLines="None">

<PagerStyle Visible="False" />

<MasterTableView Width="99%" TableLayout="Fixed" CommandItemDisplay="None" CurrentResetPageIndexAction="SetPageIndexToFirst" PageSize="15">

<SortExpressions>

<telerik:GridSortExpression FieldName="CreateDate" SortOrder="Descending" />

</SortExpressions>

<Columns>

<telerik:GridBoundColumn HeaderText="Code" DataField="ZipFileCode" UniqueName="ZipFileCode">

<HeaderStyle Width="90px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Description" DataField="ZipFileDesc" UniqueName="ZipFileDesc">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Select/Omit" DataField="ZipType" UniqueName="ZipType">

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Create Date" DataField="CreateDate" UniqueName="CreateDate" DataType="System.DateTime" DataFormatString="{0:d}" ShowSortIcon="true">

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn HeaderText="Company" DataField="Company" UniqueName="Company">

<HeaderStyle Width="100px" />

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

<ClientSettings>

<Scrolling AllowScroll="True" UseStaticHeaders="True" ScrollHeight="300px" />

<ClientEvents OnScroll="HandleScrolling" />

</ClientSettings>

</telerik:RadGrid>

Server-Side AjaxRequest

Protected Sub RadAjaxManager1_AjaxRequest(ByVal sender As Object, ByVal e As AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest

RadGrid1.PageSize = 10 + RadGrid1.PageSize

RadGrid1.Rebind()

End Sub

Server-Side Datasource

Public Function GetItemsTest(ByVal startRowIndex As Integer, ByVal maxRows As Integer) As DataSet

Dim dt As DataTable = New DataTable("Sample")

dt.Columns.Add("Company", System.Type.GetType("System.String"))

dt.Columns.Add("ZipFileCode", System.Type.GetType("System.String"))

dt.Columns.Add("ZipFileDesc", System.Type.GetType("System.String"))

dt.Columns.Add("ZipType", System.Type.GetType("System.String"))

dt.Columns.Add("CreateDate", System.Type.GetType("System.DateTime"))

dt.Columns.Add("DeletedFile", System.Type.GetType("System.Boolean"))

dt.Columns.Add("UploadedBy", System.Type.GetType("System.String"))

Dim row As DataRow

Dim dte As DateTime

dte = DateTime.Now

For i As Integer = 0 To maxRows

row = dt.NewRow()

row(0) = "Company" & i

row(1) = "ZipFileCode" & i

row(2) = "ZipFileDesc" & i

row(3) = "ZipType" & i

row(4) = dte

row(5) = True

row(6) = "UploadedBy" & i

dt.Rows.Add(row)

Next

Dim ds As New DataSet("Sample")

ds.Tables.Add(dt)

Return ds

End Function

Private Sub RadGrid1_NeedDataSource(ByVal source As Object, ByVal e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles RadGrid1.NeedDataSource

RadGrid1.DataSource = GetItemsTest(0, RadGrid1.PageSize)

End Sub

Thanks!

Grid

asked on 05 Apr 2016

1 answer

117 views

[Solved] delayfiler not work for FilterTemplate in radgrid !

Hi Telerik

I wana to set DelayFilter for FilterTemplate in RadGrid but when i set that , it's not work !

why this not work and how to set it ?

please help me .

Thanks

<telerik:GridTemplateColumn DataField="ProvinceName" HeaderText="ProvinceName" SortExpression="ProvinceName" UniqueName="ProvinceName" FilterDelay="1000">

<HeaderStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ItemStyle HorizontalAlign="Center" VerticalAlign="Middle" />

<ClientItemTemplate>

#=ProvinceName#

</ClientItemTemplate>

<FilterTemplate>

<telerik:RadTextBox ID="txtProvinceName" runat="server">

<ClientEvents OnValueChanged="ProvinceNameChenged"></ClientEvents>

</telerik:RadTextBox>

<telerik:RadScriptBlock ID="rsbProvinceName" runat="server">

<script type="text/javascript">

function ProvinceNameChenged(sender, args) {

var gv = $find("<%# ((GridItem)Container).OwnerTableView.ClientID %>");

if (args.get_newValue() == "") {

gv.filter("ProvinceName", null, "NoFilter");

return;

}

gv.filter("ProvinceName", args.get_newValue(), "StartsWith");

}

</script>

</telerik:RadScriptBlock>

</FilterTemplate>

</telerik:GridTemplateColumn>

Grid

answered on 05 Apr 2016

3 answers

497 views

Disabling Checkbox in Template Column

I've looked at a number of posts here on doing this and just can't seem to get it to work. But I have inside of a GridTemplateColumn and based on the value of one of the data columns I want to set it to disabled. My data values are either "OPEN" or "CLOSED". The checkbox in question is cbMarkCompleted and the datavalue I'm checking is TaskStatusTypeCode So here is my current code:

<Columns>

<telerik:GridBoundColumn UniqueName="NotificationId" DataField="NotificationId" DataType="System.Int32"

display="false" />

<telerik:GridTemplateColumn UniqueName="MARKCOMPLETED" ShowFilterIcon="false" HeaderText="Mark Completed"

HeaderStyle-Width="65">

<FilterTemplate>

<asp:CheckBox ID="cbAll" runat="server" onclick="CheckAll(this)" />

</FilterTemplate>

<ItemTemplate>

<asp:CheckBox ID="cbMarkCompleted" runat="server" ></asp:CheckBox>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="NOTIFICATIONTYPE" HeaderText="Type" DataField="NOTIFICATIONTYPE" ShowFilterIcon="false"

CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" SortExpression="NOTIFICATIONTYPE" HeaderStyle-Width="80"/>

<telerik:GridBoundColumn UniqueName="DISPLAYTEXT" HeaderText="Text" DataField="DISPLAYTEXT" ShowFilterIcon="false"

CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" SortExpression="DISPLAYTEXT" HeaderStyle-Width="340"/>

<telerik:GridDateTimeColumn UniqueName="CREATEDON" HeaderText="Created On" DataField="CREATEDON" ShowFilterIcon="false"

DataFormatString="{0:dd MMM yyyy}" DataType="System.DateTime" HtmlEncode="false" ItemStyle-CssClass="center"

CurrentFilterFunction="GreaterThanOrEqualTo" AutoPostBackOnFilter="true" HeaderStyle-Width="100"/>

<telerik:GridDateTimeColumn UniqueName="MODIFIEDON" HeaderText="Last Update" DataField="MODIFIEDON" ShowFilterIcon="false"

DataFormatString="{0:dd MMM yyyy}" DataType="System.DateTime" HtmlEncode="false" ItemStyle-CssClass="center"

CurrentFilterFunction="GreaterThanOrEqualTo" AutoPostBackOnFilter="true" HeaderStyle-Width="100"/>

<telerik:GridDateTimeColumn UniqueName="DUEDATE" HeaderText="Due Date" DataField="DUEDATE" ShowFilterIcon="false"

DataFormatString="{0:dd MMM yyyy}" DataType="System.DateTime" HtmlEncode="false" ItemStyle-CssClass="center"

CurrentFilterFunction="GreaterThanOrEqualTo" AutoPostBackOnFilter="true" HeaderStyle-Width="100"/>

<telerik:GridTemplateColumn UniqueName="ENTITYTYPE" ShowFilterIcon="false" DataField="ENTITYTYPE"

SortExpression="ENTITYTYPE" HeaderText="Notification For" CurrentFilterFunction="Contains" AutoPostBackOnFilter="true"

HeaderStyle-Width="75">

<ItemTemplate>

<asp:LinkButton ID="lnkNavigateToItem" runat="server" CommandName="NAVIGATE" Text='<%# Eval("EntityType") %>'

CommandArgument='<%# Eval("ENTITYID") + "," + Eval("EntityTypeCode") %>' />

<asp:Label ID="lblEntityType" runat="server" Text='<%# Eval("EntityType") %>'></asp:Label>

</ItemTemplate>

</telerik:GridTemplateColumn>

<telerik:GridBoundColumn UniqueName="ENTITYTYPECODE" Visible="false" HeaderText="" DataField="ENTITYTYPECODE" ShowFilterIcon="false"

CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" SortExpression="ENTITYTYPECODE"/>

<telerik:GridBoundColumn UniqueName="TaskStatusTypeCode" Visible="false" HeaderText="" DataField="TaskStatusTypeCode" ShowFilterIcon="false"

CurrentFilterFunction="Contains" AutoPostBackOnFilter="true" SortExpression="TaskStatusTypeCode" HtmlEncode="true" />

</Columns>

Grid

answered on 05 Apr 2016

3 answers

148 views

Long Loading Times IE 11

Hi,

I'm using Telerik UI for ASP.NET/AJAX and deployed my Website on IIS 7.5.7600.16385 on an Windows Server 2008 R2 Standard.

On the Server, .NET Framework 4.5.2 is installed.

In order to run the Website with IE 11 i had to add the following section to the webconfig-file:

<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=Edge" />
</customHeaders>
</httpProtocol>
<modules>
<remove name="FormsAuthentication"/>
</modules>
</system.webServer>

Unfortunatedly, the loading times of the Website are very Long compared to when using Mozilla Firefox as Webbrowser (2-3 mins vs. 4-5 secs).

Any ideas hints on this?

Thanks,

Klaus

General Discussions

answered on 05 Apr 2016

0 answers

94 views

Bullet list not working if new lines as Breaks

Hello,

I am truing to use Bullet list. But it work correctly only if new lines as paragraph. But for me breaks is preferable. You can see this on video: http://screencast.com/t/UUwEGeMicOM

Do you have any suggestions?

Thanks,

Roman.

WebParts for SharePoint

asked on 05 Apr 2016

5 answers

208 views

Gradebook Grid Display & Editing Question

Hello everyone,

I am a developing a Learning Management System solution incorperating online quizzes, assessments, assignment calendar, inbox messaging, attendance & grade recording.

The hardest task I am encourneting is getting my gridview to function & display as a traditional gradebook (somewhat like an excel spreadsheet). My SQL tables are setup as followed:

Students:

ID (Primary key)
Last Name (Varchar(50))
First Name (Varchar(50))
StudentID(int)
Email(string)
Username(String)
Password

Assignments:

ID(PrimaryKey)
AssignmentTitle(String)
GradingCategory(int) *Linked to grading categories table
ClassID(int)*Linked to Courses table's ID
DueDate(Date)
MaxPoints(int)
Description

Grades:

GradeID(PrimaryKey)
StudentID(int)*Linekd to "Students" table primary key
Class ID(int)*Linked to "Assignments" table primary key
Grade(string)
Feedback(varchar(max))

What i want to do is setup a grid that takes the information from the related tables and displays them as a traditional gradebook for editing and updating.

(i.e.)
                        Assignment 1                Exam 1
Student 1              55                              B-
Student 2              87                              A
Student 3              92                              C+

I'd like the user to be able to click on a grade cell and edit the data and update changes. I'm assuming the gridview or List View would accomplish this but I need help setting up this layout. Any help or guidance for this project would be greatly appreciated :)

Thank you in advanced

Grid

answered on 05 Apr 2016

6 answers

501 views

RadGrid single cell edit clientside (no ajax etc postback)

Hi All,

Is it possible to make a single cell in the grid editable on mouse click so that changes are made without any postbacks?

We are trying to do 3 different things here -

1) Clicking on a cell should make it editable allowing the user to make any changes. This happens entirely on clientside with no postbacks (not ajax either). Pretty much making the editable control visible or something along those lines.

2) Clicking somewhere outside that cell should revert it back to normal mode. The cell should now show the new value if something was changed but its only in the grid and nothing has been posted back to the server yet.

3) When user is done changing cells, then he can choose to click some button to finally commit all those changes to the database.

An example of #1 and #2 would be in Infragistics WebGrid -
http://samples.infragistics.com/2009.1/WebFeatureBrowser/Default.aspx -> WebDataGrid -> Data Editing -> Editor Providers

Is this doable with RadGrid?

Thanks,
Manoj

Grid

answered on 05 Apr 2016

7 answers

1.3K+ views

How to change the color of item selection radcombobox with a css style?

I was wondering if was possible to change the value of "background-color" for the selection of a radCombobox.

Here is the css code I used:
(I can change everything but not the color of highlighted items ....)

`div.RadComboBox_Metro .rcbInputCell INPUT.rcbInput {` `background-color:` `#9BCDFF; }`

"Metro" being the name of the "skin" of my radcombobox

Thanks to all

TreeView

answered on 05 Apr 2016

3 answers

212 views

Where are the 2016.1 offline help files?

I have looked under the "browse all product files" but I do not see an option to download the offline documentation of the controls.

Documentation and Tutorials

answered on 05 Apr 2016

5 answers

317 views

[Solved] Gantt Chart won't Bind

Hello,

I'm using Telerik Controls for the first time and was trying to get the GanttChart to work.

I've followed the same table structure as referred in the Website for both Tasks and Dependencies. Also have created the Datasources for both and assigned them to bind the Gantt Chart. But even after I enter some data into the tables the Chart won't show anything in the Runtime. I've tried to Bind it programmatically as well but no use.

Please throw some light on how to do that or where am I going wrong.

Thanks,

Ani

Gantt

answered on 05 Apr 2016