Questions on UI for ASP.NET MVC Forum

1 answer

229 views

Grid in HTML form; overriding editor for DateTime

I am using the following in a HTML form, where Model.SecheduledActions is a List<ScheduledAction> that contains a member that is a DateTime.

01.@(Html.Kendo().Grid(Model.ScheduledActions)

02. .Name("ScheduledItems")

03. .Columns(c =>

04. {

05. c.Bound(p => p.Id).Hidden().ClientTemplate("#= Id #" +

06. "<input type='hidden' name='ScheduledActions[#= index(data)#].Id' value='#= Id #' />"

07. );;

08. c.Bound(p => p.Cylinders).ClientTemplate("#= Cylinders #" +

09. "<input type='hidden' name='ScheduledActions[#= index(data)#].Cylinders' value='#= Cylinders #' />"

10. );

11. c.Bound(p => p.ScheduledDate).ClientTemplate("#= ScheduledDate #" +

12. "<input type='hidden' name='ScheduledActions[#= index(data)#].ScheduledDate' value='#= ScheduledDate #' />"

13. );

14. })

15.

16. .DataSource(dataSource => dataSource.Ajax()

17. .Model(model =>

18. {

19. model.Id(p => p.Id);

20. model.Field(p => p.Id).Editable(false);

21. })

22. .ServerOperation(false)

23. ))

However when this data is submitted, the datetime is DateTime.Min, and I have no way of editing the datetime in the grid to begin with.
How might I go about 1) being able to select a date for the ScheduledDate member, and 2) Specify the type of editor for that column?

Grid

answered on 05 Aug 2019

8 answers

88 views

Specify limits on data to pull from datasource.

I am setting up a scheduler which will always be in Month view, and want to only pull data from my database for the displayed month, reading from the database when a new month is selected. I am anticipating sending my controller the selected date in my datasource.Read call, and when the arrows at the top are clicked to select a new month, another read is performed.

How would I go about doing this?

Scheduler

answered on 05 Aug 2019

2 answers

212 views

Pop-up chart in tooltip problem

I have a bar chart, which uses a tooltip template, to show a pop-up pie chart.

This works, however if the mouse cursor is dragged from outside of the chart, the tooltip pops up an empty window. Only if the mouse is then dragged from within the chart, does the pop-up chart show correctly.

I've attached images showing what happens.

The code is:-

