Hi,
I have created a grid with 10 columns, but I need two of them to be editable.
1 - I don't want to use inline buttons [Edit], [Save] or [Delete];
2 - I don't want the other cells to be editable, only those two I need.
3 - I want the user to click in a cell, opening it for edition;
4 - I want to save those two values only if both of them are filled out;
5 - I don't mind having a server request when the user change from once cell to another (among the editable ones).
Is it possible to do? If not, could you give me some options of how I could manage it in a Telerik grid?
Thanks.
Hello,
I am evaluating Kendo UI for ASP.NET Core for our team.
We need to be able to render different editors in the same column. I have attached a screenshot with an example grid:
When the user changes the option in a DropDownList, data is send to the server, and an updated row is returned back to the client (for example, with a different price).
Is it possible to implement this grid with Kendo UI? Could you provide a working example for us?
Best regards,
Kaan
Are there any asp.net core examples for embedding controls in a grid? I am trying to show a progressbar along with my row data. The data fields display fine, but not the progress bar. I've attached a couple screen images - one showing a list version of what I am trying to do and the second of my results. Here is how my grid is setup:
@(Html.Kendo().Grid<ITFactory.Models.ChartModels.FeatureProgress>()
.Name("FeatureProgress")
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read
.Action("GetFeatureProgress", "Dashboards")
.Data("FeatureProgressFilter")
)
)
.Columns(columns =>
{
columns.Bound(c => c.FeatureName);
columns.Bound(c => c.EstimatedCardCount);
columns.Bound(c => c.CompletedCardCount);
columns.Template(" ").Title("ProgressBar");
})
.ClientRowTemplate(
"<tr>" +
"<td>" +
"#:FeatureName#" +
"</td>" +
"<td>" +
"#: EstimatedCardCount#" +
"</td>" +
"<td>" +
"#: CompletedCardCount#" +
"</td>" +
"<td>" +
"@(Html.Kendo().ProgressBar()" +
".Name(Progress#:FeatureName#)" +
".Type(ProgressBarType.Percent)" +
".Max(#: EstimatedCardCount#)" +
".Value(#: CompletedCardCount#))" +
"</td>" +
"</tr>"
)
.Sortable()
)
Hello,
I am trying to use a DDL (This happens to both HTML Helper & Tag Helper) With a 'Option-Label'. however, every time this is applied it causes the DDL to deformat. Please see the attached pictures. Do you have any idea why this is happening?
I have an issue where the DIV on the bottom of the edit templates is not filling the width of the window. Please see attached.
I have added the following .css which seems to control it but if the width is set to "auto" or "100%" it looks like the attachment. If I change to to a specific pixel width it sizes but as I remember this should not need to be manually handled.
<style>
div.k-edit-buttons.k-state-
default
{
/*width:560px;*/
width
:
100%
;
}
</style>
The grid does have the height and width set in the column declarations
.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Template").Window(x => x.Width(600).Height(500)))
Please advise
Have a grid and context menu defined in a partial view. When the grid is positioned where the page is scrolled to the top then the context menu opens at point of right mouse click. But as soon as page is scrolled down and grid is partially moved up and hidden from view, then the context menu is not positioned correctly on the y axis.
@using Kendo.Mvc.UI
@using NEP_Deconstruction.Data
@{
const string ValuesSuffix = "-Values";
}
@(Html.Kendo().Grid<NEP_Deconstruction.Data.Models.ApprovalViewModel>()
.Name("approval_grid")
.Columns(columns =>
{
columns.Bound(o => o.ID)
.EditorTemplateName("IntegerReadonly");
columns.Bound(o => o.ApprovalNumber)
.EditorTemplateName("IntegerReadonly");
columns.Bound(o => o.SourceCount)
// other column definitions
columns.Bound(o => o.Comment);
columns.Command(command =>
{
command.Edit().Text(" ").IconClass("k-icon k-i-edit").HtmlAttributes(new { style = "min-width: auto" });
command.Destroy().Text(" ").IconClass("k-icon k-i-delete").HtmlAttributes(new { style = "min-width: auto" });
}).Width(/*210*/ 125);
})
.ToolBar(toolbar => { toolbar.Create(); /*toolbar.Save();*/ })
.Editable(editable =>
{
editable.TemplateName("ApprovalPopupEditor");
editable.Mode(GridEditMode.PopUp);
})
.Resizable(c => c.Columns(true))
.Reorderable(c => c.Columns(true))
.Filterable()
.Groupable()
.Pageable(p => p.Numeric(false).PreviousNext(false))
.Selectable()
.Sortable()
.Scrollable(scrollable => scrollable.Virtual(true).Endless(true))
.ColumnMenu()
.HtmlAttributes(new { style = "height:430px;" })
.DataSource(dataSource => dataSource
.Ajax()
.Batch(true)
.PageSize(100)
.ServerOperation(true)
.Events(events => events.Error("error_handler")
.RequestStart("approval_grid_requeststart"))
.Model(model =>
{
// ***
// various default values set
})
.Read(read => read.Action("Read", "Approval"))
.Create(create => create.Action("Create", "Approval"))
.Update(update => update.Action("Update", "Approval"))
.Destroy(destroy => destroy.Action("Destroy", "Approval"))
)
.Events(events => events.Change("approval_grid_change")
.DataBound("approval_grid_databound")
.Edit("approval_grid_edit")
.Save("approval_grid_save"))
)
@(Html.Kendo().ContextMenu()
.Name("approval_menu")
.Target("#approval_grid")
.Filter("tr[role='row']")
.Orientation(ContextMenuOrientation.Vertical)
.Items(items =>
{
items.Add()
.Text("Refresh");
//.ImageUrl(Url.Content("~/shared/web/toolbar/reply.png"))
items.Add()
.Text("Edit");
items.Add()
.Text("Delete");
})
.Events(e => e.Select("approval_menu_select"))
)
I have found many examples of cascading from DropDownListFor to DropDownListFor using the CascadeFrom() event. However, I need to get a similar effect from using a DropDownListFor to a MultiSelectFor. Since the MultiSelectFor does not have the CascadeFrom() event, how would I go about making it work?
Example
- The user selects an item from the DropDownListFor.
- The MultiSelectFor DataSource will be updated based on the selected item of the DropDownListFor.
- The MultiSelectFor will be enabled/disabled based on DropDownListFor.
Found the following JS sample but it does not seem to really apply to asp.net core.
https://docs.telerik.com/kendo-ui/controls/editors/multiselect/how-to/cascade/cascade-from-ddl
Is there a way to ignore a model property when posting to an action from a grid? Delete, create, update etc. The property needs to be loaded with the grid in the read action but not posted to the delete, create and update actions.
Hello,
I'm running a .net core 2.1 mvc application.
I built a custom theme from the theme builder with the bootstrap 4 template (not many changes to this base template).
When i updated from 2018.3.1017 to 2019.1.115 i started having problems with datepickers with weeknumbers. See attached files.
If i downgrade to 2018.3.1017 the dates fit as expected in the datepicker.
Best regards,
Sebastian
Hi,
I have used the telerik theme with Scss but today I found a problem with the autocomplete. After the file is compiled the generated class is
.k-autocomplete {
padding-right: calc( calc( 0.75rem + 17px)); }
.k-rtl .k-autocomplete, .k-autocomplete[dir="rtl"] {
padding-left: calc( calc( 0.75rem + 17px));
padding-right: 0; }
This is not the only class that generates this. The above is not a valid use of calc function in IE