Telerik Forums
Kendo UI for jQuery Forum
1 answer
9 views

Hi, with angular Kendo 14++ we lost the Icon Class. But now how I can  cutomize treeview custom drag template?

I whant to add the k-i-cancel icon on some specific node. In the pass I was using:

<ng-template kendoTreeViewDragClueTemplate let-action="action" let-sourceItem="sourceItem"
    let-destinationItem="destinationItem" let-text="text">
    <span class="k-drag-status k-icon" [ngClass]="getDragStatus(action, sourceItem, destinationItem)"></span>
    <span>{{ text }}</span>
</ng-template>

 

Then in the getDragStatus I can do the logic and push the correct icon in ngClass.

For now I remove the template because I lost all the other icon like (add, insert, ... )

Its just for visual help, because I validate the drop in the "nodeDrop" fonction.

Thanks

Yanmario
Telerik team
 answered on 01 May 2024
1 answer
9 views

Description

Hello Telerik Community,

I'm encountering an issue with my Kendo Chart implementation where certain data points are not displaying on the line series, despite being present in the dataset. Here's a breakdown of the problem and my current setup:

Problem 

- Some data points, specifically those corresponding to the dates November 26 and November 28/29, are not showing up on the line chart.
- However, these dates are appearing correctly in the category legend.

Setup

- I'm using Kendo Chart to visualize historical pool data.
- Data is fetched from a database and processed in the controller before being passed to the Razor view for rendering.
- Each manufacturer's data is plotted on the chart as separate line series, with the x-axis representing dates and the y-axis representing weight.

Relevant Code

- Controller Code: I've provided the relevant controller code responsible for fetching and processing the data.
- Razor View Code: Similarly, I've included the Razor view code where the Kendo Chart is defined and configured.

Expected Outcome

- I expect the line chart to display all data points, including those for November 27 and November 29, for each manufacturer.

Steps Taken

- I've checked the data in the controller, and it seems that all data points are correctly fetched from the database.
- I've inspected the generated HTML for the chart and confirmed that the missing data points are indeed not being rendered.

Request for Assistance

- Could you please review my setup and help me identify any potential issues causing the missing data points?
- Additionally, if you have any suggestions for troubleshooting or debugging this issue further, I would greatly appreciate it.

Additional Information

- Framework: ASP.NET MVC- Browser: Chrome, Edge

Thank you in advance for your assistance!


public ActionResult ChartTMS(DateTime? fromDate, DateTime? toDate, string unit = "gm")
        {
            fromDate = fromDate?.Date;
            toDate = toDate.HasValue ? toDate.Value.Date.AddDays(1).AddTicks(-1) : DateTime.Today;
 
            if (!fromDate.HasValue || !toDate.HasValue)
            {
                fromDate = DateTime.Today.AddDays(-6);
                toDate = DateTime.Today;
            }
 
            var allMeasurements = (
                from m in db.Target_Measurement_History.AsNoTracking()
                where m.Measurement_Record_Date >= fromDate.Value && m.Measurement_Record_Date <= toDate.Value
&& m.Target_Lot_Profile != null
&& m.Target_Lot_Profile.Target_Item != null
&& m.Target_Lot_Profile.Target_Item.Target_Manufacturer != null
                select new MeasurementDataViewModel
                {
                    Measurement_Record_Date = m.Measurement_Record_Date,
                    Pt_Remaining_Gms = m.Pt_Remaining_Gms,
                    Ru_Remaining_Gms = m.Ru_Remaining_Gms,
                    Manufacturer = m.Target_Lot_Profile.Target_Item.Target_Manufacturer,
                }).ToList();
 
            var manufacturers = allMeasurements.Select(m => m.Manufacturer).Distinct();
            var colorMap = new Dictionary<string, string>();
            Random rand = new Random();
 
            foreach (var manufacturer in manufacturers)
            {
                colorMap[manufacturer] = $"#{rand.Next(0x1000000):X6}";
            }
 
            var groupedData = allMeasurements
                .GroupBy(m => new { m.Measurement_Record_Date.Date, m.Manufacturer })
                .Select(group => new MeasurementDataViewModel
                {
                    Measurement_Record_Date = group.Key.Date,
                    Pt_Remaining_Gms = group.Sum(item => item.Pt_Remaining_Gms),
                    Ru_Remaining_Gms = group.Sum(item => item.Ru_Remaining_Gms),
                    Manufacturer = group.Key.Manufacturer,
                    Color = colorMap[group.Key.Manufacturer]
                })
                .OrderBy(g => g.Measurement_Record_Date)
                .ThenBy(g => g.Manufacturer)
                .ToList();
 
            const float gramsPerTroyOunce = 31.1035f;
 
            if (unit == "t oz")
            {
                foreach (var item in groupedData)
                {
                    if (item.Pt_Remaining_Gms.HasValue)
                        item.Pt_Remaining_Gms = item.Pt_Remaining_Gms.Value / gramsPerTroyOunce;
 
                    if (item.Ru_Remaining_Gms.HasValue)
                        item.Ru_Remaining_Gms = item.Ru_Remaining_Gms.Value / gramsPerTroyOunce;
                }
            }
 
            ViewBag.fromDate = fromDate;
            ViewBag.toDate = toDate;
            ViewBag.Unit = unit;
 
            return View(groupedData);
        }

    public class MeasurementDataViewModel
    {
        public DateTime Measurement_Record_Date { get; set; }
        public float? Pt_Remaining_Gms { get; set; }
        public float? Ru_Remaining_Gms { get; set; }
        public string Manufacturer { get; set; }
        public string Color { get; set; }
    }

