Questions on UI for ASP.NET MVC Forum

2 answers

244 views

How do you add a PopOver to a Kendo Button when using the MVC wrapper, will not let me add 'data-toggle' and 'data-content' to HtmlAttributes, if anyone has an example it would be appreciated, thanks.

Button

answered on 02 Jan 2020

1 answer

311 views

Right Align Menu Items in Bootstrap 4

When converting an existing application to use Bootstrap 4, I spent a fair amount of time trying to figure out restore right-align to menu items, so I thought I would share what I found.

Basically, it is as simple as adding the new Bootstrap class "ml-auto" to the first menu item that you wish to be right-aligned; if there are additional menu items added after that one, they too will be right-aligned, but do not need to have the class added.

I am using a SiteMap to build my menu, so I have added my own attributes to the SiteMap (see image) to configure this and other characteristics, e.g. icons. The Menu itself is added as a Partial View, and the partial contains the logic to add the custom configurations in the BindTo method (see image).

Additionally, I am using the responsive panel to toggle the menu to vertical below a breakpoint, so in my panel implementation I check the window width to remove or add the "ml-auto" class to control the display, i.e. remove the right alignment during vertical orientation and restore it when horizontal (see image)

Hope this helps someone...

Menu

answered on 02 Jan 2020

3 answers

526 views

NumericTextBox does not submit the form after changing values

I'm converting a legacy form to Telerik UI, DropDownListForm "onchange" event works without changing anything while the NumericTextBoxFor "change" and "spin" events don't work, do you know why? Here is the relevant source code of my view:

<div class="form-group">

@Html.LabelFor(m=>m.Quantity, new { @class = "col-md-3 control-label" })

<div class="col-md-4">

@*@Html.TextBox("quantity", Session["quantity"].ToString(), new { @class = "form-control", onchange = "this.form.submit();" })*@

@(Html.Kendo().NumericTextBoxFor(model=>model.Quantity).Decimals(2).Format("n0").HtmlAttributes(new { style = "width: 100%", @class = "form-control", change = "this.form.submit();", spin = "this.form.submit();"}))

</div>

<div class="form-group">

@Html.LabelFor(m=>m.SelectedYear, new { @class = "col-md-3 control-label" })

<div class="col-md-4">

@*@Html.DropDownList("numYears", (List<SelectListItem>)ViewBag.PossibleYears, new { @class = "form-control", onchange = "this.form.submit();" })*@

@(Html.Kendo().DropDownListFor(model => model.SelectedYear).BindTo(Model.YearList).HtmlAttributes(new { style = "width: 100%", @class = "form-control", onchange = "this.form.submit();" }))

</div>

NumericTextBox

answered on 02 Jan 2020

3 answers

2.1K+ views

Loading Grid Data based on Drop-down List Selection

Hello,

I need to reload the grid based on a selection from a drop-down list. I don't want to pre-load the grid and then filter, I only want the grid to be populated after a change in selected value.
I have the drop-down list, and the onChange event set up and working, the problem i am having is with the grid, its not re-loading or re-freshing with the data that is returned and i don't know why. Here is my code.

Index.cshtml

<div class="demo-section k-content">

<h4>Parents:</h4>

@(Html.Kendo().DropDownList()

.Name("parents")

.HtmlAttributes(new { style = "width:25%" })

.OptionLabel("Select parent...")

.DataTextField("FirstName")

.DataValueField("ParentId")

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

.DataSource(source =>

{

source.Read(read =>

{

read.Action("GetParents", "ParentChild");

});

})

)

</div>

<br class="clear" />

<br />

