Jquery and Kendo conflicts autopopulate datepicker and database field save

[swati]

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.

[Neli]

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

[swati]

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

[Neli]

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