Hi

I have a date field in a grid, and the filter row,  how can i remove the automatically created 'd-M-yyyy'  placeholder from the filter cell?

I have a requirement where one of the column value is a html string and I need to convert that value as markup string. I can do it using a template as:

<GridColumn Field="@nameof(Employee.Name)" Title="Name">

        <Template>

        @{

        var value = (context as Employee);

        var markupValue = (MarkupString) value.Name;

        @markupValue;

        }

        </Template>

 </GridColumn>

But I want to create a dynamic component (suitable for any class and any property). I created a custom component and called it from the main component. The requirement was achieved but I lost the sorting functionality and also this grid column is moved towards the end.

Custom component (HtmlGrid.razor):

<GridColumn Title="@Title">
    <Template>
        @{
            var value = GetPropValue(context, ColumnName)?.ToString();
            var a = (MarkupString)value;
            @a;
        }
    </Template>

</GridColumn>


@code {
    [Parameter] public string ColumnName { get; set; } = string.Empty;
    [Parameter] public string Title { get; set; } = string.Empty;
    
    public object GetPropValue(object src, string propName)
    {
        return src.GetType().GetProperty(propName).GetValue(src, null);
    }

}

This is then called from some parent (Employee.razor) as:

<GridColumn Field="@(nameof(Employee.Id))" Width="80px" />
<GridColumn Field="@(nameof(Employee.A))" Width="80px" />
<HtmlGrid ColumnName="@nameof(Employee.Name)" Title="Name"/>
<GridColumn Field="@(nameof(Employee.B))" Width="80px" />

The issue here is that, when this grid is rendered, the columns are seen in the order:

ID-Column, A-Column, B-Column, Name-Column (HtmlGrid)

Also, There is no sorting in this HtmlGrid

Hi,

I have a blazor grid which works in the following simplified way

public class modelVm {
  public int Id {get;set;}
}

protected override void OnInitialized() 
{
  griddate= new List<modelVm>;
}

protected override async Task OnAfterRenderAsync(bool firstRender)
{
  griddata.add(new ModelVm{Id=1});
  StateHasChanged();
}

And on the razor page itself 

<TelerikGrid Data="@GridData" AutoGenerateColumns="true"/>

If I debug the code I can see giddata has 1 item but the grid isn't showing it.

The strangest thing is that I have other grids using the same code and they work. But all new code doesn't. Even a copy/paste of an old razor page and changing the modelVm will result in not refreshing the telerik Grid.

If I put on the razor page a @griddata.count you will see that the griddata has 1 item.

Does somebody has any idea?

Hello all!

This Blazor stuff is very new to me. Old Desktop app dev here.

I want the real basics of how you connect to a MS SQL DB. I have a SP that takes a parameter and returns a number of columns.

I have a grid on a razor page and it works when I hardcode the data within the page.

I now want to connect to my DB and use the data it returns.

I created the DBContext. Has the connectionstr and the dbSet and the class describing the resultset.

Not sure how to connect to the SP or get that attached to the data grid. I want the result to feed the columns to the grid.

Lost.

Thanks.

I have my Blazor app, based it off the Demo app that comes with VS.

How does one integrate this loader control into the app?

I have a number of pages in the app and some have a telerik btn and grid on it.

I would like after the button is clicked for this loader to show while the grid gets its data from the server.

When done then have this loader disappear.

Then demo when running looks like what I want. just dont know where to stick stuff and how to turn on and off.

the Grid and buttons are within divs within telerik layout control.

HOw that helps.

Thanks

Deasun

Hi

Add the top of a Edit form we have two buttons to Save (Opslaan) or Cancel (Annuleren) changes made to the form (model)

We nog have a OnChange like event on each control but that result gives strange results , the typing in goes wronf (some charachters are skipped)

So the question is:

If i want to enabled the 2 buttons only when some field has changed, what is the best way to do this?

Also when i reverse the changes the buttons shoud go back in disabled state

Thanks for helping me!

Eric

I have a telerik grid having paginations functionality. On page change, sorting I need to make a request to server, get the filtered data and populate it in the telerik grid. I have used the OnRead="ReadItems" event of telerik grid to achieve this functionality.

Issue: When I am in any page other than 1 and I change the number of items per page, it makes multiple calls to the function ReadItems. This will make multiple api calls. How can I achieve all the filtering functionalities without making multiple calls?

Code:

