Questions on UI for ASP.NET MVC Forum

2 answers

209 views

Telerik MVC Grid Skip Custom Validation on Tab Out

Greetings,

I have a Telerik MVC Grid with in-line editing. It has custom validation to check if the primary key already exists, but it runs the validation when you tab out AND click "Update" in-line. How do I change the validation to occur and subsequently the error message to pop up ONLY on clicking "Update" and not when leaving the textbox? Here is my code below:

01.(function ($, kendo) {

02. $.extend(true, kendo.ui.validator, {

03. rules: { // custom rules

04. codevalidation: function (input, params) {

05. if (input.is("[name='Code']") && input.val() != "") {

06. input.attr("data-codevalidation-msg", "Code must not already exist.");

07.

08. var isGood = true;

09. var gridData = $("#grid").data("kendoGrid").dataSource.data()

10.

11. console.log(input.val());

12. for (var i = 1; i < gridData.length; i++) {

13. console.log(gridData[i].Code == input.val().toUpperCase())

14. if (gridData[i].Code == input.val().toUpperCase())

15. isGood = false;

16. }

17. console.log("returning " + isGood);

18. return isGood;

19. }

20. else {

21.

22. return true;

23. console.log("returning true at end");

24. }

25. }

26. },

27. messages: { //custom rules messages

28. codevalidation: function (input) {

29. // return the message text

30. return input.attr("data-val-codevalidation");

31. }

32. }

33. });

34. })(jQuery, kendo);

Grid

answered on 28 Feb 2019

2 answers

141 views

Selecting alternate Series Color from theme

Context:
I am currently building a dashboard which will display multiple separate line graphs. I am using the Sass ThemeBuilder, and this is where the colors will be set (Under Chart > Series A-F) and regularly changed. The colors for these lines must match the colors of our SASS theme so they cannot be hard coded.

Problem:
Currently every chart is drawn using the colors for Series A, which makes sense since there is only a single series per chart. What I would like to do is have each chart use a different series color.

Is there a way to do this without directly passing a hard coded hex value?

Currently I am achieving this by adding a few empty series inside each chart, but would like to know if there is a tidy way of doing it.

01.<div class="col-xs-6">

02. @(Html.Kendo().Chart().Theme("sass")

03. .Name("lines1")

04. .Title("g1")

05. .Series(s =>

06. {

07. s.Line(new List<double>());

08. s.Line(new List<double> {1.7, 1.63, 1.72, 1.87, 2.1, 1.2, 1, 0.9}).Name("g1");

09. })

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

11. )

12.</div>

13.<div class="col-xs-6">

14. @(Html.Kendo().Chart().Theme("sass")

15. .Name("lines2")

16. .Title("g2")

17. .Series(s =>

18. {

19. s.Line(new List<double>());

20. s.Line(new List<double>());

21. s.Line(new List<double> {1.7, 1.63, 1.72, 1.87, 2.1, 1.2, 1, 0.9}).Name("g2");

22. })

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

24. )

25.</div>

26.<div class="col-xs-6">

27. @(Html.Kendo().Chart().Theme("sass")

28. .Name("lines3")

29. .Title("g3")

30. .Series(s =>

31. {

32. s.Line(new List<double>());

33. s.Line(new List<double>());

34. s.Line(new List<double>());

35. s.Line(new List<double> {1.7, 1.63, 1.72, 1.87, 2.1, 1.2, 1, 0.9}).Name("g3");

36. })

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

38. )

39.</div>

40.<div class="col-xs-6">

41. @(Html.Kendo().Chart().Theme("sass")

42. .Name("lines4")

43. .Title("g4")

44. .Series(s =>

45. {

46. s.Line(new List<double>());

47. s.Line(new List<double>());

48. s.Line(new List<double>());

49. s.Line(new List<double>());

50. s.Line(new List<double> {1.7, 1.63, 1.72, 1.87, 2.1, 1.2, 1, 0.9}).Name("g4");

51. } )

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

53. )

54.</div>

Chart

answered on 28 Feb 2019

7 answers

1.1K+ views

Model Data Not Present when passing from View to Controller

I have a MVC application where I am passing a data model to the view and then when I click the submit button I want to pass the model back to the controller. When I receive the model in the controller it contains no data. I am using the "MaskedTextBoxFor()" for most fields and then a "DatePickerFor()".

01.@model Keying.Models.Invoice

02.

03.@using (Html.BeginForm("Shipment", "Home", FormMethod.Post, new

04. {

05. @class = "form-horizontal",

06. role = "form",

07. id = "submitForm",

08. myInvoice = Model

09. }))

