I have a field that can be a fairly long string. I wanted it to show as a textarea instead of as an input. How can this be accomplished?
I've found AJAX implementations but the same structures aren't working in the MVC context.
I'm using the recommended approach to using Kendo Widgets in a grid Column ClientTemplate from here: https://docs.telerik.com/aspnet-mvc/helpers/grid/faq#how-do-i-use-a-kendo-ui-widget-inside-a-grid-client-column-template
PROBLEM: The DropDownList I am attempting to use only appears for the first row - all other rows simply show a textbox. In addition, when I attempt to select an item in the DropDownList, I get a select menu, and a textbox above it with the value "0."
VIEW:
@(Html.Kendo().Grid(Model.ProjectViewModels)
.Name("projectsGrid")
.ToolBar(tools => tools.Create().Text("Add Project"))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Bottom))
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden();
columns.Bound(a => a.ProjectCategoryTypeId)
.Title("High Level Category")
.ClientTemplate(
Html.Kendo().DropDownList()
.Name("ProjectCategoryTypeId")
.DataValueField("Value")
.DataTextField("Text")
.BindTo(Model.ProjectCategoryTypes)
.HtmlAttributes(new { @class = "templateCell" })
.ToClientTemplate()
.ToHtmlString())
.Sortable(true);
columns.Command(command => command.Destroy()).Width(100);
})
.Events(ev => ev.DataBound("initTemplates"))
.DataSource(dataSource => dataSource
.Ajax()
//.Events(e => e.Change("initTemplates"))
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Id).Editable(false);
})
.ServerOperation(false)
)
)
SCRIPT:
// this approach works, but only for the first row...
function initTemplates(e) {
$(".templateCell").each(function () {
eval($(this).children("script").last().html());
});
}
Hi,
I would like to enable horizontal scrolling but disable vertical scrolling. Is this possible?
Thanks.
Hi all,
I have a grid with custom transport in an ASP.NET MVC application that calls a Web API by URL. I would like to hide the URL when a user views the page source. Does anyone know of any methods to do this?
Best,
Ruben
I am using Chrome 61.0.3163.100
Compare the menus at
http://demos.telerik.com/aspnet-mvc/menu
to those at
http://demos.telerik.com/kendo-ui/menu/index
The Razor menu helper produces a menu with 'twist' triangles that are much closer to menu text and look pretty awful at that spacing. Also, the MVC example does not properly specify the #megaStore background image -- This console shows "GET http://demos.telerik.com/content/web/menu/header.jpg 404 (Not Found)"
Question: Is there an option or setting to use in the Razor menu helper to make the rendering more like the kendoui one ?
Hello,
I'm currently searching for a smart way to display the number of selected rows in a Grid.
In my grid I have a select column to select items and a second column that shows the information:
columns.Select().Width(30);
columns.Bound(item => item.Name).ClientFooterTemplate("All items: #=count#");
This is the corresponding aggregate for the item counter:
.Aggregates(aggregates => aggregates.Add(item => item.Name).Count())
What I want to archive is that the footer template is also showing the number of selected items.
Pseudocode (which is obviously not working):
columns.Bound(item => item.Name).ClientFooterTemplate("All items: #=count#<
br
>Selected items: #=selectedCount#")
The only way I found to show the selected item count is to manipulate the DOM ($(".k-footer-template td:nth-child(2)")) when the grid change event is firing.
Does anybody have a smarter solution for my problem?
Any help is appreciated!
Regards
Raphael
Hi,
I have a grid with a detail template that contain a child grid.
I receive upfront data for main and child grids.
Foreach grid I need to have an inline ajax create and foreach row an inline ajax edit.
- After some research I follow the approach suggested on http://www.telerik.com/forums/grid-bind-a-clientdetailtemplate-to-a-collection-in-parent-row.
On DetailInit it populates right the data for the child, but after kendo hits "endRequest" event... delete entirely the data populated on detailInit.
- I follow this post: http://www.telerik.com/forums/clienttemplate-loaded-from-collection-in-parent-row---prevent-request.
but the add and edit features break with this approach.
In an Ideal scenario I want a grid and child grids binded upfront from the model. and be able to add or edit in an ajax way.
How can I solve this issue?
Hi there,I want to tab through a batch edit grid and i have certain columns that are non-editable (unamed column, Ministry Group, Age Category And Annual ( i use e.closeCell in javascript for the Annual column) ). Right now, i am able to Tab through the grid though partially. The problems i am running into is
1.) When i tab through the grouped section (People Reached) of the grid, it works fine but any thing past the first 3 rows and tabbing no longer works.
So my question ultimately is how do i make it jump to the next grouped section(People Trained) and Tab through and so on and so forth.
Here is my code Index.cshtml
01.
@(Html.Kendo().Grid<P2I_UI.Models.ViewM.PlanPeopleVM>()
02.
.Name(
"PlanPepole"
)
03.
.Columns(columns =>
04.
{
05.
columns.Bound(e => e.PeopleCategoryName).Title(
""
).Width(154).ClientGroupFooterTemplate(
"Total"
);
06.
columns.Bound(e => e.MinistryGroupCategoryName).Title(
"Ministry Group"
).Width(2);
07.
columns.Bound(e => e.AgeCategoryName).Title(
"Age Category"
).Width(2);
08.
columns.Bound(e => e.PeopleQ1).Title(
"Q1"
).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
09.
columns.Bound(e => e.PeopleQ2).Title(
"Q2"
).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
10.
columns.Bound(e => e.PeopleQ3).Title(
"Q3"
).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
11.
columns.Bound(e => e.PeopleQ4).Title(
"Q4"
).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
12.
columns.Bound(e => e.Annual).Width(79).ClientGroupFooterTemplate(
"#=kendo.toString(sum,',0')#"
);
13.
})
14.
.ToolBar(toolbar =>
15.
{
16.
toolbar.Save();
17.
})
18.
.Editable(editable => editable.Mode(GridEditMode.InCell))
19.
//.Navigatable()
20.
.Events(events =>
21.
{
22.
events.DataBound(
"Ppg_Uneditable_ColandRow"
);
23.
events.SaveChanges(
"disableBeforeUnload"
);
24.
events.Edit(
"onEditPlanPepole"
);
25.
})
26.
.DataSource(dataSource => dataSource
27.
.Ajax()
28.
.ServerOperation(
false
)
29.
.Aggregates(aggregates =>
30.
{
31.
aggregates.Add(p => p.PeopleCategoryName).Count();
32.
aggregates.Add(p => p.PeopleQ1).Sum();
33.
aggregates.Add(p => p.PeopleQ2).Sum();
34.
aggregates.Add(p => p.PeopleQ3).Sum();
35.
aggregates.Add(p => p.PeopleQ4).Sum();
36.
aggregates.Add(p => p.Annual).Sum();
37.
})
38.
.Batch(
true
)
39.
.Model(model =>
40.
{
41.
model.Id(p => p.PlanPeopleID);
42.
model.Field(p => p.PeopleCategoryName).Editable(
false
);
43.
model.Field(p => p.MinistryGroupCategoryName).Editable(
false
);
44.
model.Field(p => p.AgeCategoryName).Editable(
false
);
45.
})
46.
.PageSize(30)
47.
.Group(groups => groups.Add(p => p.PeopleCategoryID))
48.
.Read(read => read.Action(
"People_Read"
,
"PlanPeople"
))
49.
)
50.
)
JavaScrpt
01.
$(
function
() {
02.
03.
var
grid = $(
'#PlanPepole'
).data(
'kendoGrid'
);
04.
05.
grid.table.on(
'keydown'
,
function
(e) {
06.
if
(e.keyCode === kendo.keys.TAB && $($(e.target).closest(
'.k-edit-cell'
))[0]) {
07.
e.preventDefault();
08.
var
currentNumberOfItems = grid.dataSource.view().length;
09.
var
row = $(e.target).closest(
'tr'
).index();
10.
11.
12.
var
dataItem = grid.dataItem($(e.target).closest(
'tr'
));
13.
var
field = grid.columns[col].field;
14.
var
value = $(e.target).val();
15.
dataItem.set(field, value);
16.
var
nextCellCol = 3;
17.
18.
if
(row >= 0 && row < currentNumberOfItems && col >= 0 && col < grid.columns.length) {
19.
console.log(
"this is col:"
, col);
20.
var
nextCellRow;
21.
if
(col === 3) {
22.
nextCellCol = 5;
23.
}
24.
else
if
(col === 4) {
25.
nextCellCol = 6;
26.
}
27.
else
if
(col === 5) {
28.
nextCellCol = 7;
29.
}
30.
else
if
(col === 6) {
31.
nextCellCol = 4;
32.
}
33.
34.
if
(e.shiftKey) {
35.
nextCellRow = nextCellCol === 4 ? row : row - 1;
36.
}
else
{
37.
nextCellRow = nextCellCol === 4 ? row + 1 : row;
38.
}
39.
40.
if
(nextCellRow >= currentNumberOfItems || nextCellRow < 0) {
41.
return
;
42.
}
43.
44.
// wait for cell to close and Grid to rebind when changes have been made
45.
setTimeout(
function
() {
46.
grid.editCell(grid.tbody.find(
"tr:eq("
+ nextCellRow +
") td:eq("
+ nextCellCol +
")"
));
47.
});
48.
}
49.
}
50.
});
51.
52.
})
And i also attached an image of the grid
Thank you.
Hi!
I have the following lines in my _Layout.cshtml:
@Html.Kendo().AutoComplete().Name("search").DataTextField("Name").MinLength(3).Placeholder("Search...").DataSource(source => source.Read(read => read.Action("GetSiteInfos", "SiteInfo"))).AutoWidth(true).HtmlAttributes(new { style = "width: 50%;" }).Events(ev => ev.Select("onSiteSelect"))
and the Javascript for the selection is:
<script type="text/javascript">
function onSiteSelect(e) {
var selected = this.dataItem($(e.item));
var id = selected.Id;
$("#selectedSiteId").val(id);
}
</script>
It's working perfectly: the value of the field 'id' is stored in a HiddenField:
@Html.Hidden("selectedSiteId")
Now my problem is, that I have a TabStrip in this _Layout.cshtml and I would like to show some database results for the selected Id depending on the page I choose in the TabStrip.
@Html.Kendo().TabStrip().Name("siteTabStrip").Animation(animation => animation.Open(effect => effect.Fade(FadeDirection.In))).Items(tabstrip =>
{
tabstrip.Add().Text("First page").Content(@Html.Partial("_FirstPartial").ToHtmlString());
tabstrip.Add().Text("Second page").Selected(true).Content(@Html.Partial("_SecondPartial").ToHtmlString());
}).HtmlAttributes(new { @class = "k-state-active" })
How can I pass the hidden field value to the TabStrip item? Every TabStrip page will show a partial view. These partial views should call an action with the Id as a parameter and will show us different results from database. But this TabStrip will be rendered as soon as I load the page and before using the AutoComplete!
Thanks for your help.
multiple custom group footer template names | |
I have my grid.
<div class="grid-scrollable">
<div>
@(Html.Kendo().Grid<ViewModels.Payment.BhFormExpenseRRViewModel>()
.Name("BHFormPATHRRGrid")
.Events(e => e.DataBound("dataBoundpath"))
.Events(e => e.Save("onBhFormpathModelGridSave"))
.Events(e => e.Edit("onBhFormpathModelGridEdit"))
.Columns(columns =>
{
columns.Bound(p => p.Id).Hidden(true);
columns.Bound(p => p.ECId).Hidden(true);
columns.Bound(p => p.ExpenseCategory).ClientFooterTemplate("Total Payment Requested")
.ClientGroupFooterTemplate("Total Expenses").EditorTemplateName("Decimal").Format("{0:c}");
columns.Group(g => g.Title("Current Month Expenses")
.Columns(a =>
{
a.Bound(c => c.ThisMonthPath).EditorTemplateName("Decimal").Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
a.Bound(c => c.ThisMonthMatch).EditorTemplateName("Decimal").Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
}));
columns.Group(g => g.Title("Reduced Monthly Expenses")
.Columns(a =>
{
a.Bound(c => c.ReduceExpensesBy).EditorTemplateName("Decimal").Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
a.Bound(c => c.CurrentMonthExpensesSubmitted).EditorTemplateName("Decimal").Title("AdjustedPathAmount").Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
}));
columns.Group(g => g.Title("Prior Month Expenses")
.Columns(a =>
{
a.Bound(c => c.PriorMonthMatch).Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
a.Bound(c => c.PriorMonthPath).Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
}));
columns.Group(g => g.Title("Cumulative Expenses YTD")
.Columns(a =>
{
a.Bound(c => c.YtdMonthMatch).Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
a.Bound(c => c.YtdMonthPath).Format("{0:c}").ClientFooterTemplate("#=kendo.toString(sum,'C')#")
.ClientGroupFooterTemplate("#=kendo.toString(sum,'C')#");
}));
columns.Command(command =>
{
command.Edit().HtmlAttributes(new { @class = "btn-primary k-grid-edit" });
}).Width(200);
})
.Editable(editable => editable.Mode(Kendo.Mvc.UI.GridEditMode.InLine))
.Pageable(pageable => pageable.Refresh(true).PageSizes(true).ButtonCount(5))
.Sortable()
.Filterable(f => f.Operators(o => o.ForString(s => s.Clear()
.Contains("Contains")
.DoesNotContain("Does not contain")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.StartsWith("Starts with")
.EndsWith("Ends with "))))
.Selectable()
.Resizable(resize => resize.Columns(true))
.DataSource(dataSource => dataSource.Ajax().PageSize(20).Model(model => model.Id(p => p.ECId)).Model(model => model.Field(p => p.TotalProirExpensesBilled).Editable(false)).Model(model => model.Field(p => p.CurrentMonthExpensesSubmitted).Editable(false)).Model(model => model.Field(p => p.TotalExpensesYtd).Editable(false)).Model(model => model.Field(p => p.ExpenseCategory).Editable(false))
.Model(model => model.Field(p => p.PriorMonthMatch).Editable(false)).Model(model => model.Field(p => p.PriorMonthPath).Editable(false)).Model(model => model.Field(p => p.YtdMonthMatch).Editable(false)).Model(model => model.Field(p => p.YtdMonthPath).Editable(false))
.Aggregates(aggregates =>
{
aggregates.Add(p => p.ThisMonthMatch).Sum();
aggregates.Add(p => p.ThisMonthPath).Sum();
aggregates.Add(p => p.PriorMonthMatch).Sum();
aggregates.Add(p => p.PriorMonthPath).Sum();
aggregates.Add(p => p.YtdMonthMatch).Sum();
aggregates.Add(p => p.YtdMonthPath).Sum();
aggregates.Add(p => p.ReduceExpensesBy).Sum();
aggregates.Add(p => p.CurrentMonthExpensesSubmitted).Sum();
})
.Update(update => update.Action("EditBHFormRR", "ReimbursementRequestProvider").Data("additionalInfoPath"))
.Events(events => events.Error("errorpath"))
.Group(groups => groups.Add(p => p.ExpenseTypeId))
.Read(read => read.Action("BHFromExpenseGridRead", "ReimbursementRequestProvider", new { bhFormName = Model.BHFormsName, reimbursementEbsId = Model.ReimbursementEbsId, prrId = Model.PrrId, rrState = @ViewBag.RRStateRequest, serviceMonth = Model.ServiceMonth }))
)
)
</div>
</div>
my requirement is
change group client footer of group 1 to "Total Payment Requested" instead of "Total Expenses"
change group client footer of group 2 to "Total Match Claimed" instead of "Total Expenses"
TOTAL OF TOTAL AS "Total Billing Submitted" instead of "Total Payment Requested"
the issue is I have name the group client footer on custom basis.
example group 1 sum footer name should be something different than group 2 sum footer name.
can any one help me on this please?