Questions on UI for ASP.NET Core Forum

1 answer

443 views

Hello,

I have an Ajax Kendo grid and would like to apply a filter on load. There is a date column that I would like to get the max date and use that as the initial filter (not hardcoding the value). Is this doable and if so how?

Thanks

D

Filter

Grid

answered on 21 Jul 2023

0 answers

81 views

Column editor with opportunities to add new record and select from existing ones

I need an editor for the field of text type. This editor when is activated should show two buttons. When the first button with the plus icon is clicked, an input appears in which a new value is typed. When the button with a colon is clicked, a dropdown appears from which an existing value is selected.

Grid

asked on 20 Jul 2023

1 answer

184 views

How to show html in grid client detail template

My template is

```

<script id="template" type="text/kendo-impl">
<div>
<partial name="EditorTemplates/WorkingEmployeeEditorTemplate"/>
<div style="margin: 15px; display: inline-block;">
@(Html.Kendo().Button()
.Name("createButton")
.Content("Add")
// .Events(e => { e.Click("create"); })
 )
</div>
</div>
</script>

```

It should have the dropdown and button in one row. When I rerun the page with this template, the grid disappears.

Grid

answered on 19 Jul 2023

1 answer

747 views

How to play audio file ?

I have uploaded .wav audio file using kendo upload and i have the blob path and url, that the file is saved to.
Now do we have a control that helps us play audio file that is uploaded. like we have this
https://demos.telerik.com/aspnet-core/mediaplayer/events

Upload

answered on 19 Jul 2023

1 answer

119 views

Is there a way to show a word count in or around the message box?

Hello,

I'm using an internal API that has rate and size limiting and I think it would be beneficial to show the user a used character out of total characters placeholder. Something similar to this as an example.

Chat

answered on 19 Jul 2023

1 answer

117 views

ASP.NET Core Scheduler problem with the UI of the Scheduler, when trying to display 15 mins events

Hi,

using Telerik Asp Net Core version 2022.2.621

I have a problem with the UI of the Scheduler, when trying to display 15 mins events. The widget contains typically 30 mins to 1 hour events, occasionally, there are 15 mins events, in which case after the 15 mins event the next event is pushed to the right. How to prevent that kind of behavior without changing the Major Ticks configuration.

Changing the Major Ticks configuration will cause a problem in the UI because normal classes are 1 hour length.

Scheduler

answered on 17 Jul 2023

0 answers

88 views

How can I prevent grid to get all data in grid when insert data the second time?

Question

I had a grid with EditMode of "GridEditMode.InCell".

Users can insert multiple data by Datasource ajax create method.

The create method works fine the first time.

However, when I tried to insert data the second time

The action recieved all of the data from view(includes the data already inserted in the first time).

How I can prevent from getting datas already inserted?

Is there any work arrounds?

@(Html.Kendo().Grid<Digitalization2.Web.Controllers.AgentOrder.CreateOrderDetailViewModel>()
                         .Name("agentordergrid")
                         .DataSource(dataSource => dataSource
                              .Ajax()
                              .PageSize(10)
                              .Batch(true)
                              .Model(model =>{
                                  model.Id(x => x.ID);
                                  model.Field(x => x.ID).Editable(false);
                                  model.Field(x => x.ProductTypeView).DefaultValue(new ProductTypeViewModel(){ ParameterValue = "SD"});
                                  model.Field(x => x.ProductModelView).DefaultValue(new ProductModelViewModel(){ProductID = 1, ProductModel = "SSD0100"});
                              })
                              .Read(read => read.Action("GetOrderDetailByOrderId", "AgentOrder", new { agentOrderId = @data.ID}))
                              .Create(create => create.Action("CreateAgentOrderDetail", "AgentOrder"))
                              .Destroy(destroy => destroy.Action("DeleteAgentOrdetDetails", "AgentOrder"))
                          )
                         .Columns(col => {
                             col.Bound(x => x.ProductTypeView).Width(150).ClientTemplate("#=ProductTypeView.ParameterValue#");
                             col.Bound(x => x.ProductModelView).Width(250).ClientTemplate("#=ProductModelView.ProductModel#");
                             col.Bound(x => x.ItemCount).Width(75);
                             col.Bound(x => x.UnitPrice).Width(150);
                             col.Bound(x => x.Remark).Width(500);
                             col.Command(command => command.Destroy()).Width(75);
                         })
                         .ToolBar(toolbar => 
                         {
                             toolbar.Create();
                             toolbar.Save().;
                         })
                         .Editable(editable => editable.Mode(GridEditMode.InCell))
                    )

