I am trying out fairly basic databinding with hard coded data using Kendo Grid using MVC - ASP.NET Core. The Grid renders fine and the .read method is called. It returns JSON however, the data does not display in the grid. I verified no errors related to aspnet-mvc.js script. The required scripts are listed only once and in the correct order. Help appreciated. I tried using JsonResult. No luck.
@using Kendo.Mvc.UI
@model IEnumerable<
GridPortal.Web.Models.Company
>
<
script
src
=
"~/lib/kendo/2020.1.406/js/kendo.all.min.js"
></
script
>
<
script
src
=
"~/lib/kendo/2020.1.406/js/kendo.web.min.js"
></
script
>
<
script
src
=
"~/lib/kendo/2020.1.406/js/kendo.aspnetmvc.min.js"
></
script
>
<
div
style
=
"width:100%;height:60%"
>
@(Html.Kendo().Grid<
GridPortal.Web.Models.Company
>() .Name("BindGridUsingRead")
.Columns(columns => {
columns.Bound(p => p.Id).Width(15).Title("ID").Filterable(false);
columns.Bound(p => p.Name).Title("Name").Width(30).Filterable(false);
columns.Bound(p => p.CompanyId).Title("CompanyID").Width(15).Filterable(false);
})
.Scrollable()
.Pageable()
.Filterable(ftp => ftp.Mode(GridFilterMode.Row))
.Resizable(resize => resize.Columns(true))
.HtmlAttributes(new { style = "height: 100%" })
.Selectable()
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.Id))
.ServerOperation(false)
.Read(read => read.Action("BindGrid", "Home"))) )
</
div
>
public ActionResult BindGrid([DataSourceRequest] DataSourceRequest request)
{
var company = new List<
Company
>();
company.Add(new Company
{
CompanyId = 102,
Id = 1,
Name = "John Smith"
});
DataSourceResult result = company.ToDataSourceResult(request);
return Json(result);
}
public void ConfigureServices(IServiceCollection services)
{
services.AddControllersWithViews();
services.AddKendo();
services.AddMvc().AddNewtonsoftJson(o =>
{
o.SerializerSettings.ReferenceLoopHandling = ReferenceLoopHandling.Ignore;
}).SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Version_3_0);
}
Hi all.
I am looking for a way to pass filter criteria to my read method. E.g. the resource list, the startdate and the end date.
There is a thread solving this for a SignalR bound grid. But I don't see how to do it with the scheduler
Any ideas?
Kind regards
Bernd
Hi,
I am using a Telerik MVC Grid and I am trying to get multiple clickable icons in one column. Did manage to do this via
columns.Command(command => {
command.Custom("View").Click("view").IconClass("k-icon k-i-preview k-i-eye");
command.Custom("Modify").Click("modify").IconClass("k-icon k-i-track-changes"); });
What I really want to achieve is to do this not via command, but in a normal column, using own icon with "onclick" event.
Did try this, but does not really work.
columns.Template(@<text><span class='viewicon' onclick='view'><span class='modifyicon' onclick='modify'></text>)
When I tried : columns.Template(@<text><span class='viewicon' onclick='view'></text>), the event does not get attached to the icon.
Maybe you have some useful input on the topic.
Thanks a lot!
Hi,
I currently have a scheduler setup that is loaded within a template.
The problem is if I try to add a EventTemplateId to the scheduler within the template with the fluent interface, it will break because the prefixed hash is not escaped. Normally this is not a problem but it's my understanding that within templates if using Ids for selectors the hash needs to be escaped
I've attached a screenshot of the error I receive in the console that should hopefully make things clearer.
Please let me know if i can help any further
Thanks
Thomas
Here is how my scheduler is configured
01.
@(Html.Kendo().Scheduler<
TelerikScheduleViewModel
>()
02.
.Name("staffAvailability")
03.
.Height(300)
04.
.HtmlAttributes(new { data_bind = "bindDate:start, filterBy:Staff, visible:Staff.length" })
05.
.Timezone("Europe/London")
06.
.Mobile(MobileMode.Auto)
07.
.MajorTick(120)
08.
.Editable(false)
09.
.ShowWorkHours(true)
10.
.Footer(false)
11.
.AutoBind(false)
12.
.Views(views =>
13.
{
14.
views.TimelineView(timeline =>
15.
{
16.
timeline.Footer(false);
17.
timeline.Groups(group => group.Resources("StaffResources").Orientation(SchedulerGroupOrientation.Vertical));
18.
timeline.EventTemplateId("some-event-template");
19.
});
20.
21.
})
22.
.DataSource(dataSource => dataSource
23.
.ServerOperation(false)
24.
.Events(e => e.Change("staffOnChange").RequestStart("staffRequestStart"))
25.
.Read(read => read.Action("ListStaffSessions", "Calendar").Data("getStaffAttendance"))
26.
).Events(e => e.DataBound("dataBoundAttendanceControl").DataBinding("dataBindingAttendanceControl"))
27.
)
I have a requirement to show total of column value on footer of the grid. I have created method to calculate total for each column and calling the same method on grid data bound.
I have applied paging in kendo grid, so while changing page the total value also getting changed, means the total in footer showing only for particular page records.
But i have requirement to show total value of column for all records in footer even if paging is there.
function CalculateTotal() {
var currentDataItem = $("#gridLiabilitySchedules").data("kendoGrid").dataItem($(this).closest("tr"));
for (var i = 0; i < grid.dataSource._data.length; i++) {
totalOriginalBudget = totalOriginalBudget + grid.dataSource._data[i]["OriginalBudget"];
totalAwardValue = totalAwardValue + grid.dataSource._data[i]["AwardValue"];
totalBuyingGainLoss = totalBuyingGainLoss + grid.dataSource._data[i]["BuyingGainLoss"];
totalCurrentBudget = totalCurrentBudget + grid.dataSource._data[i]["CurrentBudget"];}}
function LiabilitySchedulesGrid_DataBound(e) {
$('#hdnLiabilitySchedulesremovedata').val(false);
CalculateTotal();
$('#hdnLiabilitySchedulesGridValCount').val($('#gridLiabilitySchedules').data('kendoGrid').dataSource.total() == 0 ? "" : "1");
}
Please provide me a solution to show total of column value for all records in footer of grid with paging.
Thanks
I have two dropdowns, the second "cascading" from the first. This works fine except that when the user first goes into the page, the model has the values for the first and second dropdowns (Model.ProgramID and Model.StrategyID). The first dropdown selects the correct item in the list, but the second dropdown (the cascade one) does not automatically select the item equal to the value from the model, it just selects the first item in the list. If I turn cascading "off" and just load them without cascading stuff set, they both get set to the correct selected items in their respective dropdowns based on the values in the model.
<
div
class
=
"form-input-group"
>
<
label
>Program</
label
>
@(Html.Kendo().DropDownList()
.Name("ProgramID")
.DataTextField("Display")
.DataValueField("Value")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select")
.DataSource(s =>
{
s.Read(r =>
{
r.Action("RemoteDataSource_GetFirmPrograms", "DropDownList", new { userAccountID = Model.UserAccountID, firmID = Model.FirmID });
});
})
.Height(290)
)
</
div
>
<
div
class
=
"form-input-group"
>
<
label
>Strategy</
label
>
@(Html.Kendo().DropDownList()
.Name("StrategyID")
.DataTextField("Display")
.DataValueField("Value")
.HtmlAttributes(new { style = "width:100%" })
.OptionLabel("Select")
.DataSource(s =>
{
s.Read(r =>
{
r.Action("RemoteDataSource_GetFirmStrategies", "DropDownList").Data("filterStrategies");
})
.ServerFiltering(true);
})
.Height(290)
.AutoBind(true)
.CascadeFrom("ProgramID")
)
</
div
>
Hello,
I defined my class field “TeamCode” as string type and it only accept 4 characters. I want edit box stop accept any characters more than it's length limitation. if user try to enter 5th character in the box the cursor should not move since max length defined on that box is 4. It works well in regular Kendo TextBox. But it does not work on Kendo grid cell when do the same thing. Length limitation does not happen in the cell except when cell lose cursor. Is anyone have an idea to make it work? (Below are partial of code). Thanks in advance.
Field in class:
[StringLength(4, MinimumLength = 4, ErrorMessage = "{0} must be 4 characters.")]
[DisplayName("Team Code")]
public string TeamCode { get; set; }
Code take action in individual textbox:
@Html.Kendo().TextBoxFor(model => model.TeamCode).HtmlAttributes(new { maxlength = 4})
Code does not take action in Kendo Grid cell editor:
...
columns.Bound(m => m.TeamCode).Width(100).HtmlAttributes(new { maxlength = "4"});
...
function
poWizardReset(e) {
if
(e.sender.currentStep.options.index === 0) {
$initPo.val(
''
);
$initPart.val(
''
);
$initLineItem.value(
''
);
$initAckId.value(0);
}
if
(e.sender.currentStep.options.index === 1) {
$initVerifyPo.val(
''
);
$initVerifyStockRoom.val(
''
);
$initVerifySupCode.val(
''
);
$initVerifySupName.val(
''
);
$initVerifyLineItem.val(
''
);
$initVerifyPart.val(
''
);
$initVerifyUoM.val(
''
);
$initVerifyAllowed.value(0);
}
if
(e.sender.currentStep.options.index === 2) {
$finalPart.val(
''
);
$finalPo.val(
''
);
$finalLineItem.val(
''
);
$finalAllowed.value(0);
$finalPrinterId.value(0);
$finalPackingSlip.val(
''
);
$finalQuantity.value(0);
$finalCarrierTracking.val(
''
);
$finalCarrierId.value(0);
$finalMulti.checked(
false
);
}
if
(e.sender.currentStep.options.index === 3) {
}
}
On the reset button click and the corresponding event, how would I navigate between the steps?
How can I have two or more TextBoxes in same line?
<
div
class
=
"form-group row"
>
@Html.LabelFor(m => m.MobileNumber, new { @class = "col-sm-2 col-form-label" })
<
div
class
=
"col-sm-4"
>
@Html.TextBox("MobileNumberPrefix", "+9715", new { @class = "k-textbox", style = "width: 28%;", @readonly = "readonly" })
@Html.TextBoxFor(m => m.MobileNumber, new { maxlength = "8", @class = "k-textbox", style = "width: 100%;", placeholder = "9715XXXXXXXX" })
</
div
>
@Html.LabelFor(m => m.UserEmail, new { @class = "col-sm-2 col-form-label" })
<
div
class
=
"col-sm-4"
>
@Html.TextBoxFor(m => m.UserEmail, new { maxlength = "150", @class = "k-textbox", style = "width: 100%;", placeholder = "Email Address" })
</
div
>
</
div
>
I want to show MobileNumberPrefix and MobileNumber together in the col-sm-4