Questions on UI for ASP.NET Core Forum

2 answers

154 views

Hello,

I have two ComboBoxes and Grid below them. The combo boxes are used to configure the grid's data source i.e. custom filtering/expanded filtering.

The issue is the following:

1. If I do not scroll the page the combobox options are displayed under the combobox.

2. If I scroll the page and then try to select something from the combobox options, the options are displayed over the grid.

I have attached 2 screen shots that show what is happening.

Thank you,

Martin.

ComboBox

answered on 16 Apr 2018

1 answer

112 views

Advice for Asp.net MVC Core

Hey guys

Are these topics sufficient to learn Asp.net MVC Core?
Which other advice would you recommend?
I would like to learn Asp.net MVC Core in advance.
Thank you for your valuable information

TOPICS:

Model-View-Controller
Razor
Model Binding
Tag Helpers
Layout, Section, ViewStart
Routing
Bower
Dependency Injection
Entity Framework
Razor Pages
View Components
Filters
Session
Working with Angular
ASP.NET Identity

General Discussions

answered on 16 Apr 2018

1 answer

305 views

MultiSelect group by but sort items in each group

I have a multiselect that contains a list of states. In the list there are states from different countries. I would like to be able to group the list by country but then have each group sorted by the state abreviation alphabetically. I'm having trouble finding some documentation on how to exctly do this.

Here is my multiselect:

@(Html.Kendo().MultiSelect()

.Name("primary_service_area")

.DataTextField("state_abreviation")

.DataValueField("state_abreviation")

.TagTemplate("<span class=\"multiselect-selected-value\">#= state_abreviation #</span>")

.ItemTemplate("<span>#= state_abreviation # - #= state_name #, #= country_code #</span>")

.DataSource(source =>

{

source

.Custom()

.ServerGrouping(true)

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

.Transport(transport =>

transport.Read(read =>

{

read.Action("GetStates", "Company", new { country = "ALL"});

})

)

.ServerFiltering(false);

})

.Events(e => {

e.Change("multiSelect_Change").DataBound("multiSelect_databound");

})

.AutoClose(false)

.Value(Model.primary_service_area)

.HtmlAttributes(new { @class = "omni-multiselect" })

)

Here is my GetStates function:

public ActionResult GetStates(string country)

