Questions on UI for ASP.NET AJAX Forum

1 answer

148 views

Nested View with Client side databinding of Grid

I am trying to create a Master/Detail RadGrid, wherein the Grid is being populated at Client side using Web Service JSON data. I find that on setting the data source and binding through AJAX, the hierarchical data is not being generated. Can anyone please let me know what's the issue with this? Whether in the first place this use case is supported?

<telerik:RadGrid AllowFilteringByColumn="False" AllowPaging="False" AllowSorting="True" AutoGenerateColumns="False" CellPadding="0" CellSpacing="0" CssClass="gridCrossRoads" GridLines="None" ID="gridManageCases" runat="server">

<ClientSettings AllowGroupExpandCollapse="false" EnableAlternatingItems="false" EnableRowHoverStyle="true">

<Scrolling AllowScroll="true" UseStaticHeaders="true" />

<Selecting AllowRowSelect="True" />

<ClientEvents OnRowDataBound="GridRowBound" OnHierarchyExpanding="HierarchyExpanding"></ClientEvents>

</ClientSettings>

<MasterTableView AllowFilteringByColumn="False" AllowNaturalSort="False" ClientDataKeyNames="YouthId" DataKeyNames="YouthId" EnableColumnsViewState="False" EnableViewState="False" HierarchyLoadMode="Client" NoMasterRecordsText="<div class='noRec'>No records to display.</div>" TableLayout="Auto">

<Columns>

<telerik:GridBoundColumn DataField="YouthId" HeaderText="Youth ID" UniqueName="YouthId">

<HeaderStyle CssClass="gridHeader" Width="10%" />

<ItemStyle CssClass="gridItem" Width="10%" />

</telerik:GridBoundColumn>

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

<HeaderStyle CssClass="gridHeader" Width="25%" />

<ItemStyle CssClass="gridItem" Width="25%" />

</telerik:GridBoundColumn>

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

<HeaderStyle CssClass="gridHeader" Width="10%" />

<ItemStyle CssClass="gridItem" Width="10%" />

</telerik:GridBoundColumn>

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

<HeaderStyle CssClass="gridHeader" Width="10%" />

<ItemStyle CssClass="gridItem" Width="10%" />

</telerik:GridBoundColumn>

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

<HeaderStyle CssClass="gridHeader" Width="10%" />

<ItemStyle CssClass="gridItem" Width="10%" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ZipCode" HeaderText="Zip Code" UniqueName="ZipCode">

<HeaderStyle CssClass="gridHeader" Width="10%" />

<ItemStyle CssClass="gridItem" Width="10%" />

</telerik:GridBoundColumn>

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

<HeaderStyle CssClass="gridHeader" Width="10%" />

<ItemStyle CssClass="gridItem" Width="10%" />

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn UniqueName="Temp">

<HeaderStyle CssClass="gridHeader" Width="15%" />

<ItemStyle HorizontalAlign="Center" Width="15%" />

</telerik:GridTemplateColumn>

</Columns>

<NestedViewTemplate>

<div class="viewWrap">

<telerik:RadTabStrip EnableViewState="False" ID="tbGrd" MultiPageID="multiPage" runat="server" SelectedIndex="0">

<Tabs>

<telerik:RadTab Owner="tbGrd" PageViewID="pBasic" runat="server" Selected="True" Text="Identification" Value="identification">

</telerik:RadTab>

<telerik:RadTab Owner="tbGrd" PageViewID="pOthers" runat="server" Text="Contact" Value="contact">

</telerik:RadTab>

<telerik:RadTab Owner="tbGrd" PageViewID="pSkills" runat="server" Text="Referral" Value="referral">

</telerik:RadTab>

<telerik:RadTab Owner="tbGrd" PageViewID="pNotes" runat="server" Text="Options" Value="options">

</telerik:RadTab>

<telerik:RadTab Owner="tbGrd" PageViewID="pAct" runat="server" Text="Calls" Value="calls">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage CssClass="pageView" EnableViewState="False" ID="multiPage" runat="server" SelectedIndex="0">

