Questions on UI for ASP.NET MVC Forum

3 answers

432 views

NumericTextBox display:inline-block in html

I have a test page set up for my issue. http://http://www.ipapilot.org/test/zurbkendo.aspx

I know that this is because I am using the zurb foundation framework. When I take out the foundation css the numeric text box displays correctly. With Zurb it is 2 rows high if you will.

I wanted to fix this so I began looking at the css to fix it. Finally I what I have realized is that I believe the kendo javascript is updating the html of the numeric text box element. This overrides ANY css I would want to throw at it to correct the display.

With foundation css the element has display:block in the html

Without foundation css the element has display:inline-block in the html.

What part of the javascript does this? How do I get it to use display:inline-block? I've tried a formreset.css kind of approach where I reset the css for input elements and such but I can't find the secret sauce.

Maybe my analysis is flawed as well. I would appreciate any help in correcting this.

Thanks,

Trevor

NumericTextBox

answered on 08 Oct 2015

3 answers

88 views

NumericTextBox Select on Focus (Safari 8.0.8)

var input = e.container.find("input");

input.focus(function (e) {

setTimeout(function () {

input.select();

});

The above code snippet allows for selection of all text in the NumericTextBox upon focus in all browsers except the latest version of Safari on Mac OSX Yosemite (Version 10.10.5). Is there an update for this solution? Or is there an alternative solution that works for all browsers?

NumericTextBox

answered on 26 Aug 2015

1 answer

130 views

CurrencyTextBox and Mozilla Firefox

Hi,

We have a little problem with control @html.kendo().CurrencyTextBox. We have a view where we have definite a CurrencyTextBox, this view is called from a grid from method .EditorTemplateName(“View”)

I send you two images, one image in Internet Explorer with correct format and another from Mozilla Firefox.

Now I show you the code grid from main view:

01.@(Html.Kendo().Grid<ValoritzablesViewModel>()

02. .Name("refundables")

03. .HtmlAttributes(new { style = "height: 100%; border: 0;" })

04. .ToolBar(t =>

05. {

06. if (User.IsInRole("Modify"))

07. {

08. t.Save().SaveText("Validar");

09. }

10. })

11. .Columns(columns =>

12. {

13. columns.ForeignKey(f => f.CentreID, (System.Collections.IEnumerable)ViewBag.Centres, "ContactID", "Nom").Width(120);

14. columns.ForeignKey(f => f.CycleID, (System.Collections.IEnumerable)ViewBag.BillingCycles, "OptionID", "Name").EditorTemplateName("CustomGridForeignKey").Width(90);

15. columns.Bound(f => f.CodFact).Width(100);

16. columns.Bound(f => f.ProductorName);

17. columns.Bound(f => f.DataServei).Width(100);

18. columns.Bound(f => f.ServiceID).Width(80);

19. columns.Bound(f => f.RefExt).Width(80);

20. columns.Bound(f => f.DocNum).Width(100);

21. columns.ForeignKey(f => f.Reference, (System.Collections.IEnumerable)ViewBag.CatalegResidus, "Value", "Text");

22. columns.Bound(f => f.Quantitat).Width(80);

23. columns.Bound(f => f.Preu).ClientTemplate("#: kendo.toString(data.Preu, 'C2') # (" +

24. "# if (data.RefundFare == " + (short)fareType.Custom + ") { #Contracte" +

25. "# } else if (data.RefundFare == " + (short)fareType.Standard + ") { #Standard" +

26. "# } else if (data.RefundFare == " + (short)fareType.Premium + ") { #Premium" +

27. "# } else if (data.RefundFare == " + (short)fareType.AdHoc + ") { #Puntual" +

28. "# } else { #General" +

29. "# } #)").EditorTemplateName("RefundFare").Width(350);

30. columns.Template(@<text></text>)

31. .ClientTemplate("<input type='checkbox' #= Generate ? checked='checked':'' # class='chkbx' />")

32. .HeaderTemplate("<input type='checkbox' id='checkAllRecords' onclick='checkAll(this)' />")

33. .Width(36);

34. })

35. .Editable(editable =>

36. {

37. if (User.IsInRole("Modify"))

38. {

39. editable.Mode(GridEditMode.InCell);

40. }

41. else

42. {

43. editable.Enabled(false);

44. }

45. })

46. .Pageable(pageable => pageable.Refresh(true))

47. .Scrollable()

48. .Sortable()

49. .Filterable()

50. .DataSource(dataSource => dataSource

51. .Ajax()

52. .Batch(true)

53. .PageSize(30)

54. .Model(model =>

55. {

56. model.Id(a => a.DetailID);

57. model.Field(f => f.CentreID).Editable(false);

58. model.Field(f => f.ServiceID).Editable(false);

59. model.Field(f => f.DataServei).Editable(false);

60. model.Field(f => f.RefExt).Editable(false);

61. model.Field(f => f.DocNum).Editable(false);

62. model.Field(f => f.ProductorName).Editable(false);

63. model.Field(f => f.CodFact).Editable(false);

64. model.Field(f => f.CycleID).Editable(false);

65. model.Field(f => f.Reference).Editable(false);

66. model.Field(f => f.Quantitat).Editable(false);

67. })

68. .Events(e => e

69. .Error(@<text>

70. function (e) {

71. onError(e, "refundables");

72. }

73. </text>)

74. .RequestEnd(@<text>

75. function (e) {

76. onRefundRequestEnd(e);

77. }

78. </text>))

79. .Sort(s => s.Add(f => f.DataServei).Descending())

80. .Read("RefundRead", "Payments")

81. .Update("RefundValidate", "Payments")

82. )

83. )

And for finish I show you code with view RefundFare with CurrencyTextBox control:

01.@using SGI2014.Models;

02.@model object

03.

04.<script type="text/javascript">

05. var row = $(event.srcElement).closest("tr");

06. var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");

07. var currentDataItem = grid.dataItem(row);

08.

09. function onPreuChange() {

10. @*var radios = document.getElementsByName("RefundFare");

11. for (i = 0; i < radios.length; i++) {

12. radios[i].checked = (radios[i].value == @((short)fareType.AdHoc));

13. }*@

14. @*var radio = $("input[value='@((short)fareType.AdHoc)']");

15. radio.prop("checked", true);

16. currentDataItem.RefundFare = @((short)fareType.AdHoc);*@

17. currentDataItem.set('RefundFare', @((short)fareType.AdHoc));

18. currentDataItem.set('Generate', true);

19. grid.refresh();

20. }

21.

22. function onRefundFareClick(e) {

23. //var ctb = $("#Preu").data("kendoNumericTextBox");

24. if (e.value == @((short)fareType.AdHoc)) {

25. //ctb.value("");

26. //currentDataItem.Preu = 0;

27. currentDataItem.set('Preu', 0);

28. } else {

29. $.ajax({

30. cache: false,

31. url: '@Url.Action("GetFarePrice", "Payments")',

32. //data: { fare: e.value, detailID: getParentID() },

33. data: { fare: e.value, detailID: currentDataItem.DetailID },

34. success: function (received) {

35. //ctb.value(received);

36. //currentDataItem.Preu = received;

37. currentDataItem.set('Preu', received);

38. }

39. })

40. }

41. currentDataItem.set('Generate', true);

42. grid.refresh();

43. }

44.

45. //function getParentID() {

46. // var row = $(event.srcElement).closest("tr");

47. // var grid = $(event.srcElement).closest("[data-role=grid]").data("kendoGrid");

48. // var currentDataItem = grid.dataItem(row);

49. // return currentDataItem.DetailID;

50. //}

51.</script>

52.

53.@(Html.Kendo().CurrencyTextBox()

54. .Name("Preu")

55. .HtmlAttributes(new { style = "width:100px" })

56. .Events(e => e.Change("onPreuChange"))

57.)

58.

59.<input type='radio' name='RefundFare' value='@((short)fareType.Standard)' onclick="onRefundFareClick(this)">Standard

60.<input type='radio' name='RefundFare' value='@((short)fareType.Premium)' onclick="onRefundFareClick(this)">Premium

61.<input type='radio' name='RefundFare' value='@((short)fareType.Custom)' onclick="onRefundFareClick(this)">Contracte

62.<input type='radio' name='RefundFare' value='@((short)fareType.AdHoc)' onclick="onRefundFareClick(this)">Puntual

Thanks in advance.

Xavier de la Rubia.

NumericTextBox

answered on 21 Aug 2015

1 answer

341 views

Borderless NumericTextBox

Is there a way to remove the top border from the NumericTextBox? I have already removed the spinner but I need the top border gone and any padding.

NumericTextBox

answered on 09 Jul 2015

1 answer

318 views

Enter Multiple Values or Ranges?

I need to be able to enter multiple values or ranges into a textbox, similar to MS Words print page function.

So, I could have something like 1-3, 7-10, 15,16. And I need to allow only numeric or commas.

Can that be done using the NumericTextBox?

If not, any ideas how I could accomplish this?

TIA,

Bob

NumericTextBox

answered on 04 Jun 2015

3 answers

71 views

Numeric textbox spinners not working in IE

I have issues in using the spinners of numeric textbox in IE10(Standards mode as well as compatiblity mode)
but this doesn't work in the demo site either

http://demos.telerik.com/aspnet-mvc/numerictextbox/index

Any workarounds for this ?

NumericTextBox

answered on 31 Mar 2015

3 answers

289 views

Override default key event methods

Hi,

We're using numeric textboxes in a grid that allows for keyboard navigation. The problem is that the up/down arrows still increase and decrease the values in the textbox before the navigation event occurs. Is there a way to disable the default key events, or modify them?

Thanks,
Kevin

NumericTextBox

answered on 17 Dec 2014

2 answers

70 views

IE11 bug

I am using a NumericTextBox control for entering a credit card number. However, there is a strange bug when this is used in combination with IE11 (I'm unable to test other versions of IE at the moment so I don't know if this is an issue with IE versions > 11).

If I enter 5415240007992185 and tab away from the control it changes to 5415240007992186.
If I enter 5415240007992187 and tab away from the control it changes to 5415240007992188.
If I enter 5415240007992189 and tab away from the control it changes to 5415240007992190.

There is some upper limit where, for whatever reason, all numbers are changed to the next even number when the control loses focus. Here is the markup I'm using for the control:

@(Html.Kendo().NumericTextBox()

.Name("ccAccountNumber")

.Decimals(0)

.Format("{0:#}")

.Spinners(false)

)

NumericTextBox

answered on 05 Sep 2014

1 answer

315 views

Restrict user from entering unlimited number of decimals

In the example below, how can I restrict a user from entering more than 5 decimals in the textbox?

@(Html.Kendo().NumericTextBox<decimal>()
.Name("maxVarianceAmount")
.HtmlAttributes(new { style = "width:75px" })
.Format("c5")
.Min(0)
.Value(@ViewBag.MatchProcessor.VarianceAmount)
.Decimals(5)
.Spinners(false)
)

NumericTextBox

answered on 18 Jul 2014

1 answer

579 views

NumericTextBox with plain digits

Hi.

I would like to render a numerictextbox for an integer field that does not display any thousands separator.

Which format can be used to render it? I tried using F as shown here: http://msdn.microsoft.com/en-us/library/dwhawy9k(v=vs.110).aspx but Kendo throws an error saying that it's not a supported format.

So what can I do?

Thanks.

NumericTextBox