or
1 answer
1.9K+ views
I have searched for this everywhere and its not easy to get the right help here .
For most controls we have a demo/example. But there is not proper example for this.
Say I am developing a web app and I want a Layout page that can be used across all pages.
Telerik Drawer => I tried to used this. But I believe drawer is not intended for this purpose.
Telerik Menu => no proper example where it can be used as a side bar. I can see one under the kendo ui javascript menu, but not one with asp doe net core.
A working example of a side menu containing a list of items would be really helpful.
1 answer
1.1K+ views
Hello, I am struggling to figure out how to get a count of how many rows are in each of my kendo grid groups in the DataBound method. I can't find anything on this. My grid is pretty simple, and it is grouped by a single column (tran_code).
The grouping works fine but I cannot figure out how to hide the group header row altogether if there is only 1 row in that group, otherwise show it. All I have so far is my grouping, which is working. I am using @html helper for the grid:
@(Html.Kendo().Grid(CarryFwdDetail)
.Name("grid")
.Group(groups => groups.Add(p => p.TranCode))
In a javascript function how can I access the group rows and count them (for each group), then hide that group header?
Any help is appreciated!
Thanks, Justin
Update:
I an effort to provide as much code as possible, I have been able to get to a point where I can get the count groups there are. But I still don't know how to get the count of rows within each group and hide that groups header if it is = 1:
.Events(e=>e.DataBound(@<text>function(e){
var view = this.dataSource.view();
if(this.dataSource.group())
{
var count = 0;
eachGroupItems(view, function(items, index)
{
count++
alert(count);
});
}
}</text>))function eachGroupItems(data, func) {
for (var idx = 0, length = data.length; idx < length; idx++) {
if (data[idx].hasSubgroups) {
if (eachGroupItems(data[idx].items, func)) {
return true;
}
} else if (func(data[idx].items, data[idx])) {
return true;
}
}
}Update 2
I have now figured out how to get the count of rows within each grouping:
function eachGroupItems(data, func) {
for (var i = 0, length = data.length; i < length; i++)
{
alert("Data length: " + data[i].items.length); //= number of rows in each group
if(data[i].items.length == 1)
{
}
}
}Can anybody help me with how to hide the group header row?
Update 3
I figured it out. Here is the new javascript function to replace eachGroupItems()
function eachGroupItems(data, func) {
for (var i = 0, length = data.length; i < length; i++)
{
//alert("Data length: " + data[i].items.length); //= number of rows in each group
if(data[i].items.length == 1)
{
$('#grid tbody .k-grouping-row').hide();
}
}
}
Hopefully this helps somebody in the future...
Thanks
Aleksandar
Telerik team
answered
on
06 Dec 2022
2 answers
116 views
I have a line chart that I am grouping the data by a "type" field. The data set is by type, year, and amount. Most of the time, the data is in only one type. The problem is if there are multiple types available across multiple years, the chart wants to put the data on the 1st year even if it should not belong there.
In the example attached, there are 3 types. The data is for 2020 - 2023 (fiscal years). The 2nd and 3rd types are only for 2023 while the 1st type has data for 2020-2022. The chart does not show 2023 and added the 2nd and 3rd types to the 2020 category.
Is what I am doing possible with a line chart? I did try to make a scatter line work however I have not been able to make display with the data.
HTML:
@(Html.Kendo().Chart<Model>()
.Name("chart")
.Legend(legend => legend.Visible(true).Position(ChartLegendPosition.Bottom))
.SeriesColors("#FF9900", "#005757", "#95B9C7")
.Series(series =>
{
series.Line(v => v.Amount).Labels(l => l.Visible(true).Format("{0:n0}"))
.Tooltip(tooltip => tooltip.Visible(true).Template("#= dataItem.Label #: #= kendo.format('{0:n0}', dataItem.Amount) #"));
})
.CategoryAxis(axis => axis.Categories(m => m.FiscalYearCode).Labels(l => l.Visible(true)))
.ValueAxis(va => va.Labels(l => l.Format("{0:c0}")))
.DataSource(ds =>
{
ds.Read(read => read.Action("Get", "Home"))
.Group(g => g.Add(a => a.AmountType));
})
)Model:
public class Model
{
public string FiscalYearCode { get; set; }
public int Amount { get; set; }
public string Label { get; set; }
public string ObjectDescription { get; set; }
public string AmountType { get; set; }
}
1 answer
312 views
Hi, I would like to have a button that clear/remove the selected image on the image editor. I've looked through your client API and I couldn't find how to do that?
Thank you for your help!
Patrick
Aleksandar
Telerik team
answered
on
02 Dec 2022
1 answer
114 views
Hi all,
is it possible so search a treelist and show not only the parents but also the children (subitems) of the items?
thanks
Sebastian
Alexander
Telerik team
answered
on
02 Dec 2022
1 answer
303 views
Model:
In Grid column bound filter added a client Template as :
This will result in a view like this
When we check the box only true values are shown
When we uncheck the box only false values are shown
When we click filter clear button shows both true and false
Our aim is to
1.We don’t need to show the Filter clear button only on this column
2.Checking the box only show true values
3. Uncheck the box show both true and false values.
How can we achieve the above behavior like customize the grid filter conditions.
Public Int Id{get;set}
Public string Desc{get;set}
Public bool IsValid;set}columns.Bound(c => c.isValid).Filterable(f => f
.Cell(c => c.Template("MyBooleanCellTemplate"))
).ClientTemplateId("isValid").Title("Valid");
<script id="isValid" type="text/x-kendo-template">
#if(isValid){#
<i style='color:green;font-size:20px;' class='k-icon k-i-check'></i>
#}else{#
<i style='color:red;font-size:20px;' class='k-icon k-i-x'></i>
#}#
</script>
<script>
function MyBooleanCellTemplate(args) {
var radioInput = $("<input type='checkbox'/>");
var wrapper = args.element.parent();
var inputName = kendo.guid.
args.element.remove();
var labelTrue = $("<label/>")
.text("")
.append(radioInput);
radioInput.attr(kendo.attr("bind"), "checked:value") // Add the "bind" attribute, specify the unique and, and set a value.
.attr("name", inputName)
.val("true");
wrapper.append([labelTrue]);
};
</script>When we check the box only true values are shown
When we uncheck the box only false values are shown
When we click filter clear button shows both true and false
Our aim is to
1.We don’t need to show the Filter clear button only on this column
2.Checking the box only show true values
3. Uncheck the box show both true and false values.
How can we achieve the above behavior like customize the grid filter conditions.
1 answer
122 views
Hello,
I have following MultiSelectFor:
@(Html.Kendo().MultiSelectFor(x => x.TitleAttachmentForm.AuthorsList)
.AutoBind(true)
.DataTextField("SearchValue")
.DownArrow()
.DataValueField("Id")
.DataSource(ds => ds
.Custom()
.Transport(transport => transport
.Read(r => r
.Url("?handler=AuthorPublisherRead").Data("authorDataFunction")
))
.ServerFiltering(true)
)
.Filter(FilterType.StartsWith)
.Height(400)
.ItemTemplate("<span class=\"k-state-default \"><strong>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</strong><p>#: data.SubDisplayValue #</p></span>")
.TagTemplate("<span>#= (data.Title == null) ? '' : data.Title # #: data.Firstname # #: data.Lastname #</span>")
)
The MultiSelectFor is binded to following remote api:
public async Task<JsonResult> OnGetAuthorPublisherRead([CanBeNull] string filterValue, [CanBeNull] string bindedvalue)
{
//Deleted
}This is used to filter for items on the remote site and get the binded value.
In my DropDownListFor I can use authorDataFunction to receive the value and the text of my DropDown:
function authorDataFunction() {
return {
__RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
filterValue: $("#mydropdown").getKendoDropDownList().filterInput.val(),
bindedvalue: $("#mydropdown").getKendoDropDownList().value()
};
}I played around with the api, however, I am not able to receive the input text and value(s):
function authorDataFunction() {
var multiselect = $("#TitleAttachmentForm_AuthorsList").data("kendoMultiSelect");
return {
__RequestVerificationToken: kendo.antiForgeryTokens().__RequestVerificationToken,
filterValue: multiselect.filterInput.val(),
bindedvalue:multiselect.value()
};
}Its telling me, that filterInput is undefined. also multiselect.text() does not work.
How can I access the binded value and the input in the .net core component?
Aleksandar
Telerik team
answered
on
30 Nov 2022
1 answer
145 views
How do you specify the default sort order of rows/columns in a PivotGrid?
My controller has this method
public IActionResult PivotGrid()
{
IEnumerable<ResponseReportPivot> objResponseList = _db.ResponseReportPivot;
var sortedResponseList = objResponseList.OrderBy(s => s.EventYear).ThenBy(s => s.Venue);
return View(sortedResponseList);
}When I run the pivot I get the display in Pivot Display.jpg attached.
If I change the OrderBy clauses, I get the display in Pivot display 2.jpg.
I know the user can change the sort but I want the column display to default to be Event Year ascending and the row display to default to Venue ascending.
I haven't seen anywhere how that can be accomplished.
Here's the pivot grid code
@*For local binding*@
@using Application.Models;
@using Kendo.Mvc.Extensions;
@using Kendo.Mvc.UI;
@model IEnumerable<ResponseReportPivot>
@{
ViewBag.Title = "Response Report Pivot Grid";
}
@Html.AntiForgeryToken()
<style>
.k-pivot-table .k-grid-content td {
text-align: left;
}
</style>
<div class="k-pivotgrid-wrapper">
@(Html.Kendo().PivotConfigurator()
.Name("configurator")
.HtmlAttributes(new { @class = "hidden-on-narrow" })
.Filterable(true)
.Sortable(true)
.Height(570)
)
@(Html.Kendo().PivotGrid<ResponseReportPivot>()
.Name("pivotgrid")
.Configurator("#configurator")
.ColumnWidth(120)
.Filterable(true)
.Height(570)
.Sortable(true)
.BindTo(Model)
.DataSource(dataSource => dataSource
.Ajax()
.Schema(schema => schema
.Cube(cube => cube
.Dimensions(dimensions =>
{
dimensions.Add(model => model.Venue).Caption("All Venues");
dimensions.Add(model => model.EventYear).Caption("All Years");
})
.Measures(measures =>
{
measures.Add("Count").Field(model => model.Venue).AggregateName("count");
})
))
.Columns(columns =>
{
columns.Add("EventYear").Expand(true);
})
.Rows(rows => rows.Add("Venue").Expand(true))
.Measures(measures => measures.Values("Count"))
.Events(e => e.Error("onError"))
)
)
</div>
<div class="responsive-message"></div>
<script>
function onError(e) {
alert("error: " + kendo.stringify(e.errors[0]));
}
</script>
Alexander
Telerik team
answered
on
29 Nov 2022
1 answer
225 views
I have a bool column
public bool isValid {set;get}
I have defined a custom template and filter.
columns.Bound(c => c.isValid).Filterable(f => f
.Cell(c => c.Template("MyBooleanCellTemplate"))
).ClientTemplateId("isValid").Title("Valid").Width(75);
<script>
function MyBooleanCellTemplate(args) {
var radioInput = $("<input type='radio'/>"); // Get the radio input element.
var wrapper = args.element.parent(); // Obtain the parent container of the radio buttons.
var inputName = kendo.guid(); // Specfify an unique element.
args.element.remove(); // Remove the element.
var labelTrue = $("<label/>")
.text("")
.append("<i style='color:green; font-size: 20px;' class='k-icon k-i-check'></i>")
.append(radioInput); // Create a label that will contain the icon and add it to the radio input.
radioInput.attr(kendo.attr("bind"), "checked:value") // Add the "bind" attribute, specify the unique and, and set a value.
.attr("name", inputName)
.val("true");
var labelFalse = labelTrue.clone() // Create a label for the second radioInput that will contain an icon.
.text("")
.append("<i style='color:red; font-size: 20px;' class='k-icon k-i-x'></i>");
radioInput.clone() // Clone the previously obtained radio button, set its value and append to the previously created label.
.val("false")
.appendTo(labelFalse);
wrapper.append([labelTrue, labelFalse]); // Append both of the created labels.
};
</script>
Also I have set default true on pageload.
I only want to see true or false value not both,
How remove the filter clear icon.
1 answer
107 views
I am using the telerik report designer to build my reports and html report viewer to display them.
When I use MySql.Data.MyqlClient with a standard connection string (server, uid etc) everything works fine.
When I use a ODBC dsn connection however, the connection works on the report builder but on the report viewer it says the following:
An error has occurred while processing Table 'table2':Unable to establish a connection to the database. Please verify that your connection string is valid. In case you use a named connection string from the application configuration file, make sure the name is correct and the connection string settings are present in the configuration file of your application.------------- InnerException -------------Keyword not supported: 'dsn'
I do have System.Data.Odbc installed as this is what I used for my db connections and this is also what the report builder uses.
Telerik Reporting v16.2
.Net core 6 (long term support)
