I have review this form discussions but cannot get this working.
How to add a delete button to editor template Grid Popup? in Kendo UI for jQuery | Telerik Forums
How can I add an additional update button inside of my grid popup editor template? I have the exact same requirements as discussed in
Add extra button to Grid popup editor template in UI for ASP.NET MVC | Telerik Forums
Perhaps little different as I am using a custom popup editor template called RecordEdit.cshtml as outlined in ASP.NET MVC Data Grid Component Use Custom Popup Editors - Telerik UI for ASP.NET MVC@(Html.Kendo().Grid//....
//....
.Events(ev=>ev.Edit("onEdit"))
.Editable
(
editable => editable.Mode(GridEditMode.PopUp)
.TemplateName("RecordEdit")
.Window(e => e.Width(1400).Height(1200))
)
)
function onEdit() {
$('<a class="k-button k-button-icontext k-grid-delete" href="\\#"><span class="k-icon k-delete"></span>Delete</a>').insertAfter(".k-grid-cancel");
}
Hi,
I have a kendo grid, user wants to enter html data in one of the column.
user clicks edit button on the grid row then an edit form opens as popup. This edit form is a model.cshtml with all the fields of the model on it. This edit cshtml does not have any button on it. "Update" button is created on fly.
User enters html data (tags etc) and clicks Update button then it return 401 error. Which I think is because its taking the tags as an injection attack. If user enters normal text then it works fine.
what can do to make the edit form allow submit html tags data? can you please help me?
Thanks
CNS
Hello,
I am struggling with why my Save button on my Kendo Grid is not calling my update action (inline edit mode). The edit column uses a dropdown list editor template. The dropdown list editor fills fine with my values and I can select one. But when I click the Save button (from toolbar) it does not call my add function in the controller. I see no errors in F12 utility. Any help is appreciated as I've been struggling with this all day.
Here is my relevant code:
Edit Grid:
<style>
.k-grid-content td {
position: relative;
}
.k-grid .k-grid-header .k-header .k-link {
height: auto;
}
.k-grid .k-grid-header .k-header .k-column-title .k-header {
white-space: normal;
}
</style>
@{
ViewData["Title"] = "Administration";
}
<div style="margin-left:10px; margin-top:10px">
<div>Manage Assignees</div>
<div class="row" style="margin-top:10px">
<div class="col-auto">
@(
Html.Kendo().Grid<Assignees>()
.Name("grid")
.Width("250px")
.Columns(columns =>
{
columns.Bound(p => p.SortName).Width(130).Title("Assignee").EditorTemplateName("AssigneesAdd");
})
.Sortable(true)
.Navigatable()
.Scrollable(scr => scr.Height(200))
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Selectable()
.AutoBind(true)
.ColumnMenu(false)
.ToolBar(tb =>
{
tb.Create().Text("New");
tb.Save().Text("Save").CancelText("Cancel");
})
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("GetAssigneesForAddGridDisplay", "Home").Type(HttpVerbs.Post))
.Update(update => update.Action("AddAssigneeRecord", "Home").Type(HttpVerbs.Post))
.Destroy(destroy => destroy.Action("DeleteAssigneeRecord", "Home").Type(HttpVerbs.Post))
.Events(e => e.Error("onError"))
.Batch(false)
.Model(model =>
{
model.Id(p => p.SortName);
model.Field(p => p.SortName);
})
)
.Deferred()
)
</div>
</div>
</div>
@section Scripts{
@Html.Kendo().DeferredScripts()
<script>
$(document).ready(function () {
});
function onError() {
@*window.location='@Url.Action("Index", "Error")';*@
}
</script>
}
===============================================
Controller Add Function called by .Update event in grid
[HttpPost]
public async Task<ActionResult> AddAssigneeRecordAsync([DataSourceRequest] DataSourceRequest request, SelectListItem assigneeRecord)
{
try
{
await _dataService.AddAssigneeRecordAsync(assigneeRecord);
return Json(await new[] { assigneeRecord }.ToDataSourceResultAsync(request, ModelState));
}
catch (Exception ex)
{
await _dataService.LogExceptionAsync("HomeController", "AddAssigneeRecordAsync", _username, ex);
return BadRequest();
}
}
===============================================
DropDownList editor template("AssigneesAdd"):
@using Estimating_State_Licensing_Certification.Controllers
@using Kendo.Mvc.UI
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@model string;
@(Html.Kendo().DropDownListFor(m => m)
.DataValueField("Text")
.DataTextField("Text")
.Filter("startswith")
.OptionLabel("Select an Employee")
.DataSource(source =>
{
source.Read(read =>
{
//this is the edit template used for the Admin assignee grid for adding NEW assignees
read.Action("GetAssigneesForAdminAdd", "Home").Type(HttpVerbs.Post);
});
})
)
==============================================
"Assignees" class/entity used by the grid
public class Assignees
{
public string? SortName { get; set; } = string.Empty;
}
Thanks!
Acadia
Hello everyone,
I have a little problem with editing my grid and I hope you can help me.
I am currently developing a grid (Telerik UI for ASP.NET MVC Grid) in which you can open another grid using a button at the end of the row. In this second grid it is possible to select one or more employees (Inline Editing with a DropDown) for the previous entry. In addition to the actual employee, there is another column where you can set a checkbox to "true" or "false". You can create a new entry with the button on the top left and you can edit or delete it with the two buttons on the right in the line.
Now to my question: My plan is that the name of the employee can only be changed when creating the entry. If you click on Edit, the name should no longer be editable, only the checkbox should be.
How exactly do I do this?
I had the idea to set the field "UserId" to .Editable(false) under .Model. But if I do that, I can neither change the value when creating nor when editing. When creating the entry, the drop-down menu for selecting an employee should be available, but not when editing.
In the attachments I have pictures showing the grid exactly.
Thanks in advance
Lars
@(Html.Kendo().Grid(Model)
.Name("AssignmentsGrid")
.Columns(c =>
{
c.ForeignKey(m => m.UserId, (IEnumerable) ViewData["users"], "Id", "Name").EditorTemplateName("ProjectUserDropdown");
c.Bound(m => m.Resigned).ClientTemplate("<input type='checkbox' #= Resigned ? checked='checked' :'' # disabled='disabled' />");
c.Command(command =>
{
command.Edit();
command.Destroy();
});
})
.ToolBar(t => t.Create())
.Events(events =>
{
events.Edit(@<text>function(e) { if(e.model.isNew()) { e.model.set('ProductionOrderId', @ViewData["productionOrderId"]); } else { $('[name="ProjectManagerId"]').attr("readonly", true); }} </text>);
})
.DataSource(s => s
.Ajax()
.Create(c => c.Action("UserAssignmentAdd", "ProductionOrder", new {area = "Sktcrm"}))
.Read(r => r.Action("UserAssignmentRead", "ProductionOrder", new {area = "Sktcrm"}).Data(@<text>function(e) { return { productionOrderId: @ViewData["productionOrderId"] }; }</text>))
.Update(u => u.Action("UserAssignmentUpdate", "ProductionOrder", new {area = "Sktcrm"}))
.Destroy(d => d.Action("UserAssignmentDelete", "ProductionOrder", new {area = "Sktcrm"}))
.Model(m =>
{
m.Id(model => model.UserId);
//m.Field(t => t.UserId).Editable(false);
})
.ServerOperation(false))
.Scrollable()
.Sortable()
.Filterable())
function onSave(e)
{
//console.log(e.container.find("input[name=eTmfCompletenessComment]").val());
//if (e.values.eTmfCompletenessComment.length > 3)
//{
// e.values.eTmfCompletenessActive == true;
//}
//if (e.container.find("input[name=eTmfCompletenessComment]").val().length > 3)
//{
// console.log(e.container.uid);
// //checkbox cell is in editmode
// e.container.find("input[name=eTmfCompletenessActive]").checked == true;
// //e.container.item.find("input[name=eTmfCompletenessActive]").checked == true;
//}
$(document).on("keyup", "#eTmfCompletenessComment", function () {
function dirtyField(data, fieldName) {
if (data.dirty && data.dirtyFields[fieldName]) {
return "<span class='k-dirty'></span>"
}
else {
return "";
}
}
var commentcheck = $(this).val()
console.log('$(this).val() =', $(this).val())
var grid = $('#Grid').data("kendoGrid");
var items = grid.items();
if (commentcheck.length > 3) {
//var gc = $(this).parents(".k-")
$(this).parents(".k-master-row").find('input[type="checkbox"]').prop("checked", true);
//items.each(function () {
var dataItem = $(this).parents(".k-grid-cell").find('input[type="hidden"]');
set.dataItem.dirty = true;
dataItem.set(true);
dataItem.dirtyField.set(true, eTmfCompletenessActive)
//})
}
})
console.log("onSave");
}
i am getting the error when i use @html.kendo()
it showing are you missing any directives
>please suggest any solution
In Main View
==========
columns.Bound(p => p.HuomName).Width(50).ClientTemplate("#=HuomName#").Title("H.UOM").Filterable(false).EditorTemplateName("HuomTemplate");
In Editor Template View
=====================
@(Html.Kendo().ComboBoxFor(m => m)I'm using EditorTemple to populate dropdown while in edit mode. I have my editor template in the Views/Shared/EditorTemplates folder.
But when I press the Edit button it does nothing and shows a simple text box instead of a dropdown.
I'm using dynamic properties for binding instead of the view model, all the references I've looked at are based on the view model.
Is there any way to accomplish the same with dynamic property binding?
Here's my code of Grid:
@(Html.Kendo().Grid<object>()
.Name("Grid")
.AutoBind(true)
//.Events(ev => ev.Filter("setGridFilters").DataBound("setAutoFitColumn"))
.Columns(columns =>
{
columns.AutoGenerate(true);
columns.Bound("status").Title("Lead Status").Width(100).EditorTemplateName("LeadStatusList")
.Filterable(a=>a.Multi(true).Search(true).BindTo(new[] {
new{
status="None"
},
new{
status="Initial Call Scheduled"
},
new{
status="Working"
},
new{
status="Nurturing"
},
new{
status="Unqualified"
},
new{
status="Qualified"
}
}));
columns.Bound("ownerId").Title("Owner").Width(100).Filterable(a => a.Multi(true).Search(true).DataSource(ds => ds.Custom()
.Type("aspnetmvc-ajax")
.Transport(transport =>
transport.Read(read => read.Action("", "", new { field = "ownerId" }))
)
.Schema(schema => schema
.Data("names")
)));
columns.Bound("eventBookedC").ClientTemplate("<div title='#= title #'>#:getEventStatus(eventBookedC) #</div>").Title("Event Booked").Width(70)
.Filterable(a => a.Multi(true).Search(true).BindTo(new[] {
new{
eventBookedC="Null"
},
new{
eventBookedC="True"
},
new{
eventBookedC="False"
}
}));
columns.Command(command => { command.Edit();}).Width(150);
})
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Filterable()
.Scrollable(sc => sc.Endless(true))
.Groupable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(true))
.ToolBar(e =>
{
e.Search();
e.Custom().Text("Create New").HtmlAttributes(new { id = "btnCreateNew", @class = "btn btn-primary" });
})
.Pageable(p => p.Numeric(false).PreviousNext(false).Refresh(true))
.Events(events => events
.Sort("onSorting")
.Filter("onFiltering")
.Group("onGrouping")
.Page("onPaging")
.GroupCollapse("onGroupCollapse")
.GroupExpand("onGroupExpand")
.DataBound("onDataBound")
.ColumnReorder("onColumnReordering")
.Edit("edit")
)
.DataSource(dataSource => dataSource
.Custom()
.Type("aspnetmvc-ajax")
.PageSize(500)
.ServerPaging(true)
.ServerFiltering(true)
.ServerSorting(true)
.ServerGrouping(true)
.Transport(transport =>
{
transport.Read(read => read.Action("", ""));
transport.Update(update => update.Action("", ""));
}
)
.Schema(schema => schema
.Data("data")
.Total("total")
.Model(m=>m.Id("id"))
)
)
)
Here's my editor template -> LeadStatusList.cshtml:
@using Kendo.Mvc.UI
@(Html.Kendo().DropDownList()
.Name("Status")
.DataTextField("Text")
.DataValueField("Value")
.BindTo(new List<SelectListItem>() {
new SelectListItem() {
Text = "None",
Value = "None"
},
new SelectListItem() {
Text = "Initial Call Scheduled",
Value = "Initial Call Scheduled"
},
new SelectListItem() {
Text = "Working",
Value = "Working"
},
new SelectListItem() {
Text = "Nurturing",
Value = "Nurturing"
},
new SelectListItem() {
Text = "Unqualified",
Value = "Unqualified"
},
new SelectListItem() {
Text = "Qualified",
Value = "Qualified"
}
})
.Value("1")
.HtmlAttributes(new { style = "width: 100%" })
)