Questions on UI for ASP.NET AJAX Forum

2 answers

180 views

Losing Grid column metadata when batch editing rad grid that is statically declared with dynamically defined columns

Hi

I'm having problems with the grid losing the dynamic column metadata when using the batch edit "save changes" and cancel changes" buttons. See the attached pictures. The grid is declared in the ASPX page and the columns are assigned in the page_load event only on the first page load.

Here is the grid declaration:

<telerik:RadGrid

ID="radGridGrades"

runat="server"

AllowPaging="false"

Width="100%"

enableEmbeddedSkins="false"

Skin="CorpsNETBootstrap"

AllowSorting="true"

ClientSettings-Selecting-AllowRowSelect="true"

AllowMultiRowSelection="true"

ClientSettings-AllowKeyboardNavigation="true"

ItemStyle-HorizontalAlign="Center"

HeaderStyle-HorizontalAlign="Center"

AlternatingItemStyle-HorizontalAlign="Center"

AllowMultiRowEdit="true"

OnBatchEditCommand="radGridGrades_BatchEditCommand"

OnNeedDataSource="radGridGrades_NeedDataSource"

OnItemDataBound="radGridGrades_ItemDataBound">

<MasterTableView

AutoGenerateColumns="False"

DataKeyNames="ID"

Width="100%"

CommandItemDisplay="Top"

CommandItemStyle-Height="15px"

CommandItemSettings-ShowCancelChangesButton="true"

CommandItemSettings-ShowAddNewRecordButton="false"

PageSize="10"

EnableNoRecordsTemplate="true"

EditMode="Batch"

InsertItemPageIndexAction="ShowItemOnCurrentPage">

<Columns>

</Columns>

<EditFormSettings>

<PopUpSettings ScrollBars="None" />

</EditFormSettings>

<NoRecordsTemplate>

<div align="center" style="color:darkorange">---------- No Records to Display -----------</div>

</NoRecordsTemplate>

</MasterTableView>

<ClientSettings>

</ClientSettings>

</telerik:RadGrid>

And here is the code-behind for the page:

public partial class GradesByClass : CorpsNET.BasePage

