Questions on UI for ASP.NET MVC Forum

4 answers

297 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

347 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

735 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

155 views

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

172 views

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

3 answers

948 views

Force a filter numeric filter on string column

I have a grid where the filters are done in the server, directly in database. One of my columns is a string representation of a number, like this:

public string NumberDisplay

{

get

{

if(Number == null)

return "--";

else

return Number.Value.ToString("0.##");

}

As this is a string, the grid will show the string filters (contains, starts with, etc). How can I force a numeric filter (greater than, less than, etc.) on a string column? This is how the filtering is done in the database (as a number, not as a string):

case "NumberDisplay":

{

bool addQueryParam = true;

string sql = null;

switch (filter.Operator)

{

case GridFilterOperator.IsGreaterThan:

sql = " and (@KendoNumber is not null and mm.Number is not null and mm.Number > @KendoNumber)";

break;

...

}

if (addQueryParam)

{

queryBuilder.Where(sql);

queryBuilder.AddParameter("KendoNumber", filterValue);

}

...

Grid

answered on 15 Apr 2020

8 answers

217 views

Sass issues in last version (2020.1.219)

Hi,

We just installed version 2020.1.219 of Kendo ASP.NET MVC,
and we downloaded the SASS sources via npm (npm install @progress/kendo-theme-default),
and we have some issues

1) SCSS files are wrong, and don't want to "compile"

There are commas that remain at the end of the include. Ex :
.k-popup {
@include fill(
$popup-text,
$popup-bg,
$popup-border,
);
}

2) Some Sass rules are badly written which prevents specifying variables

Ex :
$checkbox-line-height: $checkbox-size + $checkbox-border-width !default;

Replace with

$checkbox-line-height: addtwo($checkbox-size, $checkbox-border-width) !default;

Idem with $checkbox-dash-width & $radio-line-height

3) Issues with grid page numbers

We display both the current page and all the pages.
This line is missing in the SCSS file (line present in the "standard" CSS case) :

.k-pager-wrap .k-pager-numbers .k-current-page {
display: none;
}

And even by adding this rule we have strange behavior of the pages:
the page numbers disappear but the space between the navigation arrows is present,
which makes a "hole" between them. It is enough to slightly change the size of the window
(and therefore of the grid) so that the figures appear.
I had to add a .Responsive (false) for it to work properly.

4) Issues with grid header && FireFox

This problem was present before this new version, but I take this opportunity to report a problem concerning the calculation of the padding-right on the k-grid-header.
You should know that all our grids have scrollers (Virtual or Endless)

In Firefox:
<div class = "k-grid-header" style = "padding-right: 0px;"
With Chrome:
<div class = "k-grid-header" style = "padding-right: 17px;"

This causes the header columns to be offset from the body columns

This is not systematic: it happens about 1 in 10 times.

I didn't find the reasons why it happened on some grids and not on others that seem similar

Regards

General Discussions

answered on 15 Apr 2020

7 answers

2.5K+ views

UTC to Local Datetime in Grid

Hi,
I using the Grid control and have a datetime field. I am trying to understand how to update my database with the correct datetime.
The database and website is hosted on a server that is in UTC time. My Grid shows the correct datetime and the client is in Australia. I have setup culture to en-AU and this is working correctly but when I update the database the datetime field is wrong by the timezone of +11 hours.
The Grid always shows the datetime correctly eg. database will have 16/10/2014 12:00:00 AM and it will show in the Grid as Thu Oct 16 2014 11:00:00 GMT+1100 (AUS Eastern Daylight Time).
When I update the Grid it will put into the database 16/10/2014 11:00:00 AM but show in the Grid Thu Oct 16 2014 22:00:00 GMT+1100 (AUS Eastern Daylight Time)

I then tried the example http://www.telerik.com/support/code-library/using-utc-time-on-both-client-and-server-sides
but this always show in the Grid as UTC time and I want to display the datetime in the local time.
eg. The database has 16/10/2014 12:00:00 AM and the Grid shows Thu Oct 16 2014 00:00:00 GMT+1100 (AUS Eastern Daylight Time). Updating the Grid does the same.

Is there another way of doing this?
Thanks.

Grid

answered on 14 Apr 2020

3 answers

277 views

Radial gauge angle & displaying issues

Hi,

I have 2 questions about the radial gauge :

1) center gauge area on pointer origin

If we take the example provided in the demonstration, and we change the angles from 90° to 270°, the gauge area is no longer centered relative to the container.
Is there a way for the center of the gauge to always be the origin of the pointer ?

2) 360° gauge angle

If we take the example provided in the demonstration, and we change the angles from 90° to 450°, the 0 and the 180 are displayed one on top of the other.
Is there a way to hide either end of the scale labels ?
This could be using for displaying a clock for example

Regards

Gauge