This is a migrated thread and some comments may be shown as answers.

Jquery and Kendo conflicts autopopulate datepicker and database field save

3 Answers 249 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
swati
Top achievements
Rank 1
Veteran
swati asked on 17 Nov 2020, 07:08 AM

Hi I have a working application with Jquery autocomplete, Jquery date picker and so on. I was asked to replace a simple textbox with richtext boxes for a few fields. Since we have a license for Telerik, I decided to go with the Kendo Jquery and the UI is perfectly working by referencing.

<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>

I am yet to hookup the database side but in the mean time, If I insert Kendo, the Jquery datepicker is throwing error. "Error: Object doesn't support property or method 'datepicker'". Also, auto populate doesnt trigger.

Are there any conflict of using Jquery and Kendo? or are there any duplicate reference causing this issue?

<!--<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/redmond/jquery-ui.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
-->
<link href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css" rel="stylesheet" />
<link href="https://jqueryui.com/resources/demos/style.css" rel="stylesheet" />
<script src="scripts/jquery.numeric.js" type="text/javascript"></script>
<script src="scripts/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2020.2.617/styles/kendo.default-v2.min.css" />
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>

 


 
      <textarea id="successful" rows="5" cols="30" style="width:100%; height:840px" aria-label="successful">
      
        </textarea>
        <script>
            var successful = $("#successful").kendoEditor({
                tools: [
                    "bold",
                    "italic",
                    "underline",
                    "justifyLeft",
                    "justifyCenter",
                    "justifyRight",
                    "insertUnorderedList",
                    "createLink",
                    "unlink",
                ]
            });
        </script>

 

Please advise on this conflict. Also, I have an existing mvc textbox control  @Html.TextAreaFor(m => m.successful, new { @class = "form-control" })  which is saving in the database directly. How can I associate/hookup kendo textarea with the same control and database field called "successful" Please help.

 

Thanks in advance.

3 Answers, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 18 Nov 2020, 03:59 PM

Hi Swati,

The jQuery reference should be included only once and before the Kendo script. The described error could be observed when jQuery is included more than once, so please make sure that jQuery is included a single time. You could read more in the troubleshooting section linked below:

- https://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#widgets

Here is a Dojo example with an Editor included based on the provided snippet.

I hope you will find the provided information helpful.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

0
swati
Top achievements
Rank 1
Veteran
answered on 22 Nov 2020, 10:02 PM

Thanks Neli. I will review the duplicate reference and will let you know. Can you also assist me on how to replace the control

 

@Html.TextAreaFor(m => m.successful, new { @class = "form-control" })

with Telerik kendo control to save directly into the database? This way when I open the record via UI, it will retain the same formated text

Many thanks,

Swati

0
Neli
Telerik team
answered on 24 Nov 2020, 02:53 PM

Hello Swati,

Note, that starting with the 2020 R3 release the Kendo Textarea component has been introduced. 

- https://www.telerik.com/support/whats-new/kendo-ui/release-history/kendo-ui-r3-2020

I would suggest you take a look at the Demos and the documentation of the Textarea widget linked below:

- https://demos.telerik.com/kendo-ui/textarea/index

- https://docs.telerik.com/kendo-ui/controls/editors/textarea/overview

Take a look at the articles linked above and let me know in case you have additional questions on the matter. 

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
General Discussions
Asked by
swati
Top achievements
Rank 1
Veteran
Answers by
Neli
Telerik team
swati
Top achievements
Rank 1
Veteran
Share this question
or