Telerik Forums
UI for ASP.NET Core Forum
1 answer
325 views

Hi,

is there a way to show the unit during editing in the NumericTextBox.

 

Right now the behavior is like this:

  • Editing: 123,55  (without EUR)--> After losing the focus it's formating the value to 123,55 EUR

The desired behavior would be that the EUR would be showing up already in the editing mode.

  • Editing 125,55 EUR 

 

Regards
Martin

Stoyan
Telerik team
 answered on 16 Dec 2021
6 answers
369 views

We're currently experiencing issues with the Telerik NuGet Server (https://nuget.telerik.com/nuget).

We are working to resolve those as soon as possible. Please follow this thread for updates.

Apologies for the inconvenience.

Joel
Top achievements
Rank 1
Iron
 answered on 15 Dec 2021
1 answer
542 views

Good afternoon,

I have a yearly dashboard where I have set up a slightly complicated scenario using several MVC Core components.

When you select a year from the dropdown it forces each of the charts/grids to read the data based on the selected year. The 'Yearly Activity' tab is the default tab and works nicely. I have a few pie charts and a bar chart on one tab which are arranged using the TileLayout - this allows them to be resized and dragged. It looks like this:


On the second tab "Monthly Activity by Operator" there is a kendo grid which displays aggregated data based on the selected year. However, when I click on the second tab and change the year in the dropdown, then click back on the first tab, the bar and pie chart have updated correctly data-wise but have not resized correctly in layout - they appear zoomed in:

I've tried making them resize if I click on the 'Yearly Activity' tab:

function tabSelect(e) {

        var tab = $(e.item).find("> .k-link").text();

        if (tab == "Yearly Activity") {

            kendo.resize($(".k-grid, .k-chart"));

        }

    }

I also have these functions, which are almost exactly as written in the demos:

    $(document).ready(function () {

        kendo.resize($(".k-grid, .k-chart"));

    });

    function onTileResize(e) {

        if (e.container) {

            // for widgets that do not auto resize

            // https://docs.telerik.com/kendo-ui/styles-and-layout/using-kendo-in-responsive-web-pages

            kendo.resize(e.container, true);

            $(document).bind("kendo:skinChange", updateTheme);

        }

    }

 

    function updateTheme() {

        var charts = $(".k-chart");

        $.each(charts, function (i, elem) {

            var theme = kendoTheme;

            if (/(default-|bootstrap-|material-|classic-)/.test(kendoTheme)) {

                theme = "sass";

            }

            $(elem).getKendoChart().setOptions({ theme: theme });

        });

    }

 

    $(window).on("resize", function () {

        kendo.resize($(".k-card-body"));

    });

How can I get the charts to resize themselves correctly, as if I was on the first tab when I changed the year?

Kind regards,

Richard

Aleksandar
Telerik team
 updated answer on 15 Dec 2021
1 answer
4.3K+ views

Afternoon,

Is there a way to display a formatted date in a readonly TextBox on a kendo form without using a DateTimePicker as below?

            items.Add()

                .Field(f => f.Datelastedited)

                .Label(l => l.Text("Date Last Edited:"))

                .Editor(e => e.DateTimePicker()

                    .HtmlAttributes(new { style = "width: 100%", title = "datetimepicker" })

                    .Format("{0:dd/MM/yyyy HH:mm:ss tt}"))

                .InputHtmlAttributes(new { @readonly = "readonly" });

I want the TextBox to be readonly so I don't need the ability to change the value, or display the buttons to set the time or date elements.

A NumericTextBox has a Format method, but the TestBox doesn't.

Kind regards,

Richard

Aleksandar
Telerik team
 answered on 15 Dec 2021
1 answer
531 views

I'm trying to implement a double click event on kendo grid row which would open a kendo window and the content is called making an ajax call based on the row data. The content gets it's data from a view. It works for the first time but when I close the window using out-of-the box window close button and select the same row or another row, the double click doesn't work. I want client to have option to get out of window/form and switch the row and double click it.  Developer Tools shows the following error when dblclick is attempted second time or on subsequent attempts. ""dataitem" uncaught typeerror cannot read property of undefined (reading 'dataitem') at HTMLTableRowElement.

"Below is a code snippet. 

//grid

@(Html.Kendo().Grid(Model)

        .Name("mygrid")
        .Columns(columns =>
        {
            columns.Bound(p => p.id).Title("id");            
            columns.Bound(p => p.Col2).Title("Col2").Width(130);

        })
        .Pageable()
        .Sortable()
        .Scrollable(scr => scr.Height(430))
        .Filterable()
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(20)
            .ServerOperation(false)
         )
        .Selectable()
)

     @{
    string[] actions = new string[] { "Close" };

}
<div class="windowdiv">
        <kendo-window name="window"
                      draggable="true"
                      resizable="true"
                      width="700"
                      height="650"
                      min-height="600"
                      min-width="600"
                      modal="true"
                      position-top="0%"
                      position-left="30%"
                      actions="actions">
            <content>
            </content>
            <popup-animation enabled="false" />
        </kendo-window>
    </div>