{

CorpsNETServer.ScheduledClass _scheduledClass;

CorpsNETServer.Lookup _academicSchedule;

CorpsNETServer.AcademicAssignment _academicAssignment;

protected void Page_Load(object sender, EventArgs e)

{

base.Page_Load(sender, e);

if (Request.QueryString["ScheduledClassID"] != null)

{

_scheduledClass = ScheduledClassService.GetByID(Int32.Parse(Request.QueryString["ScheduledClassID"]));

}

if (!Page.IsPostBack)

{

if (((UserProfile)Session["_userProfile"]).IsAuthorized("Grades - Edit") == true)

{

Master.SetLocation("GradesByClass.aspx", "Grade Entry for: <b>" + _scheduledClass.SubjectName + "</b>", true);

}

else

{

throw new CorpsNETServer.CorpsNETAuthException("Grades - Edit");

}

//rdpRosterDate.SelectedDate = DateTime.Now;

lblClassPeriod.Text = _scheduledClass.ClassPeriodName;

lblClassroom.Text = _scheduledClass.ClassroomName;

lblClassSchedule.Text = _scheduledClass.ClassroomScheduleName;

lblSubject.Text = _scheduledClass.SubjectName;

lblTeacher.Text = _scheduledClass.TeacherName;

lblTrimester.Text = _scheduledClass.TrimesterName;

LoadGridStructure();

}

public void LoadGridStructure()

{

radGridGrades.Columns.Add(new GridBoundColumn() { ReadOnly=true, UniqueName = "Corpsmember", DataField = "EmployeeName", HeaderText = "Corpsmember", SortExpression = "EmployeeName" });

radGridGrades.Columns.Add(new GridBoundColumn() { ReadOnly = true, UniqueName = "AcademicScheduleName", DataField = "AcademicScheduleName", HeaderText = "Academic Schedule", SortExpression = "AcademicScheduleName" });

radGridGrades.Columns.Add(new GridBoundColumn() { ReadOnly = true, UniqueName = "CurrentStatusName", DataField = "CurrentStatusName", HeaderText = "Current Status", SortExpression = "CurrentStatusName" });

List<AcademicAssignment> _academicAssignemnts = AcademicAssignmentService.GetForScheduledClass(_scheduledClass.ID);

for (int i = 0; i < _academicAssignemnts.Count; i++)

{

radGridGrades.Columns.Add(new GridBoundColumn() { UniqueName = _academicAssignemnts[i].ID.ToString(), HeaderText = "Assignment: <a href='#' class='RadGrid_CorpsNETBootstrap_a' onclick =openEditAcademicAssignmentWindow(" + _academicAssignemnts[i].ID + "); return false;>" + _academicAssignemnts[i].Name + "</a> Due Date: <b>" + _academicAssignemnts[i].DueDateString + "</b>" });

}

public void LoadStudents()

{

radGridGrades.DataSource = EmployeeService.GetForScheduledClass(_scheduledClass.ID);

}

protected void radGridGrades_ItemDataBound(object sender, GridItemEventArgs e)

{

if (e.Item is GridDataItem)

{

GridEditableItem form = (GridEditableItem)e.Item;

int employeeid = Int32.Parse(e.Item.OwnerTableView.DataKeyValues[e.Item.ItemIndex]["ID"].ToString());

//goto through all the assignments and load any existing grades for that assignment

List<AcademicAssignment> _academicAssignments = AcademicAssignmentService.GetForScheduledClass(_scheduledClass.ID);

for (int i = 0; i < _academicAssignments.Count; i++)

{

//radGridGrades.Columns.Add(new GridBoundColumn() { UniqueName = _academicAssignemnts[i].ID.ToString(), HeaderText = "Assignment: <b>" + _academicAssignemnts[i].Name + "</b> Due Date: <b>" + _academicAssignemnts[i].DueDateString + "</b>" });

//get the grade for this assignment and Employee

Grade _grade = GradeService.GetForAcademicAssignment(employeeid, _academicAssignments[i].ID);

if (_grade != null)

{

if (_academicAssignments[i].LetterGrade == true)

form[_academicAssignments[i].ID.ToString()].Text = _grade.LetterGrade;

else

form[_academicAssignments[i].ID.ToString()].Text = _grade.Points.ToString();

}

else

form[_academicAssignments[i].ID.ToString()].Text = string.Empty;

}

protected void radGridGrades_NeedDataSource(object source, Telerik.Web.UI.GridNeedDataSourceEventArgs e)

{

LoadStudents();

}

protected void radGridGrades_BatchEditCommand(object sender, GridBatchEditingEventArgs e)

{

//todo

}

On the first page load everything works fine. (see pic 1) I want to edit only the values in a single column. I'm aware that I have not yet implemented the save code. the problem is that the first columns lose their definitions after postback by either the 'cancel changes' or 'save changes' batch edit buttons. CAn you point me in the right direction? Thanks.

Grid

answered on 13 Feb 2017

0 answers

65 views

RadEditor Moble iOS 10

I have a ticket open for this but I thought maybe others have/are encountering this issue. The RadEditor will not work in RenderMode=Mobile on iOS 10, at least not in a RadWindow. If I switch to class mode it works fine, but the toolbar looks horrible on the small screen.

What options/workarounds do I have? Can you have a different toolbar on mobile without changing everything? Why does this not work? The issue is you can open and edit the text but when you close it you can no longer scroll the RadWindow, which you cold scroll fine before editing the text in the editor.

Editor

asked on 13 Feb 2017

7 answers

135 views

Move next month/previous month arrows

On month view, my customer wants the previous month arrow to appear to the left of the Date header and the next month arrow to appear to the right. So instead of:

< > November, 2011

they want:

< November, 2011 >

Is there a way to do this?

Thanks,
Dan

Scheduler

answered on 13 Feb 2017

1 answer

338 views

Copy/Paste and RadGrid

The only solution I have found for copy and paste into RadGrid is from 2010. Has anything been done since then to implement pasting into RadGrid since then?

Grid

answered on 13 Feb 2017

4 answers

159 views

Managers dialog scrolling classic vs lightweight

Hi,

For users with small screens there is a big difference in accessing all UX elements in the dialog windows.

Please compare attached Classic and Lightweight screenshots.

On Classic all elements (read Pager) are always accessible by using the browser scrollbar.

On Lightweight the Pager is not accessible in Chrome and Edge. In Firefox a scrollbar appears in the RadWindow so the user can scrolldown there.

Screenshots are made with Default skin; as we use Material skin the problem occurs even on modern laptop sceens as the UX elements are all bigger.

Marc

Editor

answered on 13 Feb 2017

1 answer

360 views

telerik:GridEditCommandColumn does not fire OnEditCommand if ButtonType=“ImageButton”?

In a telerik:RadGrid, I have a GridEditCommandColumn like this:

<telerik:RadGrid ID="grdMembers" runat="server" OnEditCommand="grdMembers_OnEditCommand" AutoGenerateColumns="False">

<MasterTableView DataKeyNames="MemberID" ShowHeadersWhenNoRecords="false">

<Columns>

<telerik:GridEditCommandColumn HeaderStyle-Width="30px" EditImageUrl="pen-16x16.png" ButtonType="ImageButton" UniqueName="TemplateColumn"/>

</Columns>

</MasterTableView>

</telerik:RadGrid>

(some more columns are actually included, but I omit those for now).

The grdMembers_OnEditCommand is having a breakpoint.
Now, when the ButtonType is either ImageButton or FontIconButton, the pen icon shows up (not otherwise), but the OnEditCommand will not fire.

Why not?

If the ButtonType is LinkButton, the first column will read "Edit", and the OnEditCommand fires if such a link is clicked.

It would help if I could paste code in this forum without line endings being killed.

Also, undo would be appreciated.

Thanks!

Grid

answered on 13 Feb 2017

3 answers

249 views

Opening Stand alone Image Manager

Hi,

If I follow these instructions: http://www.telerik.com/support/kb/aspnet-ajax/editor/details/using-the-image-and-document-managers-outside-radeditor

When I open like this everything is OK:

function OpenImgManager(TheBox) {
$find(TheBox).open('ImageManager', { CssClasses: [] }, null, 'ImageManager');
}

But when I open like this, the image url is only passed when double clicking the image, on INSERT button null value is passed.

function OpenImgManager(TheBox) {
    var args = new Telerik.Web.UI.EditorCommandEventArgs("ImageManager", null, document.createElement("a"));
    args.CssClasses = [];
    $find(TheBox).open('ImageManager', args);
}

What is happening here, I think this always worked till now.

Marc

Editor

answered on 13 Feb 2017

10 answers

450 views

How can you bind a RadClientDataSource to a custom JavaScript object/array (not to an API/WebService)

I need to bind a RadClientDataSource to a TelerikSearchBox, where the RadClientDataSource pulls data that I already have on the client-side. All the examples I can find try to pull data from a web service or REST API.

I haven't had luck getting a consistent approach that works for setting data and handling when the item is clicked.

I've been playing with trying to set the data in the OnRequestStart client event using code like:

function QN_OnClientDataRequestingDS(sender, args) {

if (args.get_type() === "read") {

//var searchText = sender.get_filterExpressions().getItem(0).get_value();

// Normally get this from another array already on the client-side, but stubbed this for the example

var myData = [

{

'ID': 1,

'Text': 'Item 1'

},

{

'ID': 2,

'Text': 'Item 2'

},

];

var dataSource = sender.get_dataSourceObject();

dataSource.transport.data = myData;

}

The OnRequestStart appears to be called multiple times however.

Also, then in the RadSearchBox OnClientSearch event, I'm trying to get the selected item when they click the dropdown list item, but it doesnt return anything but text:

function QN_OnClientSearch(sender, args) {

// http://docs.telerik.com/devtools/aspnet-ajax/controls/searchbox/client-side-programming/events/onclientsearch

var item = args.get_dataItem(),

text = args.get_text(),

value = args.get_value();

if (item) {

alert(text + " " + value);

}

My server controls are defined like:

<telerik:RadSearchBox

id="SearchBox"

accesskey="S"

runat="server"

visible="true"

EmptyMessage="Search..."

ClientDataSourceID="SearchDS"

DataTextField="Text"

DataValueField="ID"

OnClientSearch="QN_OnClientSearch"

>

</aec:TelerikSearchBox>

<telerik:RadClientDataSource

ID="SearchDS"

runat="server"

>

<Schema>

<Model ID="ID">

<Fields>

<telerik:ClientDataSourceModelField FieldName="ID" DataType="Number" />

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

</Fields>

</Model>

</Schema>

<ClientEvents OnRequestStart="QN_OnClientDataRequestingDS" />

</telerik:RadClientDataSource>

Thanks!

Mike

ClientDataSource

answered on 13 Feb 2017

4 answers

220 views

biff excel export currency in excel file

Hi

Hi,

We use Radgrid and use Bill Excel Export. One of the column data is currency. At design time, 

we are declaring it like this:

<telerik:GridBoundColumn DataField="Amount" HeaderText="Amount" UniqueName="Amount" DataFormatString="{0:C2}" HeaderTooltip="Amount">

<HeaderStyle Width="12%"></HeaderStyle>

<ItemStyle HorizontalAlign="Right" />

</telerik:GridBoundColumn>

When I export, in excel this column shows up with green triangle in the corner, that means currency is 

treated as string. I know that this is because of use of DataFormatString. The amount is showing fine 

with $ sign and commas. I need this amount column to be treated as currency and not string. This make it 

get rid of green corner in excel. Please let me know how to do it. I tried mso-number-format, 

exportinfrastructure.cell.format etc. Nothing worked out.

Thanks,

Prathiba

Grid

answered on 13 Feb 2017

1 answer

380 views

Load-On-Demand data bound controls in RadPageView when they are selected by RadTab

In my webpage, I have a RadTabStrip containing RadTab:s which will decide which page view the webpage that is shown.

<telerik:RadTabStrip ID="rtsTabs2" runat="server" Width="100%" MultiPageID="rmpMultiPage2" AutoPostBack="True" SelectedIndex="0" OnTabClick="rtsTabs2_TabClick">

<Tabs>

<telerik:RadTab Text="Page 1" PageViewID="pvPage1" />

<telerik:RadTab Text="Page 2" PageViewID="pvPage2" />

</Tabs>

</telerik:RadTabStrip>

The page views are defined like this:

<telerik:RadMultiPage ID="rmpMultiPage2" runat="server">

<telerik:RadPageView ID="pvPage1" runat="server"> RadGrids etc </telerik:RadPageView>

<telerik:RadPageView ID="pvPage2" runat="server"> More RadGrids etc </telerik:RadPageView>

</telerik:RadMultiPage>

The page views contains numerous components that will be populated from the database.

However, I will only be interested in populate those when a page view containing them is displayed.

Which event should I listed at to determine when to populate components?

The OnLoad event in RadPageView is triggered when the page load, regardless if the page view is shown or not.
The OnPreRender event in RadPageView is also triggered on page load.
The OnNeedDataSource event in GridView is the same, the event triggers when the page loads.
Using Visible="False" in a RadPageView only results in page views that will never show up even if the corresponding RadTab is clicked.

TabStrip

answered on 13 Feb 2017