I found multiple examples where Master/Detail is nested in the Master Grid using hierarchy. I wanted to have two separate grids. I am using Telerik ASP.NET MVC 6 which uses Kendo UI MVC Grid. Do you have example code to implement this?
Thanks
I have a inline grid and 'sumBudgetAmount' value in a page. When user clicks edit and updates 'IncreaseByAmt' in the grid, I have to check the sum of all the records of 'IncreaseByAmt' in the grid and see it is not greater than 'sumBudgetAmount' value. I want to do client side validation on gridsave event.
I can not do server side validation as I am not updating to the database when user clicks update button. It is a batch editing where user clicks save and then I am saving all the values to the database. So I can use only client side validation.
<
span
id
=
"sumBudgetAmt"
> @(Model.SumBudgetAmount) </
span
>
@(Html.Kendo().Grid<
BHEBS.Areas.Budget.Models.ContractBudgetModel.ServiceDetailReallocation
>()
.Name("serviceDetailReallocationGrid")
.Columns(columns =>
{
columns.Bound(p => p.ServiceDetailId).Hidden(true);
columns.Bound(p => p.IncreaseByAmt).EditorTemplateName("Currency").Format("{0:c}");
columns.Command(command =>
{
command.Edit().HtmlAttributes(new { @class = "btn-primary" });
}).Width(230);
})
.Events(e => e.Save("onServiceDetailReallocationGridSave"))
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false).Read(read => read.Action("ServiceDetailReallocation_Read", "ContractBudget"))
.Model(model =>
{
model.Id(p => p.ServiceDetailId);
})
.Update(update => update.Action("Update_ServiceDetailReallocation", "ContractBudget"))
.Events(e => e.Error(@<
text
> function(args) {var gridName = 'serviceDetailReallocationGrid';errorGrid(args, gridName); } </
text
>))
))
Thanks,
Veena
I have a bar chart (see attached), that I would like to display only the top 10 categories in order by alarm count. I cannot see a way to only display top N number of categories. This this possible with the bar chart?
Here is the code.
01.
@(Html.Kendo().Chart<Swisslog.DC.Entities.AlarmActivity>()
02.
.Name(
"alarmsTop10Last30"
)
03.
.Title(title => title.Text(
"TOP 10 ALARMS THE LAST 7 DAYS"
).Font(
"bold 30px Arial,Helvetica,sans-serif"
).Color(
"#808080"
).Align(ChartTextAlignment.Left))
04.
.Legend(legend => legend
05.
.Visible(
false
)
06.
.Position(ChartLegendPosition.Top)
07.
.Font(
"bold 18px Arial,Helvetica,sans-serif"
).Color(
"#808080"
)
08.
)
09.
.AutoBind(
true
)
10.
.DataSource(ds => ds
11.
.Read(read => read.Action(
"AlarmsKPIHistory"
,
"Home"
))
12.
.Group(group => group.Add(model => model.AlarmCode))
13.
//.Aggregates(agg => agg.Add(model => model.AlarmID).Count())
14.
//.Sort(sort => sort.Add(model => model.AlarmCode).Ascending())
15.
//.PageSize(10)
16.
)
17.
.Series(series =>
18.
{
19.
//series.Bar(model => model.AlarmID).Name("Alarm Description").Aggregate(ChartSeriesAggregate.Count).Color("#ED7D31");
20.
//series.Bar(model => model.AlarmID).Name("#= group.value #").Aggregate(ChartSeriesAggregate.Count).Color("#ED7D31").Stack("AlarmDescription");
21.
//series.Bar(model => model).Name("").Aggregate(ChartSeriesAggregate.Count).Color("#ED7D31");
22.
series.Bar(model => model.AlarmID).Name(
"1"
).Aggregate(ChartSeriesAggregate.Count).CategoryField(
"AlarmDescription"
);
23.
})
24.
.CategoryAxis(axis =>
25.
{
26.
//.Categories(model => model.AlarmDateTime)
27.
//.Title(title => title.Text("Date").Font("bold 18px Arial,Helvetica,sans-serif").Color("#000000"))
28.
axis.Labels(labels => labels.Rotation(0).Font(
"bold 18px Arial,Helvetica,sans-serif"
).Color(
"#808080"
));
29.
axis.MajorGridLines(lines => lines.Visible(
false
));
30.
axis.Axis.BaseUnit = ChartAxisBaseUnit.Fit;
31.
axis.Axis.MaxDateGroups = 5;
32.
axis.Axis.Type = ChartCategoryAxisType.Category;
33.
})
34.
.ValueAxis(axis => axis
35.
.Numeric()
36.
.Labels(labels => labels.Format(
"{0:N0}"
).Font(
"bold 18px Arial,Helvetica,sans-serif"
).Color(
"#808080"
))
37.
.Title(title => title.Text(
"Alarm Count"
).Font(
"bold 18px Arial,Helvetica,sans-serif"
).Color(
"#000000"
))
38.
.Max(100)
39.
.MajorUnit(10)
40.
.MajorGridLines(major => major.Visible(
true
))
41.
.Line(line => line.Visible(
false
))
42.
)
43.
.Tooltip(tooltip => tooltip
44.
.Visible(
true
)
45.
.Format(
"{0:N0}"
)
46.
)
47.
.Events(events => events
48.
.DataBound(
"onDataBound_alarmsResponds1"
)
49.
)
50.
)
Hi,
We use a framework that wrap every ajax response. Instead to have this :
AggregateResults: null
Data: [{Name: "name1", Title: "M.",},…]
Errors: null
Total: 4
the response from controller method are :
error: null
result: {data: [{name: "name1", tile: "M."},…], total: 4,…}
success: true
unAuthorizedRequest: false
I would like to use a javascript function so that can manipulate the ajax response and extract the data before passing it to the Grid.
Is there a way to achieve that? Thank you.
I'm trying to create a string using the text values in the multi select list using Jquery but I'm having trouble trying to get the selected value's text fields.
I can see that theres a value function which returns the ID's of the list (i.e. DataValueField?) but not the text fields (i.e. DataTextField?).
I've had a look at the datasource to see if i can iterate through that instead and find the text values that i need but as im virtualising the multi select list, im only getting a limited subset of the items i need.
Is there any way to get the selected items using Jquery? It seems like such an easy task to do as the objects are already displayed on screen but i cannot figure out how to access them.
Thanks
Hi
I am working through some Telerik sample code and having some errors. I am trying to understand how it works in order to troubleshoot the problem.
Specifically, I am using a ComboBox widget with an id value (let's call it comboID) which is set in the .Name property.
Now this code from the sample:
$(comboID).each(function () {
eval($(this).children("script").last().html());
});
I think adds a new combo box. What does the ("script") keyword signify?
Now I need to find the ComboBox and update the selected item.
$(comboID).data().kendoComboBox.value(status);
But get undefined for the kendoComboBox. I'm not sure what this line does. I assume we are looking into the DOM but what is the type that is returned?
Thanks for your help. Just trying to understand.
I have a dropdown inside a grid which currently takes 100% width of the column. Because of number of columns, width of this column is very less compared to the length of each item I have for the dropdown.
I want to make the options list of the dropdown to display full text in single line with out increasing the width of the column. I am using white-space:nowrap to get the text in online but the options list gets scroll bar. Is there a way that I can increase its width to 100%?
I am following this tutorial here and created a page but popup won't show when I click the button. I am getting javascript error sys is undefined.
Tutorial: http://demos.telerik.com/aspnet-ajax/window/examples/modalpopup/defaultcs.aspx
aspx
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FNA.NRTT.Website.Customer.Portfolio.Default" %>
<%@ Register TagPrefix="nrtt" TagName="CustomerGrid" Src="~/UserControls/CustomerGrid.ascx" %>
<%@ Register TagPrefix="nrtt" TagName="DisplayClientDefinedField" Src="~/UserControls/DisplayClientDefinedField.ascx" %>
<
asp:Content
ID
=
"Content1"
ContentPlaceHolderID
=
"HeadContent"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content2"
ContentPlaceHolderID
=
"FeaturedContent"
runat
=
"server"
>
</
asp:Content
>
<
asp:Content
ID
=
"Content3"
ContentPlaceHolderID
=
"MainContent"
runat
=
"server"
>
<
h2
><
asp:Literal
ID
=
"ltPageTitle"
runat
=
"server"
Text="<%$ Resources:NrttLanguage, Portfolio %>"></
asp:Literal
></
h2
>
<
nrtt:DisplayClientDefinedField
runat
=
"server"
ID
=
"ucDisplayCDFS"
OnNeedCdfDefinitions
=
"ucDisplayCDFS_NeedCdfDataDefinition"
OnFilterChanged
=
"ucDisplayCDFS_FilterCDFS"
/>
<
asp:Button
ID
=
"rbEdit"
Text
=
"Edit"
runat
=
"server"
/>
<
nrtt:CustomerGrid
ID
=
"ucExpiringRealServices"
runat
=
"server"
AllowSelection
=
"true"
OnNeedDataSource
=
"ucExpiringRealServices_NeedDataSource"
OnNeedColumnCollection
=
"ucExpiringRealServices_NeedColumnCollection"
OnItemDataBound
=
"ucExpiringRealServices_ItemDataBound"
></
nrtt:CustomerGrid
>
<
telerik:RadWindow
ID
=
"modalPopup"
runat
=
"server"
Width
=
"360px"
Height
=
"360px"
Modal
=
"true"
OffsetElementID
=
"main"
>
<
ContentTemplate
>
<
div
style
=
"padding: 10px; text-align: center;"
>
<
telerik:RadButton
ID
=
"rbToggleModality"
Text
=
"Toggle modality"
OnClientClicked
=
"togglePopupModality"
AutoPostBack
=
"false"
runat
=
"server"
Height
=
"65px"
/>
</
div
>
<
p
style
=
"text-align: center;"
>
RadWindow is designed with keyboard support in mind - try tabbing
before and after removing the modal background. While the popup is modal
you cannot focus the text area, once the modality is removed the text area will
be the first thing to receive focus because it has tabIndex=1.
</
p
>
</
ContentTemplate
>
</
telerik:RadWindow
>
</
asp:Content
>
javascript:
var demo = {};
function togglePopupModality() {
var wnd = getModalWindow();
wnd.set_modal(!wnd.get_modal());
if (!wnd.get_modal()) {
document.documentElement.focus();
}
}
function showDialogInitially() {
var wnd = getModalWindow();
wnd.show();
Sys.Application.remove_load(showDialogInitially);
}
Sys.Application.add_load(showDialogInitially);
function getModalWindow() { return $find(demo.modalWindowID); }
global.$modalWindowDemo = demo;
global.togglePopupModality = togglePopupModality;