Questions on UI for ASP.NET MVC Forum

1 answer

170 views

I'm having a heck of a time building a line chart, showing what I want.

Here is the scenario: It is an MVC app, and I want to load a line chart with historical payroll data for each month, so along the bottom axis, there'd be a column for "Jan", "Feb", "Mar", "Apr", etc... Along the side axis will be amounts. Each column should be the value for the specific month.

There will be a variable number of line series for each year. A client may have values for 2017-2020, or values for 2014-2018.. SO the number of lines on the chart would be variable, but the columns are static...

I have attached an image of what the data looks like in a spreadsheet. I am not building these series manually, they are coming from a database. I just need some help with transforming the data as shown in the spreadsheet image into a collection that this damn line chart will accept, and plot how I want it to.

Chart

answered on 17 Apr 2020

8 answers

2.9K+ views

Multiselect does not send data to controller method

Hi, I've been working at this for some time to no avail. Here is my code:

// view models

public class RegisterViewModel

{

[Required]

[Display(Name = "Roles")]

public List<RoleModel> RolesList { get; set; }

}

public class RoleModel

{

public string Id { get; set; }

public string Name { get; set; }

}

// view

@model ERMgtProgram.Models.RegisterViewModel

@using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form" }))

{

<div class="form-group">

@Html.LabelFor(m => m.RolesList)

@(Html.Kendo().MultiSelectFor(m => m.RolesList)

.Name("RolesList")

.Placeholder("Select roles")

.DataTextField("Name")

.DataValueField("Id")

.HtmlAttributes(new { style = "width: 485px;" })

.IgnoreCase(true)

.AutoBind(true)

.DataSource(datasource =>

{

datasource.Read(read => read.Action("ReadRolesList", "Manage"));

})

)

</div>

<div class="form-group">

<div class="col-md-offset-2 col-md-10">

<input type="submit" class="k-button" value="Register" />

</div>

}

<script>

$(document).ready(function () {

var multiSelect = $("#RolesList").data("kendoMultiSelect");

});

</script>

// Controller method for reading data

[Authorize(Roles = "DM_Admin")]

public async Task<ActionResult> ReadRolesList()

{

var dmRoles = await RoleManager.Roles.Where(r =>

r.Name.Contains("DM_")).ToListAsync();

var roles = dmRoles.Select(u => new RoleModel

{

Id = u.Id,

Name = u.Name

}).ToList();

return Json(roles, JsonRequestBehavior.AllowGet);

}

// controller method that widget posts back to

public async Task<ActionResult> Register(RegisterViewModel model)

{

if (ModelState.IsValid)

{

// additional code

}

// additional code

}

So, in the view, the MultisSelect widget populates with the correct list of roles, and I am able to select them and everything is fine, and when I click the button to submit the form the correct "Register" controller method is called.

However, ModelState.IsValid == false and my model.RolesList is empty

Additionally, I receive this exception:

Exception {"The parameter conversion from type 'System.String' to type 'ERMgtProgram.Models.RoleModel' failed because no type converter can convert between these types."} System.Exception {System.InvalidOperationException}
When debugging I can see that the attempted value was: "AttemptedValue "2" string"

Why is the MultiSelect widget not posting back to the controller with type: List<RoleModel>, and what is an efficient fix for this issue?

Thanks for all the help!
Ruben

MultiSelect

answered on 17 Apr 2020

2 answers

610 views

[Solved] InLine Editable Grid with Dynamically Visible Checkboxes in Cells

Hi,

we have a InLine editable grid that has several columns that may or not require a checkbox in them based on a flag in the model used for the grid.

The combination of which checkboxes are available varies from row to row (see attached image). For any cells that have a checkbox, this should be editable when you go into the edit mode for the row.

I have managed to get this to display properly using a client template when viewing the grid using the code:

.ClientTemplate("<div style='text-align:center'># if(data.PrivateCircuitExpected) {# <input type='checkbox' disabled='disabled' #= data.PrivateCircuit ? checked='checked' :'' #></input> #}#</div>")