[
    {
        "Measurement_Record_Date": "/Date(1542823200000)/",
        "Pt_Remaining_Gms": 4370,
        "Ru_Remaining_Gms": 5621,
        "Manufacturer": "JX Nippon"
    },
    {
        "Measurement_Record_Date": "/Date(1542823200000)/",
        "Pt_Remaining_Gms": 4571,
        "Ru_Remaining_Gms": 4295,
        "Manufacturer": "Kojundo/Mitsui"
    },
    {
        "Measurement_Record_Date": "/Date(1543168800000)/",
        "Pt_Remaining_Gms": 1785,
        "Ru_Remaining_Gms": 7086,
        "Manufacturer": "JX Nippon"
    },
    {
        "Measurement_Record_Date": "/Date(1543255200000)/",
        "Pt_Remaining_Gms": 36432,
        "Ru_Remaining_Gms": 41800,
        "Manufacturer": "Kurt J. Lesker"
    },
    {
        "Measurement_Record_Date": "/Date(1543428000000)/",
        "Pt_Remaining_Gms": 76360,
        "Ru_Remaining_Gms": 74687,
        "Manufacturer": "Kurt J. Lesker"
    },
    {
        "Measurement_Record_Date": "/Date(1543428000000)/",
        "Pt_Remaining_Gms": 11138,
        "Ru_Remaining_Gms": 9686,
        "Manufacturer": "Materion"
    },
    {
        "Measurement_Record_Date": "/Date(1543428000000)/",
        "Pt_Remaining_Gms": 1329,
        "Ru_Remaining_Gms": 4796,
        "Manufacturer": "Mitsubishi"
    }
]



@using Kendo.Mvc.UI
@using System.Web.Mvc
@using System.Web.Mvc.Html
@using Kendo.Mvc.Extensions
@model IEnumerable<TMS_RND.Controllers.MeasurementDataViewModel>
@using System.Web.Helpers
 
@{
    ViewBag.Title = "Chart";
    Layout = "~/Views/Shared/_Layout.cshtml";
 
    DateTime startDate = ViewBag.fromDate ?? DateTime.Today.AddDays(-6);
    DateTime endDate = ViewBag.toDate ?? DateTime.Today;
    string currentUnit = ViewBag.Unit ?? "gm";
    var manufacturers = Model
        .GroupBy(m => m.Manufacturer)
        .Select(g => new
        {
            Manufacturer = g.Key,
            Color = g.First().Color
        })
        .ToList();
}
 
 
<div class="demo-section wide">
<div style="display: flex; justify-content: space-between; align-items: center;">
<div>
            From: @(Html.Kendo().DatePicker().Name("fromDate").Value(startDate.ToString("yyyy-MM-dd")))
            To: @(Html.Kendo().DatePicker().Name("toDate").Value(endDate.ToString("yyyy-MM-dd")))