@(Html.Kendo().Chart<WLI_Payments.Models.SummaryChartItem>()

.Name("SummaryChartMedic")

//.Title("Paid / Awaiting Payment Requests")

.Title(ti => ti.Text("Summary by Practitioner - Number of Sessions").Font("11px Arial"))

.Theme("bootstrap")

.Legend(l => l.Visible(false))

.ChartArea(c => c.Background("transparent").Height(250))

.DataSource(ds => ds.Read(read => read.Action("GetDateRangeMedicSummary", "Dashboard").Data("chartFilterMonthly")))

.Series(series =>

{

series.Column(model => model.YIntValue).Name("Point of Delivery").Spacing(0).Labels(l => l.Visible(true).Font("9px Arial"));

})

.CategoryAxis(axis => axis

.Categories(model => model.XValue)

.Labels(labels => labels.Rotation(-45).Font("10px Arial"))

.MajorGridLines(lines => lines.Visible(false))

)

.ValueAxis(axis => axis.Numeric()

.Labels(labels => labels.Font("10px Arial"))

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Background("White")

.Template("#=tooltipTemplate(dataItem)#")

)

.Pannable(p => p.Lock(ChartAxisLock.Y))

.Zoomable(zoomable => zoomable

.Mousewheel(mousewheel => mousewheel.Lock(ChartAxisLock.Y))

.Selection(selection => selection.Lock(ChartAxisLock.Y))

)

The template is:-

<script id="childChartTemplate" type="text/x-kendo-template">

<div id="childChart" />

# setTimeout(function() { createChildChart(AdditionalID,startDate,endDate,XValue,ExtraText); }) #

</script>

var tooltipTemplate = kendo.template($("#childChartTemplate").html());

The code is:-

function createChildChart(medicID, s, e, PractName, et) {

var childDataSource = new kendo.data.DataSource({

transport: {

read: {

url: "@Url.Content("~/Dashboard/GetDateRangeMedicSessionSummary/Get")",

dataType: "json",

data: {

MedicID: medicID,

start: s,

end: e,

DirectorateID: selectedDirectorate

}

});

$("#childChart").kendoChart({

dataSource: childDataSource,

title: {

text: PractName + '(' + et + ')',

font: "11px Arial"

},

theme: "bootstrap",

legend: {

visible: true,

orientation: "horizontal",

position: "bottom"

},

seriesDefaults: {

type: "pie",

labels: {

visible: true,

format: "{0}"

}

},

series: [{

field: "YIntValue",

categoryField: "XValue",

name: "Session Type",

labels: {

visible: true,

distance: 15

}

}]

});

}

I'm not sure if it always had this bug, or if upgrading to version 2019.2.619 from a much earlier version introduced it.

Chart

answered on 05 Aug 2019

2 answers

152 views

Editable Columns - Inline vs Popup

Version: 2019.2.619

I am noticing that with Inline mode I can specify a per column Editable for the visible columns in the DataSource section, ie:

.DataSource(dataSource => dataSource
.Ajax()
.Model(model =>
{
model.Id(p => p.ITEM_LISTID);
// When Edit Mode is Inline this is applied.
model.Field(p => p.ITEM_LISTID).Editable(false);
}
)

However, when in Popup mode, I have to specify [ScaffoldColumn(false)] on the Model properties that shouldn't be editable. However, ScaffoldColumn(false) columns can no longer be used as Grid columns.

It would be nice if Popup mode only used the columns defined in the Columns markup and followed the Ediable similar to the Inline mode.

Am I missing something?

Peter

Grid

answered on 02 Aug 2019

1 answer

130 views

Printing support (toolbar)

I noticed this enhancement: https://feedback.telerik.com/kendo-jquery-ui/1357813-built-in-pdf-viewer-control-for-both-kendo-ui-and-kendo-ui-mobile from https://feedback.telerik.com/aspnet-mvc/1357610-add-mvc-pdf-viewer.

The first link mentions printing, but second does not.

Will printing be made available? Otherwise is it possible to add custom actions/buttons to the toolbar of the PDF Viewer?

PDFViewer

answered on 02 Aug 2019

5 answers

1.3K+ views

Display Validation Message Based on DropDown Selection

I have an application which has two kinds of donors: individuals and organizations. Each donor type has different required fields. When organization is selected as the donor type, I want to prompt the user to select an organization type before adding/saving.

Organization type is required for organizations.

I'm looking for a simple example of how to do this.

Thanks in advance.

DropDownList

answered on 02 Aug 2019

6 answers

182 views

Ajax Grid filtered by DropDownList needs data passed to EditorTemplate

Hello,

I've got an ajax bound grid that is loading based on the chosen option in a dropdownlist. I would like to pass the value of the dropdownlist along with another model parameter (the ID of the row) to the EditorTemplate but I can't seem to do this. I tried adding the IDas a Field so it would be bound to a hidden in the EditorTemplate but this doesn't seem to be working. Also not sure how to get the dropdownlist passed in to the EditorTemplate. I know how to do it for the Read method but it didn't work the same for the Create.

Here is the View:

@{

ViewBag.Title = "PRP Members";

}

<h2>PRP Members</h2>

@Html.Partial("_LastViewedUserFacility")

<div class="filter">

<label class="filter-label" for="filter">Filter:</label>

@(Html.Kendo().DropDownList()

.Name("Filter")

.DataTextField("Code")

.DataValueField("ID")

.Events(e => e.Change("onChange"))

.BindTo((System.Collections.IEnumerable)ViewData["PRPs"])

)

</div>

<br class="clear" />

<br />

@(Html.Kendo().Grid<PASSAdmin.ViewModels.UserFacilityAdmin.PRPMemberViewModel>()

.Name("PRPMembers")

.Columns(columns =>

{

columns.Command(command => { command.Edit(); }).Width(90);

columns.Bound(c => c.First_Name).Title("First Name");

columns.Bound(c => c.Last_Name).Title("Last Name");

columns.Bound(c => c.Chair);

})

.ToolBar(toolbar => toolbar.Create())

.Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("UserFacilityAdmin/PRPMember").Window(window => window.Width(400)))

.Sortable()

.AutoBind(true)

.DataSource(dataSource => dataSource

.Ajax()

.Model(model =>

{

model.Id(m => m.Pool_ID);

model.Field(f => f.Pool_ID);

})

.Create(create => create.Action("AddPRPMember", "UserFacilityAdmin"))

.Read(read => read.Action("GetPRPMembers", "UserFacilityAdmin").Data("additionalData"))

.Update(update => update.Action("UpdatePRPMember", "UserFacilityAdmin"))

)

<script type="text/javascript">

function additionalData(e) {

var value = $('#Filter').data('kendoDropDownList').value();

return { prpID: value };

}

function onChange() {

$('#PRPMembers').data('kendoGrid').dataSource.page(1);

}

</script>

Grid

answered on 02 Aug 2019

1 answer

1.1K+ views

Hide column from grid while exporting to excel

I want to hide/remove one column when the data exported to excel..But that should be visible in grid. Can anybody please help regarding this ?? Thanks in advance.

Here is my whole code :

<div class="container content-xs" style="padding-top:10px">
<form id="EnableAssForm" action="/admin/EnableAssesmentStatus/"
method="post">
<div class="row">
@Html.Partial("_AdminSideBar")
<div class="col-md-9">
<div class="panel panel-default">

<a title="add new ground" class="btn btn-success btn-sm
pull-right showwaiting" href="@Url.Action("Create")"><i class="fa
fa-plus-square fa-margin"></i>Add</a>
@(Html.Kendo().Grid<Database.Model.UserSummaryInfo>()
.Name("Grid")
.Columns(col =>
{
col.Bound(c => c.ApplicationUserId).Hidden();
col.Bound(c => c.MemberId).Title("Member ID");
col.Bound(c => c.Visit).Title("Visit");
col.Bound(c => c.CreatedDate).Title("Visit Start Date");
col.Bound(c => c.LogInCount).Title("LogIn Count");
col.Bound(c => c.SurveyStatus).Title(" Survey Status");

col.Bound(c => c.ApplicationUserId).HeaderTemplate(@<text>Action</text>).ClientTemplate("# if(SurveyStatus == 'Did Not Attempt') { #" + "<a class='btn btn-primary disabled' style='display: none;' href='" + Url.Action("TestDetails", "Admin") + "?id=#= TestSummaryId #&Year=#=Year#'" + " >Details</a>" + "# }else{#" + "<a class='btn btn-primary enabled' style='width:60px' href='" + Url.Action("TestDetails", "Admin") + "?id=#= ApplicationUserId #&Year=#=Year #&testSummaryId=#=TestSummaryId#'" + ">Details</a>" + "# }#")
.HeaderHtmlAttributes(new { style = "text-align: center;font-size:18px" });
})
.ToolBar(toolbar => toolbar.Template(@<text>
<div class="pull-left index-header">Test Summary</div>
<button type="button" class="btn btn-primary rounded pull-right margin-right-10" onclick="clearFiter()"><i class="fa fa-times-circle-o margin-right-5"></i> Clear Filter</button>
<a style="padding-right:5px;" class="k-button-icontext k-grid-excel btn btn-primary pull-right margin-right-10" href="#"><span class="fa fa-file-excel-o"></span>Export to Excel</a>
</text>))
.Excel(excel => excel
.FileName(DateTime.Now.Date.ToShortDateString() + " " + "GetUserSummary.xlsx")


.AllPages(false)

.ProxyURL(Url.Action("Excel_Export_Save", "Admin")))
.Pageable(paging => paging.PageSizes(new int[] { 100, 500, 1000 }).Refresh(true).ButtonCount(5).Info(true).Input(true))
.Sortable(sortable =>
{
sortable.SortMode(GridSortMode.SingleColumn);
})
.Groupable()
.Scrollable(s => s.Height("auto"))
.Filterable(filterable => filterable.Operators(operators => operators.ForNumber(nmbr => nmbr.Clear().IsEqualTo("Is equal to").IsLessThan("Less than").IsGreaterThan("Greater than").IsNotEqualTo("Not equal to")).ForString(str => str.Clear().Contains("Contains").IsEqualTo("Is equal to").StartsWith("Starts with").IsNotEqualTo("Is not equal to")).ForDate(date => date.Clear().IsGreaterThan("Is after").IsLessThan("Is Before").IsGreaterThanOrEqualTo("Is after or equal to").IsLessThanOrEqualTo("Is before or equal to"))))
.Resizable(resize => resize.Columns(true))

.Events(e => e.ExcelExport("Hidecolumn"))

.DataSource(datasource =>
datasource
.Ajax()
.Sort(sort => {
sort.Add(c => c.MemberId).Ascending();
sort.Add(c => c.Visit).Ascending();
})
.PageSize(10)
.Read(read => read.Action("GetUserSummaryList", "Admin"))
)
)
</div>
</div>
</div>

</form>
</div>

<script>
var exportFlag = false;
$("#Grid").data("kendoGrid").bind("excelExport", function (e) {
debugger;
if (!exportFlag) {
e.sender.hideColumn(2);
e.preventDefault();
exportFlag = true;
setTimeout(function () {
e.sender.saveAsExcel();
});
} else {
e.sender.showColumn(2);
exportFlag = false;
}
});


function Hidecolumn(e) {

e.sender.hideColumn(2);
}

</script>

Grid

answered on 01 Aug 2019

5 answers

668 views

Week view without times

We have a need to display a weekly schedule in which each day of the week usually has one to a max of 3 short events. So we don't want to display rows for hours (or any interval) of the day. Can we configure the week view to display a week the way the month view does? Or can we configure the month view to show only a single week at a time? Displaying the whole month makes a given week too cramped.

Scheduler

answered on 31 Jul 2019

2 answers

367 views

grid int? foreign key in line edit error

I have grid with nullable int foreign key:

Create method work as expected, foreign key value is present in the model, but when i try to edit foreign key value to null, or cancel edit without setting value, i'm getting javascript error:

VM1494:3 Uncaught TypeError: Cannot set property 'Value' of null

at eval (eval at setter (kendo.all.js:2118), <anonymous>:3:24)

at o._set (kendo.all.js:4963)

at o.accept (kendo.all.js:5180)

at kendo.all.js:7018

at init._eachItem (kendo.all.js:6996)

at init._cancelModel (kendo.all.js:7014)

at init.cancelChanges (kendo.all.js:6880)

at init.cancelRow (kendo.all.js:61601)

at init._editCancelClick (kendo.all.js:61319)

at HTMLAnchorElement.proxy (VM1001 jquery-3.3.1.js:10268)

I tried GridForeignKey template and custom template with ValuePrimitive set to true.

Custom template:

@(

Html.Kendo().DropDownListFor(m => m)

.OptionLabel("")

.AutoBind(false)

.BindTo((System.Collections.IEnumerable)ViewData["dictionaryType_Data"])

.DataValueField("Id")

.DataTextField("Name")

.ValuePrimitive(true)

)

Model:

public class DictionaryTypeModel

{

public DictionaryTypeModel() { }

public int Id { get; set; }

public string Code { get; set; }

public string Name { get; set; }

public int? ParentId { get; set; }

public string Deleted { get; set; }

}

Grid:

@(Html.Kendo().Grid<RDEapp.Models.DictionaryTypeModel>()

.Name("DictionaryTypeGrid")

.Columns(c =>

{

c.Bound(m => m.Name);

c.Bound(m => m.Code);

c.Bound(m => m.Deleted);

c.ForeignKey(m => m.ParentId, (List<RDEapp.Models.TypSlownikaModel>)ViewData["dictionaryType_Data"], "Id", "Name")

c.Command(command =>

{

command.Edit().Text("Edit");

command.Custom("Delete").IconClass("k-icon k-i-delete").Click("deleteType");

}).Width(200);

})

.ToolBar(toolbar => toolbar.Create().Text("Add dictionary type"))

.Editable(edit => edit.Mode(GridEditMode.InLine).DisplayDeleteConfirmation(false))

.Selectable(selectable => selectable

.Mode(GridSelectionMode.Single)

.Type(GridSelectionType.Row))

.DataSource(dataSource => dataSource

.Ajax()

.PageSize(25)

.Model(model =>

{

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

model.Field(u => u.Id).Editable(false);

model.Field(u => u.Deleted).Editable(false).DefaultValue("N");

model.Field(u => u.ParentId.Value).Editable(true);

model.Field(u => u.Name).Editable(true);

model.Field(u => u.Code).Editable(true);

})

.Read(u => u.Action(RDEapp.Controllers.AdminController.NazwyMetod.DictionaryTypeRead, RDEapp.Controllers.AdminController.Name))

.Create(create => create.Action("AddDictionaryType", RDEapp.Controllers.AdminController.Name))

.Update(upd => upd.Action("EditDictionaryType", RDEapp.Controllers.AdminController.Name))

.Destroy(del => del.Action("DeleteDictionaryType", RDEapp.Controllers.AdminController.Name))

.Events(e => e.Error("crudErrors"))

)

.Pageable()

)

Grid

answered on 31 Jul 2019