In the case of this column data.PrivateCircuitExpected defines whether this row should have a checkbox. data.PrivateCircuit is whether this value is ticked or not.

The one issue I'm having is that checkboxes appear in all columns when you go into the edit mode for the row as in attached image.

What would be the best approach to allow checkboxes to be hidden in edit mode if, in this case, data.PrivateCircuitExpected is false?

Thank you

Grid

answered on 17 Apr 2020

1 answer

1.8K+ views

Dropdown showing as textbox

Hi,

I am facing the following issue: my dropdown, that is inside a Kendo UI grid, is showing as textbox.

Here is the code of the grid:

@model Portal.Web.Areas.Orders.Models.IngressoMerceViewModel<br><br>@(Html.Kendo().Grid<Portal.Web.Areas.Orders.Models.IngressoMerceGridViewModel>()<br> .Name("grid")<br> .Events(e => e.DataBound(@<text>function() {for (var i = 0; i @Html.Raw("<") this.columns.length; i++) {this.autoFitColumn(i);}}</text>))<br>.Columns(columns =><br>{<br>columns.Template("<input type='checkbox' />");<br>columns.Bound(p => p.Posizione).Title("Posizione").Width(200);<br>columns.Bound(p => p.Materiale).Title("Materiale").Width(200);<br>columns.Bound(p => p.Description).Title("Testo breve").Width(200);<br>columns.Bound(p => p.WarehouseLogicStore)<br> .Editable("false").Width(200)<br>.ClientTemplate(Html.Kendo().DropDownList().Events(e => e.Change("change"))<br>.Name("WHLogicValue").DataTextField("Code").DataValueField("Code").DataSource(source =><br>{<br>source.Read(read =><br>{<br>read.Action("WarehouseLogicTypes_Read", "IngressoMerce");<br>});<br>}).Deferred(!Model.IsAjax).ToClientTemplate().ToString()<br><br>);<br>columns.Bound(p => p.Quantity).Title("Qta Ordine").Width(200);<br>columns.Bound(p => p.UnitOfMeasure).Title("UM").Width(200);<br>columns.Bound(p => p.ReceivedQty).Title("Qta già ricevute").Width(200);<br>columns.Template("<input type='text' value=#= InProgressQtyCheck# onclick=\"myFunction(p)\"/>").Title("Qta ricevute");<br>columns.Template("<input type='checkbox' />").Title("Completa Pos.Ordine");<br>columns.Bound(p => p.InProgressQtyCheck).Title("Qta da ricevere").Width(200);<br>columns.Bound(p => p.ExpectedDeliveryDate).Format("{0:dd/MM/yyyy}").Title("Data consegna prevista").Width(200);<br>columns.Bound(p => p.QualityCheckNeeded).Title("Check qualitativo richiesto").Width(220);<br>})<br>.Pageable()<br>.Sortable()<br>.Scrollable()<br>.HtmlAttributes(new { style = "height:430px;" })<br>.DataSource(dataSource => dataSource<br>.Ajax()<br>//.Read(read => read.Url("/orders/details").Type(HttpVerbs.Get))<br>.Read(read => read.Action("OrderDetails_Read", "IngressoMerce", Model))<br>)<br>.Deferred(!Model.IsAjax)<br><br><br><br>)<br><br><br><br> <script><br> myFunction(p)<br> {<br><br> }<br> </script>

Here is the call of the action method, that does not fire in the controller:

[AllowAnonymous]
public async Task<JsonResult> WarehouseLogicTypes_Read()
{
try
{
var types = await gateway.GetWarehouseLogicTypes();

return Json(types);
}
catch (Exception ex)
{
//logger.LogError(ex.Message);
throw ex;
}
}

DropDownList

answered on 17 Apr 2020

1 answer

664 views

[Solved] Grid with external DatePicker filter

I have a view that contains a DatePicker and Grid.

I would load data to Grid, using DatePicker value.

I'm using a submit form that fires an Action.

I use this approach, because the data to be recovered are many and also have fields that must be calculated according to the date indicated, before loading the collection

What is the best practice to post the data filter and then load the data in the grid? I do not know how to do! :-(

01.<form asp-action="Item_Read" asp-controller="Home">

02. <p>Filtri disponibili</p>

03. <div class="form-group">

04. <label>Data</label>

05. @(Html.Kendo().DatePicker()

06. .Name("dateFilterDatepicker") // The name of the DatePicker is mandatory. It specifies the "id" attribute of the widget.

07. .Min(new DateTime(1900, 1, 1)) // Sets the min date of the DatePicker.

08. .Max(new DateTime(2099, 12, 31)) // Sets the max date of the DatePicker.

09. .Value(DateTime.Today) // Sets the value of the DatePicker.

10. .DateInput(true)

11. )

12. </div>

13. <div class="form-group">

14. @(Html.Kendo().Button()

15. .Name("textSearchButton")

16. .HtmlAttributes( new {type = "submit"} )

17. .Content("Ricerca")

18.)

19. </div>

20.

21. <div class="text-center form-group">

22. @(Html.Kendo().Grid<ItemModel>()

23. .Name("itemGrid")

24. .ToolBar(t => t.Search())

25. .Filterable()

26. .Columns(columns =>

27. {

28. columns.Bound(f => f.No);

29. columns.Bound(f => f.Description);

30. columns.Bound(f => f.Brand);

31. columns.Bound(f => f.NetChange);

32. columns.Bound(f => f.PurchasesQty);

33. columns.Bound(f => f.LastEntryDate).Format("{0:dd/MM/yyyy}"); ;

34.

35. })

36. .Pageable() // Enable paging

37. .Sortable() // Enable sorting

38. .Scrollable(scrollable => scrollable.Virtual(true))

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

40. .DataSource(dataSource => dataSource //Configure the Grid data source.

41. .Ajax() //Specify that Ajax binding is used.

42. .PageSize(20)

43.

44. )

45. )

46. </div>

47. </form>

Grid

answered on 17 Apr 2020

4 answers

347 views

Kendo Autocomplete jQuery Steps Duplicate Query

Hi,

I am using the Kendo UI autocomplete control instead of a jQuery steps wizard:

http://www.jquery-steps.com/

Is this control compatible with the wizard? When searching for suggested answers, there are two calls to my database. When I remove the auto complete from the wizard, then it works fine. It would appear the wizard is rendering the control once, but the HTML to search for suggested answers twice. Here is how the control looks:

@{

ViewBag.Title = "Add Rules";

}

@using ConnexForQuickBooks.Web.Models;

@using ConnexForQuickBooks.Model;

@model RuleSetViewModels

<div class="content">

<div class="card">

<div class="card-header bg-white header-elements-inline">

<h6 class="card-title">@ViewBag.Title</h6>

</div>

@using (Html.BeginForm("Index", "RuleSet", FormMethod.Post, new { @class = "wizard-form steps-basic-rules", id = "PairQBForm" }))

{

<h6>Give the rule a name.</h6>

<fieldset>

<div class="row">

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

<div class="form-group">

<label class="col-lg-3 control-label">Rule Name:</label>

<div class="col-lg-9">

@Html.TextBoxFor(model => model.RuleSet.SetName, new { @class = "form-control" })

</div>

</fieldset>

<h6>Perform this action</h6>

<fieldset>

<div class="row">

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

<div class="form-group">

@Html.LabelFor(model => model.RuleSet.Action, "Action:", new { @class = "text-semibold" })

@Html.DropDownListFor(model => model.RuleSet.Action, Model.Actions, new { @class = "select-search" })

</div>

</fieldset>

<h6>If these conditions are met</h6>

<fieldset>

<div class="row">

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

@Html.Partial("~/Views/Shared/RulesTemplates/_RulesGrid.cshtml", Model)

<p> </p>

</div>

</fieldset>

<h6>Then map this value</h6>

<fieldset>

<div class="row">

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

<div class="form-group">

@Html.LabelFor(model => model.RuleSet.ActionValue, "Map To:", new { @class = "col-lg-3 control-label" })

<div class="col-lg-9">

@(Html.Kendo().AutoCompleteFor(model => model.RuleSet.ActionValue)

.Filter("contains")

.MinLength(3)

.DataSource(source =>

{

source.Read(read =>

{

read.Action("XX", "XX")

.Data("onAdditionalData2");

})

.ServerFiltering(true);

})

)

</div>

</fieldset>

<h6>Did the rule work? Let's find out.</h6>

<fieldset>

<div class="row">

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

<div class="form-group">

@Html.LabelFor(model => model.Connection, "Choose connection:", new { @class = "text-semibold" })

@Html.DropDownListFor(model => model.Connection, Model.Connections, new { @class = "select" })

</div>

<div class="form-group">

@Html.LabelFor(m => m.StringOrders, "Order Numbers:", new { @class = "text-semibold" })

@Html.TextBoxFor(model => model.StringOrders, new { @class = "form-control" })

</div>

<div class="text-left" style="padding-bottom: 10px;">

<button class="btn btn-primary" onclick="rebindRulesPreviewer()">Save and Preview Rule</button>

</div>

<div style="padding-bottom: 10px;">

@Html.Partial("~/Views/Shared/RulesTemplates/_RulesPreviewer.cshtml")

</div>

</fieldset>

@Html.HiddenFor(m => m.RuleSet.ID)

}

</div>

<script type="text/javascript">

/** Rebinds the rules previewer grid, so it shows with the order number */

function rebindRulesPreviewer() {

$("#OrderPreviewerGrid").data("kendoGrid").dataSource.read();

updateRuleSet();

}

/** When the user chooses an action, this method updates the rule in the database */

function updateRuleSet() {

$.post("/ruleset/updateruleset", { ruleSetId: $("#RuleSet_ID").val(), setName: $("#RuleSet_SetName").val(), action: $("#RuleSet_Action").val(), actionValue: $("#RuleSet_ActionValue").val() })

.done(function (data) {

console.log("Data Loaded: " + data);

})

}

function onAdditionalData2() {

return {

actionRule: $("#RuleSet_Action").val(),

q: $('#ActionValue').val()

};

}

</script>

AutoComplete

answered on 17 Apr 2020

1 answer

388 views

Remote validation Not working as excepted

I was searching for Grid remote validation and I reached your demo demo.
I Have two questions .

1-In this demo validator shows the error message but accepts the input.is there any way that we prevent adding record to data base when remote validation result is false?
in your demo I have added many of the same name product and validation does not prevent me doing this.

2-this message is not shown for editing. but I could not find how you handled this is source.

Grid

answered on 17 Apr 2020

1 answer

813 views

Conditional tooltip based on Model property

I have a column chart that I need to conditionally hide the tooltip based on a property of the model data that fills said chart.

public class chartModel

{

public int ID { get; set; }

public string Name {get; set;}

public bool ShowTooltip { get; set; }

public double FeesYTD { get; set; }

}

@(Html.Kendo().Chart<chartModel>()

.Name("topFees")

.ChartArea(chartArea => chartArea

.Background("transparent")

.Height(300)

)

.DataSource(ds => ds.Read(read => read.Action("FeeChartData", "PracticeAnalytics")))

.SeriesDefaults(sd => sd.Column().Stack(false).Gap(.7).Overlay(ChartBarSeriesOverlay.None))

.Series(series => series

.Column(model => model.FeesYTD)

)

.Tooltip(tooltip => tooltip

.Visible(true)

.Shared(true)

.SharedTemplate(

"# for (var i = 0; i < points.length; i++) { #" +

"# if (points[i].value !== 0) { #" +

"<div>#: points[i].series.Name# #: points[i].series.name# : #: kendo.format('{0:C}',points[i].value) #</div>" +

"# } #" +

"# } #"

)

Basically if the model.ShowToolTip is true then I want to show the tooltip, otherwise hide it. Best I could find that is similar is using SharedTemplate, but I don't think I can access my model properties, only category and series. So where in my example I have if (points[i].value != 0) I need something like if (model.ShowToopTip).

Chart

answered on 16 Apr 2020

2 answers

187 views

[Solved] In html, Filtering columns first by number value, then by alphabet

Hello, the project I am working on is creating a kendo sheet via a string that is passed to the View, e.g.:

"{\"sheets\": [{\"frozenRows\": 1, \"frozenColumns\": 1, \"name\": \"xxxx\", \"filter\":{\"ref\":\"A1:Z__\", \"columns\":[]}, ......."

I need to modify this string to change the column sorting to filter first by numerical value, then by alphabetical order. The bug being reported with the current filter setup is that if you sort a column that has e.g. between 10 and 20 rows in it, with values of consecutive integers like 1, 2, 3, ..., the sorted order will be:

1

10

2

3

...

I need to get the column to sort the numbers in correct ascending order first, and then by alphabetical order following any integer values at the start. Can I ask for help on how to do this? Thank you!

Spreadsheet

answered on 16 Apr 2020

2 answers

214 views

[Solved] The data from the response coming to the MultiSElectFor, but it is not updated.

Hello!
I have a controller for editing a treeview. The view contains a grid with the fields of the node.
The node has a list of groups that can be selected in MultiSelectFor “Gruops”.
A node should have only those groups that its parent has.
Therefore, after selecting a new parent in the parent list "Parent", "Gruops" should contain only the groups of the selected parent.
I implement this with an event "onChange".

After choosing a new parent, the list of groups of this parent falls into the "Groups". But the "Groups" are not updated (see. image).

Parent

01.@(Html.Kendo().DropDownListFor(x=>x.ParentId)

02. .DataTextField("Name")

03. .DataValueField("Id")

04. .OptionLabel("Set as root")

05. .Height(400)

06. .Value(Model.Name)

07. .Text(Model.Name)

08. .Template(altParentItem)

09. .DataSource(x => x

10. .Custom()

11. .Group(g => g.Add("ParentName", typeof(string)))

12. .Transport(t => t.Read(read => read.Action("AlterParents", "TreeView").Data("getSelectedRowId")))

13. )

14. .Filter(FilterType.Contains)

15.

16. // !!!

17. .Events(x =>

18. {

19. x.Change("onChange");

20. })

21.

22. .HtmlAttributes(new { data_value_primitive = "true" })

23.)

onChange

01.function onChange(e) {

02. var altParent = this.dataItem(e.item);

03. $.ajax({

04. url: "/TreeView/Groups",

05. type: 'GET',

06. data: { selectedRow_ParentId: altParent.Id },

07. success: function (data) {

08. console.log(data);

09. },

10. error: function (er) {

11. console.log(er);

12. }

13. })

14.}

Group

1.@(Html.Kendo().MultiSelectFor(x => x.Groups)

2. .DataTextField("Name")

3. .DataValueField("Id")

4. .DataSource(x => x.Read(read => read.Action("Groups", "TreeView").Data("getSelectedRowId"))

5. ))

Action Group

01.public JsonResult Groups(string selectedRow_ParentId)

02.{

03. using (TreeViewEntities context = new TreeViewEntities())

04. {

05. if (string.IsNullOrEmpty(selectedRow_ParentId))

06. {

07. var allGroups = context.Group

08. .AsEnumerable()

09. .Select(x => new

10. {

11. Id = x.Id.ToString(),

12. Name = x.Name

13. })

14. .ToList();

15.

16. return Json(allGroups, JsonRequestBehavior.AllowGet);

17. }

18.

19. var nodeGroups = context.Node

20. .AsEnumerable()

21. .First(x => x.Id == long.Parse(selectedRow_ParentId)).Group

22. .Select(x => new

23. {

24. Id = x.Id.ToString(),

25. Name = x.Name

26. })

27. .ToList();

28.

29. return Json(nodeGroups, JsonRequestBehavior.AllowGet);

30. }

31.}

MultiSelect

answered on 15 Apr 2020