<button id="refreshChart">Refresh Chart</button>
<button id="clearFilter">Clear</button>
<button id="toggleUnit">@(currentUnit == "gm" ? "Switch to Troy oz" : "Switch to gm")</button>
</div>
<div>
<button class="tab" id="totalPoolTab">Total Pool</button>
<button class="tab" id="tmsTab" style="background-color: lightblue;">TMS</button>
</div>
<div>
            @foreach (var manufacturer in manufacturers)
            {
<span style="color:@manufacturer.Color">@manufacturer.Manufacturer</span>
            }
</div>
</div>
<div id="chartContainer">
        @(Html.Kendo().Chart(Model)
            .Name("chart")
            .Title("Historical Pool Data")
            .HtmlAttributes(new { style = "height: 400px;" })
            .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
            .SeriesDefaults(seriesDefaults => seriesDefaults.Line().Stack(false))
            .Series(series => {
                foreach (var manufacturer in manufacturers)
                {
                    var manufacturerData = Model.Where(m => m.Manufacturer == manufacturer.Manufacturer).ToList();
                    series.Line(manufacturerData.Select(m => m.Pt_Remaining_Gms))
                          .Name("Pt - " + manufacturer.Manufacturer)
                          .Color(manufacturer.Color)
                          .Visible(true)
                          .Labels(labels => labels.Visible(true).Format("{0:N2} " + currentUnit));
                    series.Line(manufacturerData.Select(m => m.Ru_Remaining_Gms))
                          .Name("Ru - " + manufacturer.Manufacturer)
                          .Color(manufacturer.Color)
                          .Visible(false)
                          .Labels(labels => labels.Visible(true).Format("{0:N2} " + currentUnit));
                }
            })
            .CategoryAxis(axis => axis.Categories(Model.Select(m => m.Measurement_Record_Date.ToString("dd MMM yyyy")).Distinct()))
            .ValueAxis(axis => axis.Numeric()
                .Line(line => line.Visible(false))
                .Title("Weight (" + currentUnit + ")"))
            .Tooltip(tooltip => tooltip.Visible(true).Format("{0:N2} " + currentUnit))
        )
</div>
</div>
 
<script>
    $(document).ready(function () {
        function toISOStringWithMidday(date) {
            var localDate = new Date(date);
            localDate.setHours(12, 0, 0, 0);
            var offset = localDate.getTimezoneOffset() * 60000;
            var localMidday = new Date(localDate.getTime() - offset);
            return localMidday.toISOString();
        }
 
        $("#refreshChart").click(function () {
            refreshChart();
        });
 
        $("#toggleUnit").click(function () {
            var newUnit = '@currentUnit' == 'gm' ? 't oz' : 'gm';
            refreshChart(newUnit);
        });
 
        $("#clearFilter").click(function () {
            window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")';
        });
 
        function refreshChart(newUnit) {
            var selectedFromDate = $("#fromDate").data("kendoDatePicker").value();
            var selectedToDate = $("#toDate").data("kendoDatePicker").value();
            var unitParam = newUnit || '@currentUnit';
 
            if (selectedFromDate && selectedToDate) {
                var difference = Math.abs(selectedToDate.getTime() - selectedFromDate.getTime());
                if (difference > 7 * 24 * 60 * 60 * 1000) {
                    alert("Please select a date range within 7 days.");
                    return;
                }
 
                var fromDateStr = toISOStringWithMidday(selectedFromDate);
                var toDateStr = toISOStringWithMidday(selectedToDate);
 
                window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")' + '?fromDate=' + fromDateStr + '&toDate=' + toDateStr + '&unit=' + unitParam;
            } else {
                alert("Please select both from and to dates.");
            }
        }
 
        $("#totalPoolTab").click(function() {
            window.location.href = '@Url.Action("Chart", "Target_Measurement_History")';
        });
 
        $("#tmsTab").click(function() {
            window.location.href = '@Url.Action("ChartTMS", "Target_Measurement_History")';
        });
 
        $("#tmsTab").css("background-color", "lightblue");
 
        $(".tab").click(function() {
            $(".tab").css("background-color", "");
            $(this).css("background-color", "lightblue");
        });
    });
</script>

Martin
Telerik team
 answered on 01 May 2024
