Telerik Forums
UI for ASP.NET MVC Forum
1 answer
152 views
Hi, I want to ask a question about the add record button in ASP.NET MVC Grid Popup Editing when I click on the button, it links to a page with this "{"Data":[],"Total":0,"AggregateResults":null,"Errors":null}".
Alexander
Telerik team
 answered on 19 Sep 2023
1 answer
230 views

Let's say I have a program with two buttons, and each one of them populate my grid with different data

. Every time I click any button it reads the data and replace the current data on the grid with the new one. The problem is, let's say button 1 returned an error like 'Uncaught TypeError: Cannot read properties of null', then when I try to click button 2, which has data that doesn't cause errors, then the read method is not called, it doesn't even show on the network tab.

Is it suppose to be like that, or is there a way to make a situation like this work?

Some information: My grid is made by using MVC model (Html.Kendo().Grid<>) approach, with dataSource.Ajax().

Anton Mironov
Telerik team
 answered on 18 Sep 2023
1 answer
199 views

Using your ASP.NET MVC Grid Detail Template demo listed at following link

https://demos.telerik.com/aspnet-mvc/grid/detailtemplate?_ga=2.212498388.1559105652.1688053353-1103487563.1679788213&_gl=1*1tfyiak*_ga*MTEwMzQ4NzU2My4xNjc5Nzg4MjEz*_ga_9JSNBCSF54*MTY4ODA2NTcyMi4xMTYuMS4xNjg4MDY4NDc5LjIxLjAuMA..

 

How can I enforce or only allow one Detail to be expanded at any given time?

Sean
Top achievements
Rank 1
Iron
Iron
 answered on 16 Sep 2023
1 answer
123 views

Need an example of using the Filter component with a DataSource.  Using the Apply button of the DataSource I would like to pass the arguments collected from the Filter to the Contoller function bound to the Read command of the datasource.

 

 

Sean
Top achievements
Rank 1
Iron
Iron
 answered on 16 Sep 2023
1 answer
621 views

I have just upgraded my MVC application to 2023.2.606.  When I access a view with a Kindo.Grid on it the column filter icons are displayed and are very large.

I had a similar issue with another control which was fixed by adding the following to the master page


    <script>
        kendo.setDefaults('iconType', 'font');
    </script>

When I take out the ability to filter the grid is displayed but the layout is messed up.

 

 

 

Eyup
Telerik team
 answered on 15 Sep 2023
1 answer
228 views

I have a chart loaded with a data source, and I would like to change the dash type based on the series name. I can't find a property in JavaScript or at the chart level (e.g., DashTypeField)

here is an extract from my code

