Кендо У.И. Грид, Дюрандаль

0

Я пытаюсь использовать Kendo UI Grid с Durandal 2.0.1, но API-вызов не отправляется, а Grid вообще не появляется, сообщите мне, я делаю что-то неправильно.

Я реализовал, как было предложено Durandal Docs

Main.js

requirejs.config({
    paths: {
        'text': '../Scripts/text',
        'durandal': '../Scripts/durandal',
        'plugins': '../Scripts/durandal/plugins',
        'transitions': '../Scripts/durandal/transitions'
    }
});

define('jquery', function() { return jQuery; });
define('knockout', ko);

define(['durandal/system', 'durandal/app', 'durandal/viewLocator', 'durandal/binder'], function (system, app, viewLocator, binder) {
    //>>excludeStart("build", true);
    system.debug(true);
    //>>excludeEnd("build");

    app.title = 'Durandal Starter Kit';

    app.configurePlugins({
        router: true,
        dialog: true,
        widget: true
    });

    app.start().then(function() {
        //Replace 'viewmodels' in the moduleId with 'views' to locate the view.
        //Look for partial views in a 'views' folder in the root.
        viewLocator.useConvention();

        // As per http://durandaljs.com/documentation/KendoUI/
        kendo.ns = "kendo-";
        binder.binding = function (obj, view) {
            kendo.bind(view, obj.viewModel || obj);
        };
        //Show the app by setting the root view model for our application with a transition.
        app.setRoot('viewmodels/shell', 'entrance');
    });
});

Welcome.js

define(function() {

    var vm = {
        displayName: 'Roles',
        gridOptions:{
            dataSource: roleDataSource,
            height: 700,
            toolbar: [{ name: "create", text: "Add New Role" }],
            columns: [
                { field: "Name", title: "Name" },
                { field: "Description", title: "Description" },
                { field: "Key", title: "Key" }
               ],

        }
};

    return vm;

    var roleDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://tvaiswb01/api/role/GetRoles",
                dataType: "json"
            },
            parameterMap: function (data, operation) {
                return JSON.stringify(data);
            }
        },
        batch: false,
        error: error,
        pageSize: 20,
        requestEnd: roleDataSource_requestEnd,
        schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Description: { validation: { required: false } },
                    Key: { validation: { required: false } },
                }
            }
        }
    });

});

Welcome.html

<section>
    <h2 data-bind="html:displayName"></h2>
    <div data-kendo-bind="kendoGrid: gridOptions" id="roleGrid"></div>
</section>
  • 1
    Не уверен, что есть другие проблемы, но как минимум вам нужно переместить var roleDataSource =... прежде чем он будет впервые использован в var vm = ...
Теги:
kendo-ui
durandal

1 ответ

4
Лучший ответ
define(function() {

    var vm = {
        displayName: 'Roles',
        dataSource: new kendo.data.DataSource({
           transport: {
             read: {
                url: "http://tvaiswb01/api/role/GetRoles",
                dataType: "json"
             },
             parameterMap: function (data, operation) {
                return JSON.stringify(data);
             }
          },
           batch: false,
           error: error,
           pageSize: 20,
           requestEnd: roleDataSource_requestEnd,
           schema: {
            model: {
                id: "Id",
                fields: {
                    Id: { editable: false, nullable: true },
                    Name: { validation: { required: true } },
                    Description: { validation: { required: false } },
                    Key: { validation: { required: false } },
                }
            }
         }
     });
};

    return vm;
}

И в HTML вы можете определить конфигурацию (я использовал только высоту, вы можете определить другие конфигурации, события в HTML как это)

<section>
    <h2 data-bind="html:displayName"></h2>
    <div data-kendo-bind="source: dataSource"  data-kendo-height="700"  id="roleGrid" data-kendo-role='grid'></div>
</section>

РЕДАКТИРОВАТЬ

Если ваш источник данных должен быть определен за пределами, вы можете вернуть его так,

 displayName: 'Roles',
 dataSource:roleDataSource 
  • 0
    Привет, Джаянта, Большое спасибо за помощь, Не могу ли я назвать Datasoruce как dataSource: roleDataSource, где roleDataSource объявлен как var some where
  • 0
    Почему вы не можете определить это внутри модели представления? Видите, я отредактировал ответ ..
Показать ещё 3 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню