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

jQuery data() function does not get kendogrid reference with multicolumncombobox on page

8 Answers 120 Views

MultiColumnComboBox

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

Miroslav asked on 04 Jun 2020, 01:29 PM

Hello,

I have a weird problem. I want to start using the multicolumncombobox. But when I have multicolumncombobox and kendogrid on one page, calling data("kendoGrid") on the grid DIV will return undefined. If i remove the multicombo, it returns object of the kendogrid. This is a simplified situation, in our project I get errors from kendo JS library, when I need to open a dialog with kendogrid or when I use maskedtextbox. Because both need to reference some object using jQuery data() function. Am I doing something wrong?

This is my test code, button returns kendogrid object, but only with multicombo commented out:

using System;

using System.Configuration;

using System.Web;

using Telerik.Web.UI;

public partial class TEST1 : System.Web.UI.Page

{

protected void Page_Init(object sender, EventArgs e)

{

System.Web.UI.Page currentPage = (System.Web.UI.Page)HttpContext.Current.CurrentHandler;

RadScriptManager RadScriptManager = (RadScriptManager)currentPage.FindControl("RadScriptManagerMain");

RadScriptManager.Scripts.Add(new System.Web.UI.ScriptReference((String.Format("~/js/jquery.min.js?{0}", ConfigurationManager.AppSettings["Application_Version"]))));

RadScriptManager.Scripts.Add(new System.Web.UI.ScriptReference((String.Format("~/js/jszip.min.js?{0}", ConfigurationManager.AppSettings["Application_Version"]))));

RadScriptManager.Scripts.Add(new System.Web.UI.ScriptReference((String.Format("~/js/kendo.all.min.js?{0}", ConfigurationManager.AppSettings["Application_Version"]))));

}

<%@ Page Title="TEST1" Language="C#" AutoEventWireup="true"

CodeFile="TEST1.aspx.cs" Inherits="TEST1" %>

<!DOCTYPE html>

<html>

<head runat="server">

<title>TEST1</title>

</head>

<body>

<telerik:RadScriptManager runat="server" EnableScriptCombine="false" ID="RadScriptManagerMain"

LoadScriptsBeforeUI="true" OutputCompression="AutoDetect" AsyncPostBackTimeout="36000" ScriptMode="Release">

</telerik:RadScriptManager>

<div id="multicombo">

<telerik:RadMultiColumnComboBox ID="RadMultiColumnComboBox1" runat="server"

GroupByField="Country" Filter="Contains"

DropDownWidth="500" Height="400" Width="100%" Placeholder="select from the dropdown or type"

DataTextField="ContactName" DataValueField="CustomerID" MinLength="3" EnforceMinLength="false">

<WebServiceSettings Select-ContentType="JSON" ServiceType="OData"

Select-Url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers">

</WebServiceSettings>

<ColumnsCollection>

<telerik:MultiColumnComboBoxColumn Field="CustomerID" Title="ID" />

<telerik:MultiColumnComboBoxColumn Field="ContactName" Title="Name" />

</ColumnsCollection>

</telerik:RadMultiColumnComboBox>

</div>

<br />

<div id="kendogrid"></div>

<br />

<button onclick="getdata()">Call data("kendoGrid) on grid</button>

<script>

$(document).ready(function () {

$("#kendogrid").kendoGrid({

columns: [{

field: "FirstName",

title: "First Name"

},

{

field: "LastName",

title: "Last Name"

}],

dataSource: {

data: [{

FirstName: "Joe",

LastName: "Smith"

},

{

FirstName: "Jane",

LastName: "Smith"

}]

}

});

function getdata() {

alert($("#kendogrid").data("kendoGrid"));

}

</script>

</body>

</html>

8 Answers, 1 is accepted

Accepted

answered on 09 Jun 2020, 12:42 PM

Hello Miroslav,

I have tested the provided markup and the only thing I have changed was the ScriptManager to load the scripts declared in the markup. Please adjust your ScriptManager declaration as demonstrated below and also use the jQuery embedded in the Telerik UI for ASP.NET AJAX instead of loading an additional one.

https://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery

<telerik:RadScriptManager runat="server" EnableScriptCombine="false" ID="RadScriptManagerMain"
    LoadScriptsBeforeUI="true" OutputCompression="AutoDetect" AsyncPostBackTimeout="36000" ScriptMode="Release">
    <Scripts>
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        <asp:ScriptReference Path="/js/jszip.min.js" />
        <asp:ScriptReference Path="/js/kendo.all.min.js" />
    </Scripts>
</telerik:RadScriptManager>

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 09 Jun 2020, 02:29 PM

I am happy to hear that, Miroslav,

Please keep in mind that the embedded jQuery version is a custom one that is based on 1.12.4 but has backport fixes for the known vulnerabilities for this version:

https://docs.telerik.com/devtools/aspnet-ajax/general-information/using-jquery/using-jquery#embedded-jquery-security

Regards,
Peter Milchev
Progress Telerik

answered on 12 Jun 2020, 01:06 PM

Hello Miroslav,

The jQuery version in the Kendo CDN is the original 1.12.4 due to backward compatibility.

https://docs.telerik.com/kendo-ui/intro/supporting/jquery-support

Generally, when you are using Kendo UI on the page only, you can load the latest supported jQuery version as explained in the article I have shared above. For example, Kendo UI R2 2020 is compatible with jQuery 3.5.1 version that introduced some breaking changes and security fixes.

Regards,
Peter Milchev
Progress Telerik