1. Home
  2. Forum
  3. Blazor
  4. The Grid is Displaying sfgridhvft4xftb2g_header_table and the headers.

The Grid is Displaying sfgridhvft4xftb2g_header_table and the headers.

Hi

Iam using AdminLte 3 but want to use syncfusion controls eg the Grid in my sample

but is bringing this

sfgridhvft4xftb2g_header_table and Sqized headers for the grid but the grid is displaying ok waht might be the issue


Code on the Component :

@page "/HR/Myrelations"

@using BlazorTable

@using System.ComponentModel

@inject HttpClient Http

@using Newtonsoft.Json.Linq

@using Data.Services;

@using SGWPP_ESS.Data

@inject NavigationManager NavigationManager

@inject IEmployeeRelationService EmployeeRelationService

@*

*@

@*

*@

AllowResizing="true"

>


HeaderText="Ref Code"

TextAlign="@TextAlign.Left"

Width="20">

HeaderText="Name"

TextAlign="@TextAlign.Left"

Width="90">

HeaderText="Gender"

TextAlign="@TextAlign.Left"

Width="20">

HeaderText="DOB"

TextAlign="@TextAlign.Left"

Width="20">

HeaderText="TEL"

TextAlign="@TextAlign.Left"

Width="60">

HeaderText="Nationality"

TextAlign="@TextAlign.Left"

Width="90">



@*

*@

@*

*@

@* *@


@code {

// Define a list of data items (replace with your actual data)

//https://blazorcode.uk/countriesandcities/countries-list/

// List? YourDataList { get; set; }


IEnumerable? employee_RelationsX;

void EditRelation(Employee_RelationsQ item)

{

string route = $"/HR/MyRelationAddEdit/{item.RL_RSN}";

// Implement your logic here

// You can use item to identify the selected item for editing

NavigationManager?.NavigateTo(route);

}

void AddRelation()

{

// Implement your logic here

// You can use item to identify the selected item for editing

NavigationManager.NavigateTo("/Hr/MyRelationAddEdit");


}


protected override async Task OnInitializedAsync()

{

if (EmployeeRelationService != null)

{

// var result = await EmployeeRelationService.GetmyRelationList(2408);

// YourDataList = result.ToList();

employee_RelationsX = await EmployeeRelationService.GetmyRelationList(2408);

}

}




}


Output:

sfgridkplz1pdnyqo_header_table


1 Reply
NP Naveen Palanivel Syncfusion Team November 10, 2023 02:51 AM UTC

Hi Njumu,


Greetings from Syncfusion support.


We checked your query and we suspect the reported issue might occur when theme or script files were not properly referred into the project. So we suggest you include script and themes properly in your project. Kindly refer to the attached code snippet and UG documentation for your reference.



<head>

   <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <base rel='nofollow' href="~/" />

    <link rel="stylesheet" rel='nofollow' href="css/bootstrap/bootstrap.min.css" />

    <link rel='nofollow' href="css/site.css" rel="stylesheet" />

    <link rel='nofollow' href="BlazorApp1.styles.css" rel="stylesheet" />

    <link rel="icon" type="image/png" rel='nofollow' href="favicon.png"/>

    <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />

    <link rel='nofollow' href=https://cdn.syncfusion.com/blazor/23.1.44/styles/bootstrap5.css rel="stylesheet" />

    <script src=https://cdn.syncfusion.com/blazor/23.1.44/syncfusion-blazor.min.js type="text/javascript"></script>

</head>


If you are referencing themes or scripts from CDN, Can you please ensure to change the version of reference. Also we have attached the sample for your reference.

https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference

https://blazor.syncfusion.com/documentation/common/adding-script-references#cdn-reference



Kindly get back to us if you are facing further issue again.


Regards,

Naveen


Loader.
Up arrow icon