Telerik Forums
UI for Blazor Forum
0 answers
128 views
 <TelerikForm EditContext="EditContext" OnValidSubmit="Save" Columns="3" ColumnSpacing="15px">
     <FormValidation>
         <FluentValidationValidator />
     </FormValidation>
     <FormItems>
         <FormItem Id="fiInvoiceFooterElemenName" ColSpan="2">
             <Template>
                 <label class="k-label k-form-label" for="ddlInvoiceFooterElement">@Resources.InvoiceFooterElementName</label>
                 <TelerikDropDownList Id="ddlInvoiceFooterElementName"
                                      TItem="@InvoiceFooterElementCategory"
                                      TValue="@Guid"
                                      TextField="@nameof(InvoiceFooterElementCategory.FullName)"
                                      ValueField="@nameof(InvoiceFooterElementCategory.InvoiceFooterElementCategoryId)"
                                      Data="@invoiceFooterElementCategories"
                                      @bind-Value="@invoiceFooterElementLine.InvoiceFooterElementCategoryId"
                                      OnChange="OnChangeInvoiceFooterElementCategories"
                                    
                                      Width="100%"
                                      DefaultText="@Resources.SelectInvoiceFooterElementCategory">
                     <DropDownListSettings>
                         <DropDownListPopupSettings Height="auto" MaxHeight="250px" Width="auto" />
                     </DropDownListSettings>
                     @* <ItemTemplate>
                         <span>@($"{context.Name} ({context.Code})")</span>
                     </ItemTemplate> *@
                 </TelerikDropDownList>
                 <ValidationMessage For="@(() => invoiceFooterElementLine.InvoiceFooterElementCategoryId)" />
             </Template>
         </FormItem>
     </FormItems>
     <FormButtons>
         <button id="btnSave" type="submit" class="btn btn-sm btnAction btn-action-filled-blue mr-1 mt10">
             @if (saving)
             {
                 <span class="spinner-border spinner-border-sm mr-1"></span>
             }
             @Resources.OK
         </button>
         <button id="btnCancel" type="button" class="btn btn-sm btnAction btn-action-stroke-black mt10" @onclick="@Cancel">
             @Resources.Cancel
         </button>
     </FormButtons>
 </TelerikForm>



i am trying to prevent model close when i changes some text after that press enter key then Model close automatically
Rajkumar
Top achievements
Rank 1
 asked on 08 Jan 2025
2 answers
314 views

I want the Grid to display correctly on different devices like Mobile And Tablet.

In other words, I want to have a Responsive Grid.

In such a way that the Grid is displayed correctly in different dimensions and the remaining columns that do not fit on the page are scrolled horizontally.
Please help me.
Currently, on different devices such as mobile and tablet, the Grid is displayed as small columns, which is not suitable at all.
Thanks

Mohamad Javad
Top achievements
Rank 2
Iron
Iron
Iron
 answered on 07 Jan 2025
1 answer
91 views

I have a TelerikGrid whose columns is dynamically populated with List<ExpandoObject>.
I need a TelerikProgressBar to display one of the columns. I have used the following code but TelerikProgressBar only displays the value of the first record for all rows and individual rows are not displayed properly in TelerikProgressBar.
Please help me.
Thanks

	
<GridColumns>
@{
	if (GridData != null && GridData.Any())
	{
		var firstDataItem = (IDictionary<string, object>)GridData.First();

		foreach (var item in firstDataItem)
		{
			if (item.Key != "ProgressBar_Num")
			{
				<GridColumn Field="@item.Key" FieldType="@item.Value.GetType()" @key="@item.Key">
					<Template>
						<TelerikProgressBar Class="width-100" Max="100" Value="(double)item.Value">
						</TelerikProgressBar>
					</Template>
											
				</GridColumn>
			}
		}
	}
}
</GridColumns>

Tsvetomir
Telerik team
 answered on 07 Jan 2025
1 answer
114 views

Is there a way to use a Switch control instead of checkbox in a TreeView? I am able to use ItemTemplate to insert a switch next to the checkbox but I need to replace the checkbox and have the switch use CheckChildren and CheckParents.

Any ideas?

Thanks!

<TelerikTreeView OnItemRender="@OnItemRender" CheckBoxMode="TreeViewCheckBoxMode.Multiple" CheckChildren="true" CheckParents="true" Data="@FlatData" @bind-ExpandedItems="@ExpandedItems">
    <TreeViewBindings>
        <TreeViewBinding TextField="Text" IdField="Id" ParentIdField="ParentId" ItemsField="Text" HasChildrenField="HasChildren" IconField="Icon">
            <ItemTemplate>
                @{var treeItem = (TreeItem)context; }
                <div class="treeview-item">
                    <TelerikSwitch @bind-Value="treeItem.IsChecked" />
                    <span>@treeItem.Text</span>
                </div>
            </ItemTemplate>
        </TreeViewBinding>
    </TreeViewBindings>