<telerik:RadPageView ID="pageIdentification" runat="server">

<div id="dBas" runat="server">

This is the first tab

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="pageContact" runat="server">

<div id="dOth" runat="server">

this is the second tab

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="pageReferral" runat="server">

<div id="dSkl" runat="server">

this is the third tab

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="pageOptions" runat="server">

<div id="dNot" runat="server">

this si the fourth tab

</div>

</telerik:RadPageView>

<telerik:RadPageView ID="pageCalls" runat="server">

<div id="dSub" runat="server">

this is the fifth tab

</div>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</NestedViewTemplate>

</MasterTableView>

</telerik:RadGrid>

<script>

$(document).ready(function()

{

var GridNewCases = $find(arrayControl[0]);

var GridNewCasesMaster = GridNewCases.get_masterTableView();

//Data is fetched here

//setTimeout(GetNewCasesData, 100);

//Though this is new function this is how the datasource is setup:

GridNewCasesMaster.set_dataSource((result && result.Data) ? result.Data : []);

GridNewCasesMaster.dataBind();

});

</script>

This is the datasource that is retrieved.

{"d":{"Data":[{"Id":2,"YouthId":"CR0000002","Name":"Mani Venkiteswaran","Gender":"Others/Unknown","Age":20,"Phone":"(123) 456-7890","ZipCode":"18940-","Status":"New"},{"Id":5,"YouthId":"CR0000005","Name":"Venrall Jamanison","Gender":"Male","Age":8,"Phone":"(988) 554-4633","ZipCode":"18940-","Status":"New"},{"Id":6,"YouthId":"CR0000006","Name":"Jermey Smith","Gender":"Male","Age":15,"Phone":"(554) 889-6633","ZipCode":"18940-","Status":"New"},{"Id":7,"YouthId":"CR0000007","Name":"Walter Nelson","Gender":"Male","Age":16,"Phone":"(558) 733-1225","ZipCode":"18942-","Status":"New"}]}}

At the code behind this is the code:

protected void Page_Load(object sender, EventArgs e)

{

if (Page.IsPostBack)

{

return;

}

gridManageCases.DataSource = new List<object>();

gridManageCases.AutoGenerateHierarchy = true;

}

Please let me know how this can be done. I found one code sample on your site from 2008, though the steps are same what I am doing but then I should be knowing much changes have happened since the assembly was released back in 2008 to now.

Thanks.

Grid

answered on 02 Aug 2020

0 answers

88 views

Handling DateTime as a custom result property - DON'T!

I ran across a minor but annoying problem with sending a time back from the handler through a custom result. Using datatype DateTime will not work. The value comes through from the server as a long timestamp, which is wonderful, but that does not parse to a DateTime directly. It has to be a string-ified. However, this cannot be done in the OnFileUploaded event because by then the server has already choked on converting Date(long value) to a DateTime. The solution is to use a timestamp represented as a long datatype for the result property, send that across , and decode / parse on the other end (client side) as desired. like this:

In the custom result:

/// instant of file upload
/// this is a timestamp
public long UploadTimeStampUTC
{
get;
set;
} = new DateTimeOffset(System.DateTime.Now.ToUniversalTime()).ToUnixTimeMilliseconds(); // this is overkill

public int UploadResultStatusCode { get; set; } // whatever code you want

public string UploadResultMessage // happy.. or very, very sad
{
get;
set;
}

(not all properties shown....)

In the handler
...

..

var tsLong = new DateTimeOffset(System.DateTime.Now.ToUniversalTime()).ToUnixTimeMilliseconds();
result.UploadTimeStampUTC = tsLong;

result.myUploadTime = tsLong ;

....

...