@(Html.Kendo().Grid<JustTestingWeb.Models.ChildViewModel>()

.Name("grid")

.Columns(columns =>

{

columns.Bound(c => c.ChildId).Title("ChildID").Width(40);

columns.Bound(c => c.ChildParentID).Title("ParentID").Width(40);

columns.Bound(c => c.FirstName).Width(80);

columns.Bound(c => c.LastNme).Width(80);

})

.Pageable()

.Sortable(sortable =>

{

sortable.SortMode(GridSortMode.SingleColumn);

})

.AutoBind(false)

.DataSource(dataSource => dataSource

.Ajax()

.ServerOperation(false)

.PageSize(5)

.Model(model => { model.Id(p => p.ChildId); })

.Read(read => read.Action("Get_Child_By_Id", "ParentChildController").Data("additionalData"))

)

<script type="text/javascript">

$(document).ready(function () {

var parents = $("#parents").data("kendoDropDownList");

$("#get").click(function () {

var parentInfo = "\nParent: { parentid: " + parents.value() + ", pfname: " + parents.text() + " }";

});

function additionalData(e) {

var value = $("#parents").data("kendoDropDownList").value();

return { parentid: value }; // send the parent id value as part of the Read request

}

function onChange() {

var pid= this.value();

alert(pid);

$.get('/ParentChild/Get_Child_By_Id', { parentid: pid}, function (data) {

var grid = $("#grid").data("kendoGrid");

grid.dataSource.read(); // rebind the Grid's DataSource

})

}

</script>

<style>

.k-readonly {

color: gray;

}

</style>

And here is the controller class

public class ParentChildController : Controller

{

public DbQuery db = new DbQuery();

// GET: ParentChild

public ActionResult Index()

{

return View();

}

public JsonResult GetParents()

{

var parents= db.GetParents();

return Json(parents.Select(p => new { ParentId = p.ParentId, FirstName = p.FirstName }), JsonRequestBehavior.AllowGet);

}

public ActionResult Get_Child_By_Id([DataSourceRequest]DataSourceRequest request, int parentid)

{

var result = db.GetChildren(parentid);

var children = result

.Select(c => new ChildViewModel(c.ChildParentID,c.ChildId,c.FirstName,c.LastNme))

.ToList();

return Json(children.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);

}

Grid

answered on 30 Dec 2019

1 answer

167 views

DropDownListFor in Grid shows textfields instead of dropdown

Im trying to make a Grid with inCell editing with a DropdownList in one cell.

The DropDownList is not shown correcty. When i click the cell i see a textfield for the id and the name.

@{

ViewBag.Title = "Roles";

}

<h2>Roles</h2>

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

.Name("grid")

// Die Spalten definieren

.Columns(column =>

{

column.Bound(r => r.Id);

column.Bound(r => r.Name);

column.Bound(r => r.Description);

column.Bound(r => r.App).ClientTemplate("#=App.AppName#").Sortable(false).Width(180);

column.Command(command => command.Destroy()).Width(150);

})

// Toolbar definieren

.ToolBar(toolbar =>

{

toolbar.Create();

// toolbar.Save();

})

// Das editieren findet innerhalb der Zeile statt

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

.Pageable()

.Filterable()

.Selectable()

.Sortable()

.Scrollable()

.AutoBind(true)

.HtmlAttributes(new { style = "height:550px;" })

.DataSource(dataSource => dataSource

.Ajax()

.Batch(true)

.ServerOperation(false)

.Events(events => events.Error("error_handler"))

.Model(model =>

{

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

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

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

model.Field(p => p.App).DefaultValue(

ViewData["defaultApp"] as SelectedApp);

})

.PageSize(20)

.Read(read => read.Action("Roles_Read", "Roles"))

.Create(create => create.Action("Roles_Create", "Roles"))

// .Update(update => update.Action("EditingCustom_Update", "Grid"))

// .Destroy(destroy => destroy.Action("EditingCustom_Destroy", "Grid"))

)

<script type="text/javascript">

function error_handler(e) {

if (e.errors) {

var message = "Errors:\n";

$.each(e.errors, function (key, value) {

if ('errors' in value) {

$.each(value.errors, function () {

message += this + "\n";

});

}

});

alert(message);

}

</script>

public class GridRole

{

public string Id { get; set; }

public string Name { get; set; }

public string Description { get; set; }

public Guid AppId { get; set; }

public SelectedApp App {get; set;}

}

public class SelectedApp

{

public Guid AppId { get; set; }

public string AppName { get; set; }

}

@model SelectedApp

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

.DataValueField("AppId")

.DataTextField("AppName")

.BindTo((System.Collections.IList)ViewData["apps"])

)

Grid

answered on 24 Dec 2019

1 answer

666 views

Getting data to group in Pie Charts

I have a set of data where for any given date, there is a number for each of five geographic regions. When I try to put this data in a pie chart, I get 5n different series in my pie chart, where n is the number of days of data. I just want the chart to add all the data for each region, no matter how many days, so that I just have five different series.

I've been scouring the documentation and forums for hours, but the only lead is Pie Chart Data Aggregates, which is only for the jQuery version of Kendo. I'm trying to get this to work for MVC, but the documentation for MVC Aggregates is completely unhelpful. How can I get the functionality I'm looking for?

Chart

answered on 24 Dec 2019

2 answers

174 views

Turning grouping on and off

Hi!
I have a basic scheduler working in MVC4. However I have a question as to how I enable or disable grouping on the fly.
I'm hoping to create a button either in the UI or as a separate javascript button that I can use to turn the resource grouping on or off.

Is this possible?
Thank you.

Scheduler

answered on 23 Dec 2019

1 answer

94 views

Data Binding Question

I'm currently trying to bind a DropDownList in a custom editor template. I want to populate this DropDownList with a list of organizations from the organization table.

The custom editor template is bound to the Volunteer model. A volunteer may belong to an organization, but this is not required, and there is no relationship between the Volunteer and Organization tables.

When adding a new volunteer, I want to display a list of organizations. The name of the selected organization will be saved in the Organization field of the Volunteer table.

In the case of an edit, I want to display a list of organizations in the DropDownList, with the volunteer's organization selected (in the case where the volunteer belongs to an organization).

I've searched through a number of examples, but haven't been able to find something that would work for this scenario. Any advice on how to proceed would be very much appreciated.

DropDownList

answered on 23 Dec 2019

3 answers

175 views

Custom Edit Template With Tabs

I've currently got a custom edit template which contains a large number of fields, which makes it somewhat unwieldy.

Ideally, I'd like to divide this template into sections (i.e. contact information, emergency contact information, physical limitations) with each section on its own tab.

Is this possible and, if yes, could someone point me towards some examples?

Thanks!

Grid

answered on 23 Dec 2019

1 answer

1.0K+ views

TabStrip passing content from one tab to another

I have a tabstrip that I am using as a "Wizard" and as you step through the different steps, data is entered and I am trying to figure a way to pass entered content from tab 1 to tab 2 etc. I know what the problem is but don't know how to solve it. So the tab is constructed as follows, initially just a modal window:

@(Html.Kendo().Window()

.Name("actionWindow")

.Title("(STEP 1 of 3)")

.Width(650)

.Height(300)

.Visible(false)

.Modal(true)

)

Then javascript loads the tabstrip

// this opens the cashManagement dialog action box

function cashManagement()

{

if (selectedResult.hasOwnProperty("account")) {

//debugger;

var id = selectedResult.account;

var window = $("#actionWindow").data("kendoWindow");

window.refresh({

url: '/Accounts/CashManagement/' + id,

data: { id: id }

});

window.open().center();

}

else {

}

CashManagement view:

@(Html.Kendo().TabStrip()

.Name("tabstrip")

.Animation(animation =>

{

animation.Enable(false);

animation.Open(open =>

{

open.Fade(FadeDirection.In);

open.Duration(AnimationDuration.Fast);

});

})

.HtmlAttributes(new { @class = "no-tab-tabstrip" })

.Items(tabstrip =>

{

tabstrip.Add()

.Text("")

.Selected(true)

.Content(m => Html.Partial("~/Views/CashManagement/_stepOne.cshtml", inputModel));

tabstrip.Add()

.Text("")

.Selected(false)

.Content(m => Html.Partial("~/Views/CashManagement/_stepTwo.cshtml", inputModel));

tabstrip.Add()

.Text("")

.Selected(false)

.Content(m => Html.Partial("~/Views/CashManagement/_stepThree.cshtml", inputModel));

}))

Then each of the steps gets input from the user and then the last step needs to use the data to do some server side "task".

The problem is that the tabs are all loaded when rendered so when data is entered it's after the fact and the last step is already "done". I have tried storing the input data in cookies and then attempting to reload the last tab so that it can grab the cookie data but the reload does nothing. Have tried a few attempts of reload, none error and none have any effect. The select of the last tab works so I know I have the right element. Code for reload below:

function raiseCashStepThree() {

$('#actionWindow').data("kendoWindow").title("(STEP 3 of 3)");

var tabstrip = $("#tabstrip").data("kendoTabStrip");

tabstrip.select(2);

//tabstrip.reload(tabstrip.items()[2]);

debugger;

tabstrip.reload();

//bstrip.reload(2);

$("#tabstrip").data("kendoTabStrip").select(2);

}

TabStrip