</TelerikTreeView>
Dimo
Telerik team
 answered on 02 Jan 2025
0 answers
65 views
TelerikEditor custom tool component: Paste any string, bold and italic not working. Could you please me suggest me how to resolve this issue?.
Shahil
Top achievements
Rank 1
 asked on 27 Dec 2024
1 answer
154 views

Couple of questions:

1.  When working Add command for a detail templated grid, the args parameter doesn't provide for the parent model so there is no way to quickly determine values needed from the parent that will populate the child/detail (like primary key values on a composite key).  I guess I can manually track "current parent row" via OnRowClick but that seems a bit tedious?  Surely there is an easier approach?  I was expecting the OnCreate for detail grid to provide parent object/model as part of the event parameters, but that doesn't seem to be the case.

2.  When working EditMode=InCell on a detail grid, my expectations was that when I click on an empty grid it would automatically put me into EditMode (Add) for a new detail row, but that doesn't seem to be the case?  I have to go thru the OnCreate (which doesn't provide for parent model).

I was reading thru your documentation here and here but they weren't useful for is a real world scenario as none of the examples show "Add" case on a detail item that relies on a parent key value to build a composite key when the data is actually saved to a database.

Any clean suggestions other than tracking "current parent row" via OnRowClick?

Rob.

Hristian Stefanov
Telerik team
 answered on 25 Dec 2024
1 answer
112 views
When enabling a GridSearchBox in my Grid, while I'm typing or deleting letters from the search box, I get spammed in my Ouput from Debug with

"Exception thrown: 'System.Threading.Tasks.TaskCanceledExceptuion' in System.Private.CoreLib.dll"

Here is my code:


<TelerikGrid Data=@TestItemsList
             FilterMode="GridFilterMode.FilterRow"
             Sortable="true"
             EditMode="GridEditMode.Inline"
             Height="2000px"
             FilterRowDebounceDelay="300">
    
    <GridToolBarTemplate>
        <GridCommandButton Command="Add" Icon="@SvgIcon.Plus" Enabled="@UserModel.CanEdit()">Add Item</GridCommandButton>
        <GridSearchBox Fields="@SearchableFields" Placeholder="Search..." Width="300px" />
    </GridToolBarTemplate>

    <GridColumns>
        <GridColumn Field="@nameof(TestModel.FileName)"
                    Title="File Name"
                    Editable="false" />

        <GridCommandColumn>
            <GridCommandButton Command="Save"
                               Icon="@SvgIcon.Save"
                               ShowInEdit="true"
                               Enabled="@UserModel.CanEdit()"
                               OnClick="@OnUpdate">
                Update
            </GridCommandButton>

            <GridCommandButton Command="Edit"
                               Icon="@SvgIcon.Pencil"
                               Enabled="@UserModel.CanEdit()">
                Edit
            </GridCommandButton>

            <GridCommandButton Command="Delete"
                               Icon="@SvgIcon.Trash"
                               Enabled="@UserModel.CanEdit()"
                               OnClick="@OnDelete">
                Delete
            </GridCommandButton>

            <GridCommandButton Command="Cancel"
                               Icon="@SvgIcon.Cancel"
                               ShowInEdit="true"
                               Enabled="@UserModel.CanEdit()">
                Cancel
            </GridCommandButton>

        </GridCommandColumn>

    </GridColumns>
</TelerikGrid>

@* Only showing relevent code here *@
@code {

    private List<string> SearchableFields = new List<string> { nameof(SDSModel.Title), nameof(SDSModel.FileName) };

}

Details:
System.Threading.Tasks.TaskCanceledException
  HResult=0x8013153B
  Message=A task was canceled.

Call Stack:
Tsvetomir
Telerik team
 answered on 24 Dec 2024
1 answer
234 views

Hi,

Is there any way to correctly display an HTML-formatted output using the TelerikAIPrompt control? The response I get from the API call is a Markdown string. I converted this to HTML, and all I see is text with the HTML tags printed (listed listed in the sample below). 

It would be nice to have a way to use (MarkupString) to ensure the HTML is correctly shown.

My code is listed below for reference:

@page "/aitest"

@inject Microsoft.Extensions.Options.IOptions<ServerConfig> ServerConfig;

@using Ganss.Xss;
@using Markdig;
@using Newtonsoft.Json.Linq;
@using RestSharp;

<TelerikAIPrompt OnPromptRequest="@HandlePromptRequest" @ref="@AIPromptRef">
</TelerikAIPrompt>

