Questions on UI for ASP.NET MVC Forum

5 answers

1.5K+ 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

305 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.2K+ 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

816 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

417 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

5 answers

465 views

kendo child grid, dropdown list not rendering properly

I am using editor template for child grid column. It is rendering for the first child grid. Like seeing in attached picture it is not rendering for the second child grid.

columns.Bound(p => p.RoleId).EditorTemplateName("UserRole").Title(ViewBag.Location).ClientTemplate("\\#:RoleName\\#");

Grid

answered on 31 Jul 2019

2 answers

4.1K+ views

Custom Command Button

I have a custom command in my grid:

columns.Command(command => { command.Edit(); command.Custom("InvoiceDetails"); command.Destroy(); }).Width(200);

When the user clicks this button I would simply like to navigate to the page Details on the controller InvoiceController with the correct InvoiceID from the appropriate row the user clicked.
It seems this used to be done like so

commands.Custom("InvoiceDetails").Action("Details", "Invoice").DataRouteValues

However I have no action method on the custom command only a click method?
Where has this action method gone, and how do I now use the click method?
I'm using ASP.net Core 1.

Grid

answered on 29 Jul 2019

3 answers

1.3K+ views

Cascading DropDownList with multiple parents

I have a form where the values available in one drop down list depend on the values of two other drop down lists. I'd like for the values in this drop down list to be refreshed whenever either of these two parent lists changes. I searched and found that this functionality is available in Kendo UI. Is it possible to achieve this in MVC?

DropDownList

answered on 29 Jul 2019

3 answers

6.8K+ views

Conditional Statement Client Template

I've got a grid with a client template and need to escape the conditional statement active, but I can't work out how to do it.

I've tried

col.Bound(c => c.Active).ClientTemplate("\\# if (Active == true) {#<button class='btn btn-success'>\\#: Active\\#</button>#} \\#");

col.Bound(c => c.Active).ClientTemplate("# if (\\Active\\ == true) {#<button class='btn btn-success'>\\#: Active\\#</button>#} #");

col.Bound(c => c.Active).ClientTemplate("# if (\\#:Active\\# == true) {#<button class='btn btn-success'>\\#: Active\\#</button>#} #");

Template code:

<script type="text/x-kendo-tmpl" id="projectsGridClientTemplate">

@(

Html.Kendo().Grid<TeamProjectViewModel>().Name("projectGridDetail_#=Id#")

.Columns(col =>

{

col.ForeignKey(c => c.TeamId, (SelectList)ViewBag.Teams);

col.ForeignKey(c => c.ProjectId, (SelectList)ViewBag.Projects);

col.Bound(c => c.Active).ClientTemplate("# if (Active == true) {#<button class='btn btn-success'>\\#: Active\\#</button>#}#");

})

.DataSource(ds => { ds.Ajax().Read(r => r.Action("GetTeamProjects", "ResourcePlannerApi", new { @projectId = "#=Id#" })); })

.ToClientTemplate()

)

</script>

Grid

answered on 29 Jul 2019

7 answers

725 views

[Solved] Custom Command Icon Disappears

I have a grid where I created a Custom button on it, alongside an Edit button. I also have a wee bit of javascript that adds an icon to it. When the grid first displays, the icon is there. But when I click the Edit button (and after the edit popup closes), the custom icon is no longer there. Any ideas?

Here is my grid code:

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

.Name("clientList")

.AutoBind(false)

.Resizable(r => r.Columns(true))

.Columns(col =>

{

col.Bound(c => c.ClientId);

col.Bound(c => c.ClientName).Width(900);

col.Bound(c => c.Status);

col.Bound(c => c.AdminFee).Title("Active Admin Fee").HtmlAttributes(new {style = "text-align:right; padding-right: 3px"}).Format("{0:n2} %");

col.Bound(c => c.EffectiveFrom).HtmlAttributes(new {style = "text-align:right; padding-right: 3px"}).Format("{0:d}");

col.Command(c => c.Edit());

col.Command(c => c.Custom("History").Click("showHistory"));

})

.Editable(e => e.Mode(GridEditMode.PopUp).TemplateName("AdminFeeEdit").Window(w => w.Width(525)))

.DataSource(ds => ds

.Ajax()

.Model(m =>

{

m.Id(d => d.ID);

m.Field(d => d.ClientId);

m.Field(d => d.ClientName);

m.Field(d => d.Status);

m.Field(d => d.AdminFee);

m.Field(d => d.EffectiveFrom);

m.Field(d => d.EffectiveTo);

})

.Filter(f => f.Add(a => a.Status).IsEqualTo("A"))

.Read(r => r.Action("GetClientsForAgent", "MGABilling").Data("additionalData").Type(HttpVerbs.Get))

.Update(u => u.Action("SaveAdminFee", "MGABilling"))

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

)

.Events(e =>

{

e.DataBound("gridBound");

e.Edit("centerWindow");

})

.ToolBar(tb => tb.Template(@<div style="float: right;"><label>Only Active Clients:</label><input type="checkbox" id="chkStatus" checked/></div>))

)

The javascript that adds the icon is part of the DataBound Event:

function gridBound(e) {

var filter = this.dataSource.filter();

this.thead.find(".k-header-column-menu.k-state-active").removeClass("k-state-active");

if (filter) {

var filteredMembers = {};

setFilteredMembers(filter, filteredMembers);

this.thead.find("th[data-field]").each(function () {

var cell = $(this);

var filtered = filteredMembers[cell.data("field")];

if (filtered) {