@(Html.Kendo().Chart<AquascopWeb.pages.ValorisationResultats.Models.EvolPiezometreMultiPointSeriesDataViewModel>()
    .Name("chartEvolPiezometreMultiPoint").HtmlAttributes(new { style = "height:" + height + "px;" })
    .Title(title => title
        .Text("Evolution du type d'observation " + ViewBag.TypeTraite + " - multi-pézomètres ")
        .Font("bold 16px 'Arial Unicode MS'")
    )
    .Legend(legend => legend.Position(ChartLegendPosition.Bottom).Font("11px 'Arial Unicode MS'"))
    .SeriesDefaults(seriesDefaults =>
        seriesDefaults.Line().Style(ChartLineStyle.Normal)
    )
    .Series(series =>
    {
        series.Line(value => value.Data, categoryExpression: category => category.Date).MissingValues(ChartLineMissingValues.Gap).GroupNameTemplate("#= group.value #").Markers(conf=>conf.Visible(false).Size(2)).Style(ChartLineStyle.Normal);     
    })
    .CategoryAxis(axis => axis
            .Name("series-axis")
        .Line(line => line.Visible(false))
        .Labels(label=>label.Visible(false))
        )
    .CategoryAxis(axis =>
    {
        axis.Name("label-axis");
        axis.Line(line => line.DashType(ChartDashType.Dot));
        axis.Categories(model => model.Date);
        axis.Type(ChartCategoryAxisType.Category)/*.MajorGridLines(lines => lines.Visible(false))*/;        
        axis.Justify(true);
        axis.Date().BaseUnit(ChartAxisBaseUnit.Fit)
            .MaxDateGroups(12).Labels(labels => labels.DateFormats(formats => { formats.Days("dd/MM/yyyy"); formats.Months("MMMM yyyy"); }))
            .AutoBaseUnitSteps(unitSteps => unitSteps
                .Days(new int[] { 3 }) // Would produce 31 groups => Skip to weeks.
                .Weeks(new int[] { }) // Not allowed as no steps are defined => Skip to months.
                .Months(new int[] { 1 }) // Results in 2 groups => Chosen.
            );
        axis.Labels(label =>
        {
            label.Rotation("auto");
            label.Font("11px 'Arial Unicode MS'");
        });
    }
    )
    .ValueAxis(axis => axis
        .Numeric()
        .Title(title=>
        {
            title.Text(ViewBag.TypeTraite);
            title.Font("8px");
        })
        .Labels(label =>
        {
            label.Rotation("auto");
        })
        .AxisCrossingValue(0, int.MinValue)
    )
    .Tooltip(tooltip => tooltip
        .Visible(true)
        .Shared(true) 
    .SharedTemplate(
                    "<div style='display: flex;flex-direction:column;'>" +
                        "<div style='display: flex;align-items: center;justify-content: center;font-size: 12px;font-weight: bold;'>#= kendo.toString(category, 'dd MMMM yyyy')#</div>" +
                        "<table class='table table-sm'>" +
                        "   <tbody>" +
                        "# for (var i = 0; i < points.length; i++) { #" +
                        "       <tr>" +
                        "           <td><span style='color:#= points[i].series.color #' class='k-icon k-i-minus minus-grand'></span></td>" +
                        "           <td>#= points[i].series.name #</td>" +
                        "           <td>&nbsp;:&nbsp;</td>" +
                        "           <td><span style='font-size: 12px;font-weight: bold;color:#= points[i].series.color #'>#= points[i].value #</span></td>" +
                        "       </tr>" +
                        "# } #" +
                        "   </tbody>" +

                        "</table>" +
                    "</div>"
                   )
    )
    .Pannable(pannable => pannable
    .Lock(ChartAxisLock.Y)
    )
    .Zoomable(zoomable => zoomable
        .Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))
        .Selection(selection => selection.Lock(ChartAxisLock.Y))
    )
    .DataSource(dataSource => dataSource
        .Read(read => read.Action("ChartEvolPiezometreMultiPoint_Read", "GraphEvolPiezometreMultiPoint"))
        .Group(g => g.Add(v => v.Name))
        .Sort(s => s.Add(v => v.Date))
    )
    .Events(events=>events.DataBound("chartEvolPiezometreMultiPoint_DataBound"))
)


Anton Mironov
Telerik team
 answered on 14 Sep 2023
5 answers
1.5K+ views

Hi!

I need to know if there is a way to generate a QR code with a logo in the center as shown in the attached file.

Viktor Tachev
Telerik team
 answered on 13 Sep 2023
1 answer
199 views

Hi,

I am trying to set up a chart by retrieving the data from an API and the binding  is not working. I can see in the network tab of the browser that I am receiving the correct data from the API, but then the chart is blank, no data being represented. Here is my code:

                           

 

@(
        Html.Kendo().Chart<OrderBookChart>()
            .AutoBind(true)
            .Events(events => events.DataBound("onDataBound"))
            .Events(e => e.Render("onRender"))
            .Legend(false)
            .DataSource(ds => ds
                .Group(group => group.Add(model => model.OrderId))
                .Sort(s => s.Add(model => model.OrderId).Descending())

                .Read(read => read.Action("GetOrderBook", "OrderBookChart").Data("additionalInfo"))
                )
            .SeriesDefaults(seriesDefaults =>
                seriesDefaults.Bar().Stack(true)
            )
            .Series(series =>
            {
                series.Bar(model => model.Quantity).Name("Quantity").CategoryField("Price")
                .Labels(l => l
                    .Visible(true)
                    .Template("#= customLabelFormat(dataItem.Quantity) #")
                    .Position(ChartBarLabelsPosition.OutsideEnd)
                    .Background("transparent")
                );
            })
        .CategoryAxis(axis =>
            axis
            .Labels(labels => labels.Rotation(0))


        )
        .ValueAxis(config => 
            config.Numeric()
            .Visible(true)
            .Color("transparent")
        )
        )

controller:

[Route("contract-order-book-at")]
    [ApiController]
    public class OrderBookChartController : Controller
    {
        private readonly string _urlRestApi;
        private readonly ILogger<UserDataService> _logger;
        private readonly AppSettings _appSettings;

        public OrderBookChartController(ILogger<UserDataService> logger,
                                AppSettings appSettings)
        {
            _logger = logger;
            _appSettings = appSettings;
            _urlRestApi = _appSettings.UrlApiRest;

        }

        [HttpPost]
        public ActionResult GetOrderBook(string contractCode, string date, string time, [DataSourceRequest] DataSourceRequest dSourceRequest)
        {
            List<OrderBookChart> result;
            string baseUrl = _urlRestApi;
            contractCode = "code";
            date = "2023-04-24";
            time = "13:50:25.020";
            var urlRequest = $"{baseUrl}/contract-order-book-at?contractCode={contractCode}&date={date}&time={time}";

            result = LoadDataFromBackendAsync(urlRequest).Result;

            DataSourceResult ds = result.ToDataSourceResult(dSourceRequest);
             return Json(result.ToDataSourceResult(dSourceRequest));

        }

        private async Task<List<OrderBookChart>> LoadDataFromBackendAsync(string urlRequest)
        {
            List<OrderBookChart> result = new List<OrderBookChart>();

            try
            {
                using (HttpClient client = new HttpClient())
                {

                    HttpRequestMessage request = new HttpRequestMessage(HttpMethod.Get, urlRequest);
                    HttpResponseMessage response = client.SendAsync(request).Result;

                    var responseContent = await response.Content.ReadAsStringAsync();

                    if (!string.IsNullOrEmpty(responseContent))
                    {
                        var responseJson = JArray.Parse(responseContent);

                        foreach (var item in responseJson.Children<JObject>())
                        {
                            result.Add(new OrderBookChart(item.GetValue("traderId").Value<int>(), item.GetValue("side").Value<string>(), item.GetValue("price").Value<decimal>(),
                                item.GetValue("quantity").Value<int>(), item.GetValue("creationTime").Value<DateTime>()));

                        }
                        return result;
                    }
                    else
                    {
                        _logger.LogError($"{nameof(UserDataService)}.{nameof(LoadDataFromBackendAsync)}. Error getting UserPreferences, StatusCode: ({response.StatusCode})");
                    }
                }
            }
            catch (Exception ex)
            {
                _logger.LogError(ex, $"{nameof(UserDataService)}.{nameof(LoadDataFromBackendAsync)}. Message: {ex.Message}");
            }

            return result;

        }
    }

 

Model:

 public class OrderBookChart
    {


        public int OrderId { get; set; }


        public String Side { get; set; }
       
        public decimal Price { get; set; }


        public int Quantity { get; set; }

        public DateTime CreationTime { get; set; }


        public OrderBookChart(int orderId, string side, decimal price, int quantity, DateTime creationTime)
        {
            OrderId = orderId;
            Side = side;
            Price = price;
            Quantity = quantity;
            CreationTime = creationTime;
        }

    }                           
Guillermo
Top achievements
Rank 1
Iron
 updated question on 12 Sep 2023
1 answer
371 views

My company has three very large apps that are dependent on Kendo. I've been trying for several days to update the Kendo version in our largest app from version 2022.3.913. I was able to update with no problems to version 2023.1.117. But when I try to go beyond that, it's completely hosed. Worst of all is the use of icons. I can't make them work no matter what I do. We've been using .SpriteCssClass() to attach icons to buttons and menu items as well as using the k-icon k-i-xxx classes in grid item templates. None of that works anymore. None of the suggested fixes for this work with version 2023.2.829 either. I've tried telling the app to use font icons via KendMvc.Setup() in my Startup.cs and BaseController.cs files, neither of which worked. I installed both the FontIcons and SvgIcons NuGet packages, which at least allowed me to build the app. I was able to use the .Icon() method on a Button widget to use one if the SVG icons that I saw in an example, but nowhere on your site can I find a list of standard SVG icons like the list of font icons, so I wasn't able to find the icons I had been using. In addition to the complete inability to make icons work, the way you've changed font sizing for widgets has made the app look very different than before the update and has made various customizations we've made in our site.css file look very bad. Ditto for some random styling changes you've made for menu items and anchor tags in grid templates.

In short, you have really screwed us over and I don't know if we're going to be able to update past 2023.1.117. I see lots of others have had these same issues and I don't see you responding with any real solutions.

Anton Mironov
Telerik team
 answered on 12 Sep 2023
1 answer
343 views
Hi,
I have a project implementing kendo grid UI for asp.net mvc. It has a common .Filterable() as:
.Filterable(ftb =>
{
    ftb.Mode(GridFilterMode.Row);
    ftb.Extra(false);
    ftb.Operators(operators => operators.ForString(str => str.Clear().IsEqualTo("Is equal")
                                                                    .StartsWith("Contains")
                                                                    .IsNotEqualTo("Is not equal"))
                                        .ForDate(str => str.Clear().IsEqualTo("Is equal")
                                                                    .IsNotEqualTo("Is not equal")
                                                                    .IsLessThan("Is less than")
                                                                    .IsGreaterThan("Is greater than")
                                                                    .IsLessThanOrEqualTo("Is less than or equal to")
                                                                    .IsGreaterThanOrEqualTo("Is greater than or equal to"))
                                        .ForNumber(str => str.Clear().IsEqualTo("Is equal")
                                                                    .IsNotEqualTo("Is not equal")
                                                                    .IsLessThan("Is less than")
                                                                    .IsGreaterThan("Is greater than")
                                                                    .IsLessThanOrEqualTo("Is less than or equal to")
                                                                    .IsGreaterThanOrEqualTo("Is greater than or equal to")));
})
However, for 1 particular column, I have set .Filterable(ftb => ftb.Cell(cell => cell.Template("nameOfMyDropDownList")));
The custom filter is populated using JS. The thing is, I want to get rid of the Filter Icon that gets displayed along with the dropdown since it does not make sense to have the filter icon there when we can have a custom filter dropdown. 
I tried adding a class to the element to be hidden. But the class name doesn't get added. 
Anton Mironov
Telerik team
 answered on 11 Sep 2023
Narrow your results
Selected tags
Tags
Grid
General Discussions
Scheduler
DropDownList
Chart
Editor
TreeView
DatePicker
ComboBox
Upload
MultiSelect
ListView
Window
TabStrip
Menu
Installer and VS Extensions
Spreadsheet
AutoComplete
TreeList
Gantt
PanelBar
NumericTextBox
Filter
ToolTip
Map
Diagram
Button
PivotGrid
Form
ListBox
Splitter
Application
FileManager
Sortable
Calendar
View
MaskedTextBox
PDFViewer
TextBox
Toolbar
Dialog
MultiColumnComboBox
DropDownTree
Checkbox
Slider
Switch
Notification
Accessibility
ListView (Mobile)
Pager
Security
ColorPicker
DateRangePicker
Wizard
Styling
Chat
DateInput
MediaPlayer
TileLayout
Drawer
SplitView
Template
Barcode
ButtonGroup (Mobile)
Drawer (Mobile)
ImageEditor
RadioGroup
Sparkline
Stepper
TabStrip (Mobile)
GridLayout
Badge
LinearGauge
ModalView
ResponsivePanel
TextArea
Breadcrumb
ExpansionPanel
Licensing
Rating
ScrollView
ButtonGroup
CheckBoxGroup
NavBar
ProgressBar
QRCode
RadioButton
Scroller
Timeline
TreeMap
TaskBoard
OrgChart
Captcha
ActionSheet
Signature
DateTimePicker
AppBar
BottomNavigation
Card
FloatingActionButton
Localization
MultiViewCalendar
PopOver (Mobile)
Ripple
ScrollView (Mobile)
Switch (Mobile)
PivotGridV2
FlatColorPicker
ColorPalette
DropDownButton
AIPrompt
PropertyGrid
ActionSheet (Mobile)
BulletGraph
Button (Mobile)
Collapsible
Loader
CircularGauge
SkeletonContainer
Popover
HeatMap
Avatar
ColorGradient
CircularProgressBar
SplitButton
StackLayout
TimeDurationPicker
Chip
ChipList
DockManager
ToggleButton
Sankey
OTPInput
ChartWizard
SpeechToTextButton
InlineAIPrompt
TimePicker
StockChart
RadialGauge
ContextMenu
ArcGauge
AICodingAssistant
SmartPasteButton
PromptBox
SegmentedControl
+? more
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Top users last month
Miljana
Top achievements
Rank 2
Iron
Iron
Joel
Top achievements
Rank 3
Bronze
Bronze
Bronze
Cynthia
Top achievements
Rank 1
John
Top achievements
Rank 1
Iron
Mozart
Top achievements
Rank 1
Iron
Veteran
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?