Questions on UI for ASP.NET MVC Forum

5 answers

1.1K+ views

For our application, we were using Kendo Grid with a class named Properties that stored column information:

public class Properties
{

public string Id { get; set; }
public object PROPERTY_0 { get; set; }
public object PROPERTY_1 { get; set; }
...
public object PROPERTY_43 { get; set; }

In order to sort and filter rows, we used the ToDataSourceResult extension. However, this system limited us to a hardcoded maximum number of columns. We have refactored the code to use a List<Dictionary<string, dynamic>> instead, which allows us to store results in key value pairs in a list thus allowing an arbitrary maximum number of columns.

Unfortunately, I have not been able to find any documentation on whether ToDataSourceResult is able to parse data in this format, or any format aside from the previous one. While it is possible to recreate the logic for filtering, grouping, and sorting, it would take a good deal of time to do so. Is there any way to use ToDataSourceResult instead? We are storing values in a dictionary with PROPERTY_x as a string key and a dynamic value.

Grid

answered on 19 Aug 2019

7 answers

522 views

Space bar not working in multiselect

I am currently using a multiselect for, which populates the list by means of a datasource.

The problem is that when typing in the input is not taking empty spaces, even when typing the multiselect space bar does not take them, why could this happen?

MultiSelect

answered on 19 Aug 2019

9 answers

3.0K+ views

Grid custom filter for boolean field

Hello,

I want to filter a Grid with Bound bool field by using a dropdown instead of normal radiobuttons.
Is this possible at all?

I have tried settings filterable.UI as follows:

columns.Bound(c => c.UnServiceable)

.Title("U/S")

.ClientTemplate("#if(UnServiceable) { #Yes# } else { #No# }#")

.Filterable(filter => filter

.Messages(m => m.Info(Strings.Filter_UnServiceable_Message))

.UI("boolAsDropdown"))

.Width(100);

However, the boolAsDropdown javascript function is never called. It seems to be unable to call this when using a boolean field as data column.
The same method is working fine with other column types (int, string).

If anyone could help me with this issue, this would be great.

Thank you in advance,
Nick

Grid

answered on 19 Aug 2019

1 answer

274 views

Frozen columns & size

Hi,

I have several questions regarding the management of locked columns.

1) Auto-size

Is there a way for unlocked columns to automatically calculate their size so that they fill the "free" part of the grid, as when there are no fixed columns?

The appearance of the horizontal scroller when displaying or hiding columns is simply illogical compared to the basic grid

I'm not talking about autofit, who make 'empty part' or display scroller

2) Size in pixel

In asp.net mvc, we can give the size of the columns in em, vw, %, ...

This works for basic grids, but not when there are fixed columns.

Is it normal or is there a lack?

3) All locked columns

Is there a way to have a basic grid but without the user changing the order of the columns

Regards

Grid

answered on 19 Aug 2019

12 answers

318 views

show AllDay Events not in the AllDay-row, but in the main area

Is it possible to show AllDay-events in the time area, that means as a block from 0-24?

Is it possible to show an event which is ranging from 2016-09-13 8AM to 2016-09-14 9PM not in the all day-row but in the times area than as big block ?

Scheduler

answered on 15 Aug 2019

1 answer

173 views

Hidden Columns

Hi ,

