Telerik Forums
UI for ASP.NET Core Forum
3 answers
412 views

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 

<span class="field-validation-valid" data-for="Field" data-valmsg-replace="true" data-valmsg-for="Field"></span>

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.

Preslav
Telerik team
 answered on 12 Apr 2018
3 answers
114 views

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.        <!--Question Type-->
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.        <!--Question-->
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.        <!--Button-->
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>
Preslav
Telerik team
 answered on 10 Apr 2018
3 answers
1.2K+ views

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.

Cornel
Top achievements
Rank 1
 answered on 10 Apr 2018
1 answer
142 views

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

 

 

 

Stefan
Telerik team
 answered on 03 Apr 2018
2 answers
379 views

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?

Stefan
Telerik team
 answered on 03 Apr 2018
3 answers
932 views

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();
                           alert(input2);
                           //alert($('#station_id').val());
                           return false;
                        }
                       //return /^[A-Z]/.test(input.val());
                   }
 
                   return true;
               }
           },
           messages: { //custom rules messages
               productnamevalidation: function (input) {
                   // return the message text
                   return input.attr("data-val-productnamevalidation");
               }
           }
       });
   })(jQuery, kendo);
Michael
Top achievements
Rank 1
 answered on 02 Apr 2018
2 answers
97 views

I cannot figure out how to override the overall container size of a Grid Editor. So I have the custom types in the ~/Shared folder and while they all show in edit mode they are many times to small in width.  Yet setting the style of the wrapper div the controls are in has no effect.  Is there a style I need to override in each view?

 

Thanks

Reid
Top achievements
Rank 2
 answered on 02 Apr 2018
1 answer
112 views

Hi,

 

I am planning to use tag helpers instead of this - 

 <select asp-for="Input.ReviewBank" asp-items="@(new SelectList(@Model.Banks,"BankBacisId","ReviewBankandCity"))" class="form-control" on></select>

but the documentation is available only for API or ajax call. Can you please point me towards achieving a filtered drop down from Model values on a Razor Page. 

Veselin Tsvetanov
Telerik team
 answered on 02 Apr 2018
1 answer
1.1K+ views

Hi,

I have 2 date pickers-

<div class=""><kendo-datepicker name="Input.ReviewStartDateTime" start="CalendarView.Month" depth="CalendarView.Year" format="yyyy/MM/dd" value="DateTime.Now" on-change="endChange"/> </div>

<div><kendo-datepicker name="Input.ReviewEndDateTime"  start="CalendarView.Month" depth="CalendarView.Year" format="yyyy/MM/dd" value="DateTime.Now" /></div>      

 

I am trying to change the value of Input.ReviewEndDateTime  picker to + 60 days  on change Input.ReviewStartDateTime picker -

        function endChange() {
            var startDatePicker = $("#Input.ReviewStartDateTime").data("kendoDatePicker"),
                startDate = this.value();
            console.log(startDate);
            if (startDate) {
                var endDate = new Date(startDate.getMonth() + 2);

                var endatepicker = $("#Input.ReviewEndDateTime").data("kendoDatePicker");
                endatepicker.value(startDate);
                endatepicker.trigger("change");
            }
        }

but I get the following error- 

Uncaught TypeError: Cannot read property 'value' of undefined

 

How can I change the date picker to 60 dates after theselected date from Input.ReviewStartDateTime

Stefan
Telerik team
 answered on 02 Apr 2018
2 answers
150 views

I am trying to create ChunkUploadController for Net Core 2 API Controller follow 

https://demos.telerik.com/aspnet-core/upload/chunkupload

but getting compilation error 

Error CS0144 Cannot create an instance of the abstract class or interface 'FileResult'

on the line 

FileResult fileBlob = new FileResult();

 

Could you guide me how to fix this error?

Thank you,

Vladimir

 

Dimitar
Telerik team
 answered on 30 Mar 2018
Narrow your results
Selected tags
Tags
+? more
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Edmond
Top achievements
Rank 1
Iron
fabrizio
Top achievements
Rank 2
Iron
Veteran
RobMarz
Top achievements
Rank 2
Iron
Fakhrul
Top achievements
Rank 1
Iron
Tejas
Top achievements
Rank 2
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?