Questions on UI for ASP.NET MVC Forum

1 answer

116 views

Chart legend markers matching series dash type

I have a kendo chart with two line series which have the same colour, but have different dash types, dotted and solid. On the chart legend, both series appear with solid lines, but I want the legend to have the dash type displayed - dotted or solid.

Using the HTMLHelper, I've tried to configure the legend using some settings within, but it was not clear from the documentation how this could be configured.
https://docs.telerik.com/aspnet-core/api/kendo.mvc.ui.fluent/chartlegenditemsettingsbuilder#chartlegenditemsettingsbuilder

            .Legend(legend =>
            {
                legend.Position(ChartLegendPosition.Top);
                legend.Item(x =>
                {
                    x.Visual("handler");
                });
            })

In the handler I can see there is options.markers.type, which is currently set to "rect", but from this API reference, there does not seem to be a dotted line type
https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/configuration/series.markers.type

Chart

answered on 20 Nov 2023

3 answers

251 views

Scheduler - Remove Header Controls and hide heading

Hi,

I have a scheduler controle that I am showing 1 day on but I don;t want it to be a specific day I am using it to assign appointments for Monday, Tuesday, Wednesday, etc reardless of the actual date so I would like to hide the date selector, current date and the heading showing the current date as shown below:

If I could also affect the line height for the times that would be great too as they are a little tall currently.

Any help would be gratefully received.

Thanks,

Ian

Scheduler

updated answer on 17 Nov 2023

2 answers

184 views

Refresh PanelBar with LoadContent

I am using the PanelBar with Items Binding. I am LoadingContent on the Expansion of a Panel. I would like to "refresh" or re load the content after a panel has been expanded, collapsed and then re-expanded. Currently, the panel does not re-load the content.

Is there a way to force the panel to be re-loaded?

PanelBar

answered on 17 Nov 2023

1 answer

92 views

Telerik MVC Grid - Inline Edit: Editable fields in ClientDetailTemplate

Hello,

we want to add editable fields in the template part of a grid.

Our grid looks sth. like this:

