I hope this is an easy fix. I have a DropDownList in my Grid which seems to be working fine except the selected value is not being returned to the Controller Action. For example, when I select a new value for "Type" below, it still shows the original value in the model in the Controller. See "<--" NOTES BELOW.
Thanks very much for the help.
*** MODEL ***
public class SelectValueViewModel
{
public int Id { get; set; }
public string Code { get; set; }
public string Description { get; set; }
[UIHint("SelectValuesTypeDropDown")]
public string Type { get; set; } // <-- TRYING TO UPDATE THIS VALUE WITH THE DROP DOWN.
public List<SelectListItem> CodeTypes { get; set; }
}
*** VIEW ***
@(Html.Kendo().Grid<CCMC.View_Models.SelectValueViewModel>()
.Name("SelectValuesGrid")
.Columns(c =>
{
c.Bound(m => m.Code).Width(100);
c.Bound(m => m.Description).Width(100);
c.Bound(m => m.Type).Width(100);
c.Command(command => { command.Edit(); }).Width(200);
c.Command(command => command.Destroy()).Width(150);
})
.ToolBar(toolbar => toolbar.Create())
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Pageable()
.Sortable()
.Scrollable()
// .HtmlAttributes(new { style = "height:550px;" })
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(20)
.Model(model =>
{
model.Id(sv => sv.Type);
// model.Field(sv => sv.Id).Editable(false);
})
.Events(events => events.Error("error_handler"))
.Read(read => read.Action("Read", "SelectValues"))
.Update(update => update.Action("Edit", "SelectValues").Data("sendAntiForgery"))
.Destroy(destroy => destroy.Action("Delete", "SelectValues"))
)
)
*** EDIT TEMPLATE ***
@model CCMC.View_Models.SelectValueViewModel
@(Html.Kendo().DropDownListFor(m => m.Type)
.DataValueField("Value")
.DataTextField("Text")
.BindTo(Model.CodeTypes)
.BindTo((System.Collections.IEnumerable)ViewData["SelectValueTypes"])
)
*** CONTROLLER ***
[AcceptVerbs("Post")]
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<JsonResult> Edit([DataSourceRequest] DataSourceRequest request, SelectValueViewModel model)
{
model.Type // <--- THE VALUE IS NOT UPDATED HERE. STILL HAS THE ORIGINAL VALUE.
}
Hello,
How to select an item by Id or datasorce value?
robert
Hello,
Is it possible to have scrolling in the Vertical Timeline?
(I have fix heigh of my views)
robert
Hello,
is there a way to overwrite the browsers (chrome and firefox) default behavior for middle or right click on custom buttons in a grid?
We are trying to get the middle mouse click on a custom command button in a grid.
With this line we only get the left mouse click, the middle and right are ignored/use the default browser commands
command.Custom("Details").Text(" ").Click("showDetails").IconClass("fas fa-eye");
Middle - new tab
Right - context menu
We tryed using JS on the mousedown event but it didn't work and in the "showDetails" method we only get the left mouse button
$('.k-grid-Details').on('mousedown', function (e) {
debugger
if (e.which == 1) {
e.preventDefault();
alert("middle button");
});
I am getting complains from our customers that they cannot right click and paste into the Editor tool. I tested this in IE11, Chrome, and Firefox. The only one that could do a right-click and paste was Chrome. The other browsers, you have to Ctrl+V.
Is there a fix for this?
Here is my code for the editor:
@(Html.Kendo().EditorFor(o => o.Content)
.Encoded(false)
.Resizable(true)
.Tools(tools => tools
.Clear()
.Bold()
.Italic()
.Underline()
.Strikethrough()
.JustifyCenter()
.JustifyFull()
.JustifyLeft()
.JustifyRight()
.InsertUnorderedList()
.InsertOrderedList()
.Indent()
.Outdent()
.CreateLink()
.Unlink()
.TableEditing()
.Formatting()
.CleanFormatting()
.FontName()
.FontSize()
.ForeColor()
.BackColor()))
My kingdom for a good sample.
I am trying to use a custom popup template with a couple of dropdownlists and have them cascade. This is in asp.net core (NOT MVC).
My big questions are how to do the cascade and pass forgeryToken with it and how to receive the cascade call (i.e. the function signature). Below is what I have now and it doesn't work.
Another question I have is, what should the signature of the c# function be for the second (traits) dropdown be on the server.
Currently, I have:
public ActionResult OnPostCropsReadAsync([DataSourceRequest] DataSourceRequest request)
How do I get the id of the first dropdownlist to know how to filter?
THanks … Ed
Here's the popup template and below that is the calling grid.
01.
@model TCWP.Pages.IndexModel.CertificateModel
02.
@{
03.
ViewData["Title"] = "Certificate";
04.
}
05.
<
container
>
06.
<
div
class
=
"row"
>
07.
<
div
class
=
"col-md-6"
>
08.
<
div
asp-validation-summary
=
"ModelOnly"
class
=
"text-danger"
></
div
>
09.
<
div
class
=
"form-group"
>
10.
<
label
>Crop</
label
>
11.
@(Html.Kendo().DropDownListFor(m => m.CropId)
12.
.DataValueField("CropId")
13.
.DataTextField("CommonName")
14.
.AutoBind(true)
15.
.HtmlAttributes(new { style = "width:100%" })
16.
.AutoWidth(true)
17.
.Filter(FilterType.Contains)
18.
.DataSource(source =>
19.
{
20.
source
21.
.Ajax()
22.
.PageSize(40)
23.
.Read(r => r.Url("?handler=CropsRead")
24.
.Type(HttpVerbs.Post).Data("forgeryToken")
25.
);
26.
}).SelectedIndex(0)
27.
)
28.
29.
</
div
>
30.
<
div
class
=
"form-group"
>
31.
<
label
>Trait</
label
>
32.
@(Html.Kendo().DropDownListFor(m => m.TraitId)
33.
.DataValueField("TraitId")
34.
.DataTextField("TraitDesc")
35.
.AutoBind(true)
36.
.HtmlAttributes(new { style = "width:100%" })
37.
.AutoWidth(true)
38.
.Filter(FilterType.Contains)
39.
.DataSource(source =>
40.
{
41.
source
42.
.Ajax()
43.
.PageSize(40)
44.
.Read(r => r.Url("?handler=TraitsRead")
45.
.Type(HttpVerbs.Post).Data("GetCascadeData")
46.
);
47.
}).SelectedIndex(0)
48.
)
49.
50.
</
div
>
51.
</
div
>
52.
</
div
>
53.
</
container
>
54.
55.
<
script
type
=
"text/javascript"
>
56.
function GetCascadeData()
57.
{
58.
debugger;
59.
var tmp = $.extend(true, {}, forgeryToken(),
60.
{
61.
CropId = $("#Input_CropId").Input.val();
62.
});
63.
return tmp;
64.
65.
}
66.
</
script
>
01.
@(Html.Kendo().Grid<
IndexModel.CertificateModel
>()
02.
.Name("grid")
03.
.ToolBar(t =>
04.
{
05.
t.Create().Text("Add New");
06.
})
07.
.HtmlAttributes(new { style = "height: 850px;" })
08.
.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("CertificateEditTemplate")
09.
.Window(w => w.Title("Certificate").Width(650)))
10.
.Events(evt => { evt.Edit("OnEdit"); })
11.
.Columns(columns =>
12.
{
13.
columns.Bound(c => c.CertId).Width(100).Visible(false);
14.
columns.Bound(c => c.CropName).Width(150);
15.
columns.Bound(c => c.TraitName).Width(150);
16.
columns.Bound(c => c.UserFullName).ClientTemplate("#=UserFullName#").Width(150).Visible(false);
17.
columns.Bound(c => c.OriginCountryName).Width(150);
18.
columns.Bound(c => c.IssuingCountryName).Width(150);
19.
columns.Bound(c => c.YearIssued).Width(110)
20.
.HtmlAttributes(new { style = "text-align:right; " });
21.
// .HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" });
22.
columns.Bound(c => c.ExpirationDate).Width(150).Format("{0:d}").HtmlAttributes(new { style = "text-align:right; " });
23.
//.HeaderHtmlAttributes(new { style = "overflow: visible; white-space: normal" }); ;
24.
columns.Command(c =>
25.
{
26.
// c.Destroy().Text("Delete");
27.
c.Edit();
28.
}).Visible(User.IsInRole("Admin")).Width(85);
29.
columns.Command(c => c.Custom("Print").Click("OnRunReport").HtmlAttributes(new { style = "height:25px" })).Width(70);
30.
})
31.
.Resizable(resize => resize.Columns(true))
32.
.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
33.
.Scrollable()
34.
.Groupable()
35.
.Filterable()
36.
.Sortable()
37.
.Pageable() //p => { p.PageSizes(true); })
38.
.DataSource(ds =>
39.
ds.Ajax()
40.
.Batch(true)
41.
.Events(ev => ev.Error("errorHandler"))
42.
.ServerOperation(false)
43.
.Read(r => r.Url("?handler=CertsRead").Data("forgeryToken"))
44.
.Update(u => u.Url("?handler=CertsUpdate").Data("forgeryToken"))
45.
.Create(c => c.Url("?handler=CertsCreate").Data("forgeryToken"))
46.
.Model(m =>
47.
{
48.
m.Id(c => c.CertId);
49.
50.
})
51.
.PageSize(20)
52.
53.
)
MVC Telerik 2019.2.619; Windows 10; Visual Studio 2017
I have a grid on a view and as long as I don't scroll horizontally I can resize the columns. Once I move the horizontal scrollbar just a little the resize handle moves also. Instead of finding it on the line between the columns it is found over in the column header area. Any idea what I am missing here?
Rich
My controller code for the read:
[HttpPost]
public IActionResult IssuesGrid_Read([DataSourceRequest]DataSourceRequest request)
{
List<IssuesForGrid> myData = new List<IssuesForGrid>();
myData.Add( new IssuesForGrid
{
IssueNumber = 1,
NonIngallsIssueNumber = "ABC-1",
Project = "PROJ1",
ShortDescription = "This is a test",
DetectionDate = DateTime.Now,
DetectedBy = "George",
Severity = "Low",
Status = "Open",
AssignedTo = "Mike",
ActionNeeded = true,
ActionNeededText = "Fix it",
Ecd = DateTime.Now,
DecisionNeeded = true,
DecisionDetails = "What is wrong",
Comments = "Not again lol"
});
IQueryable<IssuesForGrid> myIssues = myData.AsQueryable();
DataSourceResult result = myData.ToDataSourceResult(request);
return Json(result);
}
My View:
@{
ViewData["Title"] = "Home Page";
}
@using (Html.BeginForm(actionName: null, controllerName: null, method: FormMethod.Post, htmlAttributes: new { name = "myForm", id = "myForm", onkeydown = "return event.keyCode!=13" }))
{
@Html.AntiForgeryToken()
<div class="BordSolThinBlk MT50">
@(Html.Kendo().Grid<IssuesForGrid>()
.Name(componentName: "IssuesGrid")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.IssueNumber))
.Read(read => read.Action(actionName: "IssuesGrid_Read", controllerName: "Home"))
.PageSize(pageSize: 100)
)
.Columns(columns =>
{
columns.Group(g0 => g0.Title("Issue General Information").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
.Columns(si =>
{
si.Bound(p => p.IssueNumber).Title(text: "Issue #").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
si.Bound(p => p.NonIngallsIssueNumber).Title(text: "Non-Ingall Issue #").Width(pixelWidth: 150).Filterable(value: true).Visible(true);
si.Bound(p => p.Project).Title(text: "Project").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
si.Bound(p => p.ShortDescription).Title(text: "Short Description").Width(pixelWidth: 150).Filterable(value: true).Visible(true);
si.Bound(p => p.DetectionDate).Title(text: "Detection Date").Width(pixelWidth: 125).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true);
si.Bound(p => p.DetectedBy).Title(text: "Detected By").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
}));
columns.Group(g1 => g1.Title("Issue Disposition").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
.Columns(ci =>
{
ci.Bound(p => p.Severity).Title(text: "Severity").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
ci.Bound(p => p.Status).Title(text: "Status").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
ci.Bound(p => p.AssignedTo).Title(text: "Assigned To").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
ci.Bound(p => p.ActionNeeded).Title(text: "Need Action").Width(pixelWidth: 100).Filterable(value: true).Visible(true);
ci.Bound(p => p.ActionNeededText).Title(text: "Action Needed Comment").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
ci.Bound(p => p.Ecd).Title(text: "ECD").Width(pixelWidth: 125).Format(value: "{0:MM/dd/yyyy}").Filterable(value: true).Visible(true);
}));
columns.Group(g2 => g2.Title("Decision Info").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
.Columns(di =>
{
di.Bound(p => p.DecisionNeeded).Title(text: "Need Decision").Width(pixelWidth: 110).Filterable(value: true).Visible(true);
di.Bound(p => p.DecisionDetails).Title(text: "Decision Details").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
}));
columns.Group(g3 => g3.Title("Issue Details").HeaderHtmlAttributes(new { @class = "GridLightGreyHeader", style = "color:black !Important;" }).Visible(true)
.Columns(ai =>
{
ai.Bound(p => p.Comments).Title(text: "Comments").Width(pixelWidth: 500).Filterable(value: true).Visible(true);
}));
})
.HtmlAttributes(new { @class = "H750 BordSolThinBlk" })
.Pageable(pageable => pageable.Input(enabled: true).Numeric(enabled: false).Refresh(enabled: true))
.Sortable()
.Resizable(resize => resize.Columns(true))
.Reorderable(reorder => reorder.Columns(false))
.Scrollable()
.Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Cell))
.Filterable()
.ColumnMenu()
.Editable(editable => editable.Mode(GridEditMode.InCell))
)
</div>
<style>
.k-grid .k-alt {
background-color: lightgray; /* specify the alternate background-color */
}
</style>
}
My Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - WebApplication1</title>
<script src="~/js/site.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.2.619/js/kendo.aspnetmvc.min.js"></script>
<link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common.min.css" />
<link href="~/css/site.css" rel="stylesheet" />
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
</div>
</nav>
<div class="container body-content">
@RenderBody()
<hr />
</div>
@RenderSection("Scripts", required: false)
</body>
</html>