1 answer
13 views
I have a kendo multi-select with a list of items sorted by name (Alaska, California, Delaware, Florida, Georgia...). When a user selects items, I want them to be displayed at the top of the list the next time the list is opened (not to move during the select process). For example, if the user selects Delaware and Florida the new order should be: Delaware (selected), Florida (selected), Alaska, California, Georgia. How would I accomplish this? Note, if it makes a difference, some of my lists are virtualized and some are not. It depends on how many reasonable options I could have. All are using a local JSON data source.
Georgi Denchev
Telerik team
 answered on 29 Apr 2024
2 answers
46 views
I have been asked to add tooltips to a dropdownlist so a user can see more details about an item before selecting it. I found this solution https://docs.telerik.com/kendo-ui/knowledge-base/show-tooltip-for-items but it doesn't work right on touch devices. When you touch the screen, it selects the item, closes the list, and displays the tooltip until you click somewhere else on the screen. I kind of think maybe there should be a separate button for showing the tooltip vs selecting the item. How would I achieve this?
Lee
Top achievements
Rank 2
Bronze
Bronze
Bronze
 updated answer on 25 Apr 2024
1 answer
16 views

Hi team,

I need to know the real status of CSP for jQuery kendo UI.

Sorry but documentation is unclear.  Ok for the unsafe-eval directive. But what about the unsafe-inline directive for script-src AND style-src?

 

Thank you,

Laurent.

 

Martin
Telerik team
 answered on 25 Apr 2024
1 answer
8 views

Any ideas?

I have this basically:


...and then a call to an API. The pop-up window doesn't open until the asynchronous call to an  API has returned a value. Granted I am using an older jQuery $.ajax call for this....buuut I find it hard to believe that this doesn't work.  How can I bring up my dialog or pop-up window, give it the focus, and close it AFTER the response has comeback with data to populate my grid?

Looking for something like this:

to appear prior to the API call... but the focus is locked on the drop down list I guess? Is there anyway to free the lock on the drop down list and give the focus to this kendoWindow element?

Thanks!

Martin
Telerik team
 answered on 25 Apr 2024
1 answer
8 views

How do I bind a listbox datasource to one specific collection returned by a new window.kendo.data.DataSource({ ?

The datasource returns json with two collections like below, and I want to bind to one of the collections

{
"collection1": [
{
"id": "1",
"name": "ABC"
},
{
"id": "2",
"name": "DEF"
}
],
"collection2": [
{
"id": "1",
"name": "HIJ"
},
{
"id": "2",
"name": "KLM"
}
]
}

 

Nikolay
Telerik team
 answered on 23 Apr 2024
1 answer
12 views

I have a Grid with a filter row. One column (in this case the Name column) can be filtered via a dropdowntree. I configured the tree with the checkAll config option. But this option does not do anything. How can i get the checkAll to work?

 

Here is the dojo : https://dojo.telerik.com/AhIHijIf

Nikolay
Telerik team
 updated answer on 22 Apr 2024
2 answers
326 views

Hello

Is there a way to have the listbox alternate row colors?  An type of slight row shading would work. 

 

Thank you

Jeff

Morten
Top achievements
Rank 2
Iron
Iron
Veteran
 answered on 18 Apr 2024
2 answers
18 views

Hi,

I am doing default PDF export functionality of Kendo Grid. But exported PDF file has extra characters in meta data. That results weird title of the PDF in Chrome browser. I have attached screen shot of the exported pdf and also a meta data of the file.  

I found few solutions (https://www.telerik.com/forums/saving-grids-or-charts-as-pdf-and-getting-strange-characters-in-the-metadata) that mentioned that I need to have <meta Charset='UTF-8'> in my code, where grid has been initialized. But I have set UTF-8 charset only in my entire code, still facing same issue.

I have few questions:

1) Which charset value is getting used to export the grid in PDF? (i) <meta Charset='UTF-8'> written in my code or (ii) default export functionality has its own charset value

2)  I am using Telerik.UI.for.AspNet.Core 2020.3.1021 version for kendo UI. Which specific library is being used for PDF generation in Telerik.UI.for.AspNet.Core  2020.3.1021 ? 

3) Is there anything else to try to resolve this issue?

Angel Petrov
Telerik team
 answered on 17 Apr 2024
Narrow your results
Selected tags
Tags
+? more
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Mark
Top achievements
Rank 1
Yurii
Top achievements
Rank 1
Leland
Top achievements
Rank 2
Iron
Iron
Iron
Hon
Top achievements
Rank 1
Iron
Deltaohm
Top achievements
Rank 3
Bronze
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?