<script>
    $(document).ready(function () {
        /*$("#window").data("kendoWindow").center();*/
        $("#window").data("kendoWindow").close();
    });
    
    //double click
    $("#mygrid").on("dblclick", "tr.k-state-selected", function () {
        var dataItem = $("#mygrid").data("kendoGrid").dataItem($(this));
        id = (dataItem.id);
        alert("double clicked");

        $("#window").data("kendoWindow").title("Id: " + id);
        $("#window").kendoWindow({
            content: {
                url: "@Url.Action("ActionName","ControllerName")",
                data: { id: id }
            }
        });
        /*$("#window").data("kendoWindow").center();*/
        $("#window").data("kendoWindow").open();     
    });
</script>
Tsvetomir
Telerik team
 answered on 14 Dec 2021
1 answer
150 views

I'm having an issue where I have some code that opens an existing Excel file, adds some data then saves the file. When this runs all the charts in the original Excel file disappear. 

I have tested it and even if I just open the Excel file and save it without making any changes the charts are gone. 

I can't upload Excel files here but I have attached a screenshot of the before / after.

Example code

var xlsxFormatProvider = new XlsxFormatProvider();

// Import 
using Stream input = new FileStream("c:\\tmp\\Charts.xlsx", FileMode.Open);
var workbook = xlsxFormatProvider.Import(input);


// Export
using Stream output = new FileStream("c:\\tmp\\Charts_Edited.xlsx", FileMode.Create);
xlsxFormatProvider.Export(workbook, output);

 

Thanks,

Richard

Stoyan
Telerik team
 answered on 13 Dec 2021
1 answer
114 views

The scenario what I am trying to achieve:
For example, 
I got a  "product" model with totally 7 properties,
and in the grid I'm only showing 4 properties,
say showing "ProductId", "ProductName", "SupplierId", "CategoryId"

public product
{
        public int ProductId { get; set; }
        public string ProductName { get; set; }
        public int? SupplierId { get; set; }
        public int? CategoryId { get; set; }
        public string QuantityPerUnit { get; set; }
        public decimal? UnitPrice { get; set; }
        public short? UnitsInStock { get; set; }
}
However,
How can I show all 7 properties when editing or adding a new record in Grid ?
Alexander
Telerik team
 answered on 10 Dec 2021
1 answer
446 views

I'm new to ASP Core Grid component. I need to build a custom detail template. It has a child grid with its own data source. But it also have some info above the child grid. I started with the 'Grid and Menu' Visual Studio project template and removed unnecessary code. I've attached the UI screenshot and copied the content of Index.cshtml below. I have the following questions:

  1. The Freight in the detail template is decimal type. How to format it to '0.##'?
  2. I want to show some information in the detail template that could be part of the master record but cannot be loaded as part of the master record, it's a big performance hit if done that way. So it must be loaded later when the detail expands. I thought I can use the DetailInit event on the master grid but how do I update the UI? Do I re-render the template, do I update the master data record and then refresh the UI somehow?
  3. I have Refresh button on the detail grid pager. Can I update the entire template (including the Freight and summary info above the detail grid) when this button is clicked? Are there any events I can use to perform (2.) above? Is there a better way?

Any pointers are greatly appreciated.

Thank you!

Index.cshtml:

@{
    ViewData["Title"] = "Home Page";
}

<div class="row">
    <div class="col-12">
        @(Html.Kendo().Grid <GridDetail.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Bound(p => p.OrderID).Filterable(false);
                columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
                columns.Bound(p => p.ShipName);
                columns.Bound(p => p.ShipCity);
            })
            .HtmlAttributes(new { style = "height:550px;" })
            .ClientDetailTemplateId("detailTemplate")
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
                )
        )
    </div>
</div>

<script id="detailTemplate" type="text/html">
    <div>Freight: #=Freight#.</div> <!-- How to format the Freight? -->
    <div>
        Here some information that could come from shared data source.
        Or it could be on the master grid record but loaded when the detail expands.
    </div>
    @(Html.Kendo()
        .Grid<GridDetail.Models.OrderDetailViewModel>()
        .Name("grid_#=OrderID#")
        .Columns(columns =>
        {
            columns.Bound(c => c.Item);
            columns.Bound(c => c.Quantity);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("Order_Details_Read", "Grid", new { orderId = "#=OrderID#" }))
        )
        // Can the pager refresh be used to trigger update to the entire detailTemplate?
        // Is there even that could be used?
        .Pageable(pager => pager.Refresh(true))
        .ToClientTemplate()
    )
</script>

 

Stoyan
Telerik team
 answered on 09 Dec 2021
1 answer
110 views

Hi, all

theme: kendo.bootstrap-v4.min.css

header in DatePicker is not correct colored. Text is white on light gray background. In 2021.3.914 the same problem too.

 

Aleksandar
Telerik team
 answered on 09 Dec 2021
1 answer
83 views
Please can you advise if kendo support treelist with paging capabilities? 
Alexander
Telerik team
 answered on 08 Dec 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?