Questions on UI for ASP.NET MVC Forum

2 answers

341 views

Dropdownlist in grid popup not javascript binding

Our dropdownlist is in a popup editor of a kendogrid.

It has a databound event where we conditionally select the 1st item.

.Events(events => events.DataBound("function() { if (this.value() == '' && this.dataSource.data().length == 1) { this.select(1); } }"))

This works to change the dropdown (and it's hidden input), but when we post back the value is zero.

If we manually select the 1st item then it binds and posts back correctly.

A similar databound event works on other screens, but it just seems to be only a problem the built-in popup editor of the kendo grid.

Any ideas how to get the .select to update the dataItem & post back correctly?

DropDownList

answered on 09 Apr 2019

1 answer

1.4K+ views

Kendo DataSource - Using CompositeFilterDescriptor for filtering data

Hello,

I'm using Kendo Grid that displays a set of data based on different filter criteria (Textboxes and DropDownLists values).

I was wondering if using CompositeFilterDescriptor is an ideal way of filtering data instead of using a standard LINQ approach.

Examples provided below.

I've tested multiple queries with Kendo Filtering with lots of criteria and different kind of operators (equal, contains, greaterThan etc..) and everything looks fine. Will I face any limitations with this approach?

The standard LINQ approach:

(Controller)

var query =

(from x in products where

x.ProductName == textSearch ||

x.Model == textSearch ||

x.Category == dropDownValue||

x.Seller == dropDown2Value||

x.Country == textSearch ||

x.Description == textSearch

select new Product(){

ProductId = x.ProductId,

ProductName = x.ProductName,

Category = x.Category,

Seller = x.Seller,

Country = x.Country,

Description = x.Description

}).ToDataSourceResult(request);

The Kendo Filtering approach:

(Controller)

CompositeFilterDescriptor filterDescriptor = new CompositeFilterDescriptor

{

LogicalOperator = FilterCompositionLogicalOperator.Or,

FilterDescriptors = new FilterDescriptorCollection()

{

new FilterDescriptor(){Member = "Product", Operator = FilterOperator.IsEqualTo, Value = textSearch},

new FilterDescriptor(){Member = "Model", Operator = FilterOperator.IsEqualTo, Value = textSearch},

new FilterDescriptor(){Member = "Category", Operator = FilterOperator.IsEqualTo, Value = dropDownValue},

new FilterDescriptor(){Member = "Seller", Operator = FilterOperator.IsEqualTo, Value = dropDown2Value},

new FilterDescriptor(){Member = "Country", Operator = FilterOperator.IsEqualTo, Value = textSearch},

new FilterDescriptor(){Member = "Description", Operator = FilterOperator.IsEqualTo, Value = textSearch},

}

};

request.Filters.Add(filterDescriptor);

var query = (from x in products

select new Product()

{

ProductId = x.ProductId,

ProductName = x.ProductName,

Category = x.Category,

Seller = x.Seller,

Country = x.Country,

Description = x.Description

}).ToDataSourceResult(request);

Thank you!

Grid

answered on 09 Apr 2019

3 answers

104 views

Allow inline/cell editing without concrete model

I'm looking at using the grid in a generic way with the help of a custom Html Helper.

Is it possible to pass my model to the grid like so @Html.Kendo().Grid(Model) (not like Grid<SomeClass>()) within a partial view without declaring a concrete model such as @model IEnumerable<SomeClass>? Model would be a generic such as IEnumerable<object>, dynamic or find a way to cast it as it's native type in some way.

Grid

answered on 08 Apr 2019

1 answer

255 views

Grid is blank.

I have a grid that the datasource shows has data. Exporting the grid to Excel shows data. But the display shows no data in any of the columns. I am not sure how to debug this. Are there some hooks that I can verify that the data is making it to. The column headers show up just no data in each column.

Thank you.

Kevin

Grid

answered on 05 Apr 2019

1 answer

100 views

Specifying column width doesn't scroll

If I specify a column width like

GridHelpers.FilterableColumn(columns, m => m.Description).Width(480);

It seems that the columns that should show to the right are overridden. I don't see them. How do I specify a width AND allow for scrolling?

Thank you.

Grid

answered on 05 Apr 2019

1 answer

85 views

Paging control for a grouped item

Right now if an item is grouped the paging doesn't seem to break only on group borders. Say there are 7 items in the group in some cases 4 of the items might be displayed on one page and the rest of the 3 displayed on the next. Is there a way to control the paging so that a "break" only occurs on group boundaries?

Grid

answered on 04 Apr 2019

1 answer

115 views

Multi level grid

Hi,

I am trying to implement 3 level grid following the approach used in Server Hierarchy demo https://demos.telerik.com/aspnet-mvc/grid/serverhierarchy. Is it possible or i should use ClientDetailTemplateId approach?

If it is not possible to use server hierarchy approach for multi level grid then can i use both approaches together? .DetailTemplate for second level and ClientDetailTemplateId for third level.

Grid

answered on 04 Apr 2019

1 answer

174 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.4K+ 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

642 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