10.{

11. <label>

12. Invoice Number

13. </label>

14. @(Html.TextBoxFor(model => model.InvoiceNumber)

15. )

16.

17. <label>

18. Invoice Date

19. </label>

20.

21. @(Html.Kendo().DatePickerFor(model => model.ShipDate)

22. .Name("ship_date")

23. .Value(DateTime.Today)

24. )

25.

26. <label>

27. Bill to Account

28. </label>

29.

30. @(Html.Kendo().MaskedTextBoxFor(model => model.BillAccount)

31. .Name("bill_account")

32. )

33.}

1.public ActionResult Shipment(Invoice myInvoice, string button)

2.{

3. var shipment = new Shipment();

4. // other processing

5. return View(shipment);

6.}

So with the code snippets above the Invoice Data model going to the view is populated with some data but when it returns to the controller it contains no data.

Thanks,

General Discussions

answered on 27 Feb 2019

2 answers

107 views

SignalR and Recurrence exceptions not working correctly

I am trying to hook up SignalR with the MVC scheduler based on the examples given in Github and when I try to make a recurrence exception the Update event is called to update the parent but there is never a trigger for the Create to create the new database entry for the recurrence exception. It is my understanding that when you create a recurrence exception it saves to the database as a new entry linking to the original recurrence via an Id( I don't remember if it is the RecurrenceId or a different one). Is this correct? If so is this a known error because I have used the Scheduler just as it is explained how to set it up in your tutorials and it works fine but now that I am using the SignalR method it is not working.

Scheduler

answered on 27 Feb 2019

7 answers

1.1K+ views

External Template for column

Hello,

I would like to use an external template for a column in my grid.

@(

Html.Kendo().Grid<ViewModels.UserSummary>()

.Name("EmployeeGrid")

.Columns( columns => {

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

columns.Bound(c => c.LastName);

columns.Bound(c => c.Email);

columns.Bound(c => c.LastLogin).Format("{0:dd-MMM-yyyy}");

columns.Bound(c => c.Active).Title("Active").ClientTemplate("myTemplate");

})

.DataSource(ds => ds.Ajax()

.PageSize(24)

.Read(r => r.Action("GetEmployees", "Employee"))

)

.Pageable()

.Sortable()

)



<script id="myTemplate" type="text/x-kendo-template">

    <input type='checkbox' value='testing'

        #= Active ? 'checked' : '' #

        disabled

    ></input>

</script>

Of course this doesn't work, as it just prints 'myTemplate' on each row of that column. I know I can inline the template but I would like to keep things tidy by having the template external. Is this possible with the kendo mvc extensions?

Grid

answered on 27 Feb 2019

1 answer

279 views

Binding Treeview from datatable

How can i binding treeview from datatable?? Please help!

TreeView

answered on 27 Feb 2019

4 answers

890 views

Treeview in left pane and detail in right pane

I'd like to use a splitter control that has two vertical panes. In the left pane I'd like to have a treeview control. When the user selects a node in the treeview, I'd like to populate the right-hand splitter pane with a partial view that displays more detail for the selected treeview node. Please could you provide guidance as to how I can achieve this?

Splitter

answered on 26 Feb 2019

1 answer

213 views

Complete sample of treeview in left pane and detail in right pane

Does anybody know where a complete working MVC sample exists that demonstrates a treeview in one pane and detail in another pane when a tree node is clicked on?

Splitter

answered on 26 Feb 2019

4 answers

528 views

Make popup editor window 100% height

Would like to make popup editor window 100% height depending on the containing browser client window height..

Grid

answered on 25 Feb 2019

7 answers

346 views

Theme builder questions

My organization is fairly new to Telerik and I have been tasked with two goals to start with. The first is to use the theme builder to try to get the colors to match our existing desktop apps, easy enough for the most part.

Our app is going to be a Core MVC app, so I start by selecting 'UI for ASP.NET Core'. From there I have tried playing with both Default and Bootstrap (though I am honestly not sure which of the two I should be using). After I get everything mostly looking how I want I have no issues downloading the file, but I am unsure exactly where to place it.

In Visual Studio I am creating a new Telerik C# ASP.NET Core MVC Application, from there I am selecting Grid and Menu in the project wizard. From there I am not entirely sure where to place the all.css and variables.scss files to preview the changes to the basic app.

My final question is, within the theme builder the color swatches has a nice side menu that pops out. Which control in Telerik would this be?

Apologizes for all the questions, trying to wrap my head around all of this. Hopefully this all makes sense and I gave enough information.

General Discussions