Questions on UI for ASP.NET MVC Forum

1 answer

197 views

Embedding the Grid within its own EditorFor Template

I'm building an MVC5 web app with a single shared Index view which calls all the associated Editor Templates. It's been working out great until I got to the Kendo Grid.

It seems that the Kendo Grid in InCell or InLine editing is not supported when the grid is inside an editor template. If I do so I'm getting a javascript error Cannot read property '[propname]' of null. Only when I move the grid from its editor template to a standard razor view does it work. I realize that the grid actually fetches its property's editor template but that shouldn't be stopping it as I'm doing the same in other complex elements.

Is there a way this can work with InCell or InLine editing? If not supported, is there a component I can implement/override?

Grid

answered on 03 Apr 2019

11 answers

4.6K+ views

Passing complex object as parameter to mvc controller

I am not sure what I am missing but I am unable to send an object as a parameter to a controller, the request keep failing with 500 (Internal Server Error).

C# Object:

public class RateQueryDto

{

public long WorkHistoryId { get; }

public int WorkerId { get; }

public int ClientId { get; }

public DateTime WeekEndingDate { get; }

}

MVC Controller method:

[HttpPost]

public ActionResult Read([DataSourceRequest] DataSourceRequest request, RateQueryDto rateQuery)

{

return Json(true);

}

Grid configuration:

@(Html.Kendo().Grid<ConfirmHoursRateModel>()

.Name("grid")

.HtmlAttributes(new { style = "height:250px;" })

.AutoBind(false)

.Columns(columns =>

{

columns.Bound(c => c.Id).Hidden(true);

})

.Editable(editable =>

editable.Mode(GridEditMode.InCell))

.Navigatable()

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.Batch(true)

.Model(model =>

{

model.Id(w => w.Id);

})

.Read(read => read.Action("Read", "ConfirmHours").Data("confirmHoursReadData")))

)

Javascript:

function confirmHoursReadData() {

var grid = $("#confirm-hours-grid").data("kendoGrid");

var selectedItem = grid.dataItem(grid.select());

return {

WorkHistoryId: selectedItem.WorkHistoryID,

WorkerId: selectedItem.WorkerID,

ClientId: selectedItem.ClientID,

WeekEndingDate: selectedItem.WeekEndingDate

};

}

Grid

answered on 03 Apr 2019

4 answers

689 views

ViewModel Object Property Undefined

I have the following grid definition which displays data without issue:

@(Html.Kendo().Grid<HFITDashboard.UI.Models.Validation.ValidationViewModel>()

.Name("dataValidationReportGrid")

.Columns(column =>

{

column.Bound(v => v.ValidationId).Hidden(true);

column.Bound(v => v.Name);

column.Bound(v => v.EtlBatchJobId);

column.Bound(v => v.EtlBatchJob.Frequency);

column.Bound(v => v.ValidationSubTypeId).Hidden(true);

column.Bound(v => v.ValidationSubType.Name).Hidden(true);

column.Bound(v => v.ValidationSubType.ValidationType.Name).Hidden(true);

column.Bound(v => v.Purpose).Hidden(true);

column.Bound(v => v.CalendarDate).ClientTemplate(string.Format("{0}", "#= truncator(CalendarDate) #")).HtmlAttributes(new { title = "#= CalendarDate #" });

column.Bound(v => v.ValidationQuery).ClientTemplate(string.Format("{0}", "#= truncator(ValidationQuery) #")).HtmlAttributes(new { title = "#= ValidationQuery #" });

column.Bound(v => v.Threshold).Hidden(true);

column.Bound(v => v.EmailMessage).Hidden(true);

column.Bound(v => v.EmailRecipient).Hidden(true);

column.Bound(v => v.WorksheetName).Hidden(true);

column.Bound(v => v.PowerShellCommand).Hidden(true);

column.Bound(v => v.Column1Description).Hidden(true);

column.Bound(v => v.Column2Description).Hidden(true);

column.Bound(v => v.Column3Description).Hidden(true);

column.Bound(v => v.Column4Description).Hidden(true);

column.Bound(v => v.Column5Description).Hidden(true);

column.Bound(v => v.Column6Description).Hidden(true);

column.Bound(v => v.Column7Description).Hidden(true);

column.Bound(v => v.Column8Description).Hidden(true);

column.Bound(v => v.Column9Description).Hidden(true);

column.Bound(v => v.Column10Description).Hidden(true);

column.Bound(v => v.Column11Description).Hidden(true);

column.Bound(v => v.Column12Description).Hidden(true);

column.Bound(v => v.Column13Description).Hidden(true);

column.Bound(v => v.Column14Description).Hidden(true);

column.Bound(v => v.Column15Description).Hidden(true);

column.Bound(v => v.Column16Description).Hidden(true);

column.Bound(v => v.Column17Description).Hidden(true);

column.Bound(v => v.Column18Description).Hidden(true);

column.Bound(v => v.Column19Description).Hidden(true);

column.Bound(v => v.Column20Description).Hidden(true);

column.Bound(v => v.AddDateTime).Hidden(true).Format("{0:MM/dd/yyyy}");

column.Bound(v => v.LastMaintenanceDateTime).Format("{0:MM/dd/yyyy}");

column.Bound(v => v.LastMaintenanceOperatorId).Hidden(true);

column.Command(cmd =>

{

cmd.Edit().Text(" ").HtmlAttributes(new { title = "Edit" });

cmd.Destroy().Text(" ").IconClass("k-icon k-i-trash").HtmlAttributes(new { title = "Delete" });

cmd.Custom("Validate").Text(" ").IconClass("k-icon k-i-check").Click("executeValidation").HtmlAttributes(new { title = "Execute Validation" });

cmd.Custom("Copy").Text(" ").IconClass("k-icon k-i-copy").Click("copyValidation").HtmlAttributes(new { title = "Copy Validation" });

});

})

.ToolBar(tb => tb.Create().Text("Add New Validation"))

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("Validation"))

.ColumnMenu()

.Filterable()

.Groupable()

.Pageable()

.Scrollable(s => s.Height(490))

.Sortable()

.Events(e =>

{

e.Edit("onEditGrid");

})

.DataSource(ds => ds

.Ajax()

.PageSize(7)

.Model(model => model.Id(v => v.ValidationId))

.Create(create => create.Action("Create", "Validation"))

.Read(read => read.Action("Read", "Validation"))

.Update(update => update.Action("Update", "Validation"))

.Destroy(destroy => destroy.Action("Destroy", "Validation"))

.Events(e => e.RequestEnd("onRequestEnd"))

)

The ViewModel is defined as:

public class ValidationViewModel