result.UploadResultMessage = $"Status Code: {result.UploadResultStatusCode} - Process Result Message: {logMsg} {Environment.NewLine}" +
$"Original FileName: {file.FileName}{Environment.NewLine}" +
$"TempUploadFileName {FullPath.Replace(System.IO.Path.DirectorySeparatorChar, System.IO.Path.AltDirectorySeparatorChar)}{Environment.NewLine}" +
$"UploadResultFileName: {result.UploadResultFileName}{Environment.NewLine}" +
$"UploadResultPhysicalFileName: {result.PhysicalFileName}{Environment.NewLine}" +
$"UploadDateTime: {(Helpers.UnixTimeStampToDateTime(tsLong).ToString("F", CultureInfo.CreateSpecificCulture("en-US")))}";

return result;

...

In OnFileUploaded:

...

LBISAsyncUploadResultError result = e.UploadResult as LBISAsyncUploadResultError;
Log?.Debug(result.UploadResultMessage);
Log?.Debug($"Filename on disk: {result.PhysicalFileName}");
Log?.Debug($"TITLE: {e.File.GetFieldValue("Title")}");
Log?.Debug($"NOTES: {e.File.GetFieldValue("Notes") }");
Log?.Debug($"TIMESTAMP (as long): {result.UploadTimeStampUTC.ToString()}");
Log?.Debug($"DATETIME: {(Helpers.UnixTimeStampToDateTime(result.UploadTimeStampUTC).ToString("F", CultureInfo.CreateSpecificCulture("en-US")))}");

the results look like:

...

2020-08-01 10:12:53,642 [13] DEBUG LOGGER [] - Status Code: 100 - Process Result Message: Uploaded successfully
Original FileName: BrM6 - Troubleshooting-memo.pdf
TempUploadFileName D:/git/LBIS9/src/SupportDocuments/_tmp_RadUpload/1596291166563BrM6 - Troubleshooting-memo.pdf.tmp
UploadResultFileName: BrM6 - Troubleshooting-memo_[60051].pdf
UploadResultPhysicalFileName: D:/git/LBIS9/src/SupportDocuments/ExstPlans/BrM6 - Troubleshooting-memo_[60051].pdf
UploadDateTime: Saturday, August 1, 2020 14:12:48
2020-08-01 10:12:53,642 [13] DEBUG LOGGER [] - Filename on disk: D:/git/LBIS9/src/SupportDocuments/ExstPlans/BrM6 - Troubleshooting-memo_[60051].pdf
2020-08-01 10:12:53,642 [13] DEBUG LOGGER [] - TITLE: aaa
2020-08-01 10:12:53,643 [13] DEBUG LOGGER [] - NOTES: BBB
2020-08-01 10:12:53,643 [13] DEBUG LOGGER [] - TIMESTAMP (as long): 1596291168252
2020-08-01 10:12:53,643 [13] DEBUG LOGGER [] - DATETIME: Saturday, August 1, 2020 14:12:48

...

and this.... for which I cannot claim any credit

/// <summary>

/// Take a long that is a timestamp and make a datetime

/// https://stackoverflow.com/questions/7983441/unix-time-conversions-in-c-sharp

/// </summary>

/// <param name="unixTimeStamp"></param>

/// <returns></returns>

public static DateTime UnixTimeStampToDateTime(long unixTimeStamp)

{

var UnixEpoch = new DateTime(1970, 1, 1, 0, 0, 0, 0, System.DateTimeKind.Utc);

UnixEpoch = UnixEpoch.AddMilliseconds(unixTimeStamp);

return UnixEpoch;

}

/// <summary>

/// Take a DateTimeOffset and return a DateTime

/// https://stackoverflow.com/questions/7983441/unix-time-conversions-in-c-sharp

/// </summary>

/// <param name="ts"></param>

/// <returns></returns>

public static DateTime DateTimeOffSetToDateTime(DateTimeOffset ts)

{

return DateTime.Parse(ts.ToString());

}

AsyncUpload

asked on 01 Aug 2020

1 answer

100 views

Styling a grid with popup edit form

