Converting Radzen Grid To Telerik Grid

1 Answer 155 Views

General Discussions Grid

Imad asked on 30 Jul 2024, 02:27 PM

I have a grid that I built on Radzen Studio is there any way for me to convert into telerik.

Here is my code

Filename: IqdateIqdates.razor.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.JSInterop;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Web;
using Radzen;
using Radzen.Blazor;

namespace LastVersion.Client.Pages
{
public partial class IqdateIqdates
{
[Inject]
protected IJSRuntime JSRuntime { get; set; }

[Inject]
protected NavigationManager NavigationManager { get; set; }

[Inject]
protected DialogService DialogService { get; set; }

[Inject]
protected TooltipService TooltipService { get; set; }

[Inject]
protected ContextMenuService ContextMenuService { get; set; }

[Inject]
protected NotificationService NotificationService { get; set; }

[Inject]
public JDEService JDEService { get; set; }

protected IEnumerable<LastVersion.Server.Models.JDE.IqdateIqdate> iqdateIqdates;

protected RadzenDataGrid<LastVersion.Server.Models.JDE.IqdateIqdate> grid0;

protected int count;

protected string search = "";

protected async Task Search(ChangeEventArgs args)
{
search = $"{args.Value}";

await grid0.GoToPage(0);

await grid0.Reload();
}

protected async Task Grid0LoadData(LoadDataArgs args)
{
try
{
var result = await JDEService.GetIqdateIqdates(filter: $@"(contains(ASTDDT,""{search}"") or contains(AERODT,""{search}"") or contains(AYMDDT,""{search}"") or contains(ACYMDT,""{search}"") or contains(AMDCY,""{search}"") or contains(ADMCY,""{search}"") or contains(ACYMD,""{search}"") or contains(AJULAN,""{search}"") or contains(AJULN1,""{search}"") or contains(AJULN2,""{search}"") or contains(DAYNM,""{search}"") or contains(DAYABR,""{search}"") or contains(MTHNM,""{search}"") or contains(MTHABR,""{search}"") or contains(DABBR,""{search}"") or contains(DFULL,""{search}"")) and {(string.IsNullOrEmpty(args.Filter)? "true" : args.Filter)}", orderby: $"{args.OrderBy}", top: args.Top, skip: args.Skip, count:args.Top != null && args.Skip != null);
iqdateIqdates = result.Value.AsODataEnumerable();
count = result.Count;
}
catch (System.Exception ex)
{
NotificationService.Notify(new NotificationMessage(){ Severity = NotificationSeverity.Error, Summary = $"Error", Detail = $"Unable to load IqdateIqdates" });
}
}
protected bool errorVisible;
protected LastVersion.Server.Models.JDE.IqdateIqdate iqdateIqdate;

protected async Task CancelButtonClick(MouseEventArgs args)
{
NavigationManager.NavigateTo("iqdate-iqdates");
}
}
}

Filename: IqdateIqdates.razor

and here is my model file

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.ComponentModel.DataAnnotations.Schema;
using System.Text.Json;
using System.Text.Json.Serialization;

namespace LastVersion.Server.Models.JDE
{
[Table("Iqdate", Schema = "iqdate")]
public partial class IqdateIqdate
{

[NotMapped]
[JsonIgnore(Condition = JsonIgnoreCondition.WhenWritingNull)]
[JsonPropertyName("@odata.etag")]
public string ETag
{
get;
set;
}

public int? CENTRY { get; set; }

public int? CNTFLG { get; set; }

public int? MONTH { get; set; }

public int? DAY { get; set; }

public int? YEAR { get; set; }

public int? CENTYR { get; set; }

public int? STDDAT { get; set; }

public int? ERODAT { get; set; }

public int? YMDDAT { get; set; }

public int? CYMDAT { get; set; }

public int? MDCYDT { get; set; }

public int? DMCYDT { get; set; }

public int? CYMDDT { get; set; }

public int? JULIAN { get; set; }

public int? JULAN1 { get; set; }

public int? JULAN2 { get; set; }

public int? MTHYR { get; set; }

public int? YRMTH { get; set; }

public int? CNTDAT { get; set; }

public DateTime? USADAT { get; set; }

public string ASTDDT { get; set; }

public string AERODT { get; set; }

public string AYMDDT { get; set; }

public string ACYMDT { get; set; }

public string AMDCY { get; set; }

public string ADMCY { get; set; }

public string ACYMD { get; set; }

public string AJULAN { get; set; }

public string AJULN1 { get; set; }

public string AJULN2 { get; set; }

public string DAYNM { get; set; }

public string DAYABR { get; set; }

public string MTHNM { get; set; }

public string MTHABR { get; set; }

public string DABBR { get; set; }

public string DFULL { get; set; }

[Column("MONTH#")]
public int? MONTH_ { get; set; }
}
}

1 Answer, 1 is accepted

answered on 02 Aug 2024, 08:46 AM

Hello Imad,

Here are some tips and relevant Telerik documentation:

You can replace RadzenStack, RadzenColumn and RadzenRow with any of the layout components, which Telerik UI for Blazor provides.
Our Grid API is not the same, but similar. I recommend you to visit:
Grid Overview
Grid data binding
How to configure Grid columns
Grid editing
Grid EditorTemplate

Of course, I encourage you to review other documentation and demo pages too. Then, let us know if you need more specific information.

Regards,
Dimo
Progress Telerik

Do you have a stake in the designеr-developer collaboration process? If so, take our survey to share your perspective and become part of this global research. You’ll be among the first to know once the results are out.
-> Start The State of Designer-Developer Collaboration Survey 2024