Hello. I have a problem with grid edit in line.
I have defined normal grid, which uses ViewModel.
ViewModel has 3 fields (int A, int B, bool checkbox)
A field isn't editable by default but whenever I click "edit" I can change B field or check/uncheck checkbox.
I'd like to make field A make editable whenever checkbox is checked by user during edition. So after the checkbox is check A fields is editable.
Greetings
I have two charts, and I'd like to make it so the second chart updates when the series in the first chart is clicked. There's a master page with my RadAjaxManager, so I'm using a RadAjaxManagerProxy with these two charts. I'm having trouble converting the code samples I see in the documentation to work with my RadAjaxManagerProxy.
Here are my two charts:
<telerik:RadHtmlChart ID="Chart_Referrals_By_Month" runat="server" DataSourceID="ReferralsByMonth" Skin="Windows7" RenderMode="Lightweight" Height="250"> <ClientEvents OnSeriesClick="OnSeriesClick"/> <PlotArea> <Series> <telerik:LineSeries Name="Column1" DataFieldY="AVERAGE_REFERRALS"> <TooltipsAppearance Visible="false"></TooltipsAppearance> <Appearance> <FillStyle BackgroundColor="#add8e6"></FillStyle> </Appearance> </telerik:LineSeries> </Series> <XAxis DataLabelsField="MONTH_NAME" Color="black" MajorTickSize="0" MinorTickSize="2" MinorTickType="Outside"> <LabelsAppearance RotationAngle="-45" /> <MajorGridLines Visible="false" /> <MinorGridLines Visible="true" /> </XAxis> <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="2" Step="1"> <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" /> <TitleAppearance Position="Center" RotationAngle="0" Text="Percent" Visible="false" /> <MajorGridLines Visible="false" /> <MinorGridLines Visible="false" /> </YAxis> </PlotArea> <ChartTitle Text="Referrals per Day by Month - Average"></ChartTitle> <Legend> <Appearance BackgroundColor="Transparent" Position="Bottom" Visible="false"></Appearance> </Legend> </telerik:RadHtmlChart>
<telerik:RadHtmlChart ID="Chart_Referrals_By_Day" runat="server" DataSourceID="ReferralsByDay" Skin="Windows7" RenderMode="Lightweight" Height="250"> <PlotArea> <Series> <telerik:LineSeries Name="Column1" DataFieldY="PERCENT_REFERRALS"> <TooltipsAppearance Visible="false"></TooltipsAppearance> <Appearance> <FillStyle BackgroundColor="#add8e6"></FillStyle> </Appearance> </telerik:LineSeries> </Series> <XAxis DataLabelsField="DAY_NAME_LONG" Color="black" MajorTickSize="0" MinorTickSize="2" MinorTickType="Outside"> <LabelsAppearance RotationAngle="-45" /> <MajorGridLines Visible="false" /> <MinorGridLines Visible="true" /> </XAxis> <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="2"> <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" /> <TitleAppearance Position="Center" RotationAngle="0" Text="Percent" Visible="false" /> <MajorGridLines Visible="false" /> <MinorGridLines Visible="false" /> </YAxis> </PlotArea> <ChartTitle Text="Referrals by Day - %"></ChartTitle> <Legend> <Appearance BackgroundColor="Transparent" Position="Bottom" Visible="false"></Appearance> </Legend></telerik:RadHtmlChart>Here's my JavaScript:
function OnSeriesClick(args) { var kendoWidget = args.sender; if (args.value > 0) { $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest(args.category); }} // end OnSeriesClick
What I don't know is how to handle this on the server side. From the Implementing Drill-Down Functionality example, I have:
protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e) { string seriesName = Chart_Referrals_By_Month.PlotArea.Series[0].Name;} // end RadAjaxManager1_AjaxRequest
However, this line never executes. I'm missing a step here, and I was hoping you could point out what I need.
Thank you!
We are experiencing an issue with the virtual scrolling of a combobox when used as a custom editor template in a grid with in-cell editing. I have a solution to demonstrate the issue, but it is too large to upload.
Basically, when clicking into the combobox, the control is bound and looking at the web requests, the value is passed correctly to the ValueMapper and the index is retrieved correctly from the server. However, if you then TAB or press ENTER in the combobox, it attempts to retrieve the value based on the text in the combobox, clearing the reference.