{

try

{

List<State> selectedStates = new List<State>();

if (country != null)

{

if (country == "ALL")

selectedStates = states.OrderBy(s => s.country_code).ThenBy(s => s.state_abreviation).ToList();

else

selectedStates = states.Where(s => s.country_code == country).ToList();

}

return Json(selectedStates.Select(s => new { state_abreviation = s.state_abreviation, state_name = s.state_name, country_code = s.country_code }));

}

catch (Exception ex)

{

return Json("");

}

MultiSelect

answered on 13 Apr 2018

1 answer

910 views

Project dependencies error

Hi there

I have imported the telerik mvc core project from visual studio 2017 in windows to Vs Code in Ubuntu

while installing the dependencies.i got this error

error : The local source '/home/opendev/Documents/projects/CoreApp02/C:/Program Files (x86)/Progress/Telerik UI for ASP.NET Core R1 2018/wrappers/aspnetcore/Binaries/AspNet.Core' doesn't exist. [/home/opendev/Documents/projects/CoreApp02/PharmaCoreApp02/PharmaCoreApp02.csproj]

How can i resolve this ?

Regards

Muhammad Arsalan Khan

Installer and VS Extensions

answered on 12 Apr 2018

3 answers

383 views

Grip popup editor change order of fields

I have a page where I have to display some data in a grid. The order of columns is dynamic based on the language of the page. The data has to be able to edit it and add new data. I have used the popup editor of the grid. And the editor has to have the same order as the columns in grid (default order).

Also the server will have validation so I used as reference the project https://docs.telerik.com/aspnet-mvc/helpers/grid/how-to/editing/popup-editing-server-validation

I tried to find a way to influence the order without using a custom editor and could not. Is there a way to influence the order of the fields that appear in the popup editor?

I have tried also using a custom editor however when I used

for validation on the page it got converted to this

<div class="k-widget k-tooltip k-tooltip-validation field-validation-error" id="Field_validationMessage" role="alert" style="margin: 0.5em;" data-valmsg-for="Field" data-for="Field"><span class="k-icon k-i-warning"> </span>The Field is required<div class="k-callout k-callout-n"></div></div>

and I can no longer use the server validation code from the above project.

Is there a way to influence the validation not to change the span?

I do not want to create a custom validation because the server validation has to communicate with the database.

Grid

answered on 12 Apr 2018

3 answers

109 views

Pass Id from Textbox to Grid Inside the same Popup Window

Hello,
I would like to ask about to grid inside the popup window.
I have a popup window where it contain;
1. Input textbox to set the question.
2. Grid to set the answers (multiple choice).

(Refer Add Question.PNG)

Both are from the different tables in database And the tables are connected using QuizQuestionId inside the Answer Table.

(Refer Question.PNG) and (Refer Answer Table.PNG)

My problem is, I cannot add the answer inside because I dont have the QuizQuestionId (because I dont add the question yet into the database since both question and answer are inside the same window)

However, when I click Next button, I can save my question
My question is is there any way to solve my problem ?

Please let me know if you have any question about this.
Thank you.

This is my next button function

01.function SaveAndGetNextQuestion(quizId, questionId) {

02.

03.

04. //alert('Quiz ID: ' + quizId + '\nQuestion ID: ' + questionId);

05.

06. _url = "@Url.Action("", "QuizQUestion")",

07. isCreateOperation = questionId == null;

08. if (isCreateOperation)

09. _url = _url + "/Create";

10. else

11. _url = _url + "/Edit";

12. $.ajax({

13. method: "POST",

14. url: _url,

15. data: {

16. QuizId: quizId,

17. Id: questionId,

18. Question: $("#Question").val(),

19. QuestionTypeId: $("#QuestionTypeId").val(),

20. //QuestionNumber: Ques

21. }

22. }).done(function (response) {

23. console.log("respond", response);

24. if (response.IsSucceeded == true) {

25. console.log(response)

26. $("#questionWin").data("kendoWindow").close();

27. if (isCreateOperation !== null) {

28.

29. //Ajax request to Get Guestions for Quiz

30. //Open question window

31. //e.preventDefault();

32. var questionTemplate = kendo.template($("#NextQuestionTemplate").html());

33.

34. $.ajax({

35. method: "GET",

36. url: "@Url.Action("GetQuestionByQuizId", "QuizQuestion")",

37. data: { QuizId: quizId }

38. })

39. .done(function (question) {

40.

41. var questionWnd = $("#questionWin").data("kendoWindow");

42. questionData = { QuizId: quizId, Id: questionId };

43. if (question == null) {

44. // Create Mode

45.

46. questionWnd.content(questionTemplate(questionData));

47. }

48. else { // Edit Mode

49. questionWnd.content(questionTemplate(questionData));

50. }

51. questionWnd.center().open();

52. }).fail(function (msg) {

53. result.html("Oops! operation is failed");

54. result.show();

55. })

56. }

57. }

58. else {

59. // display Error messages

60. var ul = $("<ul />");

61. $.each(response.Message, function (index, item) {

62. ul.append($("<li />").html("<span>" + item + "</span>"));

63. });

64. var status = $(".result-status");

65. status.append(ul);

66. status.addClass("text-danger");

67. }

68. }).fail(function (msg) {

69. result.html("Oops! operation is failed");

70. result.show();

71. });

72. return questionId;

73.

74.

This is my view inside the popup window

01.<script type="text/x-kendo-template" id="NextQuestionTemplate">

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

03. 

04. <div class="col-md-10">

05. <div class="k-edit-label col-md-2">

06. <label for="QuestionTypeId">Quiz Type</label>

07. </div>

08. <div class="editor-field col-md-6">

09. @(Html.Kendo().DropDownList()

10.

.DataTextField("Name")

11.

.DataValueField("Id")

12.

.DataSource(source =>

13.

{

14.

source.Read(read =>

15.{

16. read.Action("GetQuestionTypeList", "ListService");

17.});

18.

})

19.

.Name("QuestionTypeId").ToClientTemplate()

20.

21.

22. )

23. </div>

24. </div>

25.

26.

27.

28.

29. 

30. <div class="col-md-10">

31. <div class="k-edit-label col-md-2">

32. <label for="QuestionId"> Question </label>

33. </div>

34. <div class="editor-field col-md-6">

35. <textarea class="k-textbox"

36. data-val="true"

37. id="Question"

38. name="Question" rows="5" cols="50">#= data.Question #</textarea>

39. </div>

40. <br />

41. </div>

42. <br />

43.

44. <div class="col-md-11">

45. @(Html.Kendo().Grid<Optivolve.ERP.BusinessModel.Learning.QuizAnswerViewModel>

46. ()

47. .Name("answerGrid")

48. .Columns(columns =>

49. {

50. // columns.Bound(p => p.IsCorrectAnswer);

51. columns.Bound(p => p.Answer).Width(100);

52.

53.

54. columns.Command(command => { command.Edit(); command.Destroy(); }).Width(172);

55. })

56. .ToolBar(toolbar => toolbar.Create())

57.

.Editable(editable => editable.Mode(GridEditMode.InLine))

58.

.Pageable()

59.

.Sortable().AutoBind(false)

60.

.DataSource(dataSource => dataSource

61.

.Ajax()

62.

.Model(model => { model.Id(p => p.Id); })

63.

.ServerOperation(true)

64.

.Create(update => update.Action("Create", "QuizAnswer"))

65.

.Read(read => read.Action("Read", "QuizAnswer"))

66.

.Update(update => update.Action("Edit", "QuizAnswer"))

67.

.Destroy(update => update.Action("Delete", "QuizAnswer")

68.

)).ToClientTemplate()

69. )

70. </div>

71. 

72. <div class="col-md-10 text-center" style="margin-top:10px">

73. <button class="k-button k-button-icontext" id="btn_back" onclick="Back(#=data.QuizId# , #=data.Id#)">Back</button>

74. <button class="k-button k-button-icontext" id="btn_nextQuestion" onclick="SaveAndGetNextQuestion(#= data.QuizId #, #= data.Id #)">Next</button>

75. <button class="k-button k-button-icontext" id="btn_finish" onclick="Finish()">Finish</button>

76. </div>

77.

78. </div>

79.

80.</script>

Grid

answered on 10 Apr 2018

3 answers

1.1K+ views

Template column in grid

Hi,

In Kendo for Asp.Net (Not Core) I was using to have something like:

c.Template(@<text></text>).ClientTemplate("<a ...... ></a>")

And in ClientTemplate I had an Url.Action.

Now, in Asp.Net Core I cannot do this, as the Template property was changed. If I put the same thing I will have the error: Cannot convert lambda expression to type 'string' because it is not a delegate type.

Could you please help me to find a solution?

Thanks,

Cornel.

Grid

answered on 10 Apr 2018

1 answer

127 views

Grid popup editor

Hello,

The default popup editor is not displaying the datatype currency with a dollar sign:

.ToolBar(toolbar =>

{toolbar.Create().Text("Add New Line");})

.Editable(editable => editable.Mode(GridEditMode.PopUp))

Here is my model:

[DataType(DataType.Currency)]

public decimal GiftAmount{ get; set; }

[DataType(DataType.Currency)]

public decimal SecondGiftAmount{ get; set; }

The form itself is offset a little as well. The labels are a few pixels above the text boxes. Can I get some help?

Paul

Grid

answered on 03 Apr 2018

2 answers

353 views

Grid popup validation message localization

Hi,

I have a grid that uses Popup editor. The model behind the grid has one property with Required attribute.

The application has to support multiple languages. All the grid and popup texts are translated except for the validation messages.

It seems that the template generated uses the english messages.

"template":"\u003cdiv class=\"editor-label\"\u003e\u003clabel for=\"Name\"\u003eHersteller\u003c/label\u003e\u003c/div\u003e\u003cdiv class=\"editor-field\"\u003e\u003cinput class=\"k-textbox\" data-val=\"true\" data-val-required=\"The Hersteller field is required.\" id=\"Name\" name=\"Name\" value=\"\" /\u003e \u003cspan class=\"field-validation-valid\" data-valmsg-for=\"Name\" data-valmsg-replace=\"true\"\u003e\u003c/span\u003e\u003c/div\u003e"

Is this function as design. How can I get the language specific message for validations too?

Grid

answered on 03 Apr 2018

3 answers

853 views

Grid Custom Validation - Multiple fields Access

I have a business requirement that I don't know how to quite handle using the grid. I have set up inline batch editing on a grid for a customer. One of the requirements is to do client side business logic to validate the data before allowing the Save Changes functionality to work.

My grid is set up something like this

ColA ColB ColC ColD

10 0 0 0

The requirement is that if any of those 4 columns has a value, all the columns must have a non-zero value. I'm not sure how to access the ids/values of ColB, ColC, ColD so that I can do the comparison in the javascript. When I took a look using firebug, each of those fields had a guid identifier (screenshot below).

The code I am playing around with is as follows

//register custom validation rules

(function ($, kendo) {

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

rules: { // custom rules

productnamevalidation: function (input, params) {

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

input.attr("data-productnamevalidation-msg", "Product Name should start with capital letter");

if (input.val() != 24)

{

var input1 = $('input[data-bind="value:hrsepwr_hrs"]');

var input2 = input1.val();