Grid

updated question on 17 Jul 2023

1 answer

740 views

Datepicker Default to Empty on Initial Open

I have a datepicker databound to a model as follows:

  <div class="col-sm-3">
            <label asp-for="ADR.Date" class="form-label"></label>
            <kendo-datepicker for="ADR.Date" class="form-control"></kendo-datepicker>
            <span asp-validation-for="ADR.Date" class="text-danger"></span>
   </div>

The ADR model property does not allow nulls:

[DataType(DataType.Date)]
public DateTime Date { get; set; }

This is for good reason, I want to prevent the user from omitting the date when they fill out the form and for the data validation to fire correctly.

However instead of being empty when the form is first opened, the Datepicker fills the date with 01/01/1901, which is unwanted behavior as the user then doesn't enter a correct date.

How do we ensure the datepicker is empty when first loading the form and the calendar is on todays date when empty?

Date/Time Pickers

answered on 12 Jul 2023

1 answer

154 views

HTML Editor as a reusable ViewComponent

I'm trying to make the HTML editor into a reusable component that I can add to a page inside the CSHML and set the model/bind to a property at that point.

I cannot seem to pass the model as needed to the VeiwComponent.

If anyone has been able to accomplish this I would really appreciate some guidance.

asp.net core razor pages web site.

Editor

General Discussions

answered on 12 Jul 2023

1 answer

113 views

Change column text conditionally within row template

How do I display text in a grid row conditionally using a row template? I have tried the following variations.

#Sex == 1 ? Male : Female#
#Sex == 1 ? \"Male\" : \"Female\"#
#Sex == 1 ? <span>Male</span> : <span>Female</span>#

Here is the row template definition:

.ClientRowTemplate(
        "<tr data-uid='#: uid #' class='k-master-row p-2 m-2'>" +
            "<td class='k-hierarchy-cell k-table-td' aria-expanded='false' role='gridcell' style='max-width:40px;'>" +
                "<a href='\\#' aria-label='Expand' tabindex='-1' class='k-icon k-i-caret-alt-right'></a>" +
            "</td>" +
            "<td class='defendantDetails col-sm-12 col-md-10'>" +
// THIS IS THE PROBLEMATIC SPOT
                "<div class='d-inline-block'>#Sex == 1 ? <span>Male</span> : <span>Female</span># - #=Race# - SSN: #=Ssn# - DOB: #=Dob#</div>" +
                "</div>" +
                "<div class='d-inline-block ms-auto'>" +
                    "<button type='button' class='ms-auto k-grid-edit-command k-button k-button-md k-rounded-md k-button-solid k-button-solid-primary'>" +
                        "<span class='k-svg-icon k-svg-i-pencil k-button-icon' aria-hidden='true'>" +
                            "<svg viewBox='0 0 512 512' focusable='false' xmlns='http://www.w3.org/2000/svg'>" +
                                "<path d='m334.9 86.6 45.3-45.3c12.4-12.4 32.8-12.4 45.3 0l45.3 45.3c12.4 12.4 12.4 32.8 0 45.3l-45.3 45.3-90.6-90.6zm-22.6 22.6L32 389.5V480h90.5l280.3-280.3-90.5-90.5zM99.9 412.1l-22.6-22.6 235-235 22.6 22.6-235 235z'></path>" +
                            "</svg>" +
                        "</span>" +
                        "<span class='k-button-text'>Edit</span>" +
                    "</button>" +
                    "<button type='button' class='k-grid-remove-command k-button k-button-md k-rounded-md k-button-solid k-button-solid-base'>" +
                        "<span class='k-svg-icon k-svg-i-x k-button-icon' aria-hidden='true'>" +
                            "<svg viewBox='0 0 512 512' focusable='false' xmlns='http://www.w3.org/2000/svg'>" +
                                "<path d='M416 141.3 301.3 256 416 370.7 370.7 416 256 301.3 141.3 416 96 370.7 210.7 256 96 141.3 141.3 96 256 210.7 370.7 96l45.3 45.3z'></path>" +
                            "</svg>" +
                        "</span>" +
                        "<span class='k-button-text'>Delete</span>" +
                    "</button>" +
                "</div>" +
            "</td>" +
        "</tr>"
    )

Also, is there any documentation on changing the look of the row? Using width, margins, classes etc. doesn't appear to alter how the row looks.

Grid

answered on 12 Jul 2023