I'm trying to bind a grid to a collection property of a view model. The grid displays the items just fine when the view loads (see attached screenshot) and I'm also able to edit the items. When I save, however, the collection property is empty (has a count of 0). Everything else in my view model posts just fine when I save - the issue is limited to this particular grid and collection property. Here's the relevant view code:
@(Html.Kendo().Grid(Model.JobTitleHistory)
.Name("JobTitleGrid")
.Columns(columns =>
{
columns.Bound(jobTitle => jobTitle.JobTitle).Width(120).HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
columns.ForeignKey(jobTitle => jobTitle.PayPeriodEffectiveDateID, (IEnumerable<GCEdge.Models.ViewModels.ComboBoxLookupViewModel>)ViewData["payPeriodEffectiveDateLookup"], "Value", "Name")
.Title("Effective Date")
.Width(120)
.HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
columns.ForeignKey(jobTitle => jobTitle.PayPeriodEndingDateID, (IEnumerable<GCEdge.Models.ViewModels.ComboBoxLookupViewModel>)ViewData["payPeriodEndingDateLookup"], "Value", "Name")
.Title("Ending Date")
.Width(120)
.HeaderHtmlAttributes(new { style = "height: auto; white-space: normal; vertical-align: middle;" });
})
.Editable(options => options.Enabled((ViewData["ViewPermissionLevel"].ToString() != "ReadOnly" && ViewData["ViewPermissionLevel"].ToString() != "Hidden")).Mode(GridEditMode.InCell))
.Pageable(options => options.PreviousNext(true))
.Sortable(true)
.Scrollable(options => options.Height(200)))
I've done some searching elsewhere on your forums and tried the approach demonstrated here with no luck either. I've included that code below as well for reference.
https://github.com/telerik/ui-for-aspnet-mvc-examples/blob/master/grid/submit-grid-with-form/KendoUIMVC5/Views/Home/Index.cshtml
@(Html.Kendo().Grid(Model.JobTitleHistory)
.Name("JobTitleGrid")
.ToolBar(tools => tools.Create().Text("Add"))
.Editable(editable => editable.Mode(GridEditMode.InCell).CreateAt(GridInsertRowPosition.Top))
.Columns(columns =>
{
columns.Bound(jobTitle => jobTitle.JobTitle).ClientTemplate("#= JobTitle #" +
"<input type='hidden' name='JobTitleHistory[#= index(data)#].JobTitle' value='#= JobTitle #' />"
);
columns.Bound(jobTitle => jobTitle.PayPeriodEffectiveDateID).ClientTemplate("#= PayPeriodEffectiveDateID #" +
"<input type='hidden' name='JobTitleHistory[#= index(data)#].PayPeriodEffectiveDateID' value='#= PayPeriodEffectiveDateID #' />"
);
columns.Bound(jobTitle => jobTitle.PayPeriodEndingDateID).ClientTemplate("#= PayPeriodEndingDateID #" +
"<input type='hidden' name='JobTitleHistory[#= index(data)#].PayPeriodEndingDateID' value='#= PayPeriodEndingDateID #' />"
);
})
.DataSource(dataSource => dataSource.Ajax()
.Model(model =>
{
model.Id(jt => jt.PayPeriodEndingDateID);
})
.ServerOperation(false)
)
<script> )
function index(dataItem) {
var data = $("#JobTitleGrid").data("kendoGrid").dataSource.data();
return data.indexOf(dataItem);
}
</script>
Hello,
the accessibility support is really important for our projects. The keyboard support of your widgets is overall ok, but the screenreader support is horrible. I tested with Windows 10 + Edge + JAWS Screenreader (v18) (Our customers are bound to the JAWS software).
I.e. spreadsheet: change the active cell with arrows keys -> the screenreaders doesnt read anything.
I.e. multiselect -> focus the input and the screenreader doesnt read the selected items. Also when I open the dropdown and change the selection, it reads nothing.
This are just two examples and Im sure there are similar problems in the other widgets. It would be great if you would make the widgets screenreader-ready in the future.
Can you confirm these problems?
I am trying to filter a grid with a custom button on my toolbar by applying a date filter.
The button works and places the correct date in the column filter as shown in picture but does not fire the Filter action.
If I open the Column filter and press filter, then it applies it.
Jquery button action:
$(
'#GridSampleLog'
).data().kendoGrid.dataSource.filter({
field:
'DateToDispose'
, operator:
'lt'
, value: getDate()
});
See attached pictures for after click and after click on Filter.
I am using other filters that work well for integer values.
Using ASP.Net core UI version 2017.2.504
Hello,
I know that it is possible to use "autoFitColumn" to size the columns in a scrollable grid but it is slow for many rows - disable Scrolling is not an Option.
Is there a possibility (Javascript) to resize the columns only for the content of the first few (10) rows, so that it is faster?
(loop through the first rows and resize all coumns...)
function
gridDataBound(e) {
var
grid = $(
"#gridEQ"
).data(
"kendoGrid"
);
for
(
var
i = 0; i < grid.columns.length; i++) {
grid.autoFitColumn(i);
}
}
I'm needing an example for creating an inline-editable grid that consists of a transaction (parent) and items in that transaction (children). Upon accessing the grid, it should be empty as this is a new transaction. Because it is new, the transaction will need to be created and then the items will be added and displayed on the grid. Once the user has added all necessary items, they click save to submit the new transaction and it's items.
I was able to create the grid, but could never link child with parent. I spent some time with this example here (http://demos.telerik.com/aspnet-core/grid/foreignkeycolumn), but it assumes that the parent (Categories) listing already exists, whereas I need to create the parent and children together.
Hello,
I want to have a DropDownList in Toolbar ButtonDropDown )(see attached Picture) - is this possible?
robert
Hello,
If I use the following code to remove a row in the grid and the grid has Aggregates/Groups this Aggregates and groups are not refreshed...
(without Aggregates/Groups it works) see attached picture...
Hello,
I have the following Grid:
@(Html.Kendo().Grid<dynamic>()
.Name(
"gridEQ"
)
.Columns(columns =>
{
columns.AutoGenerate(
true
);
})
.Pageable()
.Sortable()
.Scrollable()
.Selectable(s => s.Mode(GridSelectionMode.Multiple))
.NoRecords()
.Filterable(f => f.Enabled(
false
))
.AutoBind(
false
)
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(100)
.Read(read => read.Action(
"ReadAsync"
,
"Home"
))
)
)
If I use the Read Action (synchron) like this and an error on the Server exists the error Event of the grid datasource is raised:
public
IActionResult Read(
bool
execute,
string
queryJson,
string
optionsJson, [DataSourceRequest] DataSourceRequest request)
{
try
{
var query = eqService.GetQueryByJsonDict(queryJson.ToJsonDict());
var sql = eqService.BuildQuery(query, optionsJson.ToJsonDict());
if
(execute)
{
SqlConnection c =
new
SqlConnection(
this
.cache.Get(
"ExecuteConnectString"
).ToString());
result = c.Query<dynamic>(sql, commandType: System.Data.CommandType.Text);
return
Json(result.ToDataSourceResult(request));
}
catch
(Exception ex)
{
return
Json(ex);
}
}
If I use the AsyncRead Action like this and an error on the Server exists the error Event of the grid datasource is not fired:
public
async System.Threading.Tasks.Task<ActionResult> ReadAsync(
bool
execute,
string
queryJson,
string
optionsJson, [DataSourceRequest] DataSourceRequest request, CancellationToken cancellationToken)
{
try
{
var query = eqService.GetQueryByJsonDict(queryJson.ToJsonDict());
var sql = eqService.BuildQuery(query, optionsJson.ToJsonDict());
if
(execute)
{
SqlConnection c =
new
SqlConnection(
this
.cache.Get(
"ExecuteConnectString"
).ToString());
result = await c.QueryAsync<dynamic>(sql, commandType: System.Data.CommandType.Text, cancellationToken: cancellationToken);
return
Json(result.ToDataSourceResultAsync(request));
}
catch
(Exception ex)
{
return
Json(ex);
}
}
Why this?
What I'm missing?
robert
I'm trying to setup a grid with Multiple, Row based selection in combination with InCell editing. The issue is that a click of an editable cell causes selection of that row (and messes up existing selections). I thought I could wire up my own click event and determine if a clicked cell was editable, then disable the selection, however I can't find a way to remove the select event that is connected to the containing table of the grid.
In trying to unbind the event, it appears since it was not bound via jQuery, jQuery can't unbind it. Any other suggestions for how to accomplish this combination of functionality with the grid control?
Thanks in advance - Greg