Questions on UI for Blazor Forum

2 answers

2.3K+ views

Show/Hide Command Button based on data content in field

Good afternoon,

I am relatively new developer. I am working the the Telerik Grid and it is fantastic! The sorting and searching and editing I love it!

I have made my own custom command button that when clicked pops a modal dialog that displays a pdf. The link to display this pdf is stored in the database. All of this works great!

Now I would like to only display a button or enable this button if this field has something in it.

I am not picky about how its done either. I have tried to bind the enable event to a Has_Link boolean field...I have tried a bunch of stuff.

I realize this probably has more to do with my lack of knowledge than it does the control itself. If someone could point me in the right direction, I would be grateful!

Here is my code below.

<AuthorizeView>

<Authorized>

<h3>Search Permit</h3>

@if (Permits == null)

{

<p><em>Loading...</em></p>

}

else

{

<TelerikGrid Data=@Permits EditMode="@GridEditMode.Incell" @ref="Grid" Sortable="true" FilterMode="GridFilterMode.FilterMenu" Class="table-striped"

Height="750px"

Pageable="true" PageSize=@PageSize

OnUpdate=@UpdateItem OnDelete=@DeleteItem>

<GridToolBar>

<br />

</GridToolBar>

<GridColumns>

<GridColumn Field=@nameof(Permit.Permit_NO) Title="Permit Number" />

<GridColumn Field=@nameof(Permit.Parcel) />

<GridColumn Field=@nameof(Permit.PD_Owner) Title="Owner Name" />

<GridColumn Field=@nameof(Permit.Submission_Date) Title="Submit Date" />

<GridColumn Field=@nameof(Permit.Permit_Issue_Date) Title="Issue Date" />

<GridColumn Field=@nameof(Permit.Permit_Type) Title="Permit Type" />

<GridColumn Field=@nameof(Permit.Estimated_Cost) Title="Cost" />

<GridColumn Field=@nameof(Permit.Fee) Title="Cost" />

<GridColumn Field=@nameof(Permit.Note) />

<GridColumn Field=@nameof(Permit.Image_Link) />

<GridColumn Field=@nameof(Permit.Has_Link) />

<GridCommandColumn>

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

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

<GridCommandButton Enabled="ShowImageIsEnabled" OnClick="Show_Image" Icon="information">Show Permit</GridCommandButton>

</GridCommandColumn>

</GridColumns>

</TelerikGrid>

}

</Authorized>

<NotAuthorized>

<h1>Access Denied!</h1>

</NotAuthorized>

</AuthorizeView>

