Редактирование шаблона Kendo-UI не работает с компонентом Vue Template Single File

Question

Я использую оболочку Kendoui Grid Vue, в документации Kendoui Vue я обнаружил, что могу использовать один файл Component для шаблонов Kendo, я работаю над редактируемой сеткой с помощью всплывающего редактора, и я задаю свойство«редактируемый» с именем метода, возвращающего шаблон и его аргументы, то же самое, что и документация Vue Templates KendoUi, но он просто игнорирует функцию и получает встроенный доступ к редактированию.

Другой способ, которымЯ попытался установить редактируемое свойство, например "{mode: 'popup', template: templateMethod}", и оно всплыло в окне редактирования, но в содержимом оно просто отображает "[объект] [объект]".

Вот мой код:

RouterComponent:

<template>
  <c-main>
  <c-row>
	<c-col xs="24" sm="8">
		<c-panel title="Departamento<small>Workflow</small>" style="height:350px;">
			<div class="u-mt-10"><strong>Nombre</strong></div>
			<div class="u-mt-10">{{ $route.params.name }}</div>
			<div class="u-mt-10"><strong>Descripción</strong></div>
			<div class="u-mt-10">{{ $route.params.description }}</div>
		</c-panel>
	</c-col>
	<c-col xs="24" sm="16">
		<c-panel title="Usuarios<small>Administrar</small>" style="height:350px;">
				<kendo-datasource
					ref="usersdatasource"
					:type="'aspnetmvc-ajax'"
					:pageSize="20"
					:server-filtering='true'
					:transport-read-url= "baseServiceUrl+'/api/DepartmentUsers'"
					:transport-read-type="'GET'"
					:transport-read-data-type="'json'"
					:transport-read-data="dataParameters"
					:transport-destroy-url="baseServiceUrl+'/api/DepartmentUsers'"
					:transport-create-url="baseServiceUrl+'/api/DepartmentUsers'"
					:schema-data= "'Data'"
					:schema-total= "'Total'"
					:schema-errors= "'Errors'"
					:schema-model-id="'Id'"
					:schema-model-fields="usersSchemaModelFields"
			  ></kendo-datasource>
			  <kendo-grid
		  id="usersdatagrid"
		  :height="'auto'"
          :dataSourceRef="'usersdatasource'"
		  :toolbar="[ {name:'create', text: 'Agregar Usuario'}]"
          :groupable='false'
          :sortable='true'
		  :filterable='true'
		  :selectable='true'
		  :editable="{ mode: 'popup', template: popupTemplate }"
          :pageable-refresh='true'
          :pageable-page-sizes='true'
          :pageable-button-count="5"
		  >
        <kendo-grid-column
          field="UserName"
          title="Usuario"
		  >
        </kendo-grid-column>
		<kendo-grid-column
          field="DisplayName"
          title="Nombre"
		  >
        </kendo-grid-column>
        <kendo-grid-column 
		:width="150"
		:command="[{name:'destroy', text:'Eliminar' }]" title="Acción">
		</kendo-grid-column>
		
      </kendo-grid>
		</c-panel>
	</c-col>
  </c-row>
  <c-row>
	<c-col xs="24">
	<c-panel title="Reglas<small>Departamento</small>" style="height:400px;">
		<kendo-datasource
            ref="rulesdatasource"
            :type="'aspnetmvc-ajax'"
            :pageSize="20"
            :server-filtering='true'
            :transport-read-url= "baseServiceUrl+'/api/Departments'"
			:transport-read-type="'GET'"
			:transport-read-data-type="'json'"
			:transport-update-url="baseServiceUrl+'/api/Departments'"
			:transport-update-type="'PUT'"
			:transport-update-data-type="'json'"
			:transport-destroy-url="baseServiceUrl+'/api/Departments'"
			:transport-create-url="baseServiceUrl+'/api/Departments'"
			:schema-data= "'Data'"
			:schema-total= "'Total'"
			:schema-errors= "'Errors'"
			:schema-model-id="'Id'"
      ></kendo-datasource>
	  <kendo-grid
		  id="rulesdatagrid"
		  :height="'auto'"
          :dataSourceRef="'rulesdatasource'"
		  :groupable='false'
          :sortable='true'
		  :filterable='true'
		  :selectable='true'
          :pageable-refresh='true'
          :pageable-page-sizes='true'
          :pageable-button-count="5"
		  >
        <kendo-grid-column
          field="UserName"
          title="Usuario"
		  >
        </kendo-grid-column>
		<kendo-grid-column
          field="Nombre"
          title="DisplayName"
		  >
        </kendo-grid-column>
      </kendo-grid>
	  </c-panel>
	</c-col>
  </c-row>
  </c-main>
</template>
<script>
  import Vue from 'vue'
  import UserTemplateVue from './departmentUserTemplate.vue'
  var UserTemplate = Vue.component(UserTemplateVue.name, UserTemplateVue)

  export default {
  name: "AddUserDepartmentView",
  data() {
  return {
  baseServiceUrl: window.baseServiceUrl,
  dataParameters: {
	department: $route.params.Id,
	roles: "WORKFLOW;WORKFLOWADMIN"
  },
  filterConfiguration: [],
  usersSchemaModelFields: {
		Id: { editable: false, nullable: true },
		DisplayName: { validation: { required: true } },
		UserName: { validation: { required: true } },
		Email: { validation: { required: true } },
		TenantId: { validation: { required: true } },
		IsAdmin: { validation: { required: true } }
	}
  }
  },
  methods: {
  popupTemplate: function(e) {
	return {
		template: UserTemplate,
		templateArgs: e
	}
  }
  }

  };
</script>

<style>

#usersdatagrid{
	height:100% !important;
}

#rulesdatagrid{
	height:100% !important;
}

</style>

Шаблонный компонент:

<template>
    <span>
        <button @click="buttonClick">Click Me</button>
    </span>
</template>

<script>
    export default {
        name: 'template1',
        methods: {
            buttonClick: function (e) {
                alert("Button click")
            }
    },
        data () {
        return {
            templateArgs: {}
            }
    }
    }
</script>

Пожалуйста, помогите мне с этим.

Большое спасибо

Answer 1

Я знаю, что это старое, но я наткнулся на это, когда искал что-то связанное, поэтому я решил попробовать сделать это для дальнейшего использования.

Две вещи, которые я бы предложил попробовать здесь:

1. Убедитесь, что для вашего компонента указано имя.
2. Попробуйте использовать: editable-mode="popup;" вместе с editable-template="popupTemplate"

Это помогло мне.По какой-то причине, я просто не был счастлив, когда я передавал объект в редактируемый.

Надеюсь, это поможет!