<TelerikGrid TItem="@Employee"
             OnRead="@ReadItems"
             PageSizeChanged="@PageSizeChangedHandler"
             Pageable="true" PageSize="@PageSize"><GridSettings><GridPagerSettings PageSizes="@PageSizes"></GridPagerSettings></GridSettings><GridColumns><GridColumn Field=@nameof(Employee.Id) Title="ID" /><GridColumn Field=@nameof(Employee.Name) Title="Name" /></GridColumns></TelerikGrid>

@code {
    
    int PageSize { get; set; } = 15;
    int CurrentPage { get; set; } = 3;
    protected List<int?> PageSizes { get; set; } = new List<int?> { 15, 30, 50 };
    bool pageSizeChanged = false;
    protected async Task ReadItems(GridReadEventArgs args)
    {
        
        Console.WriteLine("pageSizeChanged: " + pageSizeChanged);
        Console.WriteLine("Page: " + args.Request.Page);

        Console.WriteLine("data requested: " + args.Request);
        
        DataEnvelope DataResult = await FetchPagedData(args.Request.Page, args.Request.PageSize);
        args.Data = DataResult.CurrentPageData;
        args.Total = DataResult.TotalItemCount;
    }

    public async Task<DataEnvelope> FetchPagedData(int pageNumber, int pageSize)
    {
        Console.WriteLine("Making api call");
        List<Employee> fullList =  new List<Employee>();

        int totalCount = 100;
        for (int i = 1; i <= totalCount; i++)
        {
            fullList.Add(new Employee()
            {
                Id = i,
                Name = "Name " + i,
            });
        }

        DataEnvelope result = new DataEnvelope();

        result.CurrentPageData = fullList.Skip(pageSize * (pageNumber - 1)).Take(pageSize).ToList();
        result.TotalItemCount = fullList.Count;

        await Task.Delay(1000); 

        return result;
    }

    public class DataEnvelope
    {
        public List<Employee> CurrentPageData { get; set; }
        public int TotalItemCount { get; set; }
    }

    public class Employee
    {
        public int Id { get; set; }
        public string Name { get; set; }
    }

    void PageSizeChangedHandler(int newPageSize)
    {
        pageSizeChanged = true;
        PageSize = newPageSize;
        Console.WriteLine("PageSize: " + PageSize);
    }
}


    
        
        
    
    
        
        
    

I generated a new stylesheet using the Telerik Themebuilder and specified that the border-radius should be 0px, but after using the stylesheet in my project, I saw that all my buttons have a border-raduis, which is not the desired effect. Upon further inspection, I saw that this HTML is generated from my TelerikButton.

HTML:

<button class="telerik-blazor k-button k-button-solid k-rounded-md k-button-rectangle k-button-md k-button-solid-primary k-disabled" id="contracten-laden-button" data-id="eaee6bb5-7628-4584-861d-c02fe6f432a1" tabindex="-1" aria-disabled="true" disabled="" type="submit">
        <span class="k-button-text">Contracten laden</span>
</button>

TelerikButton:

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">
    Contracten laden
    <TelerikLoader ThemeColor="@ThemeConstants.Loader.ThemeColor.Light" Type="@LoaderType.Pulsing" Visible="@IsContracteringsStatussenLoading" />
</TelerikButton>

Upon further inspection, I saw within the computed style (in the Developer tools) that the radius is coming from the stylesheet file which I just generated. More specifically, the .k-rounded-md class, which gives a border radius of 4px. It seems like, currently, it is not possible to generate a css file with a border-radius of 0. I suppose that I have to manually change these values, but I fear that I may break some other functionality.

Could you please suggest possible solutions? Perhaps specify which classes I could change to 0px to ensure that nothing else breaks. 

Thank you in advance for your response. I have attached all the files which were generated from the themebuilder, just for completion. 

Kind regards,

Natasha

There is a sample https://docs.telerik.com/blazor-ui/components/grid/events#onrowclick

and it works perfectly. There is one problem i should to click on it to activate it and update linked grid.

How can i activate a top (parent) grid without click on that ?

I have a TelerikGrid that I want to export to Excel or CSV, but before I export it I want to add a column. I add the column and set it's Field & Title, which when exported the Field data is shown but not the Title.

I have followed the documentation and created a hidden column, then using the OnBeforeExport event, added the column to the list but still the Title does not export.

Am I missing something?