Привязка источника данных Kendo Grid из представлений Django

Я новичок в Django и пытаюсь связать queryset из моей Django модели с источником данных Kendo Grid. Kendo Grid отображается, но данные не загружаются. return render получает данные как словарь, поэтому я попытался использовать JsonResponse, но он просто отображает Json строку на пустой странице. Как я могу успешно загрузить сетку с данными JSON? Вот что я сделал на данный момент:

models.py

class FromClientTransmittal (models.Model):
  transmittal_no = models.CharField(max_length=255)
  document_no = models.CharField(max_length=255)
  rev = models.CharField(max_length=20)
  subject = models.TextField()
  client_response = models.CharField(max_length=20)
  
  def __str__(self):
      return self.document_no

проект urls.py

urlpatterns = [path('components/',include('components.urls',namespace='components')),]

app urls.py

from django.urls import path
from components import views

app_name ='components'

urlpatterns = [   
    # Transmittals
    path('tables/from-client-transmittal',views.FromClientTransmittalView.as_view(),name='from-client-transmittal'),]

views.py

class FromClientTransmittalView(LoginRequiredMixin,View):
    def get(self,request):
        
        transmittals_qs = FromClientTransmittal.objects.all().values("transmittal_no","document_no","rev","client_response")
        transmittals = list(transmittals_qs)
        
        data={}
        data['title'] = "From Client Transmittals"
        data['pageview'] = "Transmittals"
        data['transmittals'] = transmittals
                      
        return render(request,'components/tables/from-client-transmittal.html',  data)

шаблон (html)

{% extends 'partials/base.html' %}
{% load static %}


{% block kendojs %}
  <script src="https://kendo.cdn.telerik.com/2022.1.119/js/jquery.min.js"></script>
  <script src="https://kendo.cdn.telerik.com/2022.1.119/js/kendo.all.min.js"></script>
{% endblock kendojs %}

{% block extra_css %}     
        <link
        href="https://fonts.googleapis.com/css2?family=Lato&display=swap"
        rel="stylesheet"
        />
        <link
        href="https://cdn.kendostatic.com/2022.1.119/styles/kendo.common.min.css"
        rel="stylesheet"
        />
        <link
        href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default.min.css"
        rel="stylesheet"
        />
        <link
        rel="stylesheet"
        href="https://kendo.cdn.telerik.com/2022.1.119/styles/kendo.default.mobile.min.css"
        />
{% endblock extra_css %}

{% block content %} 
  <div id="fbt-grid"></div>
  <script>
    $(document).ready(function () {

   var dataSourceArguments = {
       pageSize: 20,
       serverPaging: true,
       serverFiltering: true,
       serverSorting: true,
       transport: {
         read: {
           type: "GET",
           url: "{% url 'components:from-client-transmittal' %}",
           dataType: "json",
           headers: {          
             Accept : "application/json; charset=utf-8",         
            "Content-Type": "application/json; charset=utf-8"   
            }, 
           contentType: "application/json; chartset=utf-8"
         },
         parameterMap: function(data, type) {
            if (type == "read") {
               // send take as "$top" and skip as "$skip"
              return {
                $top: data.take,
                $skip: data.skip
              }
            }
          }
       },
       schema: {
         data: "transmittals"
        }
       };

      var ds2 = new kendo.data.DataSource(dataSourceArguments);
    
        $("#fbt-grid").kendoGrid({
            dataSource: ds2,
            pageable: true,
            sortable: true,
            groupable: true,
            filterable: true,
            columns: [{
                field: "transmittal_no",
                title: "Transmittal No",
                width: 150
            }, {
                field: "document_no",
                title: "Document No",
                width: 150
            },{
              field: "rev",
              title: "Revision",
              width: 50
            },{
              field: "client_response",
              title: "Client Response",
              width: 50
            }]
        });
      
   });
   
 </script>
{% endblock content %}

Вернуться на верх