Questions on Kendo UI for jQuery Forum

1 answer

444 views

How to bind Json Data to kendo Line Chart

Here is my code

try

{

if (list != null && list.Count > 0)

{

var serializer = new JavaScriptSerializer();

var hourList = list.GroupBy(x => x.LogDate.Hour).Select(x =>x.First()).Select(x => x.LogDate.Hour);

foreach (var hour in hourList)

{

result.AddRange(list.Where(y => y.LogDate.Hour == hour).Select(y =>

{

var jsonObj = serializer.Deserialize<Dictionary<string, object>>(y.DashboardChartData);

var jsonDoc = new Dictionary<string, object>();

jsonDoc.Add(y.DashboardChartName, jsonObj.ContainsKey("Usage") ? jsonObj["Usage"] : string.Empty);

jsonDoc.Add("LogDateTime", y.LogDate);

jsonDoc.Add("Type", y.DashboardChartType);

var json = JsonConvert.SerializeObject(jsonDoc);

return json;

}));

}

Html.Kendo().Chart()

.Name("datastoreUsageChart" + i)

.Title("DataStoreChart")

.Legend(legend => legend

.Visible(false)

)

.ChartArea(chartArea => chartArea

.Background("transparent")

.Height(300)

)

.HtmlAttributes(new { style = "height:100%; margin-bottom:0px; width:30%; display:inline-block; vertical-align: top; padding-right: 2%;", @class = "chart-small-screen" })

.DataSource(ds => ds.Read(read => read.Action("GetDatastoreChartTotalData", "DashBoard", new { vCenterId = vCenter.vCenterID })))

.Series(series =>

{

foreach (var datastore in tempList)

{

series.Line(datastore).ColorHandler("getColor").CategoryField("LogDateTime").Aggregate(ChartSeriesAggregate.Max);

}

)

.CategoryAxis(axis => axis

.Date()

.BaseUnit(ChartAxisBaseUnit.Hours)

.Min(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0))

.Max(new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 23, 59, 59))

.MajorGridLines(lines => lines.Visible(false))

)

.ValueAxis(axis => axis

.Numeric()

.Labels(labels => labels.Format("{0}"))

)

.Events(e=>e.DataBound("onDataBoundChart"))

.Tooltip(tooltip => tooltip

.Visible(true)

.Format("{0}-Session")

).ToHtmlString()

Json Data comes like this

but it doesn't work

Charts

answered on 05 Feb 2021

4 answers

2.1K+ views

Grid Filtered Column with multi option does not update values after datasource.data()

example : https://dojo.telerik.com/ESANeZIt

after you open filter column menu on field1 column the list of checkboxes never changes if you fetch new data.

after investigating, i found that itemchange event datasource['_change']({ action: 'itemchange', items: [] }) refreshes grid filters, but this action breaks listviews bound to datasource.

really is difficult to have custom code for every grid in my application and every datasource.data().

can i expect correct behavior ?

Grid

answered on 04 Feb 2021

1 answer

173 views

Grid Virtual Scrolling Page Info Bug

Check the pagination at footer it displays this range 1 - 25 of 141 items.
Now, start scrolling the screen to down and when you reach at this range 51 - 75 of 141 items.
Slightly scroll to up, This 1 - 25 of 141 items. range will be displayed.
It should display this range 26 - 50 of 141 items

When Virtualization is true It is not display correct labels in footer while scrolling down to up

pageable: {
numeric: false,
previousNext: false,
info:true
}

Grid

answered on 04 Feb 2021

1 answer

121 views

Support for Excel chart import when importing a file into a kendo instance

Currently one can copy an excel chart and paste it into a kendo spreadsheet (as an image). Is there a planned feature that aims to automatically import the charts as well when importing a file?

Spreadsheet

answered on 04 Feb 2021

9 answers

1.7K+ views

Virtual Scrolling Issues

I have been having trouble getting virtual scrolling to work correctly with the grid. I am not getting the correct page or skip values when scrolling. This is most noticeable when I scroll to the bottom of the grid. For example, the total number of rows at a particular time was 11973619 but the skip value I got back when scrolling to the bottom was 1342200. So it was not displaying anywhere close to the correct value.

Oddly enough, I still have the last available version of Safari for windows installed and it is the only browser that I have tried where the virtual scrolling works as expected. Chrome, Firefox, and IE all have the same issue described above.

If I turn off virtual scrolling and enable paging it works perfectly in all of the browsers that I have tried. We would really prefer to use virtual scrolling instead of paging though.

I thought maybe it had something to do with some of the rows wrapping and throwing off the calculation using the row height. However, fixing the row height to prevent text wrapping does not appear to make any difference.

Is there something else that I should check that could be throwing off the page calculation?

Grid

answered on 04 Feb 2021

5 answers

758 views

How to change placeholder of kendo multiselect widget by css rules?

.k-multiselect-wrap > .k-input {

color: #f02c0c; /* specify the default input color */ content: "HOME";

}

This rule doesn't work. Change the color, but not the content.

MultiSelect

answered on 03 Feb 2021

2 answers

499 views

inline edit for numeric field -> select text on focus

any possible way we can have it?

Grid

answered on 03 Feb 2021

5 answers

811 views

Kendo Spreadsheet adding data second sheet

Right now I have and Active Sheet and inactive sheet. Onclick I load data for the the Active sheet. I understand how to create another sheet tab name. Is there any documentation on Loading data to the second sheet or syntax.

Active Sheet >>>> var spreadsheet = $("#spreadsheet").data("kendoSpreadsheet");
var sheet = spreadsheet.activeSheet();

sheet.range("D6:I6").values(column);

InActive Sheet >>>> var spreadsheet 2= $("#spreadsheet").data("kendoSpreadsheet");
var sheet2 = spreadsheet.InactiveSheet();
sheet2.range("D6:I6").values(newcolumn);

Spreadsheet

answered on 03 Feb 2021

4 answers

124 views

How can I allow selecting a value in the dropdownlist with the mouse only.

Hello, I have a Kendo grid and in one of the columns includes a dropdownlist as in this example:

https://demos.telerik.com/kendo-ui/grid/editing-custom?_ga=2.173256099.1285932464.1611750479-1230347328.1609856499 -> Column: "Category"

It turns out that because it is inside a grid I want to disable the selection of any button on the keyboard. I want the user to select only by the mouse.
How do I do that? I tried to use navigatable: false and .off ("keydown"), but it didn't work. Here is my code:

$('<input required name="' + options.field + '"/>')
.appendTo(container)
.kendoDropDownList({
autoBind: false,
dataTextField: "text",
dataValueField: "text",
dataSource: data,
optionLabel: {
text: "Select an Admission Status...",
value: ""
},
select: onSelectAdmissionStatus
});

DropDownList

answered on 02 Feb 2021

8 answers

211 views

Touch time slot select not working under Windows 10 with Chrome

Hi,

When i try to select a time slot with Edge this works fine, with Google Chrome this does not work. When i double tap on a item slot in Google Chrome the edit form of the event opens. Any idea why the visual selection is not working under Google Chrome.

Kind regards,

Marco

Scheduler

answered on 02 Feb 2021