MvvM grid how to define columns from model?

4 posts, 0 answers
  1. siminture
    siminture avatar
    2 posts
    Member since:
    Aug 2016

    Posted 29 Aug Link to this post

    <!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <link rel="stylesheet" href="styles/kendo.common.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.min.css" />
        <link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />

        <script src="js/jquery.min.js"></script>
        <script src="js/kendo.all.min.js"></script>
    </head>
    <body>
    <div id="example">
        <div class="demo-section k-content wide">
            <div>
                <h4>Add or update a record</h4>
                <div data-role="grid"
                     data-editable="true"
                     data-toolbar="['create', 'save']"
                     data-columns="columns"
                     data-bind="source: products,
                                visible: isVisible,
                                events: {
                                  save: onSave
                                }"
                     style="height: 200px"></div>
            </div>
            <div style="padding-top: 1em;">
                <h4>Console</h4>
                <div class="console"></div>
            </div>
        </div>
        <div class="box wide">
            <div class="box-col">
                <h4>Configuration</h4>
                <div>
                    <label><input type="checkbox" data-bind="checked: isVisible">Visible</label>
                </div>
            </div>
            <div class="box-col">
                <h4>Information</h4>
                Kendo UI Grid supports the
                <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/events">events</a>,
                <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/source">source</a> and
                <a href="http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/visible">visible</a> bindings.
            </div>
        </div>
    <script>
        var viewModel = kendo.observable({
            isVisible: true,
            onSave: function(e) {
                kendoConsole.log("event :: save(" + kendo.stringify(e.values, null, 4) + ")");
            },
            columns:[
            {field:"id", width:50},
            {field: "name", width:200}
            // ...etc
            ],
            products: new kendo.data.DataSource({
                schema: {
                    model: {
                        id: "ProductID",
                        fields: {
                            ProductName: { type: "string" },
                            UnitPrice: { type: "number" }
                        }
                    }
                },
                batch: true,
                transport: {
                    read: {
                        url: "//demos.telerik.com/kendo-ui/service/products",
                        dataType: "jsonp"
                    },
                    update: {
                        url: "//demos.telerik.com/kendo-ui/service/products/update",
                        dataType: "jsonp"
                    },
                    create: {
                        url: "//demos.telerik.com/kendo-ui/service/products/create",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                }
            })
        });
        kendo.bind($("#example"), viewModel);
    </script>
    </div>


    </body>
    </html>
  2. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    355 posts

    Posted 31 Aug Link to this post

    Hello Siminture,

    The only way to achieve the desired behavior is to define, and use custom bindings, as described in the following section of our documentation:

    http://docs.telerik.com/kendo-ui/framework/mvvm/bindings/custom

    However, the easier and more straightforward approach in the discussed scenario would be to provide the array with the columns configuration directly in the markup, as shown in this online demo:

    http://demos.telerik.com/kendo-ui/grid/mvvm

    http://dojo.telerik.com/eRecI

    I hope this helps.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  3. Kendo UI is VS 2017 Ready
  4. siminture
    siminture avatar
    2 posts
    Member since:
    Aug 2016

    Posted 01 Sep Link to this post

    Dear Dimiter,

    i think configuration columns  directly in the markup is not good idea when columns need to set templates, function ...

    custom binder, you mean like this ?

     

    kendo.data.binders.gridColumn = kendo.data.Binder.extend({
                refresh: function() {
                    var value = this.bindings["gridColumn"].get();
                    var grid = $(this.element).data("kendoGrid");
                    var opts = grid.getOptions();               
                    opts.columns = value;
                    grid.setOptions(opts);
                }
            });

     

    this code will recreate grid widget, is not very good sol, Any suggestion?

     

     

     

  5. Dimiter Topalov
    Admin
    Dimiter Topalov avatar
    355 posts

    Posted 05 Sep Link to this post

    Hi Siminture,

    Unfortunately, the approaches, described in my initial answer, are the ones provided, and supported out-of-the-box. If you feel that some additional or different functionality can improve our product, please submit a feature request to our UserVoice portal:

    http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback

    It is closely monitored, and the most popular ideas are considered for implementation from our developers for a future release of Kendo UI.

    Thank you in advance.

    Regards,
    Dimiter Topalov
    Telerik by Progress
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top
Kendo UI is VS 2017 Ready