Questions on UI for Blazor Forum

2 answers

301 views

Hi everybody,

is there a way to set all labels of scheduler component by code? I need a scheduler where the whole text should be changeable independent from current culture (buttons, date and time strings,...)

Thx, Stefan

Scheduler

answered on 02 Dec 2020

4 answers

384 views

Store window definition in separate file?

Hi,

I am using the window as a popup in my grid. Right now the markup is embedded in my grid's razor page. Is there a way to separate this out so that the window markup and/or code is in a separate file?

Thanks … Ed

Window

answered on 02 Dec 2020

1 answer

753 views

Selection on All pages

Hello Marin,

Now i have the following:

<GridCheckboxColumn SelectAll="true" SelectAllMode="GridSelectAllMode.Current">

it woks will with one thing, if i have several pages i need to go to every page to selected the items, is it possible to have everything that we have using GridSelectAllMode.Current, but also select items thought all pages (GridSelectAllMode.All does not fit due to the ignoring filter)?

Thx Alex

Grid

answered on 01 Dec 2020

12 answers

1.7K+ views

There seems to be no way to get the selected text

I am attempting to create a custom tool to add code formatting to selected text. The format command does not work with anything outside the predefined list of drop down options. If I were able to get the selected text I could simply modify that with the wrapping, but it seems there is no way to do that in the Blazor version, unless I am missing something?

Any help would be greatly appreciated.

Editor

answered on 01 Dec 2020

1 answer

114 views

Bug? Inconsistent end edit for a bool column in InCell edit mode

I've found a bit of inconsistent behaviour in the InCell mode that I think is a bug?:

If you click into a column bound to a boolean field, then click on another non-editable cell in the grid, this will not end the edit mode for the boolean column (so, it still shows a checkbox).
Whereas, for a string or date column, if you click into the field and put it into edit mode, then click onto a non-editable area of the grid that will end the edit mode.

I think the second of those behaviours is correct and what a user would expect.

I've attached a gif showing what I mean. I'm on version 2.20.

This is the code for the example in the gif.

@page "/InCell"

@using Telerik.Blazor

@using Telerik.Blazor.Components

Click a cell, edit it and click outside of the cell to see the change.

<br />

<strong>Editing is prevented for the first two items.</strong>

<TelerikGrid Data=@MyData EditMode="@GridEditMode.Incell" Pageable="true" Height="500px" Sortable="true"

OnUpdate="@UpdateHandler" OnEdit="@EditHandler" OnDelete="@DeleteHandler" OnCreate="@CreateHandler">

<GridToolBar>

<GridCommandButton Command="Add" Icon="add">Add Employee</GridCommandButton>

</GridToolBar>

<GridColumns>

<GridColumn Field=@nameof(SampleData.ID) Title="ID" Editable="false" />

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

<GridColumn Field=@nameof(SampleData.Happy) />

<GridCommandColumn>

<GridCommandButton Command="Save" Icon="save" ShowInEdit="true">Update</GridCommandButton>

<GridCommandButton Command="Delete" Icon="delete">Delete</GridCommandButton>

</GridCommandColumn>

</GridColumns>

</TelerikGrid>

@code {

void EditHandler(GridCommandEventArgs args)

{

SampleData item = (SampleData)args.Item;

// prevent opening for edit based on condition

if (item.ID < 3)

{

args.IsCancelled = true;// the general approach for cancelling an event

}

Console.WriteLine("Edit event is fired for column " + args.Field);

}

async Task UpdateHandler(GridCommandEventArgs args)

{

SampleData item = (SampleData)args.Item;

// perform actual data source operations here through your service

await MyService.Update(item);

// update the local view-model data with the service data

await GetGridData();

Console.WriteLine("Update event is fired.");

}

async Task DeleteHandler(GridCommandEventArgs args)

{

SampleData item = (SampleData)args.Item;

// perform actual data source operation here through your service

await MyService.Delete(item);

// update the local view-model data with the service data

await GetGridData();

Console.WriteLine("Delete event is fired.");

}

async Task CreateHandler(GridCommandEventArgs args)

{

SampleData item = (SampleData)args.Item;

// perform actual data source operation here through your service

await MyService.Create(item);

// update the local view-model data with the service data

await GetGridData();

Console.WriteLine("Create event is fired.");

}

// in a real case, keep the models in dedicated locations, this is just an easy to copy and see example

public class SampleData

{

public int ID { get; set; }

public string Name { get; set; }

public bool Happy { get; set; }

}

public List<SampleData> MyData { get; set; }

async Task GetGridData()

{

MyData = await MyService.Read();

}

protected override async Task OnInitializedAsync()

{

await GetGridData();

}

// the following static class mimics an actual data service that handles the actual data source

// replace it with your actual service through the DI, this only mimics how the API can look like and works for this standalone page

public static class MyService

{

private static List<SampleData> _data { get; set; } = new List<SampleData>();

public static async Task Create(SampleData itemToInsert)

{

itemToInsert.ID = _data.Count + 1;

_data.Insert(0, itemToInsert);

}

public static async Task<List<SampleData>> Read()

{

var happy = false;

if (_data.Count < 1)

{

for (int i = 1; i < 50; i++)

{

happy = !happy;

_data.Add(new SampleData()

{

ID = i,

Name = "Name " + i.ToString(),

Happy = happy

});

}

return await Task.FromResult(_data);

}

public static async Task Update(SampleData itemToUpdate)

{

var index = _data.FindIndex(i => i.ID == itemToUpdate.ID);

if (index != -1)

{

_data[index] = itemToUpdate;

}

public static async Task Delete(SampleData itemToDelete)

{

_data.Remove(itemToDelete);

}

Grid

answered on 01 Dec 2020

7 answers

445 views

Toolbar

Hi,

in Kendo UI is a toolbar widget, which I use to select some charts options (see https://www.laerm-monitoring.de/mittelung)

In Blazer I found <Telerik.Blazor.Components.ToolBar.TelerikToolBar> in Visual Studio, but there is no documentation .

How can I make a Toolbar in Blazor over a chart ?

Regards,

Peter

General Discussions

answered on 01 Dec 2020

1 answer

1.1K+ views

How to display context menu on click of icon

I see from the demo on how to show a context menu on right click of its container, but how do I have it display on click (left click)?

ContextMenu

answered on 30 Nov 2020

7 answers

287 views

Blazor dojo

Hi,

The Kendo UI dojo is great to extract some specific problems for the telerik support and for the solution.

Can you make a dojo site for your blazor components?

Best regards,

Peter

General Discussions

answered on 30 Nov 2020

1 answer

503 views

Position in Grid Popup

Hi,

Im having problem when using Datetimepicker on Grid popup it sometimes go below the visible area and and couldn't be scrolled. If I put a datepicker at the same place it will be able to work out if it should pop up below or above the input but datetimepicker doesn't seem to do this.

Any solution or walk around for this?

Thanks!

Kevin

DateTimePicker