dataSource of components, data from parent ifram is not working in child ifram, cross origine issue.

0 Answers 65 Views
Data Source DropDownList
Rana
Top achievements
Rank 2
Rana asked on 04 Aug 2023, 08:06 AM | edited on 04 Aug 2023, 09:41 AM

Download kendo ui trial and in exmaple i just try following code

place these two file at "Kendo 2023\examples\dropdownlist" and run you will find "Blocked a frame with origin "null" from accessing a cross-origin frame."

parent.html is as below

 

<html lang="en">

<head>
    <title>Parent Frame</title>
    <script>
        ___data = [
            { CityID: 1, CityName: "Lisboa" },
            { CityID: 2, CityName: "Moscow" },
            { CityID: 3, CityName: "Napoli" },
            { CityID: 4, CityName: "Tokyo" },
            { CityID: 5, CityName: "Oslo" },
            { CityID: 6, CityName: "Pаris" },
            { CityID: 7, CityName: "Porto" },
            { CityID: 8, CityName: "Rome" },
            { CityID: 9, CityName: "Berlin" },
            { CityID: 10, CityName: "Nice" },
            { CityID: 11, CityName: "New York" },
            { CityID: 12, CityName: "Sao Paulo" },
            { CityID: 13, CityName: "Rio De Janeiro" },
            { CityID: 14, CityName: "Venice" },
            { CityID: 15, CityName: "Los Angeles" },
            { CityID: 16, CityName: "Madrid" },
            { CityID: 17, CityName: "Barcelona" },
            { CityID: 18, CityName: "Prague" },
            { CityID: 19, CityName: "Mexico City" },
            { CityID: 20, CityName: "Buenos Aires" }
        ]
    </script>
</head>

<body>
    <iframe src="./child.html" style="height: 100vh;width: 100vw;border: 0;"></iframe>
</body>

</html>

 

 

and child.html is as below

 

 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Overview</title>
  <meta charset="utf-8">
  <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
  <link href="../../styles/default-ocean-blue.css" rel="stylesheet">
  <script src="../../js/jquery.min.js"></script>
  <script src="../../js/jszip.min.js"></script>
  <script src="../../js/kendo.all.min.js"></script>
  <script src="../content/shared/js/console.js"></script>


</head>

<body>
  <div class="k-d-flex k-flex-1 k-flex-col k-px-8 k-pt-7">
    <div class="kd-header k-d-flex k-gap-8 k-mb-6 k-justify-content-stretch">
      <div class="kd-header-core k-d-flex k-flex-col">
        <h2 class="k-h4 k-mt-0 k-mb-4 k-opacity-30">Time to order food</h2>
        <span class="k-d-inline-block">Find restaurants in your area</span>
        <input id="kd-place-chooser" />
        <div class="k-w-24 k-h-4 k-mt-5 k-skeleton k-opacity-40 k-rounded-md"></div>
        <div class="k-w-full k-h-8 k-mt-1.5 k-mb-auto k-skeleton k-opacity-30 k-rounded-md"></div>
        <div class="kd-actions k-d-flex k-mt-5 k-justify-content-end">
          <div class="k-w-20 k-h-8 k-skeleton k-opacity-40 k-rounded-md"></div>
          <div class="k-w-20 k-h-8 k-ml-4 k-skeleton k-opacity-50 k-rounded-md"></div>
        </div>
      </div>
      <div
        class="kd-image-wrapper !k-d-flex k-justify-content-center k-align-items-center k-skeleton k-opacity-10 k-border k-border-secondary k-border-solid k-rounded-md">
        <span class="k-icon k-i-image k-opacity-70"></span>
      </div>
    </div>
    <div class="kd-content k-mt-2 k-grow k-skeleton k-opacity-30 k-rounded-tl-md k-rounded-tr-md"></div>
  </div>

  <style>
    .kd-image-wrapper>.k-icon {
      font-size: 72px;
    }

    /* Breakpoints for full screen demo: max:599px, min:759px and max: 959 */
    @media (max-width: 678px),
    (min-width: 821px) and (max-width: 1038px),
    (min-width: 1241px) and (max-width: 1328px) {
      .kd-image-wrapper {
        display: none !important;
      }

      .kd-actions div {
        width: auto;
        flex-grow: 1;
      }

      .kd-content {
        margin-top: 24px;
      }
    }

    /* Breakpoint for full screen demo: max:359px */
    @media (max-width: 476px) {
      .kd-header {
        height: 100%;
      }

      .kd-header-core {
        display: flex;
        flex-direction: column;
        height: 100%;
      }

      .kd-actions {
        flex-direction: column;
      }

      .kd-actions>div {
        margin-left: 0;
        margin-top: 8px;
      }

      .kd-content {
        display: none;
      }
    }
  </style>

  <script>
    $(document).ready(function () {
      var dataSource = new kendo.data.DataSource({
        // data: Array.from(parent.___data, (item) => Object.assign({}, item)),
        data: parent.___data,
        sort: { field: "CityName", dir: "asc" }
      });

      $("#kd-place-chooser").kendoDropDownList({
        filter: "contains",
crossOrigin: "anonymous",
        optionLabel: 'Please select city...',
        dataTextField: "CityName",
        dataValueField: "CityID",
        dataSource: dataSource
      });
    });
  </script>
</body>

</html>
Georgi Denchev
Telerik team
commented on 09 Aug 2023, 06:53 AM

No answers yet. Maybe you can help?

Tags
Data Source DropDownList
Asked by
Rana
Top achievements
Rank 2
Share this question
or