@code {

private List<PermitModel> Permits = new List<PermitModel>();

private PermitModel Permit = new PermitModel();

public TelerikGrid<PermitModel> Grid { get; set; }

public bool ShowImageIsEnabled { get; set; } = true;

int PageSize = 15;

protected override async Task OnInitializedAsync()

{

Permits = await _db.GetPermitData();

await SetGridSort();

}

private void DeleteItem(GridCommandEventArgs args)

{

var argsItem = args.Item as PermitModel;

Permits.Remove(argsItem);

_db.DeletePermit(argsItem);

}

private void UpdateItem(GridCommandEventArgs args)

{

var argsItem = args.Item as PermitModel;

var index = Permits.FindIndex(i => i.Record_ID == argsItem.Record_ID);

if (index != -1)

{

Permits[index] = argsItem;

}

_db.DeletePermit(argsItem);

_db.InsertPermit(argsItem);

}

async Task SetGridSort()

{

GridState<PermitModel> desiredState = new GridState<PermitModel>()

{

SortDescriptors = new List<SortDescriptor>()

{

new SortDescriptor { Member = "Permit_NO", SortDirection = ListSortDirection.Descending }

}

};

await Grid.SetState(desiredState);

}

void Show_Image(GridCommandEventArgs args)

{

var argsItem = args.Item as PermitModel;

var parameters = new ModalParameters();

parameters.Add(nameof(ImageModal.image), argsItem.Image_Link);

Modal.Show<ImageModal>(argsItem.Permit_NO, parameters);

}

Grid

answered on 28 May 2020

1 answer

1.0K+ views

Include all pages in Excel export not working

Hi

If i export my data to excel, only the current page is shown.
The "AllPages" flag is set to true.

I load my data via "OnRead", because i need to implement pagination by myself.

How can i achieve this.

Kind regards
Matthias

Grid

answered on 28 May 2020

2 answers

790 views

[Solved] Grid Aggregates without grouping

Is there a way of displaying grid aggregates, without grouping the grid.

I am trying to implement a simple grid with a footer 'row' that would show column totals

Grouping the data is not really appropriate, I suppose I could add an arbitrary grouping, but the extra UI elements introduced with grouping would detract from a clean UI design.

If not, what would be a good way to implement this.

Grid

answered on 28 May 2020

1 answer

185 views

2.14 version OnExpand problem in Lazy mode

Hello, Marin.
After upgrade from 2.12 to 2.14 version I have a problem
When I expand a node, I have exception.
Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Object reference not set to an instance of an object.

System.NullReferenceException: Object reference not set to an instance of an object.
at Telerik.Blazor.Components.TreeView.TreeViewNode.ToggleAnimationContainerAsync()
at Telerik.Blazor.Components.TreeView.TreeViewNode.ToggleExpand()
at Microsoft.AspNetCore.Components.ComponentBase.CallStateHasChangedOnAsyncCompletion(Task task)
at Microsoft.AspNetCore.Components.RenderTree.Renderer.GetErrorHandledTask(Task taskToHandle)
Microsoft.AspNetCore.Components.Server.Circuits.CircuitHost: Error: Unhandled exception in circuit 'hyHyoH3D6-TdzHqjUEAgnTTMn8agGOfRQaRZTjj0xzs'.

Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer: Warning: Unhandled exception rendering component: Cannot process pending renders after the renderer has been disposed.
Object name: 'Renderer'.
Even if I'm not use OnExpand event I have same problem in 2.14. In 2.12 all works fine.
Thank you.

TreeView

answered on 27 May 2020

1 answer

286 views

Focus Rectangle for TextBox broken in Bootstrap

Starting with version 2.13 the focus rectangle is no longer resetting after the control loses focus. (See attached image)

I'm using the Telerik Bootstrap CSS style sheet:

<link href="_content/Telerik.UI.for.Blazor/css/kendo-theme-bootstrap/all.css" rel="stylesheet" />

This reproduces the problem: It works with version 2.12 and before.

@page "/TextEditFocusPage"

<h3>Edit To Do Item</h3>

<EditForm Model="ToDoItem" OnInvalidSubmit="OnValidSubmit">

<DataAnnotationsValidator />

<div class="form">

<div class="form-group row">

<label for="activity" class="col-3 col-form-label">Activity</label>

<div class="col-9">

<TelerikTextBox Id="activity"

Class="form-control"

@bind-Value="@ToDoItem.Activity" />

</div>

<div class="form-group row">

<label for="description" class="col-3 col-form-label">Description</label>

<div class="col-9">

<TelerikTextBox Id="description"

Class="form-control"

@bind-Value="@ToDoItem.Description" />

</div>

<div class="form-group row">

<label for="status" class="col-3 col-form-label">Status</label>

<div class="col-9">

<TelerikDropDownList Id="status"

Data="@StatusTypes"

TextField="Description"

ValueField="StatusId"

@bind-Value="ToDoItem.Status" />

</div>

<div class="form-group row">

<label for="notes" class="col-3 col-form-label">Notes</label>

<div class="col-9">

<InputTextArea Id="notes"

class="k-textarea"

style="width: 100%;"

@bind-Value="@ToDoItem.Notes" />

</div>

<div class="form-group row">

<label for="duedate" class="col-3 col-form-label">Due</label>

<div class="col-9">

<TelerikDatePicker Id="duedate"

@bind-Value="@ToDoItem.DueDate"

PopupHeight="Auto"

PopupWidth="Auto"

Width="100%" />

</div>

</EditForm>

@code {

public ToDo ToDoItem { get; set; } = new ToDo();

public List<StatusType> StatusTypes { get; set; }

protected override void OnInitialized()

{

StatusTypes = GetStatusTypes();

ToDoItem.Status = 2;

ToDoItem.Activity = "Pick Up Food";

ToDoItem.Description = "Order will be ready at 5:00pm";

ToDoItem.DueDate = DateTime.Today;

base.OnInitialized();

}

private void OnValidSubmit()

{

}

List<StatusType> GetStatusTypes()

{

return new List<StatusType>()

{

new StatusType(){StatusId=1, Description="Urgent"},

new StatusType(){StatusId=2, Description="Normal"},

new StatusType(){StatusId=3, Description="Low"}

};

}

public class ToDo

{

public string Activity { get; set; }

public string Description { get; set; }

public int Status { get; set; }

public string Notes { get; set; }

public DateTime DueDate { get; set; }

}

public class StatusType

{

public int StatusId { get; set; }

public string Description { get; set; }

}

TextBox

answered on 27 May 2020

2 answers

1.9K+ views

Min Max Values

Hello:

Is there no way to limit the value of a NumericTextBox with a Type of Int32 (or anything other than a decimal value)?

NumericTextBox

answered on 25 May 2020

1 answer

3.1K+ views

[Solved] Execute Method only on Enter for Text Box.

I want to be able to use either the enter key, or a button to search and I cant figure out a way to only call the search method on enter when using OnChange().

<div class="form-group">

<TelerikTextBox Id="look-up-value" @bind-Value="LookUpValue" Class="form-control" OnChange="(async () => { await LookUpShipment(); })"></TelerikTextBox>

</div>

<TelerikButton Class="btn" Primary="true" OnClick="LookUpShipment">@TranslationService[Label.Search]</TelerikButton>

TextBox

answered on 25 May 2020

7 answers

2.2K+ views

Grid validation

From my initial experiments and looking at the documentation it seems like the TelerikGrid component doesn't currently have features for performing data validation, is that correct? If so, are there plans to add validation for the grid, and if so what sort of timescale are we looking at for those?

General Discussions