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.
3 Answers, 1 is accepted
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
Rank 1
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?
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:
- http://docs.telerik.com/kendo-ui/framework/widgets/create-custom-kendo-widget#extend-the-base-widget
Regards,
Konstantin Dikov
Telerik