Questions on UI for ASP.NET MVC Forum

1 answer

136 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.3K+ 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

322 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

400 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

124 views

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

1 answer

1.4K+ views

Grid selectedKeyNames wont return id's across pages

I'm trying to use the Kendo Grid in ASP.NET Core MVC application to do multi-select function, first column of the grid being a checkbox column.

My grid has 50 records spread across 5 pages. I have 2 items selected in the first page, 1 item selected in the 2nd page. I use DataBound event to pre-select rows from database. I save the data with a button click (outside the grid) using grid.selectedKeyNames() and post the data to database using a custom Ajax method.

I get all 3 selected ID's in grid.selectedKeyNames() as long as I navigate to second page after the initial load of the grid. If I don't go to the 2nd page of the grid and try to get selectedKeyNames, it returns only selected items from the first page. I always have to go to all the pages where items are pre-selected once to get the grid working.

Have anyone experienced this error before. Appreciate any quick workaround/solution to this problem.

Kendo UI version: v2019.2.619

//Here is my Razor syntax.

@(Html.Kendo().Grid<Web.Models.IndustryModel>

()
.Name("IndustryGrid")
.Columns(columns =>
{
columns.Bound(p => p.Checked).Width(20).ClientTemplate("<input type='checkbox' #=Checked ? checked='checked' :'' # class='chkbx' />").Hidden();
columns.Select().Width(50);
columns.Bound(p => p.IndustryId).Hidden();
columns.Bound(p => p.IndustryName).Width(100);
})
.AutoBind(false)
.Pageable()
.PersistSelection()
.Sortable()
.Events(ev => ev
.Change("onChange")
.DataBound("onDataBound"))
.DataSource(dataSource => dataSource
.Ajax()
.Model(model => model.Id(p => p.IndustryId))
.Read(read => read.Action("GetIndustryList", "xxxxxxxxxxxxx").Data("SearchData"))
)
.NoRecords(x => x.Template("<div class='empty-grid'></div>"))
)

//Trying to get the selected key names on a button click

$('#btnSave').on('click', function () {
var grid = $('#IndustryGrid').data('kendoGrid');
alert(grid.selectedKeyNames());
});

// Function to pre-load selected rows from database

function onDataBound(arg) {
var grid2 = this;
var rows = grid2.items();

$(rows).each(function (e) {
var row = this;
var dataItem = grid2.dataItem(row);
if (dataItem.Checked)
grid2.select(row);
});
}

Grid

answered on 07 Aug 2019

2 answers

318 views

Binding to Local Data from Model

I have a model with a property of IQueryable<T> that I want to bind to a grid. This achievable with the Html helper but to me it looks messy. I was trying to achieve the same with the tag helper. In the html helper it is @(Html.Kendo().Grid(Model.GridData) ... I do not see a property that I can connect the Model.GridData in <kendo-grid ...

Does anybody have a suggestion?

Grid

answered on 06 Aug 2019

1 answer

892 views

Clearing filters programmatically

When I try to do the following, the UI Filters are not reset, but the appropriate data is displayed.

var grid = $("#grid").data("kendoGrid");
grid.dataSource.filter({});

I have tried this also:
grid.dataSource.filter();

Although not ideal, this works and the UI filters are reset:

$(".k-i-filter-clear").click();

Grid

answered on 06 Aug 2019

2 answers

82 views

Default highlighted range

Current Month August:

@(Html.Kendo().DateRangePicker()

.Name("daterangepicker3")
.Format("MM/dd/yyyy")
.Range(r => r.Start(DateTime.Now.AddMonths(-1)).End(DateTime.Now.AddMonths(-1).AddDays(10)))
.HtmlAttributes(new { style = "width: 100%", title = "daterangepicker3" })
)

When the default Range is last month, clicking the date boxes, shows August, not July where the highlighted range is. Is there away to set the start month?

DateRangePicker