Scenario and Issue:

I had a Tabstrip with three tabs,

in each tab there are four DropDownList and four line charts.

However, If I bind all the data once (Include DropDownLists and Line Charts in three tabs),

the page would rendered slowly and caused some of the data loss binding.

Question1 :

I'm wondering if it's possible to render Line Chart before data binding?

then I'll data bind it after DropDownList Select event was triggered.

Or is there any other alternative ways?

What I've Tried

The TabStrip is in a partialview,

once a button was clicked the partialview will be load with javascript function by.
 $("#myHtmlElementId").load('@Url.Action("MyAction","MyController")', params)

The complicated part is the line chart in initial tab strip was data binded with local binding the data passed by ViewBag.

And if I try to render the other line chart while the second or third TabStrip Item was selected.

It's logic would be conflict, if the user clicked the first TabStrip again.

Since the line chart were data binded with local data by ViewBag,

and the others in 2nd or 3rd TabStrip were renderd while the TabStrip item was selected,

And the selected event would call a javascript function to render another partial view to fill content into the TabStrip.

Is there something like TabStrip initial event? 

So that I could also fill the first Tabstrip item contents same as the 2nd or 3rd TabStrip.

Hi,

I want to use the Upload function to read data in excel spreadsheet. The requirement is to show a pop up to prompt the user to delete any existing data before uploading any new data. 

How to show this pop up. Could you please help?

Regards,

Monika

I have a checkbox that is checked on a form but it should send its value on the post but should not be editable

The editor template looks like this

@(Html.Kendo().CheckBoxFor(m => m)
         .Label(label)
         .Enable(enable)
         .HtmlAttributes(ViewData)
         .Deferred(deferred)
   )

The checkbox does not have a readonly functionality like the textbox

Can this be achieved? I tried adding a hidden field like @Html.HiddenFor(m => m) but that generates another input with the same id

I am using a Grid , 

Suppose there are two columns and two Edit buttons ,while clicking the first edit button only edit the first column and second edit button for second column. Save button needs to called to different endpoints with the data.

Good morning everyone

Apologies, i hope i'm posting in the correct subforum.

A bit of background: we are using a web application creating with telerik controls. the SQL server that the application was connecting to died and we had to rebuild it using a new version of SQL. This changed causes the error - "Failed to retrieve the automatically incremented column value from the server. Possible reason: A trigger does not perform 'select ID from inserted'" when we try to create new items through the web app

i came accross this old post https://www.telerik.com/forums/telerik-bug-in-sql-server-2014-sp1 which shows that a number of hotfixes were made available at the time

We are using this version of telerik - Telerik.OpenAccess.Runtime, Version=2013.1.219.3, now with this version of SQL Microsoft SQL Server 2016 (SP3-GDR) (KB5014355) - 13.0.6419.1 (X64) 

I tried the 2013 hotfix version from the post which is a slightly different  from what we have.  ( i tired the newer ones to but unsurprisignly the broke the site.)The hot fix allowed the web app to load, but it couldnt load the  content of the web form.

I was wondering if you could please provide an hot fix for that version, if at all possible.

Thank you for your time

Scenario:

I would like to retrieve data with ajax,

once getting data from my database,

then pass Json data back to frontend and refresh line chart

Question:

While I got the data and pass it back to frontend,

it showed type error: Cannot read property 'getTime' of undefined.

What could cause this error?

To be mentioned, the json Data is in the same type with line chart, which is IEnumerable<EqEvDTDataViewModel>.

Code:

My Ajax Function

function instDataChartDropDownSelect(e) {

            var dataItem = this.dataItem(e.item);
            var instID = dataItem.InstID;

            $.ajax({
                type: "POST",
                url: '@Url.Action("MyAction","MyController")',
                data: { 'instID': instID },
                dataType: 'json',
                success: function (response) {
                    $("#dtchart").data("kendoChart").dataSource.data(response);
                },
                error: function (response) {
                }
            });
        }

@(Html.Kendo().Chart(instDatas.EqEvDTDataViewModel)
                                        .Name("dtchart")
                                        .Title("DT Time History Chart")
                                        .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}")
                                        )
                                 )

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}")
                                    )
                                )

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

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

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>

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

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>