Hi, i'm using a popup edit form in a grid, but i'm having problems with its styling.

First of all, i see a empty row under the edited row and i need help to set its border=0 px to hide that.

But the auto-code of the grid has no referral, like you see in the attached image.

I've tried to find a property in the EditFormSettings without results:

<EditFormSettings EditColumn-HeaderStyle-BackColor="YellowGreen" UserControlName="VariabiliDettaglio.ascx" EditFormType="WebUserControl" PopUpSettings-Width="" EditColumn-HeaderText="headertext" CaptionFormatString=" Variabile [{0}]" EditColumn-CancelText="Annulla" EditColumn-UpdateText="Salva" FormMainTableCaption="main table caption" CaptionDataField="Nome"><br> <EditColumn UniqueName="EditCommandColumn1" ItemStyle-BackColor="Yellow"><br> </EditColumn><br> </EditFormSettings>

Thank you

Grid

answered on 31 Jul 2020

3 answers

466 views

Save method

GoodMornig,

I'm using RadSpreadsheet in Aspx page with SpreadsheetDocumentProvider and an Excel file.

I have create a javascript that call the save method. I write it below

function exportFile() {
var spreadsheet = $find("<%= RadSpreadsheet1.ClientID %>");
spreadsheet.save();
}

Is there a post save event ( client or server side) that I can Intercept?

I would like get the file saved on server and send it to client.

Many thanks

Claudia

Spreadsheet

answered on 31 Jul 2020

7 answers

828 views

How to set color for nodes in ORG CHART

Hi guys!

I have a problem. I create a family tree, and i use ORG CHART. And now, i need to show nodes by gender, the man with green and the woman with pink. And I bind data to ORG CHART form SQL/SERVER. I hope my problem will resolve. Thanks :))))))

OrgChart

answered on 31 Jul 2020

1 answer

76 views

Telerik.Web.UI upgrade from 2011 to 2020 Pagesize, sorting not wroking

Hello,

I have downloaded Telerik_UI_for_ASP.NET_AJAX_2020_2_512_Dev.zip and upgraded my ASP.NET web application which is using Telerik.Web.UI 2011 version

After this upgrade Pagesize, sorting and Filtering not working.

I removed all cache, temp files, dlls from bin folder.

Issue : Pagesize is using ASP dropdown which has values 10,20, 50, 75, 100. Default selected value is 50. If I select 70 or 100 still showing 50 records per page.

Sorting: before update it sorts the whole data. After upgrade it sorting only in the first page.

Filter also applying for the data appears only on the current page, before it filters data on whole data.

I am using NeedDataSource, which does not need bind().

Please advise.

Thannks

Grid

answered on 30 Jul 2020

20 answers

1.9K+ views

Disable some Date in the Rad date Picker

Hi,

How to disable the some Date in the Rad Date Picker. I can be able to disable the date in the Calender control. But i cant be able to acvhieve this in the Date picker.

Can anyone help me to solve this issue.

Thanks and Regards,
Sushanth Mathew

Calendar

answered on 30 Jul 2020

1 answer

100 views

RadConfirm on Finish click

Hi,

I want to place a client RadConfirm on the Finishbutton, but I cannot find a way to access the button.

How would I do that?

Marc

Wizard

answered on 30 Jul 2020

4 answers

260 views

RadEditor video content shows through media manager dialog

If I have a video file added in the radeditor and bring up Media Manager to insert new video, existing video bleeds through the Media Manager's background. I have 3 images attached.

Does anyone knows why this might be happening and how to fix it?
Thank you.

Editor

answered on 30 Jul 2020

1 answer

691 views

Prevent downloading PDF file

Dears,

I'm using a PdfViewer and I hided the download button, but still visitor can see the path of the file from the page source.

How can I prevent visitors to see the file path, If any way to give the PdfViewer the file stream object instead of the path?

Note:
The file path is coming from database in string format.

Thank you for your help.

PdfViewer

answered on 30 Jul 2020