I`ve had a look through the forum but could not find the answer I need. All I need to do is hide a column using .Hidden but for it to have 2 conditions. This is what I have already

columns.Command(command => command.Custom("More Information").Click("moreInfo")).Width(180).Hidden(!ViewBag.IsAuthorized );

What I need is something

columns.Command(command => command.Custom("More Information").Click("moreInfo")).Width(180).Hidden(!ViewBag.IsAuthorized or blabla = something);

Grid

answered on 14 Aug 2019

7 answers

2.4K+ views

MVC Grid, Inline Editing with DatePicker and Disabled Dates

I have a date column in my grid and an associated editor template for the date picker. I need to disable a lot of dates (every day except the last day of the month). I have created a list and set a ViewData object to that list of dates; however, the DataPicker editor template won't accept a ViewData object. How would I go about setting the disabled dates?

Grid:

@(Html.Kendo().Grid<HFITDashboard.UI.Models.SmaDataEntry.SmaPerformanceViewModel>()

.Name("smaPerformanceGrid")

.Columns(column =>

{

column.Command(cmd =>

{

cmd.Edit();

}).Width(300);

column.Bound(s => s.SmaPerformanceId).Width(150).IncludeInMenu(false).Hidden(true);

column.Bound(s => s.RefFund).Width(300).ClientTemplate("#=RefFund.LongName#");

column.Bound(s => s.RefSource).Width(250).ClientTemplate("#=RefSource.LongName#");

column.Bound(s => s.CalendarDate).Width(250).Format("{0:MM/dd/yyyy}");

column.Bound(s => s.SsbPerformanceType).Width(250).ClientTemplate("#=SsbPerformanceType.DisplayName#");

column.Bound(s => s.OneDay).Width(250).Format("{0:n2}");

column.Bound(s => s.Mtd).Width(250).Format("{0:n2}");

column.Bound(s => s.OneMonth).Width(250).Format("{0:n2}");

column.Bound(s => s.ThreeMonths).Width(250).Format("{0:n2}");

column.Bound(s => s.SixMonths).Width(250).Format("{0:n2}");

column.Bound(s => s.NineMonths).Width(250).Format("{0:n2}");

column.Bound(s => s.Qtd).Width(250).Format("{0:n2}");

column.Bound(s => s.FiscalYtd).Width(250).Format("{0:n2}");

column.Bound(s => s.CalendarYtd).Width(250).Format("{0:n2}");

column.Bound(s => s.OneYear).Width(250).Format("{0:n2}");

column.Bound(s => s.TwoYears).Width(250).Format("{0:n2}");

column.Bound(s => s.ThreeYears).Width(250).Format("{0:n2}");

column.Bound(s => s.FourYears).Width(250).Format("{0:n2}");

column.Bound(s => s.FiveYears).Width(250).Format("{0:n2}");

column.Bound(s => s.SixYears).Width(250).Format("{0:n2}");

column.Bound(s => s.SevenYears).Width(250).Format("{0:n2}");

column.Bound(s => s.EightYears).Width(250).Format("{0:n2}");

column.Bound(s => s.NineYears).Width(250).Format("{0:n2}");

column.Bound(s => s.TenYears).Width(250).Format("{0:n2}");

column.Bound(s => s.FifteenYears).Width(250).Format("{0:n2}");

column.Bound(s => s.TwentyYears).Width(250).Format("{0:n2}");

column.Bound(s => s.InceptionToDate).Width(250).Format("{0:n2}");

column.Bound(s => s.Nav).Width(250).Format("{0:n2}");

column.Bound(s => s.MarketOfferPrice).Width(250).Format("{0:n2}");

column.Bound(s => s.LastMaintenanceOperatorId).Width(150);

})

.ToolBar(tb => tb.Create().Text("Create Performance Record"))

.Editable(editable => editable.Mode(GridEditMode.InLine))

.ColumnMenu()

.Filterable()

.Pageable()

.Sortable()

.Scrollable(s => s.Enabled(true).Height(535))

.DataSource(ds => ds

.Ajax()

.PageSize(100)

.Model(model =>

{

model.Id(s => s.SmaPerformanceId);

model.Field(x => x.LastMaintenanceOperatorId).Editable(false);

model.Field(x => x.SsbPerformanceType).DefaultValue(

ViewData["defaultSsbPerformanceTypes"] as HFITDashboard.UI.Models.SmaDataEntry.SsbPerformanceTypeViewModel);

model.Field(x => x.RefSource).DefaultValue(

ViewData["defaultRefSources"] as HFITDashboard.UI.Models.SmaDataEntry.RefSourceViewModel);

model.Field(x => x.RefFund).DefaultValue(

ViewData["defaultRefFunds"] as HFITDashboard.UI.Models.SmaDataEntry.RefFundViewModel);

})

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

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

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

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

))

Editor Template:

@model DateTime?

@(Html.Kendo().DatePickerFor(m => m))

Method that gets disabled dates:

private void GetNonMonthEndDates()

{

DateTime StartDate = new DateTime(2000, 1, 1);

DateTime EndDate = new DateTime(2030, 12, 31);

int DayInterval = 1;

List<DateTime> dateList = new List<DateTime>();

while (StartDate.AddDays(DayInterval) <= EndDate)

{

StartDate = StartDate.AddDays(DayInterval);

var daysInMonth = DateTime.DaysInMonth(StartDate.Year, StartDate.Month);

if (!StartDate.Day.Equals(daysInMonth))

{

dateList.Add(StartDate);

}

ViewData["disabledDates"] = dateList;

}

How do I associate the ViewData object to the DataPicker DisabledDates, or is there another way to do it?

Grid

answered on 09 Aug 2019

2 answers

387 views

Custom Editor with Kendo DropDownList

My problem is when the editor popup shows, the drop downs are populated but are selecting the current values of the row in question. I was referring to a few previous posts, including this example:

https://github.com/telerik/ui-for-aspnet-mvc-examples/tree/master/grid/grid-popup-editing-dropdownlistfor-required/KendoUIMVC5

I thought I was missing the following:

When I look at the chrome debugger, there is only an ";" in the onEdit method, nothing is being written there. I am using 2019.2.619.

Not sure what I am missing, thanks

Peter

Grid

answered on 09 Aug 2019

2 answers

479 views

Editor for Currency field

Your demo shows how an inline and popup editor works for a currency field:

https://demos.telerik.com/aspnet-mvc/grid/editing-inline

I can't tell from your demo how you are presenting the edit input box. In particular, the edit field shows with a $ and limits the user to entering digits and a decimal.

Are you applying specific attributes to the model? The model.cs is not included in the demo.

Thanks

Peter

Grid

answered on 09 Aug 2019

4 answers

173 views

[Solved] UI for mvc hierarchy grid - accessibility

I have hierarchy grid in asp.net mvc

It's not accessible, is it possible?

this is my code:

@(Html.Kendo().Grid<Matrix.Plugin.BooksLists.Models.CustomerList.CustomerProductsListsModel>
()
.Name("CustomerProductsListsGrid")
.Columns(columns =>
{
columns.Bound(p => p.ListName).Title("" + T("Matrix.Plugin.BooksLists.ListName") + "").HtmlAttributes(new { @class = "firstColumn listName" }).Media("(min-width: 450px)");
columns.Bound(p => p.AgeText).Title("" + T("Matrix.Plugin.BooksLists.Age") + "").HtmlAttributes(new { @class = "age" }).Media("(min-width: 450px)");
columns.Bound(p => p.Count).Title("" + T("Matrix.Plugin.BooksLists.NumOfBooks") + "").HtmlAttributes(new { @class = "booksNum" }).Media("(min-width: 450px)");
columns.Bound(p => p.Warnning).Title("").HtmlAttributes(new { @class = "warning" }).Media("(min-width: 450px)");
columns.Command(command => command.Custom("errorBox").Text(" ").HtmlAttributes(new { @class = "icon-icon- worning popOverIcon", @data_toggle = "popover", @data_popover_content = "\\#errorPopUpContainer", @data_placement = "bottom", @data_trigger = "hover", @href = "\\#this" })).Media("(min-width: 450px)");
columns.Command(command => command.Custom("actionsBox").Text("").Click("openActionBox")

.HtmlAttributes(new { @class = "icon-icon-dots popOverIcon", @data_toggle = "popover", @data_popover_content = "\\#actionPopUpContainer", @data_placement = "bottom", @href = "\\#this" })).Media("(min-width: 450px)");
columns.Template(@<text></text>).ClientTemplate("#=resColTemplate(data)#").Title(" ").Media("(max-width: 450px)");
})
.ToolBar(toolBar =>
toolBar.Custom()
.Text("" + T("Matrix.Plugin.BooksLists.ExportAllListsToExcel") + "")
.HtmlAttributes(new { @class = "exportToExcel" })
.Url(Url.Action("CustomerListsExportToExcel", "BooksLists"))
)
.Editable(editable => editable.Mode(GridEditMode.InLine))
.Sortable()
.Pageable()
.Navigatable()
.Scrollable(s => s.Enabled(false))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.Id);
model.Field(p => p.Warnning).Editable(false);
})
.PageSize(20)
.Read(read => read.Action("GetCustomerList", "BooksLists"))
)
.Events(events => events.DataBound("dataBound"))
)
<script id="template" type="text/x-kendo-template">
@(Html.Kendo().Grid<Matrix.Plugin.BooksLists.Models.CustomerList.CustomerProductsLists_AttachedProductsModel>
()
.Name("grid_#=Id#") // template expression, to be evaluated in the master context
.Events(events => events.DataBound("LoadPopoversIcons"))
.Columns(columns =>
{
columns.Bound(o => o.ProductName).Title("" + T("Matrix.Plugin.BooksLists.BookName") + "").Width(120).ClientTemplate("<a class='productName' href=" + @Url.RouteUrl("Product", new { SeName = "\\#= SeName \\#" }) + "> \\#= ProductName \\# </a>").Media(" (min-width: 450px)");
columns.Bound(o => o.ProductFieldOfKnowledge).Title("" + T("Matrix.Plugin.BooksLists.ProductFieldOfKnowledge") + "").Width(120).Media("(min-width: 450px)");
columns.Bound(o => o.BookType).Title("" + T("Matrix.Plugin.BooksLists.BookContentType") + "").Width(120).Media("(min-width: 450px)");
columns.Bound(o => o.ProductProvider).Title("" + T("Matrix.Plugin.BooksLists.ProductProvider") + "").Width(120).Media("(min-width: 450px)");
columns.Command(command => command.Custom("extraInfoBox").Click("extraInfoDetails").HtmlAttributes(new { @class = "icon-icon- more-informtion extraInfoBoxPopOver popOverIcon", @data_toggle = "popover", @data_popover_content = "\\#extraInfoPopOverContainer", @data_placement = "bottom", @href = "\\#this" }).Text(" ")).Title("מידע נוסף").Width(90).Media("(min- width: 450px)");
columns.Command(command => command.Custom("alertBox").Text(" ").HtmlAttributes(new { @class = "icon-icon-more-informtion-press popOverIcon", @data_toggle = "popover", @data_placement = "bottom", @data_trigger = "hover", @data_popover_content =

"\\#alertPopUpContainer", @OnMouseOver = "showAlertBox(this)", @href = "\\#this" })).Width(50).Media("(min-width: 450px)");
columns.Command(command => command.Custom("bookErrorBox").Text(" ").HtmlAttributes(new { @class = "icon-icon-worning popOverIcon", @data_toggle = "popover", @data_placement = "bottom", @data_trigger = "hover", @data_popover_content = "\\#bookErrorPopUpContainer", @OnMouseOver = "showBookErrorBox(this)", @href = "\\#this" })).Width(50).Media("(min-width: 450px)");
columns.Command(command => command.Custom("notesBox").Text(" ").Click("showNotesBox").HtmlAttributes(new { @class = "icon- icon-note-press hasNote popOverIcon", @data_toggle = "popover", @data_popover_content = "\\#notesPopUpContainer", @data_placement = "bottom", @href = "\\#this" })).Title("הערה").Width(90).Media("(min-width: 450px)");
columns.Bound(o => o.ProductId).Title("" + T("matrix.plugin.bookslists.addtoschoollistshort") + "").Width(120).Media("(min-width: 450px)").ClientTemplate(@Html.ActionLink(" ", "SchoolBooksListsButtons", "BooksLists", new { ProductId = "\\#=ProductId\\#" }, new { @class = "modal-link icon-icon-add-list", @onclick = "addToSchoolList(this)" }).ToHtmlString());
columns.Command(command => command.Custom("deleteBook").Text(" ").Click("DeleteBookGetData").HtmlAttributes(new { @class = "icon-icon-delete popOverIcon", @data_toggle = "modal", @data_target = "\\#deleteBookModal" })).Title("הסרה").Media("(min-width: 450px)");
columns.Template(@<text></text>).ClientTemplate("\\#=resInnerTableColTemplate(data)\\#").Title(" ").Media("(max-width: 450px)");
})
.DataSource(dataSource => dataSource
.Ajax()
.PageSize(10)
.Read(read => read.Action("GetCustomerAttachProductsList", "BooksLists", new { ListId = "#=Id#" }))
)
.Pageable()
.Sortable()
.Navigatable()
.ToClientTemplate()
)
</script>

Thanks!

Grid

answered on 07 Aug 2019