I use the Silverlight control before. it can use Keyboard navigation to select certain row. but asp.net core control can not do that. how can i use keyboard to change the selected row.
when the cell is editable. can i use down arrow to close the edit state and change to the next row like spreadsheet.
Hi Telerik Team,
I am facing an issue with the position of Kendo controls on my page. I am using Chrome browser. The issue persists for Autocomplete, Dropdown lists, date pickers and Grid column menu. As we scroll down the page and then if we try to open the Grid column menu, it opens up much below than it should be and the gap increases as we increase the vertical scrolling of the page. Is it a known issue?
Attached is the screenshot for the same.
Please help me out with this.We are using Kendo controls in every page for our web application.
Thanks
Hello,
In my grid, i have a nested object and i would like to add the filterable feature on it (so it doesn't display [] object). I followed this tutorial:
- https://demos.telerik.com/aspnet-core/grid/filter-multi-checkboxes
The call to the web API is done, but I keep having a javascript error after the call
Uncaught TypeError: e.slice is not a function
How can i fix this ? Thank you very much
Here is my code so far:
@(Html.Kendo().Grid<EnginViewModel>() .Name("enginGrid") .Columns(col => { col.Bound(c => c.Famille) //EnginViewModel.Famille .Title("Famille") .Filterable(ftb => ftb.Multi(true).Search(true) .DataSource(d => d.Read(r => r.Action("Familles", "EditorTemplate").Data("{ field: 'Nom'}")))) .EditorTemplateName("Famille") .ClientTemplate("#= data ? data.FamilleDesignation : \"\" #"); }) .ToolBar(toolbar => { toolbar.Create().IconClass("fa fa-plus").Text(" Créer un engin"); }) .Sortable(true) .Filterable(f => { f.Mode(GridFilterMode.Menu); }) .DataSource(ds => ds.Ajax() .ServerOperation(true) .Model(m => { m.Id(f => f.Id); }) .Events(evt => evt.Error("onGridDatasourceError")) .Read(a => a.Action("Read", "Engins").Type(HttpVerbs.Get)) .Create(a => a.Action("Create", "Engins").Type(HttpVerbs.Post)) .Update(a => a.Action("Update", "Engins").Type(HttpVerbs.Put)) .Destroy(a => a.Action("Delete", "Engins").Type(HttpVerbs.Delete))))Hello,
I'm able to set the color of the points on the chart (red and blue). I'm unable to get rid of the black-center of the points by setting the background color.
How do I set both color of points and background color (center of point) to same color?
Thanks.
js code:
----------
<script>
function getPointColor(point)
{
if (point.dataItem.Name === "Left Eye Sensor")
{
return "#af3d3c";
}
else
{
return "#3f48cc";
}
}
</script>
@(Html.Kendo().Chart<KendoScatterChart.Models.ChartScatterPlotPoint>(Model)
.Name("pressureDataChart")
.Legend(legend => legend
.Position(ChartLegendPosition.Bottom)
)
.ChartArea(chartArea => chartArea
.Background("transparent")
)
.SeriesDefaults(seriesDefaults =>
seriesDefaults.Scatter().Labels(labels => labels.Visible(true)).Markers(markers => markers.Size(8))
)
.DataSource(dataSource => dataSource
.Group(group => group.Add(model => model.Name))
)
.Series(series =>
{
series.Scatter(model => model.X, model => model.Y).ColorHandler("getPointColor").Markers(markers => markers.Background("getPointColor"));
})
.XAxis(x => x
.Date()
.Title(title => title.Text("Date"))
)
.YAxis(y => y
.Numeric()
.Title(title => title.Text("Pressure [mmHg]"))
)
.Zoomable()
.Pannable()
)
C# code:
------------
public class ChartScatterPlotPoint
{
public DateTime X { get; set; }
public double Y { get; set; }
public string Name { get; set; }
public string Color { get; set; }
public ChartScatterPlotPoint(DateTime dateTime, double v, string name, string color)
{
this.X = dateTime;
this.Y = v;
this.Name = name;
this.Color = color;
}
}
public class TempModel : ModelBase
{
// For KendoUI plotting.
public List<ChartScatterPlotPoint> DataPointList { get; set; }
public List<string> DateList { get; set; }
public string Name { get; set; }
public TempModel()
{
// for demo - color set by js-method.
DataPointList = new List<ChartScatterPlotPoint>(){
new ChartScatterPlotPoint(DateTime.Parse("12/18/2018"), 1, "Left Eye Sensor", "blue"),
new ChartScatterPlotPoint(DateTime.Parse("12/19/2018"), 2, "Left Eye Sensor", "blue"),
new ChartScatterPlotPoint(DateTime.Parse("12/20/2018"), 3, "Left Eye Sensor", "blue"),
new ChartScatterPlotPoint(DateTime.Parse("12/18/2018"), 1.5, "Right Eye Sensor", "green"),
new ChartScatterPlotPoint(DateTime.Parse("12/19/2018"), 2.5, "Right Eye Sensor", "green"),
new ChartScatterPlotPoint(DateTime.Parse("12/20/2018"), 3.5, "Right Eye Sensor", "green")
};
}
}
I just started using the controls and started with the test app to learn. I can't find out how to set the row height. The row height from the test app is way to large. How do I adjust the row height?
<div class="row"> <div class="col-xs-5 col-md-12"> @(Html.Kendo().Grid<TelerikAspNetCoreApp1.Models.OrderViewModel>() .Name("grid") .Columns(columns => { columns.Bound(p => p.OrderID).Filterable(false); columns.Bound(p => p.Freight); columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}"); columns.Bound(p => p.ShipName); columns.Bound(p => p.ShipCity); }) .Pageable() .Sortable() .Scrollable() .Filterable() .HtmlAttributes(new { style = "height:450px;" }) .DataSource(dataSource => dataSource .Ajax() .PageSize(20) .Read(read => read.Action("Orders_Read", "Grid")) ) ) </div></div>