or
1 answer
776 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
98 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.
1 answer
140 views
Mihaela
Telerik team
answered
on
31 Oct 2022
1 answer
477 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
563 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) {
}
});
}
Mihaela
Telerik team
answered
on
31 Oct 2022
1 answer
1.4K+ 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.
1 answer
107 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?
1 answer
303 views
My grid is not binding whenever a read is made. I programmed it so that when the user presses a button, it gathers search parameters and calls the read() method. It fetches the data and I get results successfully, but it doesn't update in the UI, no loading graphic or anything. I can see the grid but it has no data. I simplified the fields and columns to only one to see if there was an error in the naming but no luck. No console errors. I used tag helper and HTML helper, none work. Below is my code, simplified for this post.
Razor Page
<head>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link href="~/lib/kendo-ui/styles/kendo.bootstrap-main.min.css" rel="stylesheet" type="text/css" />
<script src="~/lib/kendo-ui/js/jquery.min.js"></script>
<script src="~/lib/kendo-ui/js/jszip.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
</head>
<body>
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@Html.AntiForgeryToken()
<button type="button" id="btnSearch" onclick="SearchPosInfo()">Search</button>
<kendo-grid name="grdResults" auto-bind="false">
<datasource type="DataSourceTagHelperType.Ajax" page-size="25">
<schema>
<model id="piid">
<fields>
<field name="piid" type="number"></field>
</fields>
</model>
</schema>
<transport>
<read url="Index?handler=Read" data="SearchParams" />
</transport>
</datasource>
<columns>
<column field="piid"></column>
</columns>
<sortable enabled="true" />
<pageable button-count="5" page-sizes="new int[] { 10, 25, 50, 100 }">
</pageable>
</kendo-grid>
.
.
.
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</body>JS
function SearchParams() {
var searchParams = {
pd: $("#txtNumber").val()
}
var ext = $.extend(true, {}, kendo.antiForgeryTokens(), searchParams);
return ext;
}
function SearchPosInfo() {
$("#grdResults").data("kendoGrid").dataSource.read();
}Response
{"data":[{"piid":37133},{"piid":37525},{"piid":48314},{"piid":56042}],"total":4,"aggregateResults":null,"errors":null}
Stoyan
Telerik team
answered
on
28 Oct 2022
1 answer
90 views
Cannot create grid with french title 'Détail'
var res = html
.Kendo()
.Grid<object>()
.Name("Test")
.Columns(x =>
{
var arr = new char[]{(char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
var strCreated = new string(arr); //"Détail" - get from localization from french
x.Template(string.Empty)
.HtmlAttributes(new {title = strCreated});
});
var ws = res.ToClientTemplate().ToString();
//Détail => D\u0026#xE9;tail
//<div id="Test" name="Test"></div><script>kendo.syncReady(function(){jQuery("\#Test").kendoGrid({"columns":[{"attributes":{"title":"D\u0026#xE9;tail"}}],"scrollable":false,"dataSource":{"type":(function(){if(kendo.data.transports['aspnetmvc-ajax']){return 'aspnetmvc-ajax';} else{throw new Error('The kendo.aspnetmvc.min.js script is not included.');}})(),"transport":{"read":{"url":""},"prefix":""},"schema":{"data":"Data","total":"Total","errors":"Errors","model":{}}}});});<\/script>
That's why cannot parse template on client side.
Code
res.ToComponent().VisibleColumns[0].ToJson()returns 'Détail' when Framework returns 'Détail'.
Some investigations give me that on Core your code is like
HtmlEncoder encoder = HtmlEncoder.Default;
var arr = new char[]{(char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
var strCreated = new string(arr); //Détail
var encoded2 = encoder.Encode(strCreated);
//endoded == "Détail"When old code is like
var arr = new char[] { (char)68, (char)233, (char)116, (char)97, (char)105, (char)108 };
var strCreated = new string(arr); //Détail
string s = HttpUtility.HtmlAttributeEncode(strCreated).Replace(" ", " ").Replace("'", "'");
s = HttpUtility.HtmlDecode(s);
//s == "Détail"
Alexander
Telerik team
answered
on
28 Oct 2022
1 answer
240 views
Hi,
I have been working with the Scheduler and I can't make it to work.
I have an object that extends ISchedulerEvent with the start and end dates, apart from all the needed parameters:
public class BsScheduleMeeting : ISchedulerEvent
{
private DateTime start;
public DateTime Start
{
get
{
return start;
}
set
{
start = value.ToUniversalTime();
}
}
private DateTime end;
public DateTime End
{
get
{
return end;
}
set
{
end = value.ToUniversalTime();
}
}
}With this we created a scheduler on a Razor view with a custom datasource, defining the model and the transport functionality (is only a read):
@(Html.Kendo().Scheduler<BsScheduleMeeting>()
.Name("scheduler")
.Date(DateTime.Now.Date)
.StartTime(DateTime.Now.Date.AddHours(7))
.EndTime(DateTime.Now.Date.AddHours(22))
.Editable(false)
.Height(700)
.Views(views =>
{
views.DayView(day => day.Selected(true));
})
.Timezone("Etc/UTC")
.DataSource(datasource => datasource
.Custom()
.Schema(schema => schema
.Model(m => {
m.Id(f => f.MeetingID);
m.Field("title", typeof(string)).DefaultValue("No title").From("title");
m.Field("start", typeof(DateTime)).From("start");
m.Field("end", typeof(DateTime)).From("end");
m.Field("description", typeof(string)).From("description");
m.Field("recurrenceID", typeof(int)).From("recurrenceID");
m.Field("recurrenceRule", typeof(string)).From("recurrenceRule");
m.Field("recurrenceException", typeof(string)).From("recurrenceException");
m.Field("isAllDay", typeof(bool)).From("isAllDay");
m.Field("startTimezone", typeof(string)).From("startTimezone");
m.Field("endTimezone", typeof(string)).From("endTimezone");
})
)
.ServerPaging(false)
.ServerFiltering(true)
.Transport(transport => transport
.Read(read =>
{
read.Action("GetJson", "BSSchedule");
})
)
)
)The controller call that returns the data is the next one:
public virtual JsonResult GetJson([DataSourceRequest] DataSourceRequest request)
{
return Json(GetTasks().ToDataSourceResult(request));
}
private IList<BsScheduleMeeting> GetTasks()
{
IList<BsScheduleMeeting> schedulerTasks = new List<BsScheduleMeeting>()
{
new BsScheduleMeeting {
Description = "",
StartTimezone = "UTC",
MeetingID = 1,
Title = "AP Physics",
Start = new DateTime(2022,10,24,8,00,00),
End= new DateTime(2022,10,24,9,00,00),
EndTimezone = "UTC",
RecurrenceRule = null,
RecurrenceID = 1,
RecurrenceException = null,
IsAllDay = false
},
new BsScheduleMeeting {
Description = "",
StartTimezone = "UTC",
MeetingID = 2,
Title = "History",
Start = new DateTime(2022,10,24,9,00,00),
End= new DateTime(2022,10,24,10,00,00),
EndTimezone = "UTC",
RecurrenceRule = null,
RecurrenceID = 2,
RecurrenceException = null,
IsAllDay = false
},
new BsScheduleMeeting {
Description = "",
StartTimezone = "UTC",
MeetingID = 3,
Title = "Art",
Start = new DateTime(2021,10,24,9,00,00),
End= new DateTime(2022,10,24,10,00,00),
EndTimezone = "UTC",
RecurrenceRule = null,
RecurrenceID = 3,
RecurrenceException = null,
IsAllDay = false
},
};
return schedulerTasks.ToList();
}With this, I tryed everything but couldn't make it work. The most common error that I get is this one on Javascript:
and the data is being returned correctly, as shown in the next image:
What can I do so the Scheduler gets the info that I send?
Thank you in advance,
Diego.
Mihaela
Telerik team
answered
on
27 Oct 2022
