Questions on UI for ASP.NET Core Forum

5 answers

237 views

I have a button which opens a window in a razor-page.

The first time I click the button, everything works fine. But when I close the window and click the same button again, the window is not opening.

The button and the window are nested inside a TabStrip.

This is the code for the button and the window:

<div id="tabVoucher">
      <button type="button" id="btnAddVoucher" class="btn btn-default">Create New</button>
      @(
        Html.Kendo().Window()
          .Name("winAddVoucher")
          .Animation(a =>{
            a.Open(o => o.Expand(ExpandDirection.Vertical));
          })
          .Draggable()
          .Actions(ac => ac
            .Minimize()
            .Maximize()
            .Close()
          )
          .Content(@<form method="post" class="needs-validation" novalidate>
            <div class="row">
              <div class="col-12">
                <label for="txbCode" class="form-label">Code</label>
                <input type="text" id="txbCode" class="form-control" required/>
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <label for="txbFrom" class="form-label">From</label>
                @(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidFrom).ComponentType("modern").HtmlAttributes(new { id = "txbFrom" }).Deferred())
              </div>
            </div>
            <div class="row">
              <div class="col-12">
                <label for="txbTill" class="form-label">Till</label>
                @(Html.Kendo().DateTimePickerFor(d => d.NewVoucher.ValidTill).ComponentType("modern").HtmlAttributes(new { id = "txbTill" }).Deferred())
              </div>
            </div>
            <div class="row mt-3">
              <button type="submit" class="btn btn-default">Create</button>
            </div>
          </form>)
          .Visible(false)
          .Deferred()
      )
    </div>

And this is the js-code for the button-event:

$(document).ready(function () {
      $('#btnAddVoucher').click(function(e){
        $('#winAddVoucher').data('kendoWindow').open();
      });
    });

Any idea why this is not working as expected?

Window

answered on 10 Aug 2023

1 answer

228 views

How to increase star icon size for Rating

What is the proper way to increase the size of the star icon for a Rating control? When inspecting the HTML for the control, I can see that the CSS class k-icon-xl is applied to the star icon, but there doesn't appear to be a way to adjust these classes to larger sizes (e.g. apply k-icon-xxl).

As a workaround, I'm overriding k-icon-xl with the following CSS:

.k-icon-xl.k-svg-i-star-outline.k-svg-icon, .k-icon-xl.k-svg-i-star.k-svg-icon {
        width: 48px;
        height: 48px;
    }

For reference I'm using the latest release of 2023.2.718.

Rating

answered on 10 Aug 2023

1 answer

70 views

Can't create column with link to personal page

That's what I tried:

columns.Command(c => c.Custom("Page").Template("<a href=/Directory/User/${Id}>Page</a>"));

I got:

ReferenceError: Id is not defined in /Directory/Users

Grid

answered on 09 Aug 2023

1 answer

527 views

grid filter on object column where value can be null

I found this question, which has an answer on how to implement filter on an object column. But my object can be null, and I can't find a way to bind to its string property or empty string.

Grid

answered on 09 Aug 2023

1 answer

97 views

CheckBoxFor throws exception

4032:46 Uncaught TypeError: jQuery(...).kendoCheckBox is not a function
    at HTMLDocument.<anonymous> (4032:46:169)
    at i (jquery.min.js:2:27466)
    at Object.fireWith [as resolveWith] (jquery.min.js:2:28230)
    at Function.ready (jquery.min.js:2:30023)
    at HTMLDocument.K (jquery.min.js:2:30385)

This is my code:

@model DMDPace.DataAccess.DomainModels.Project;

<div style="margin: 20px">
    <h3>Project: @Model.ProjectName</h3>
    <br/>
    <div style="display: flex">
        <h3 style="margin-right: 15px">Manager: </h3>

        @(Html.Kendo().DropDownListFor(x => x.ProjectManagerId)
            .DataTextField("DisplayName")
            .DataValueField("Id")
            .Events(e =>
            {
                e.Select("managerChange");
            })
            .DataSource(source =>
            {
                source.Read(read =>
                {
                    read.Action("FilterEmployees", "Home");
                });
            })
            .HtmlAttributes(new { style = "width: 15%; min-width: 280px;" }))
    </div>
    <div style="display: flex; align-items: center;">
        <h3 style="margin-right: 15px">Is Active: </h3>
    
        @(Html.Kendo().CheckBoxFor(x => x.IsActive))
    </div>
</div>

DropDownListFor renders correctly, but checkBoxFor doesn't.

Project:

    public class Project : Entity
    {
        public string ProjectName { get; set; }
        public bool IsActive { get; set; }
        
        public int? ProjectManagerId { get; set; }
        public virtual User ProjectManager { get; set; }
    }

Checkbox

answered on 09 Aug 2023

1 answer

136 views

Telerik aspnet core theme doesn't work on mobile

Hi,

I created a page with a grid inside.

From computer and tablet everything works fine, while if I open the page from the phone (iphone with safari browser) the grid is visible but the telerik theme is not applied (for example the default color or word style)

Can anyone give me some help?
Thank you

Grid

Styling

answered on 09 Aug 2023

1 answer

165 views

Add a custom button in grid toolbar, why so complicated?

I have the code

.ToolBar(toolbar => {
 toolbar.Create();
toolbar.Excel();
toolbar.ClientTemplate(@<text>???
 
 
why is that complicated to add a new control, like a custom dropdown?
why should we build the create button manually if we use template?
also search, we should createa search button manually, there is no sense
 

Grid

answered on 08 Aug 2023

2 answers

99 views

Grid column filtering as you type letters

We have this grid column filter. But you have to click Filter for it to do the filtering and the menu closes.

I would prefer for this to filter as you type letters and not close the window.

What options do I have?

Grid

answered on 08 Aug 2023

1 answer

85 views

Content-Security-Policy : Video?

Do you have a video expounding on what you've done to handle CSP? I see bits and pieces around the forum but I don't get it yet. Do you have a video that would get me going on this? I really don't understand how this works.

Security

answered on 08 Aug 2023

0 answers

105 views

DropDownListFor doesn't appear when imported as partial view

This is partial view:

@model DMDPace.DataAccess.DomainModels.Department

@(Html.Kendo().DropDownListFor(m => m)
    .DataTextField("Name")
    .DataValueField("Id")
    .DataSource(source =>
    {
        source.Read(read =>
        {
            read.Action("GetDepartments", "Home");
        });
    })
    )

That's how I reference it:

<div><partial model="@Model.Department" name="Selectors/Department"/></div>

Why doesn't it appear?

DropDownList

asked on 07 Aug 2023