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?

Hi

Is it possible to hide these buttons? 

Eric

Hi, I have a problem with first login page in Blazor NET 6, because there was changed _layout and _host pages.

In Core 3.1. it works https://www.youtube.com/watch?v=PgDEpkWbsew, but I don't know how can I do it in Net 6

Can you help me, please.

Thanks

Peter

Why this happening after selecting the start date?

I have created custom row filtering.

TelerikDateRangePicker is used inside FilterCellTemplate.

Based on the examples from the article -> https://demos.telerik.com/blazor-ui/grid/custom-filter-row <- select start, end dates and clear button handlers was implemented.

But I found that for each handler (select start or end date) new instance of FilterCellTemplateContext has been used.

And when I try to get selected values in OnRead method from GridReadEventArgs -> Request.Filters, filters do not contain selected date range.

Could someone please explain why there are a lot of instances of FilterCellTemplateContext (more that one on each method call)?

How can I get selected date range values in OnRead methods from GridReadEventArgs?

Thanks!

Hello,

the Edit/Preview box on the Blazor documentation is nice. Allows me to quickly try what the specific component or option does and allows. But, if I'm not mistaken, it does not display compilation errors anywhere and this makes the experience in case of an error really bad.

For example, if I go to the Blazor MultiSelect page and edit the first editor available under the "Creating MultiSelect" header. If I make no mistakes, pressing the Preview button compiles the code cleanly and starts the Blazor component with my edits. But, if I make a mistake, let's say near the bottom of the Edit box I accidentally add an extra d to Add like so "Countries.Addd("Albania");", then after pressing the Preview button a couple of things might happen(?)

• If I had already successfully compiled some Blazor from your website, the Preview box will not update with the edits, but instead show the old compilation. and no errors anywhere. Can be very puzzling if the previous code was for.ex. from a different component alltogether
• If I didn't have an earlier compilation, kind of nothing happens. The Preview box display stays empty and there are no errors anywhere.

So please add some kind of a popup with atleast an error saying "Hey, there's some problem with your code, we couldn't compile it, please take another look", or better yet, the actual error and line number if possible.