Questions on UI for ASP.NET MVC Forum

1 answer

342 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

720 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

153 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

167 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

929 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

208 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

264 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

answered on 14 Apr 2020

9 answers

1.1K+ views

Accessing Child Grid table using Jquery

I have a grid with 2 hierarchy, one parent and one child.

I'm trying to override the child grids in built "delete" function by adding a custom command to it and calling a javascript function.

When i call the javascript function, i can call

$(e.target).closest("tr");

to get the current selected row, however i have no idea how i can get the child grid object using javascript.

For example, the child grid would be defined as follows:

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

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

.Name("grid_#=Id#")

Normally you would access any kendo grid by doing the following

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

And so i have tried

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

But to no avail.

What's the correct way of getting the child's grid object using javascript?

Grid

answered on 13 Apr 2020

3 answers

86 views

Set default format for all Dates in a grid

Hi, we are able to set the format for a date column using column binding such as follows:

c.Bound(col => col.Created).Title("Date").Format("{0: yyyy-MM-dd HH:mm:ss UTC}");

Is there a way to dictate formatting at the grid level so that all grid columns receive the format and we don't have to repeat the format string for each column? This would be especially useful for us because we extract our default grid settings to an extension method, so we would be able to dictate the default format for all columns for all grids in one place.

Grid

answered on 13 Apr 2020