Telerik Forums
UI for ASP.NET Core Forum
3 answers
1.7K+ views

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>

Viktor Tachev
Telerik team
 answered on 26 Jun 2017
3 answers
186 views

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?

Veselin Tsvetanov
Telerik team
 answered on 26 Jun 2017
4 answers
295 views

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

Francis
Top achievements
Rank 1
 answered on 20 Jun 2017
9 answers
590 views

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);
        }
    }
Georgi
Telerik team
 answered on 19 Jun 2017
1 answer
244 views

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.

Boyan Dimitrov
Telerik team
 answered on 16 Jun 2017
1 answer
168 views

Hello,

I want to have a DropDownList in Toolbar ButtonDropDown )(see attached Picture) - is this possible?

robert

Georgi
Telerik team
 answered on 16 Jun 2017
1 answer
262 views
I am using the asp.net core trial.  Can you please provide instructions on how I can get intellisense to work with javascript in Visual Studio 2017?
Dimitar
Telerik team
 answered on 15 Jun 2017
4 answers
488 views

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...

 

Preslav
Telerik team
 answered on 15 Jun 2017
3 answers
718 views

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

Konstantin Dikov
Telerik team
 answered on 15 Jun 2017
1 answer
330 views

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

Konstantin Dikov
Telerik team
 answered on 15 Jun 2017
Narrow your results
Selected tags
Tags
+? more
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Jay
Top achievements
Rank 3
Bronze
Iron
Iron
yw
Top achievements
Rank 2
Iron
Iron
Stefan
Top achievements
Rank 2
Iron
Iron
Iron
Kao Hung
Top achievements
Rank 1
Iron
Bohdan
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?