I am trying to use the grid and pagers, but I have some requirements to meet that I cannot find how to do. I need to:
How do I do this with the drid? This is in .NET Core 3 Razor Pages
https://demos.telerik.com/aspnet-core/listbox/index
See attached screenshot
I'm using Firefox 70 64bit
I've got a really strange issue happening.
I've got a DropDownList binding to a remote action in one of my controllers.
When rendering my drop down inside of a asynchronous View Component, the control fails to intialize. No javascript errors, nothing.
I know that the binding is working properly, because as soon as I move the control to a view instead of a view component view, the control initializes fine.
I do not have Deferred() on the control because I know that for partial views the scripts need to be inlined. I am also fairly certain it is not an issue with Deferred, because I have other controls within partial views (not view components) within the app, and the controls load fine.
This issue is specific to asynchronous view components.
This is the control code inside my view component view:
@(Html.Kendo().DropDownList()
.Name("company-selector")
.DataTextField("Text")
.DataValueField("Value")
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetCompanies", "SuperAdmin");
});
})
.HtmlAttributes(new { style = "width: 100%" })
)
And this is my controller data binding (again which works fine when control is not inside a view. Also hits a break point even with the control in a view component, but the control isn't initialized)
public List<SelectListItem> GetCompanies()
{
var companies = _companyRepository.GetCompanies().ToList();
var companiesSelectList = companies.Select(m => new SelectListItem
{
Text = m.Name,
Value = m.Id.ToString()
}).ToList();
return companiesSelectList;
}
1. Is it possible to use a model for the grid definition and another model for the Add/Edit template?
My example:
01.
@(Html.Kendo().Grid<UserDto>()
02.
.Name(
"usersGrid"
)
03.
.Editable(e => e.Enabled(
true
)
04.
.Mode(GridEditMode.PopUp)
05.
.TemplateName(
"EditUser"
)
06.
.AdditionalViewData(
new
{ApiUrl = Model.ApiUrl}))
07.
.DataSource(dataSource =>
08.
dataSource
09.
.Ajax()
10.
.ServerOperation(
true
)
11.
.Model(model =>
12.
{
13.
model.Id(p => p.Id);
14.
model.Field(p => p.Created).Editable(
false
);
15.
})
16.
.Read(read =>
17.
read.Url(Model.ApiUrl +
"/users/get"
)
18.
.Type(HttpVerbs.Get)
19.
)
20.
.Create(acc => acc.Url(Model.ApiUrl +
"/users/create"
)
21.
.Type(HttpVerbs.Post)
22.
)
23.
.Update(acc => acc.Url(Model.ApiUrl +
"/users/update"
)
24.
.Type(HttpVerbs.Put)
25.
)
26.
.Destroy(acc => acc.Url(Model.ApiUrl +
"/users/delete"
)
27.
.Type(HttpVerbs.Post)
28.
)
EditUser.cshtml:
1.
@model CreateUserModel
2.
3.
<input type=
"hidden"
asp-
for
=
"Id"
/>
The reason I'm asking is that the 2 models have different columns, the grid model has more columns, needed for display. The edit model has columns for edit, metadata for edit.
2. Is it possible to attach and send a parameter to the datasource CRUD actions when the action has Url instead of Action name, Controller Name?
1.
.Update(acc => acc.Url(Model.ApiUrl +
"/users/update"
)
2.
.Type(HttpVerbs.Put)
3.
)
I have a grid that is defined as such:
@(Html.Kendo().Grid<
JohnstonePortal.Data.Entities.Announcement
>()
.ToolBar(tools =>
{
tools.Create();
})
.Name("grdAnnouncements")
.AutoBind(true)
.Events(x=> x.Edit("onEdit"))
.ToolBar(tools =>
{
tools.Search();
})
.Columns(columns =>
{
columns.Bound(c => c.Text).Width(500).Title("Announcements");
columns.Command(command =>
{
command.Edit();
command.Destroy();
}).Width(250);
})
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("_EditAnnouncement"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model=>
{
model.Id(ann => ann.Id);
})
.Read(read => read.Action("AnnouncementsRead", "Announcements"))
.Create(create => create.Action("AddAnnouncement", "Announcements"))
.Update(update => update.Action("UpdateAnnouncement", "Announcements"))
.Destroy(destroy => destroy.Action("DeleteAnnouncement", "Announcements"))
))
and the controller is defined as:
public IActionResult AddAnnouncement([DataSourceRequest]DataSourceRequest request, Announcement announcement)
{
if (ModelState.IsValid)
{
_db.Add<
Announcement
>
(new Announcement
{
DateCreated= DateTime.Now,
Text = announcement.Text
});
_db.SaveChanges();
}
// Return a collection which contains only the newly created item and any validation errors.
return Json(new[] { announcement }.ToDataSourceResult(request, ModelState));
}
public IActionResult UpdateAnnouncement([DataSourceRequest]DataSourceRequest request, Announcement announcement)
{
if (ModelState.IsValid)
{
var editAnnouncement = _db.Announcements.Single(x => x.Id == announcement.Id);
editAnnouncement.Text = announcement.Text;
_db.SaveChanges();
}
// Return a collection which contains only the updated item and any validation errors.
return Json(new[] { announcement }.ToDataSourceResult(request, ModelState));
}
The odd thing is, if I update a row when the page loads, it behaves as normal but if I create one and then update another one, It calls the add endpoint first with the original model that was passed the first time to it and then calls the update on the new model that was intended. This obviously results in a duplicate of the first item that was created. I am not sure what I am doing incorrectly here.
Really liking what I see so far. Ok, so one of the first things ill need to do on this next project is display 3 different formatted lists, where the items are populated from a list of objects. See attached screenshot. Basically, I need to load the first list, which is used to make a selection to populate the 2nd and likewise the 3rd. Actually the 3rd "list" wont be a list, but a detail grid. Each step should not refresh the whole page, but just update the next portion, eg. partial page updates. Hope that is clear.
What sets of components could be used in this approach?
Possibly use a PanelBar for the leftmost list, as well as the 2nd?
https://demos.telerik.com/aspnet-core/panelbar/index
However, for the lists themselves, on a previous project that used the UI for Angular library, I think I simply used Bootstrap listgroups
What library component could replicate this?
https://getbootstrap.com/docs/4.0/components/list-group/
The grid should be straighforward, but should it go in a panel
Hello,
I checked kendo version 2018.02.620 with Core 2.2 and Core 3.
in the first case, the app works successfully
in the second case, the app does not work.
Have you a plan to release a fix in order apps to work with kendo version 2018.02.620 and Core 3?
Thanks in advance for your answer.
No not by me :)
See attached screenshot. The last few days Ive noticed several posts that are obviously spam promotting various sales gimmicks etc.
I just installed the Telerik UI for ASP.Net Core VS extension and when I start a new project, I get 3 options of the same thing?