{

public ValidationViewModel()

{

EtlBatchJob = new EtlBatchJob();

ValidationSubType = new ValidationSubType();

ValidationSubType.ValidationType = new ValidationType();

}

[Display(Name = "Id")]

public int ValidationId { get; set; }

[Display(Name = "Name")]

public string Name { get; set; }

[Display(Name = "Etl Batch Job")]

public int? EtlBatchJobId { get; set; }

public EtlBatchJob EtlBatchJob { get; set; }

[Display(Name = "Validation Sub Type")]

public int? ValidationSubTypeId { get; set; }

public ValidationSubType ValidationSubType { get; set; }

[Display(Name = "Purpose")]

public string Purpose { get; set; }

[Display(Name = "Calendar Date")]

public string CalendarDate { get; set; }

[Display(Name = "ValidationQuery")]

[Required]

public string ValidationQuery { get; set; }

[Display(Name = "Threshold")]

public int? Threshold { get; set; }

[Display(Name = "Email Message")]

public string EmailMessage { get; set; }

[Display(Name = "Email Recipient")]

public string EmailRecipient { get; set; }

[Display(Name = "Worksheet Name")]

[Required]

public string WorksheetName { get; set; }

[Display(Name = "PowerShell Command")]

[Required]

public string PowerShellCommand { get; set; }

[Display(Name = "Column 1 Description")]

[Required]

public string Column1Description { get; set; }

[Display(Name = "Column 2 Description")]

public string Column2Description { get; set; }

[Display(Name = "Column 3 Description")]

public string Column3Description { get; set; }

[Display(Name = "Column 4 Description")]

public string Column4Description { get; set; }

[Display(Name = "Column 5 Description")]

public string Column5Description { get; set; }

[Display(Name = "Column 6 Description")]

public string Column6Description { get; set; }

[Display(Name = "Column 7 Description")]

public string Column7Description { get; set; }

[Display(Name = "Column 8 Description")]

public string Column8Description { get; set; }

[Display(Name = "Column 9 Description")]

public string Column9Description { get; set; }

[Display(Name = "Column 10 Description")]

public string Column10Description { get; set; }

[Display(Name = "Column 11 Description")]

public string Column11Description { get; set; }

[Display(Name = "Column 12 Description")]

public string Column12Description { get; set; }

[Display(Name = "Column 13 Description")]

public string Column13Description { get; set; }

[Display(Name = "Column 14 Description")]

public string Column14Description { get; set; }

[Display(Name = "Column 15 Description")]

public string Column15Description { get; set; }

[Display(Name = "Column 16 Description")]

public string Column16Description { get; set; }

[Display(Name = "Column 17 Description")]

public string Column17Description { get; set; }

[Display(Name = "Column 18 Description")]

public string Column18Description { get; set; }

[Display(Name = "Column 19 Description")]

public string Column19Description { get; set; }

[Display(Name = "Column 20 Description")]

public string Column20Description { get; set; }

[Display(Name = "Add Date Time")]

public DateTime? AddDateTime { get; set; }

[Display(Name = "Last Updated")]

public DateTime? LastMaintenanceDateTime { get; set; }

[Display(Name = "Last Updated By")]

public string LastMaintenanceOperatorId { get; set; }

}

Again, the grid displays data just fine. The issue is when I click the "Add New Validation" button, I get the following JavaScript error:

Uncaught TypeError: Cannot read property 'Frequency' of undefined

at eval (eval at compile (kendo.all.js:194), <anonymous>:3:956)

at init._rowsHtml (kendo.all.js:61016)

at init._renderContent (kendo.all.js:61680)

at init.refresh (kendo.all.js:61518)

at init.proxy (jquery-3.3.1.js:10268)

at init.trigger (kendo.all.js:124)

at init._process (kendo.all.js:7333)

at init._change (kendo.all.js:7290)

at init.proxy (jquery-3.3.1.js:10268)

at init.trigger (kendo.all.js:124)

The Frequency property is a property of the EtlBatchJob property of my ViewModel. My guess is that the EtlBatchJob property is not initialized, and therefore, undefined. When I edit the record, the Frequency property is displayed without issue.

I added a constructor to my ViewModel to initialize my object properties, but that doesn't seem to do anything - I still receive the error.

Should I just flatten-out my ViewModel to only contain simple value types or am I doing something wrong?

Grid

answered on 02 Apr 2019

7 answers

2.9K+ views

ToDatasourceResult is not working

Hi team,

I am new to Kendo UI Grid, for the last two days trying to do custom pagination for kendo grid using Stored Procedure which takes care of pagination with the pageindex and pagesize as sql parameters, for which I dint see any example.

When I exactly followed the steps to do pagination(http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/ajax-binding) I am getting the following error

System.Linq.IQueryable<object> doesn't contain a definition for ToDataSourceResult and no extension method for ToDataSourceResult accepting a first argument of type System.Linq.IQueryable<object>

I have already included Kendo.MVC.UI namespace in my code.

Please let me know where I am going wrong for ToDataSourceResult.