@(
    Html.Kendo().Grid(Model.TABLE)
        .Columns(columns =>
        {
            columns.Bound(c => c.PRIO); 
            columns.Bound(c => c.COMMENT);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            ...
            .Model(m =>
            {
                m.Id(p => p.ID);
            })
        )
        .ClientDetailTemplateId("template")
        .Editable(e => e.Mode(GridEditMode.InCell))
)

The template does look sth. like this:

<script id="template" type="text/x-kendo-template">
    <div class="col-md-6">
        <p><strong>Beschreibung:</strong></p>
        <p>#: stm_bez1 #</p>
        <p>#: stm_bez2 #</p>
        <p>#: stm_bez3 #</p>
        <p>#: stm_bez4 #</p>
        <p>#: stm_bez5 #</p>
        <p>#: stm_bez6 #</p>
        <p>#: rsc_text1 #</p>
        <p>#: rsc_text2 #</p>
        <p>#: rsc_text3 #</p>
        <p>#: rsc_text4 #</p>
        <p>#: rsc_text5 #</p>
        <p>#: rsc_text6 #</p>
    </div>
    @*
        HOW WOULD WE IMPLEMENT THE EDITABLE FIELDS HERE?
    *@
</script>

How would we go about putting these fields in the template part, and have them editable and propagate to the server on save?:

Grid

answered on 15 Nov 2023

1 answer

110 views

Sort MultiSelectFor data

Hey, I'm trying to sort the data in the MultiSelectFor, so it can be displayed in alphabetical order.

                            @(Html.Kendo().MultiSelectFor(model => model.UserIds)
                                .HtmlAttributes(new { @class = "large" })
                                .Placeholder("Select users ...")
                                .DataValueField("Value")
                                .DataTextField("Text")
                                .AutoClose(false)
                                .DataSource(.DataSource(ds => ds.Read("AvailableUsers", "UserApi"))
                                 )

I've searched for this issue and tried some suggested things but with no success:

                            @(Html.Kendo().MultiSelectFor(model => model.UserIds)
                                .HtmlAttributes(new { @class = "large" })
                                .Placeholder("Select users ...")
                                .DataValueField("Value")
                                .DataTextField("Text")
                                .AutoClose(false)
                                .DataSource(ds => ds.Custom()
                                            .Transport(t => t
                                                .Read(r => r
                                                    .Action("AvailableUsers", "UserApi")
                                                    .Data("{ any: false }")
                                                )
                                            )
                                            .Sort(s => s
                                                .Add("Value")
                                                .Descending()
                                            ))
                                
                            )

 public JsonResult AvailableUsers()
 {
     var userRepo = new UserRepository(ntfy);
    var result = userRepo.GetAll().Select(_ => new SelectListItem
           {
                Text = string.Format("{0} ({1} {2})", _.Username, _.Firstname, _.Lastname),
                Value = _.Id.ToString()
           });
     return this.Json(result, JsonRequestBehavior.AllowGet);
 }

MultiSelect

Sortable

answered on 13 Nov 2023

1 answer

202 views

Context Menu for Specific Cells of Grid

I've seen some examples for displaying a context menu and retrieving the data item of the row that was clicked, but is there a way to also determine which column of the grid was clicked when the context menu is displayed?

Grid

Menu

answered on 10 Nov 2023

1 answer

69 views

Wrong icon being shown for refresh button in grid pager

When I updated to 2023.3.1010, the refresh button in the grid pager shows up as a pause icon. When I examine the page, the span is using k-i-arrow-rotate-cw. Is there a workaround for this?

Grid

answered on 09 Nov 2023

1 answer

314 views

Pager control does not display refresh icon

This problem was introduced when I upgraded to 2023.3.1010

The grid control renders it's pager like this:

<a aria-label="Refresh" class="k-pager-refresh k-link" href="/Home/Paging_Orders" title="Refresh">
     <span class="k-icon k-i-arrow-rotate-cw"></span>
</a>

Note the icon. If it was using FONT icons, it should have the class k-icon-font as well as the other classes.
If it was using SVG icons, it should have an embedded SVG inside it.

But it has neither, so there is nothing displayed at all.

I went to the online demonstration page https://demos.telerik.com/aspnet-mvc/grid/paging. Once you click the checkbox to display the refresh button, it renders the button correctly as an SVG icon.

<span class="k-icon k-svg-icon k-svg-i-arrow-rotate-cw k-button-icon">
      <svg aria-hidden="true" focusable="false" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M480 288c0 123.7-100.3 224-224 224S32 411.7 32 288 132.3 64 256 64V0l160 96-160 96v-64c-88.2 0-160 71.8-160 160s71.8 160 160 160 160-71.8 160-160c0-29.1-7.8-56.4-21.5-80l55.5-32c19.1 32.9 30 71.2 30 112z"></path></svg>
</span>

I do not understand what this demo is doing that my code is not.

Here is how I am creating the grid:

            @(
                Html.Kendo().Grid<FromAspnetFrameworkTemplate.Models.OrderViewModel>()
                    .Name("Grid")
                    .Columns(
                        columns =>
                        {
                            columns.Bound(o => o.OrderID);
                            columns.Bound(o => o.ContactName);
                            columns.Bound(o => o.ShipAddress);
                            columns.Bound(o => o.OrderDate).Format("{0:d}");
                            columns.Bound(o => o.ShipCountry);
                        }
                    ).Pageable(
                        pager => pager.PageSizes(new[] { 10, 20, 30 }).Refresh(true).Responsive(false)
                    ).DataSource(dataSource => dataSource
                          .Ajax()
                              .Read(read => read.Action("Paging_Orders", "Home"))
                      )
            )
 
I am using the following Nuget packages:
Telerik.UI.for.AspNet.Mvc5, 2023.3.1010
Telerik.FontIcons, 2.0.0
Telerik.SvgIcons, 2.0.0
I am including the styles and scripts like so:

<link href="https://kendo.cdn.telerik.com/themes/7.0.1/default/default-main.css" rel="stylesheet" />
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
<script src="~/Scripts/kendo/2023.3.1010/kendo.all.min.js"></script>
<script src="~/Scripts/kendo/2023.3.1010/kendo.aspnetmvc.min.js"></script>

Pager

answered on 03 Nov 2023

0 answers

91 views

Changing DataGrid Selection Checkbox Image

Hello,

I was wondering if there is a way to change the asp.net mvc data grid checkbox selection option's image from a checkbox to say, a star.

Or would I need to essentially rebuild the functionality through a custom template?

Thanks

Grid

MultiSelect

Styling

asked on 02 Nov 2023

0 answers

73 views

accessing the click event of kendo ui for mvc columnsmenu

I want to do some operation on columnsmenu click event of kendo ui fo mvc. Please suggest how we can handle that event and whats the event name in Jquery.

Grid

updated question on 02 Nov 2023