or
2 answers
570 views
I posted this query as a support ticket but I'm hoping to get an answer before the weekend is over.
I have a Grid with batch editing enabled. It also features a custom toolbar with an additional button: 'Archive'.
Users will be able to check multiple rows and click the 'Archive' button in the toolbar.
The button should submit all the selected rows (models) and POST them to a server side method for processing.
I have used this post as a basis for my work:
https://www.telerik.com/forums/how-to-pass-a-grid%27s-selected-row-values-to-controller
In the post, the custom button simply gets the selected items and posts them to the appropriate Controller method.
I need to POST an IEnumerable<T> to the Controller. Not just properties of an object.
I keep getting this error message:
"Javascript error: 'Uncaught TypeError: Cannot read properties of undefined (reading 'field')'
or the Controller gets NULL.
markup:
<div class="container-fluid"><div class="fc-day-grid-container">
@(Html.Kendo().Grid<Core.Resources.EmPowerReconciliationDto>
()
.Name("EmpFSRollGrid")
.Columns(columns =>
{
columns.Select().Width(50)
.ClientHeaderTemplate("<input type='checkbox' id='selectAll' class='k-checkbox' onClick='selectAll(this)'/>" +
"<label for='selectAll'> All</label>").HeaderHtmlAttributes(new { @class = "k-header" });
columns.Bound(c => c.ProjMessage).Width(100);
columns.Bound(c => c.ProjectId).Width(150);
columns.Bound(c => c.ElectricUtilityUtilityName).Width(150);
columns.Bound(c => c.GasUtilityUtilityName).Width(150);
columns.Bound(c => c.PrimaryHeatingFuel).Width(100);
columns.Bound(c => c.ReferralSF).Width(100);
columns.Bound(c => c.MeasureType).Width(100);
columns.Bound(c => c.ProgramName).Width(100);
columns.Bound(c => c.MeasureId).Width(100);
columns.Bound(c => c.FundedAmount).Width(100).Format("{0:n}").HtmlAttributes(new { @class = "k-text-right" });
columns.Bound(c => c.Adj).Width(100).Format("{0:n}").HtmlAttributes(new { @class = "k-text-right" });
columns.ForeignKey(c => c.XFundingSourceId, (System.Collections.IEnumerable)ViewData["fundingsource"], "FundingSourceId", "FundingSourceDesc").Width(160).Title("Funding Source");
columns.Bound(c => c.MeasureCategoryMeasureCategoryDesc).Width(100);
columns.Bound(c => c.ProjectStage).Width(100);
})
.ToolBar(toolbar =>
{
toolbar.ClientTemplateId("GridToolbarTemplate");
})
.Excel(excel => excel
.FileName($"EmPowerReconciliationReport{System.DateTime.Now.ToString("yyyyMMMMdd")}.xlsx")
.Filterable(true)
.AllPages(true)
)
.Editable(editable => editable.Mode(GridEditMode.InCell))
.Pageable(pageable =>
{
pageable.Refresh(true);
pageable.PageSizes(new[] { 10, 20, 50 });
})
.Sortable()
.Filterable(ftb => ftb.Mode(GridFilterMode.Row))
.Scrollable(s => s.Enabled(true))
.Resizable(resize => resize.Columns(true))
.PersistSelection()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(emp => emp.MeasureId);
model.Field(emp => emp.ProjMessage).Editable(false);
model.Field(emp => emp.ProjectId).Editable(false);
model.Field(emp => emp.ElectricUtilityUtilityName).Editable(false);
model.Field(emp => emp.GasUtilityUtilityName).Editable(false);
model.Field(emp => emp.PrimaryHeatingFuel).Editable(false);
model.Field(emp => emp.ReferralSF).Editable(false);
model.Field(emp => emp.MeasureType).Editable(false);
model.Field(emp => emp.ProgramName).Editable(false);
model.Field(emp => emp.MeasureId).Editable(false);
model.Field(emp => emp.FundedAmount).Editable(false);
model.Field(emp => emp.Adj).Editable(true);
model.Field(emp => emp.XFundingSourceId).Editable(true);
model.Field(emp => emp.MeasureCategoryMeasureCategoryDesc).Editable(false);
model.Field(emp => emp.ProjectStage).Editable(false);
})
.ServerOperation(false)
.Batch(true)
.Events(events => events.Error("error_handler"))
.Events(events => events.RequestEnd("request_end"))
.Read(read => read.Action("GetAllFsRollup", "EmPowerReconciliation"))
.Update(update => update.Action("UpdateCompositeInvoice", "EmPowerReconciliation"))
//.Create(create => create.Action("AddInvoice", "EmPowerInvoiceReport"))
//.Destroy(destroy => destroy.Action("DeleteInvoice", "EmPowerInvoiceReport"))
)
)
</div></div><script id="GridToolbarTemplate" type="text/x-kendo-template">
<div class="toolbar">
<a role="button" class="k-button k-button-icontext k-grid-excel" href="\\#"><span class="k-icon k-i-file-excel"></span>Export to Excel</a>
<a role="button" class="k-button k-button-icontext k-grid-save-changes" href="\\#"><span class="k-icon k-i-check"></span>Save changes</a>
<a role="button" id="cancelmeasureChanges" class="k-button k-button-icontext k-grid-cancel-changes" href="\\#"><span class="k-icon k-i-cancel"></span>Cancel changes</a>
<a role="button" id="ArchiveChanges" class="k-button" href="\\#" onClick="Archive()"><span class="k-icon"></span>Archive</a>
@*@(Html.Kendo().DropDownList()
.Name("InvoicedList")
.OptionLabel("All")
.DataTextField("InvoiceSatusName")
.DataValueField("InvoiceStatusId")
.AutoBind(true)
.Events(e => e.Change("invoicedStatusChange"))
.DataSource(ds =>
{
ds.Read("InvoiceStatuses", "EmPowerInvoiceReport");
})
.ToClientTemplate()
)*@
</div>
</script><script type="text/javascript">
function Archive() {
var items = {};
//var items = [];
var grid = $('#EmpFSRollGrid').data('kendoGrid');
var selectedElements = grid.select();
for (var j = 0; j < selectedElements.length; j++) {
var item = grid.dataItem(selectedElements[j]);
//items.push(item);
items['archiveItems[' + j + ']'] = item;
//items[j] = item;
}
$.ajax({
type: "POST",
data: items,
url: '@Url.Action("Archive", "EmPowerReconciliation")',
success: function (result) {
console.log(result);
}
})
}
// ******* Select/deSelect All
function selectAll(mainCheck) {
var grid = $("#EmpFSRollGrid").data("kendoGrid");
var items = grid.items();
items.each(function (index, td) {
var chckbx = $(td).find("input").get(0);
$(chckbx).prop("checked", mainCheck.checked);
var dataItem = grid.dataItem(this);
dataItem.IsSubmitted = mainCheck.checked;
if (mainCheck.checked) {
//$(chckbx).closest("td").addClass("k-dirty-cell").prepend("<span class='k-dirty'></span>");
$(chckbx).closest("tr").addClass("k-state-selected");
dataItem.dirty = true;
dataItem.dirtyFields = { IsSubmitted: true }
}
else {
//$(chckbx).closest("td").removeClass("k-dirty-cell").remove("span.k-dirty");
$(chckbx).closest("tr").removeClass("k-state-selected");
dataItem.dirty = false;
dataItem.dirtyFields = { IsSubmitted: false }
}
})
if (mainCheck.checked == false) {
dataSource = $("#EmpFSRollGrid").data("kendoGrid").dataSource
grid._selectedIds = {};
grid.clearSelection();
}
}
// ***************** Grid Textbox edited
$("#EmpFSRollGrid").on("change", "input.text-box.single-line.k-valid", function (e) {
var grid = $("#EmpFSRollGrid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
if (dataItem.dirty) {
grid.dataItem($(e.target).closest("tr").addClass("k-state-selected"));
var chk = $(e.target).closest("tr").find(".k-checkbox");
chk.prop("checked", true);
}
});
// *************** Grid checkbox checked/unchecked
$("#EmpFSRollGrid").on("change", "input.k-checkbox", function (e) {
var grid = $("#EmpFSRollGrid").data("kendoGrid"),
dataItem = grid.dataItem($(e.target).closest("tr"));
dataItem.IsSubmitted = this.checked;
if (this.checked) {
//$(e.target).closest("td").addClass("k-dirty-cell").prepend("<span class='k-dirty'></span>");
dataItem.dirty = true;
dataItem.dirtyFields = { IsSubmitted: true }
}
else {
// $(e.target).closest("td").removeClass("k-dirty-cell").remove("span.k-dirty");
dataItem.dirty = false;
dataItem.dirtyFields = { IsSubmitted: false }
var row = e.target.closest('tr')
var uid = $(row).data(uid)
dataSource = $("#EmpFSRollGrid").data("kendoGrid").dataSource
var item = dataSource.getByUid(uid.uid);
dataSource.cancelChanges(item);
grid.refresh();
}
if (!this.checked) {
$("#selectAll").prop('checked', false);
}
});
// ************** Clear the grid after an Update
function request_end(e) {
var grid = $("#EmpFSRollGrid").data("kendoGrid");
var items = grid.items();
items.each(function (index, td) {
var chckbx = $(td).find("input").get(0);
$(chckbx).prop("checked", false);
$(chckbx).closest("tr").removeClass("k-state-selected");
});
grid._selectedIds = {};
grid.clearSelection();
}
function error_handler(e) {
if (e.errors) {
var message = "Errors:\n";
$.each(e.errors, function (key, value) {
if ('errors' in value) {
$.each(value.errors, function () {
message += this + "\n";
});
}
});
alert(message);
}
}
</script>
The important part is here.
<a role="button" id="ArchiveChanges" class="k-button" href="\\#" onClick="Archive()"><span class="k-icon"></span>Archive</a>
Here:
function Archive() {
var items = {};
//var items = [];
var grid = $('#EmpFSRollGrid').data('kendoGrid');
var selectedElements = grid.select();
for (var j = 0; j < selectedElements.length; j++) {
var item = grid.dataItem(selectedElements[j]);
//items.push(item);
items['archiveItems[' + j + ']'] = item;
//items[j] = item;
}
$.ajax({
type: "POST",
data: items,
url: '@Url.Action("Archive", "EmPowerReconciliation")',
success: function (result) {
console.log(result);
}
})
}Controller
[AcceptVerbs("Post")]
public async Task<ActionResult> Archive([DataSourceRequest] DataSourceRequest request
,IEnumerable<EmPowerReconciliationDto> archiveItems)
{
return Json(archiveItems);
}1 answer
367 views
Hey guys,
currently I'm trying to get use of the tag helper in general. Now I'm stuck at the daterangepicker.
Can somebody describe how you can put an array to the definition? I'm talking about the "DisableDates".
Html.Kendo().DateRangePicker()
.DisableDates(new[] { "sa", "su" })
.Max(DateTime.Now.AddYears(1))
.Messages(m => m.StartLabel("Start").EndLabel("Ende"))
.Name("daterangepickerReservierungswunsch")
.Range(r => r.Start(Model.Startdatum).End(Model.Enddatum))<kendo-daterangepicker name="daterangeReservation" disable-dates="???" max="DateTime.Now.AddYears(1)" >
<messages start-label="Start" end-label="Ende" />
<range start="Model.DateStart" end="Model.DateEnd" />
</kendo-daterangepicker>
Aleksandar
Telerik team
answered
on
16 Mar 2022
0 answers
134 views
I have a strange problem with one of my grids, everything works just fine in normal display, but when I switch to mobile display, the grid does not show up and I get this error in the console:
Uncaught TypeError: Ke.Pane is undefined
My other grids which almost have identical code structure to this one, works fine in both displays. Any idea what could be the reason for this error? Thank you in advance.
1 answer
312 views
Good Afternoon,
ive been doing some work on upgrading to .net6 and have run into some telerik issues.
From my understanding Telerik.Windows.Controls.RichTextBox doesn't even exist anymore, nor is it installed anywhere in my solution. The closet thing to it is Telerik.Windows.Controls.RichTextBoxUI.
After i import telerik into my xaml file via
xmlns:telerik="http://schemas.telerik.com/2008/xaml/presentation"
i receive errors stating
```
Error CS0433 The type 'RadRichTextBox' exists in both 'Telerik.Windows.Controls.RichTextBox, Version=2021.3.1109.60, Culture=neutral, PublicKeyToken=5803cfa389c90ce7' and 'Telerik.Windows.Documents, Version=2021.3.1109.45, Culture=neutral, PublicKeyToken=5803cfa389c90ce7''
```
I'm not even sure were to look or what to try, as I've checked to make sure its not installed anywhere, triple checked, and also have deleted bin and obj folders tried to do a clean rebuild build. i don't even understand how it can think about wanting something from a package that isn't even installed
Ivan Ivanov
Telerik team
answered
on
10 Mar 2022
0 answers
296 views
I am trying to use kendo grid in asp.net core (.net5) web application but data is not visible in grid I guess binding is not working.
Kendo grid is able make read data request to action method and also able to get result back but that result is not being bound to grid and I am not sure what is going wrong in here.
I have attached the sample project here.
Can someone help me find the issue?
2 answers
2.5K+ views
For example:
The grid has 3 columns. Column 1 and column 2 should have a max-width while column 3 should have a min width.
What i aim for ist the following:
On resizing (to max) the Browser, Column 1 and 2 should expand to a set width, while Column 3 should have the remaining space.
This can be done by setting the width of column 1 and 2 without setting the width of column 3.
But on resizing from a large to small, the column 3 shrinks until its gone. A div width min-width, does not help. Some styles of
the grid prevents this default table behaviour, which i can't figure out.
Column 3 should shrink to a set width and column 1 and 2 should shrink further.
How can i accomplish this behaviour.
Hiding a column is not an option.
Thanks
1 answer
207 views
Hi,
I have a requirement for a grid that allows a user to update a record but they cannot create new ones. If my grid defines only the read and update action, when I save a record I get a 400 error returned but the save does go through. The 400 error is returned before the save action has completed. I have narrowed the issue down to the fact that I did not have a create action defined.
Why does a create action need to be defined even when there is no toolbar that allows them to add new records?
Simplified version of my grid definition:
@(Html.Kendo().Grid<TimeStudy.NetCore.Web.Models.TSCodeAssociationModel>()
.Name("gridTSCodeAssociation")
.HtmlAttributes(new { sender = "gridTSCodeAssociation", title = "TS Code Associaton" })
.Columns(c =>
{
c.Command(commands =>
{
commands.Edit().Text(" ").CancelText("Close").UpdateText("Save").HtmlAttributes(new { title = "Edit Association" }).IconClass("fas fa-pencil-alt fa-xs iconColor k-sm").UpdateIconClass("rcit-k-remove-icon-span").CancelIconClass("rcit-k-remove-icon-span");
}).ClientHeaderTemplate(TimeStudy.NetCore.Web.Common.ViewConstants.KENDO_REMOVE_FILTER_BTN).Width(55).Visible(@isEditor);
c.Bound(f => f.TSCodeAssociationId).Hidden();
c.Bound(f => f.Code).Width(50);
})
.Pageable()
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditTSCodeAssociation").Window(w => w.Title("Edit TS Code Association")))
.DataSource(dataSource =>
dataSource
.Ajax()
.Events(ex => ex.Error("function(e){gridWithSearchButton_onDataError(e, '#gridTSCodeAssociation')}"))
.Model(model =>
{
model.Id(f => f.TSCodeAssociationId);
})
.Read(read => read.Action("GridTSCodeAssociationAction", "TSCodeAssociation", new { method = "read" }).Data("kendoPageSearchParametersAntiForgery"))
.Update(read => read.Action("GridTSCodeAssociationAction", "TSCodeAssociation", new { method = "update" }).Data("kendoPageSearchParametersAntiForgery"))
//.Create(create => create.Action("GridTSCodeAssociationAction", "TSCodeAssociation", new { method = "create" }).Data("kendoSendAntiForgery"))
.PageSize(50)
)
.Events(e => e.DataBound("kendoGridLoadButtonReset_databound"))
.Filterable(filterable => filterable
.Extra(false)
.Operators(operators => operators
.ForString(str => str.Clear()
.StartsWith("Starts with")
.IsEqualTo("Is equal to")
.IsNotEqualTo("Is not equal to")
.Contains("Contains")
))
)
.Scrollable(s => s.Height(600))
.Sortable()
.AutoBind(true)
.Deferred()
)
If I leave the create action commented out I get the 400 error message and I can see the network call shown in the attached image right before the grid update call.
version 2022.1.119
Tsvetomir
Telerik team
answered
on
09 Mar 2022
1 answer
136 views
Dear support teams.
I have a problem that I would like your help with.
using Telerik for AspNet.Core, with Grid control.
In the database, there is a list of goods, including goods code, name of goods, and unit price.
For example there are 3 goods
G01 - Goods 01 - 10$
G02 - Goods 02 - 20$
G03 - Goods 03 - 30$
On the grid I also created 3 corresponding fields,
When in add new row mode, enter the commodity code I want to display the name of the goods and the unit price as soon as I have entered "G01"
Do you have any solution to do it?
Thanks for your support.
Regards.
Patrick | Technical Support Engineer, Senior
Telerik team
answered
on
03 Mar 2022
1 answer
1.0K+ views
Hi,
I'm working with Kendo Grid with MVC Core. I try to do the total rows (picture below) for 2 columns
Total Tax Rate (line 8) = line 1 + 2 + 3 + 4 + 5 + 6 for column d and e
Net Tax Rate (line 10) = total of line 8 - line 9 for both column d and e
The users want to see new calculate total every time they make some changes. Any suggestion how to handle this requirement.
Thank you.
Georgi
Telerik team
answered
on
03 Mar 2022
1 answer
358 views
this is an Asp.net MVC Core 6.0 project referring latest Telerik Nuget dll - 2022.1.119
Builds fine locally. But fails in build server due to compatibility issue.
Below is the build log from server.
2022-03-01T03:27:30.5720121Z Checking compatibility for Microsoft.CodeAnalysis.CSharp.Workspaces 4.0.0 with .NETFramework,Version=v6.0. 2022-03-01T03:27:30.5721443Z Package Microsoft.CodeAnalysis.CSharp.Workspaces 4.0.0 is not compatible with net60 (.NETFramework,Version=v6.0). Package Microsoft.CodeAnalysis.CSharp.Workspaces 4.0.0 supports: 2022-03-01T03:27:30.5724004Z - netcoreapp3.1 (.NETCoreApp,Version=v3.1) 2022-03-01T03:27:30.5724701Z - netstandard2.0 (.NETStandard,Version=v2.0)
Compatibility Issue is because Telerik dll is referring to code analysis dll, which supports only .Net 3.0 core apps.
Please let me know how to resolve this. Why Telerik dll is pulling an lower framework (3.0 core) dependency for .net 6.0 project? Below is snapshot of dll reference in project. Let me know.
samram
Top achievements
Rank 1
Iron
Rank 1
Iron
answered
on
02 Mar 2022