Regards
VKC

Grid

answered on 29 Mar 2019

6 answers

815 views

[Solved] How to use Grid with complex object and post Grid data with other model's fields?

I made a demo project with two entity types: TestModel1 and TestModel2. TestModel1 has a collection property called TestModel2s, which is ICollection<TestModel2>.
Then I use TestModel1 as MVC model type, and I want to bind TestModel2s to a Grid, while editing TestModel1's properties with the grid in the same form. I tried several times to post to the server, the TestModel2s properties was always null.

Is there any simple way to go through this small problem? I think this complex object is not complex at all. Please refer to the home index.cshtml page, that is a simple demo. Attachments are size limited, so the attached demo project hasn't include the kendo's files.
My further requirement is to edit a ICollection<T> property in a column, how can I bind the ICollection<TestModel1> to a Grid and edit ICollection<TestModel2> (field m=>m.TestModel2s) ?

Anxious waiting it.

Grid

answered on 28 Mar 2019

9 answers

916 views

Sort the values in a multiple select filter

Hi,

I have tried the "work around" for creating a separate datasource on a filterable column in a grid but I'm getting an HTTP 500 response when I execute it. My controller code is executed but all I see when the filter dialog box opens is a spinning wheel...

Here is the link to the "work around": https://docs.telerik.com/kendo-ui/knowledge-base/sort-multi-check-filter-mvc-grid

My filterable grid column code:

columns.Bound(c => c.WallThickness).Format("{0:0.000}").Filterable(ftb =>
                                                {
                                                    ftb.Multi(true);
                                                    ftb.DataSource(ds => ds
                                                    .Custom()
                                                    .Type("Json")
                                                    .Transport(t => t.Read("SortWallThickness", "Materials"))
                                                    .Schema(s => s
                                                    .Data("Data"))
                                                    .Sort(sort => { sort.Add("WallThickness").Ascending();
                                                    })
                                                    );
                                                })

My controller code:

public ActionResult SortWallThickness([DataSourceRequest] DataSourceRequest request)
        {
            List<string> data = WeldObject.GetWT(0);
            return Json(new[] { data }.ToDataSourceResult(request, ModelState));
        }

Appreciate your help,

Carolyn

General Discussions

answered on 27 Mar 2019

2 answers

126 views

[Solved] Filtering Grid Using Same Data

I have a simple grid and want to have a dropdown filter for the column Project. I do not want to make a separate call to get data for this dropdown. Can I use the unique values from the grid to populate the filter?

@(Html.Kendo().Grid(Model)
.Name("ByProjectAndReviewerGrid")
.Deferred(true)
.ToolBar(tools => tools.Excel())
.Excel(excel => excel
.FileName("ByProjectAndReviewer.xlsx")
.AllPages(true)
)
//.Events(events => events.DataBound("databound"))
.Columns(columns =>
{
columns.Bound(p => p.Project).Title("Project").Width(400);
columns.Bound(p => p.Reviewer).Title("Reviewer").Width(300);
columns.Bound(p => p.ReleasePercent).Title("Release %").Filterable(false).Width(150);
columns.Bound(p => p.DoNotReleasePercent).Title("Do Not Release %").Filterable(false).Width(150);
columns.Bound(p => p.RejectPercent).Title("Reject %").Filterable(false).Width(150);
columns.Bound(p => p.Release).Title("Release").Filterable(false).Width(150);
columns.Bound(p => p.DoNotRelease).Title("Do Not Release").Filterable(false).Width(150);
columns.Bound(p => p.Reject).Title("Reject").Filterable(false).Width(150);
columns.Bound(p => p.TotalReviewed).Title("Total Reviewed").Filterable(false).Width(150);
})
.HtmlAttributes(new { style = "height: 650px;" })
.NoRecords()
.AutoBind(false)
.Sortable()
.Filterable()
.Scrollable()
.DataSource(dataSource => dataSource
.Ajax()
.ServerOperation(false)
.Read(read => read.Action("ByProjectAndReviewer_Read", "Reporting"))
)
)

