Custom Widget as Grid Editor

4 posts, 0 answers
  1. Bryan
    Bryan avatar
    28 posts
    Member since:
    Oct 2014

    Posted 11 Jan Link to this post

    Hi,

    I'm looking at using a combination of input box, LIstview and maybe a couple of other controls as an editor in the Grid. I've got everything working, but rather than just appending the listview to the widget's HTML, I'm wondering if it's possible to put it in the k-container (ala using the combobox as a custom editor) so the grid isn't resized on editing. 

     

  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 13 Jan Link to this post

    Hi Bryan,

    You can customize the editors in the Grid widget as demonstrated in the following online demo: Please note that you can wrap the editors in additional containers.


    If the height of the editors is a too high and you want to prevent the resize of the widget, you could take advantage of the PopUp edit mode:
    Hope this helps.


    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Bryan
    Bryan avatar
    28 posts
    Member since:
    Oct 2014

    Posted 13 Jan in reply to Konstantin Dikov Link to this post

    Hi, Konstantin. 

    Thanks. I'm aware of the examples. What I'm trying to do is create a custom widget similar to the scenario of the dropdownlist being used as an editor, but since it's a composite widget, use a list view control wrapped in the k-animation-container object (or something similar) to appear on top of, rather than embedded in, the grid cell.  I had been using a combobox widget to do the grid editing, but it didn't quite have all the functionality required.

     Here's the widget code as I have it now:

     
        var SelectorFour = kendo.ui.Widget.extend({
            init: function (element, options) {
                var that = this,
                   id,
                   system,
                   _dataSource,
                   _autoComplete,
                   _listView,
                   _Input,
                   _pager,
                   plugin;

                kendo.ui.Widget.fn.init.call(this, element, options);

                system = 1;
                id = that.id;

                _Input = $("<input type='text' />");
                that.element.append(_Input)

                _Input.bind('focus', function () {
                    that._focus()
                })

                _Input.bind('keyup', function (event) {
                    that._keyup(event)
                })


                that.InputBox = _Input

                _GUIDVal = $("<input type='hidden' />");
                that.element.append(_GUIDVal)

                that.GUIDVal = _GUIDVal

                _cancelBTN = $("<div class='button clip'>Cancel</div>");
                that.element.append(_cancelBTN);

                that.cancelBTN = _cancelBTN

                that.cancelBTN.bind("click", function () {
                    
                    if (options.displayvalue != undefined) {
                        that.InputBox.val(options.displayvalue);
                    }

                    if (options.value != undefined) {
                        that.GUIDVal.val(options.value);
                    }

                    _listView.addClass("clip")

                    that.cancelBTN.addClass("clip");

                })

                _listView = $("<div></div>");
                that.element.append(_listView);

                that.listViewContainer = _listView

                _dataSource = new kendo.data.DataSource({
                    serverFiltering: true,
                    transport: {
                        read: function (operation) {
    //custom read based on input box value

                        },
                        parameterMap: function (options, operation) {
                            if (operation !== "read" && options.models) {
                                return kendo.stringify(options.models);
                            }
                        }
                    },
                    schema: {
                        data: "Nav"
                    }
                })

                that.DataSource = _dataSource

                if (options.displayvalue != undefined) {
                    that.InputBox.val(options.displayvalue);
                }
                
                if (options.value != undefined) {
                    that.GUIDVal.val(options.value);
                }
                

                that.listView = _listView.kendoListView({
                        dataSource: _dataSource,
                        selectable: true,
                        dataBound: function (e) {
                            if (this.dataSource.data().length == 0) {
                                $("#" + id).append("<p class='noDataMessage'>There is no data to display</p>");
                            }
                        },
                        selectable: "single",
                        change: function () {
                            var data = this.dataSource.view(),
                                selected = $.map(this.select(), function (item) {

                                    that.InputBox.val(data[$(item).index()].Display);
                                    that.GUIDVal.val(data[$(item).index()].CPSWGUID);
                                    _listView.addClass("clip")
                                    that.cancelBTN.addClass("clip");

                                    that.trigger("change");
                                });

                        },
                        click: function(e){
                           
                        },
                        focus: function() {
                            
                        },
                        template: "\
                            <div>\
                                <span data-jump='company' class='contactlens' data-contactlens='#: CPSWGUID #' >\
                                    <span id='jump#: CPSWGUID #' data-guid='#: CPSWGUID #'></span>\
                                    #: Display # \
                                </span>\
                                <span>\
                                    #= Display2 #\
                                </span>\
                           </div>",
                        selectable: "single"
                 }).data("kendoListView");

                

                _listView.addClass("clip")
                
                this.element.on("focus", this._focus);

            },

            options: {
                name: "SelectorFour",
                EncoreSystem: 2,
                dataTextField: "",
                dataValueField: ""
            },

            _focus: function () {

                var that = this;
                that.listViewContainer.removeClass("clip");
                that.cancelBTN.removeClass("clip");

            },

            _keyup: function (event) {
                var that = this;

                if (that.InputBox.val().length == 0) {
                    that.listView.dataSource.read();
                } else if (that.InputBox.val().length >= 3) {
                    //keycodes are for up down and enter, so those are handled like the normal combobox. might need to account for backspace as well if only one item in dropdown list
                    if (event.keyCode != 40 && event.keyCode != 38 && event.keyCode != 13) {
                        that.listView.dataSource.read();
                    } else {
                        if (event.keyCode == 40) {
                            console.log('down');
                            //that.listView.focus();
                            //that.listView.data("kendoListView").focus();
                        } else if (event.keyCode == 38) {
                            console.log('up')
                            //that.listView.focus();
                        }
                    }
                }

            },


            _lookup: function() {

            },

            events: ["change", "focusout"],

            _focusout: function () {
                alert('focus out')
                var that = this;
                that.trigger("focusout");
            },

            _cancel: function () {
                alert('cancel')
            },

            destroy: function () {
                this.element.off("focus", this._focus);
            },


            value: function (value) {

                if (value !== undefined) {
                     this.GUIDVal.val(value)
                } else {
                    return this.GUIDVal.val()
                }
            },


            displayvalue: function (value) {

                if (value !== undefined) {
                    this.InputBox.val(value)
                } else {
                    return this.InputBox.val()
                }
                
            }

        });

    Since I'm using 'that.element.append' for both the cancel button and the listview, it just expands the grid cell on entry. I tried using a tooltip on the input value to contain the addional controls, but that seemed a little wonky. I don't really want to use an editing popup; i'd prefer a similar functionality to the dropdown or combo boxes. Is there a way to extend the widget like that?

     

  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1793 posts

    Posted 15 Jan Link to this post

    Hello Bryan,

    For displaying a popup like the ComboBox or the DropDownList you should render an element within the body tag, so it could be manually positioned over the element used for the initialization when needed.

    You could refer to the following help article for any questions related to custom widgets:

    Regards,
    Konstantin Dikov
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready