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

Scenario:

I have a series of data,

and I would like to plot it in line chart.

The X Axis is time to milliseconds, Y axis is numeric data with at least three digit after decimal point,

and each time data is not in the same time step,

Example of my data:

Question:

I'm setting the CategoryAxis to milliseconds(1).

However, when I check the chart it only shows a few point,

and the data were in the wrong point.

Q1. Is the CategoryAxis AutobaseUnitStep setting wrong that made the data point mismatching?

Q2. How can I show more data point on grid?

Q3. How can I set the tooltip format to show data with at least 4 or 5 digit after decimal point, and the time to milliseconds?

 

Code

 @(Html.Kendo().Chart(MyViewModel)
                                    .Name("dtchart")
                                    .Title("Displacement")
                                    .Legend(legend => legend
                                        .Position(ChartLegendPosition.Bottom)
                                    )
                                    .ChartArea(chartArea => chartArea
                                        .Background("transparent")
                                    )
                                    .SeriesDefaults(seriesDefaults =>
                                        seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
                                    )
                                    .Series(series => {
                                        series.Line(model => model.ReadData).Name("Displacement");
                                    })
                                    .ValueAxis(axis => axis
                                        .Numeric()
                                    )
                                    .CategoryAxis(axis => axis
                                        .Categories( m => m.ReadTime)
                                        .Type(ChartCategoryAxisType.Date)
                                        .BaseUnit(ChartAxisBaseUnit.Fit)
                                        .Labels(labels => labels.Rotation(-90))
                                        .Crosshair(c => c.Visible(true))
                                        .AutoBaseUnitSteps(config => config.Milliseconds(1))
                                    )
                                    .Tooltip(tooltip => tooltip
                                        .Visible(true)
                                        .Shared(true)
                                        .Format("{0:N0}")
                                    )
                                )


 

 

Mihaela
Telerik team
 answered on 04 Nov 2022
1 answer
637 views

Hello 

Hopefully someone can give me an idea of how to do this. I am using Razor not MVC.

Currently I am building the columns setting for a grid using a backend function in the .cs file to create List<GridColumnSettings>. Then I can reference that from the Grid.  This application has a lot of columns and it seemed more compact to do this than list them in the grid.

However, now I want to add a button to send a user to a details page for any given row.  Since the grid view scrolls horizontally pretty far, I want to give the users an option of viewing a selected row vertically.  I planned to just redirect to another page when the user clicked the link or button (by invoking a script to do the work of getting the row id and redirecting to the details.)

However, I haven't hit on the correct way to add this custom button or line to the GridColumnSettings.  I've tried several configurations and haven't hit on something that works.

Does anyone have any suggestions?

Snippets of my current code are below.  Please see the attached example.png for an illustration of what I would like to do.

Thank you!

============================================

Creating the grid columns in Utilities.cs

 public List<GridColumnSettings> makeApplicationListColumnHeadings()
        {
            IList<GridColumnSettings> columns = new List<GridColumnSettings>
            {
                new GridCommandColumnSettings
                {
                     Commands =
                    {                       
                         new GridEditActionCommand()
                         {
                            Text = "Edit",       
                             UpdateText = "Update",
                             CancelText = "Cancel",
                             },
                         new GridDestroyActionCommand()
                         {                           
                         }
                     },
                    Width = "110px",
                    Filterable = false,
                    Locked = true,
                    Title = "Change"
                },

                 new GridColumnSettings
            {
                Member = "Id",
                Title = "Id",
                Visible = false,
                Width = "15px",
                Filterable = true
            },
           new GridColumnSettings
            {
                Member = "ApplicationName",
                Title = "App",
                Visible = true,
                Sortable = true,
                Width = "250px",
                Filterable = true

            },
             new GridColumnSettings
            {
                Member = "WebApplicationName",
                Title = "Web Name",
                Visible = true,
                Sortable = true,
                Width = "250px",
                Filterable = true

            }, ....

==========

populating the columns list in the applicationList.cshtml.cs

public class ApplicationListModel : PageModel
    {
        private readonly HCApplicationsWeb.Models.AppDbContext db;
        public List<Applications> apps;
        public string message = string.Empty;
        public Utilities u = new Utilities();
        public IList<GridColumnSettings> columns;
        public int Id { get; set; }

        public ApplicationListModel(HCApplicationsWeb.Models.AppDbContext db)
        {
            this.db = db;
            if (apps == null)
            {
                apps = GetList();
            }
            columns = u.makeApplicationListColumnHeadings();
        }
        public void OnGet()
        {            
            if(apps == null || apps.Count < 1)
            {
                apps = GetList();
            }
            if(columns.Count < 1)
            {
                columns = u.makeApplicationListColumnHeadings();
            }
        }

====================

 

Here is the cshtml grid in applicationList.cshtml:

<div id="griddiv">
    @(Html.Kendo().Grid<Applications>(Model.apps)    
    .Name("grid")
    .Pageable()
    .Sortable()
    .Editable(x => x.Mode(GridEditMode.PopUp).TemplateName("ApplicationsEditor").Window( w => w.Width(700)))
    .Scrollable()   
    .Filterable()
    .ToolBar(toolbar=> {
       @* toolbar.Create().IconClass("k-icon k-i-create");
        toolbar.Save().IconClass("k-icon k-i-create");*@
        toolbar.Excel().IconClass("k-icon k-i-download");

    })
    .Excel(excel => excel
    .FileName("HCApplications.xlsx")
    .Filterable(true)
    .AllPages(true)
    .ProxyURL("ApplicationList?handler=Save")
    )
    .Columns(columns => columns.LoadSettings(Model.columns))
    .Resizable(r => r.Columns(true))
    .DataSource(dataSource => dataSource
        .Ajax()
        .Events(events => events.Error("error_handler"))
        .ServerOperation(false)
        .PageSize(100)
        .Read(read => read.Url(Url.Action()+"?handler=Read").Data("forgeryToken"))
        .Update(u => u.Url(Url.Action() +"?handler=UpdatePopUp").Data("forgeryToken"))
        .Destroy(d => d.Url(Url.Action()+"?handler=Destroy").Data("forgeryToken"))
        .Model(model =>{
            model.Id(p => p.Id);
        }
        )

     )
     .Pageable()
)
</div>

 

                             
Mihaela
Telerik team
 answered on 04 Nov 2022
1 answer
332 views

Hi, I have a grid on my razor page but the browser is giving me a 404 error saying that the specified method (/Tournaments/Organizer/Details?handler=ReadTournamentTeams) could not be found.

My "DataSource" portion of grid (.cshtml)

.DataSource(ds => ds.Ajax()
	   .Read(r => r.Url("/Tournaments/Organizer/Details?handler=ReadTournamentTeams"))
	   .Model(m =>
	   {
		   m.Id(id => id.TeamID);
	   })
	.PageSize(10)
)

 

My method in .cshtml.cs:

public JsonResult OnPostReadTournamentTeams([DataSourceRequest] DataSourceRequest request)
{
	var tournamentTeams = db.Tournament_X_Teams.Where(x => x.Active == true).ToList();
	return new JsonResult(tournamentTeams.ToDataSourceResult(request));
}

 

What can the issue be?

Kendo Version: 2022.2.621

Visual Studio: VS 2022, v17.3.6

Stoyan
Telerik team
 answered on 02 Nov 2022
1 answer
810 views

Scenario

I'll try to simplify my question with description and code.

I would like to refresh line chart with javascript after drop down list item was selected,

which the selected event has been triggered.

The line chart was in a partial view,

which its initial shown data was passed in with ViewBag as local data and binded with line chart .

What I've tried so far

I was able to trigger javascript with custom select event,

and retrieve the drop down list selected item,

then I'll passed the select item as a query condition back to controller,

after getting new list of data from database,

I need to pass these data back to partial view where the line chart is to refresh it.

Question1

My line chart data was first binded with ViewBag local data binding.

Should I just return to partial view and pass new data in with ViewBag,

and let it automatically refresh the chart since return back to the partial view forcelly renders it again?

Question2 (Extension of question1)

I would have 4 line charts in the partial view,

each chart has a dropdown list to refresh the chart,

If a dropdown list item was selected,

would the other chart shows nothing? Since I've binded data with ViewBag in the beggining,

If so, how can I prevent the other 3 chart to refresh(loosing data)?

Code

Partial View with line chart and drop down list (the three other linechart was not listed )

@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
   //line chart datas
    var instDatas = (MyDataViewModel)ViewBag.instsData;
}

<div>
    @(Html.Kendo().TabStrip()
              .Name("chart-tabstrip")
              .Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In)))
              .Items(tabstrip =>
              {
                  tabstrip.Add().Text("My Monitoring tab 1")
                      .Selected(true)
                      .Content(@<text>
                          <div>
                               @(Html.Kendo().DropDownList()
                              .Name("DTData-DropDown")
                              .DataTextField("InstNo")
                              .DataValueField("InstID")
                              .DataSource(source =>
                              {
                                  source.Read(read =>
                                  {
                                      read.Action("MyAction", "MyController", new {MyQueryParams});
                                  });
                              })
                              .Value("default")
                              .HtmlAttributes(new { style = "width: 250px" })
                             )
                             @(Html.Kendo().Chart(instDatas.DTDataViewModel)
                                    .Name("dtchart")
                                    .Title("dtchart")
                                    .Legend(legend => legend
                                        .Position(ChartLegendPosition.Bottom)
                                    )
                                    .ChartArea(chartArea => chartArea
                                        .Background("transparent")
                                    )
                                    .SeriesDefaults(seriesDefaults =>
                                        seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
                                    )
                                    .Series(series => {
                                        series.Line(model => model.ReadData).Name("ReadData");
                                    })
                                    .ValueAxis(axis => axis
                                        .Numeric()
                                    )
                                    .CategoryAxis(axis => axis
                                        .Categories( m => m.ReadTime)
                                        .Type(ChartCategoryAxisType.Date)
                                        .BaseUnit(ChartAxisBaseUnit.Fit)
                                        .Labels(labels => labels.Rotation(-90))
                                        .Crosshair(c => c.Visible(true))
                                        .AutoBaseUnitSteps(config => config.Milliseconds(1))
                                    )
                                    .Tooltip(tooltip => tooltip
                                        .Visible(true)
                                        .Shared(true)
                                        .Format("{0:N0}")
                                    )
                                )
                          </div>
                      </text>);                
              })
              .HtmlAttributes(new{style = "width : 1400px; margin: 30px auto"}) 
)
</div>
 
<script>
   //Dropdown list select event function(Haven't add it)
    function instDataChartDropDownSelect(e) {
        var dataItem = this.dataItem(e.item);

        var instNo = dataItem.value;
    }
</script>

Mihaela
Telerik team
 answered on 02 Nov 2022
1 answer
115 views

I have a hierarchical grid with inline Batch editing.    The grid start off with all child rows expanded (from the databound function).   When the user edits one of the child cells the parent grid closes all all child nodes and then the databound event fires and we expand all the rows.  Virtual Scrolling is also enabled.

function dataBound() {
var grid = this;
$(".k-master-row").each(function (index) {
grid.expandRow(this);
});

}

The problem is that the user loses focus to what row they were on since the grid closes and reopens all the nodes.

Is there an approach where the grid doesn't have the close all child nodes and reopen?   I've tried starting with all child nodes being closed, allowing the user to expand one child node and edit....but after the cell is edited the main grid closes all the child nodes .... I'd prefer the child node to be left expanded so the user isn't confused as what they just edited.

 

Alexander
Telerik team
 answered on 01 Nov 2022
1 answer
150 views
Please can you advice if there is a way to enable 
  1. Components/
  2. MultiSelect/ to be clickable.

 

Thanks,

 

Mihaela
Telerik team
 answered on 31 Oct 2022
1 answer
518 views

Hello
I'm going to create a dialog and place grid and image view in it vertically. At this time, the height of grid and image view should match the height of the dialog, and the area should be divided by a ratio of 8:4.
Whenever I select a row in the grid, I want to take an image file from a specific path and show it in the image view, so is there an example or material that I can refer to?
When I searched for grid in dialog, I saw the kendo window data, but I want to implement it as a dialog instead of a window.
And when you put the grid in the dialog, is there a way to make the height of the grid 100%?
Also, when I searched Kendo image view, I saw the editor, and I wonder if there is a function that outputs only simple images, not editor.

Alexander
Telerik team
 answered on 31 Oct 2022
1 answer
575 views

Hi, I have a kendo dropdownlist which offers the option to remove items with a link. I used Template/ValueTemplate to achieve this.

@(Html.Kendo().DropDownList() .HtmlAttributes(new { @class = "form-control" }) .Name("dataSelect") .DataTextField("Text") .DataValueField("Value") .Template("<span class=\"k-state-default mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>") .ValueTemplate("<span class=\"mr-auto\">#:data.Text#</span><a href=\"\" onclick=\"deleteItem(#:data.Value#)\">Delete</a>") .DataSource(ds => ds .Read(read => read .Url("/Data?handler=ReadData").Data("getForgeryToken") )))

function deleteItem(itemId) {   
            var data = $.extend(true, {}, kendo.antiForgeryTokens(), {});
            $.ajax({
                type: "POST",
                url: "/Data?handler=DeleteItem",
                headers:
                {
                    "RequestVerificationToken": data.__RequestVerificationToken
                },
                data: {
                    itemId: itemId,
                },
                success: function (response) {
                    $('#dataSelect').data("kendoDropDownList").dataSource.read();
                },
                failure: function (response) {
                }
            });
        }
This basically works, but the problem is that an empty item (which has neither a text nor a value) remains in the dropdown list, even though I reload the datasource of the control. Is there a way to get rid of this item? Is something wrong with my configuration of the control?
Mihaela
Telerik team
 answered on 31 Oct 2022
1 answer
1.5K+ views
For selected rows, the grid use to add a "k-state-selected" to the row, with the updated selection functionality in the grid, it now only adds a "k-selected" .  Is this the correct behavior?  I have some custom css style that are tied to tr.k-state-selected.  Before I update styles, want to make sure I am understanding the behavior correctly.
Janson
Top achievements
Rank 2
Iron
Iron
 answered on 29 Oct 2022
1 answer
112 views

We are using Kendo-Scheduler in an Asp.net core app.

The problem we are having is that our events don't display on the calendar.

It looks like the issue is due to having the calendar inside of a "kendo-tabstrip". Our calendar tab is the second of 4. It looks like this is keeping the events from display.

When I try using the kendo-scheduler in a separate "test" app with no "kendo-tabstrip", it works as expected.

Has anyone else had a problem using kendo-scheduler inside of a kendo-tabstrip?

If so, is there a solution?

 

Mihaela
Telerik team
 answered on 28 Oct 2022
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?