Grid

answered on 27 Mar 2019

1 answer

268 views

Grid Refresh Column

I'm using the asp.net MVC Grid with inline edit. I have a foreign key column with a editor template. When adding a new record (via a modal - partial view).

I have a situation where I can add numerous records using the modal. Each record can reference another already created record from the same table.

The grid refreshes with each newly created record however the field that references a previous record shows blank when the record being referenced is a newly created record. The field in the grid is populated via the model.

I think the issue i'm having is that the model is not being updated when creating new records, so those new records that reference newly created records themselves show a blank in the field. If i refresh the page then the field shows the values OK.

My Editor template is using a Kendo Drop Down List using Datasource to reference a Read Action and this is populated as expected when going into edit mode. If I select a newly created record with a blank field the drop down will have the correct value pre-selected but this is not shown on the grid.

I have seen forum answers where the controller method used in my Editor Template returns the collection for the drop down list and the view with its collection updated however making this change stops the drop down working.

So the question is whether there is a simple way of updating the grid collection so that i dont get blank records when adding new data

Grid

answered on 27 Mar 2019

1 answer

1.0K+ views

Exporting more columns than displayed

Currently I display a grid that has X columns. I export it to Excel and it also exports X columns. How do I export Y columns and still only display X columns? Or export different columns than displayed? This would be for a "normal" grid and one that is grouped.

Grid

answered on 26 Mar 2019

1 answer

99 views

Report Viewer interferes with grid paging

I've got a view with a Html.TelerikReporting().ReportViewer() mvc helper.

in a partial view I load a Html.Kendo().Grid<FFDashboardWeb.Models.PDocDashboardGridViewModel>()

if I enable any paging features on the grid, I get javascript errors when it executes the datasource read event . The javascript is breaking in the =report viewer= javascript file! It's like the report viewer is intercepting the datasource callback?

If I remove the report viewer from the page, the grid works fine.

@(Html.Kendo().Grid<FFDashboardWeb.Models.PDocDashboardGridViewModel>()
.Name("documentDetail")
.Columns(columns =>
{
columns.Bound(m => m.Id).Hidden().Title("Date Scanned").Width(150).Format("{0:d}");
columns.Bound(m => m.TransactionDate).Title("Date Scanned").Width(150).Format("{0:d}");
columns.Bound(m => m.Result).Title("Result").Width(150);
columns.Bound(m => m.DocumentClassName).Title("Document").Width(400);
columns.Bound(m => m.IssuingStateName).Title("State").Width(150);
columns.Bound(m => m.AlertsJoined).Title("Alerts");
})
.Pageable()
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.SingleColumn);
})
.Scrollable(s => s.Height("auto"))
.DataSource(ds => ds
.Ajax()
.Batch(false)
.PageSize(20)
.ServerOperation(true)
.Model(model => model.Id("Id"))
.Read(read => read.Action("kgrdDashboardDetails_read", "Home").Data("includeDetailParameters"))
)
)

These are in the _Layout
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"></script>

These are in the specific page where the report viewer is needed

@(Html.TelerikReporting().ReportViewer()
.Id("rvResultDistViewer")
.ServiceUrl(Url.Content("~/api/reports"))
.ReportSource(rsrcResultDist)
.ViewMode(ViewMode.Interactive)
.ScaleMode(ScaleMode.FitPage)
.PersistSession(false)
.PrintMode(PrintMode.AutoSelect)
.SendEmail(new SendEmail { Enabled = false })
.EnableAccessibility(false)
.PageMode(PageMode.SinglePage)
.ClientEvents(e =>
{
{
e.Ready("handleViewerReady_main");
e.PageReady("handlePageReady_main");
e.InteractiveActionExecuting("handleResultClick");
}
})
)

Grid

answered on 25 Mar 2019