I need to take photos and videos and save their path in IndexedDB from our web app so, when user decides to go to another page or reload it ..I can be able to retrieve the photos or video that user took through files' path and all of this should work in offline mode and from a tablet(Android's system) the user will submit the information later.

So, what our team thought to do is using File system Access API .

Here is demo: https://filehandle-indexeddb.glitch.me/ .

But, I tested this demo from my mobile browser(chrome) and did not work out correctly because android is not supported and that's why cannot access android file system  :( .

So, we thought that we can mix storing files handles in IndexedDB from File System Access API* and Blazor Upload from telerik but, We need to know if we can do it offline. 

Thanks in advance,

I would like in C# code behind, to set the Header background color and Font Color & Bold it.

How can I do that?

Something like:

Grid.Columns.Header.BAckground = NAvy

Grid.Columns.Header.font.color = White

Grid.Columns.Header.font.bold = true

Also want to do a alternate row coloring setup. How'd I do that?

Is there a render event I can use?

Thanks

Deasun

Hi

In the training I see this comping up, I installed Telerik using the msi file, i do not have this Extension option.

Using VS 2022

How can I get it?

Eric

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);
    }
}