@code {
    private TelerikAIPrompt AIPromptRef { get; set; } = default!;

    private async Task HandlePromptRequest(AIPromptPromptRequestEventArgs args)
    {
        string url = "{url}";

        var options = new RestClientOptions(url);
        var client = new RestClient(options);
        var request = new RestRequest("", Method.Post);

        request.AddHeader("Content-Type", "application/json");
        request.AddJsonBody("{\"api_key\": \"" + ServerConfig.Value.APIKey.ToString() + "\", \"question\": \"" + args.Prompt + "\"}");

        RestResponse response = new();
        response = await client.PostAsync(request);

        JObject data = JObject.Parse(response.Content ?? string.Empty);

        var answer = data["answer"] switch
        {
            null => string.Empty,
            _ => data["answer"]!.ToString()
        };

        // Convert the Markdown in the output to HTML
        var pipeline = new MarkdownPipelineBuilder().UseAdvancedExtensions().Build();
        string html = Markdown.ToHtml(answer, pipeline);

        // Sanitize the HTML
        var sanitizer = new HtmlSanitizer();
        string safeHtml = sanitizer.Sanitize(html);

        args.Output = safeHtml;
    }
}
Hristian Stefanov
Telerik team
 answered on 24 Dec 2024
1 answer
214 views
I have a TelerikGrid utilizing the FilterRow for FilterMode. One of the columns is called CurrentVersion where the CurrentVersion could be a copy of multiple other objects but it's Revision is higher. The objects with CurrentVersion = true, I want to be the only initially displayed items. If there is an item that is CurrentVersion = false, I still want it to be accessible by changing the filter to All instead of True, but I need true to be the default. How would I go about this? I've checked documentation and can't find a solution. I've also checked online and other forums posts and can't seem to find a solution. ChatGPT and CoPilot are also no help here.

<TelerikGrid Data=@TestItemsList
             FilterMode="GridFilterMode.FilterRow"
             Sortable="true"
             EditMode="GridEditMode.Inline"
             Height="2000px">

        <GridColumn Field="@nameof(TestModel.CurrentVersion)"
                    Title="Current Version"
                    Editable="true"
                    Filterable="true">

</TelerikGrid>
Hristian Stefanov
Telerik team
 answered on 24 Dec 2024
1 answer
196 views

Hi,
I am reacting to the need for unbind two system solutions for Template RenderFragment of FomItem. If I use standard FormItem, I am getting everything solved - styles, messages, label, ... However just because I need TextArea instead of standard input, the very first thing I am loosing is for in label, because for unknown reason your components have given ID and it cannot be read for that for attribute of label. After losing that standard behaviour, I am also losing error propagating and validations. I am supposed to manually retrieve error messages with TelerikValidationMessage, however for some unknown reason you've enforced Expression for FieldIdentifier and hide the possibility to set FieldIdentifier manually. So I had to derive my custom component, hide your For parameter and set it to "() => default" so it would not trigger null check exception.

Now, why all this. Because I've successfully cloned original Model with all properties and attributes with custom Assembly. I am also able to omit or include ValidationAttribute attributes - thus enabling or disabling validations. And for those templates, I've made RenderFragment<EditModel<TValue>> extension of your Template (I hate Blazor for inability to extend parameters - I had to create a new one - BindTemplate), so I was also able to cover that original model with BindValue property, which has all attributes included and it is also properly notifying EditContext if wrapped value changed - to original FieldIdentifier. So now I can have BindTemplate with not only correct typed binding for any two way binding with property, but also GetValidationMessage ony my EditModel Context, so everything within that template without need to manually do that work. It is up to you, if you want to include my project or create some other form type for that. However, it would be nice, since My system is much more robust and provides binded way for message and its property to be used within the template:

 

<AnetFormItem EditModel="() => this.Is.Your.Previous.For.Attribute">
<BindTemplate Context="model">
<TelerikTextArea @bind-value="model.BindValue">
@model.GetValidationMessage()/* No For here, it is already binded within Context model */
</BindTemplate>
</AnetFormItem>
It seems more logical to me - to derive that BindValue directly form For expression instead making programmer to bind whatever and then figure out the correct MemberExpression for the message. You could also provide RenderFragment for lable on that model and much more - that is meaning of this post ... It is also only logical as this is similar for Grid cell template ...
Dimo
Telerik team
 answered on 23 Dec 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Bohdan
Top achievements
Rank 3
Iron
Iron
Iron
Rob
Top achievements
Rank 3
Bronze
Bronze
Iron
Elliot
Top achievements
Rank 1
Iron
Iron
Iron
Sunil
Top achievements
Rank 1
Cynthia
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?