How to bind Kendo UI AutoComplete values to URLs?
I use the open source version; Kendo UI Core.
You can use template and wrap your content inside an anchor tag.
var autocomplete = $("selector").kendoAutoComplete({
minLength: 1,
dataTextField: "Name",
template: '#: Name #</span>',
dataSource: {//your data source details
}
}
}).data("kendoAutoComplete");
});
Related
I am constructing a hierarchical datagrid using Kendo UI and I am using MVVM methodology for widget binding.
Here is the DEMO of the kind of hierarchical grid I want to make. But the example here uses jQuery and not MVVM.
How can I bind the detailInit event to my viewModel using data attributes using MVVM?
I want to bind the event using the below code but it is not working:
JS:
var viewModel = kendo.observable({
......
..........
dataGridDetailInit: function (e) {
//Here I want to catch the detailInit event of the dataGrid
},
..........
......
});
HTML (Kendo template):
<!-- Datagrid -->
<div data-role="grid"
data-columns="[
{'field':'FullName', 'title':'Full Name'},
{'field':'Email', 'title':'Email'},
{'field':'HomeTel', 'title':'HomeTel'},
{'field':'Mobile', 'title':'MobileTel'},
{'field':'Contact_Type', 'title':'Contact Type'},
]"
data-bind ="source: address_book_datagrid_observable.datasource,
events: {
detailInit: dataGridDetailInit
}"
data-pageable='{
refresh: false,
pageSizes: true,
buttonCount: 5,
}'
data-navigatable = "true"
data-resizable = "true"
data-no-records= "true"
data-messages = '{
noRecords: "There is no data to be displayed"
}'
>
</div>
Ok, so while researching I came across this link.
On this issue, an engineer from Telerik asserted this:
All Kendo widgets can be configured via data attributes. Building a
hierarchical grid declaratively is supported too, however please have
in mind that: detailInit event should not be bound through the events
binding but via data-attribute.
Here is the example of how the event binding could be accomplished.
The right way to bind detailInit event to viewModel using MVVM (data attibute is) using data-detail-init as below:
<!-- Datagrid -->
<div data-role="grid"
data-columns="[
{'field':'FullName', 'title':'Full Name'},
{'field':'Email', 'title':'Email'},
{'field':'HomeTel', 'title':'HomeTel'},
{'field':'Mobile', 'title':'MobileTel'},
{'field':'Contact_Type', 'title':'Contact Type'},
]"
data-bind ="source: viewModel.datasource"
data-detail-init="viewModel.dataGridDetailInit"
data-pageable='{
refresh: false,
pageSizes: true,
buttonCount: 5,
}'
data-navigatable = "true"
data-resizable = "true"
data-no-records= "true"
data-messages = '{
noRecords: "There is no data to be displayed"
}'
>
</div>
I am not able to find Rearrange event and refreshPositions method in kendo sortable which is available in Jquery sortable.
$.ui.sortable.prototype._rearrange = function (event, i) {
this.refreshPositions();
});
In Kendo UI, I have a tooltip declaratively defined inside a view:
<span data-bind="events: { show: onShow }"
data-role="tooltip"
data-auto-hide="true"
data-position="top">?</span>
Normally the content of the tooltip would be attached via the title attribute, or when attaching the tooltip procedurally, via the content property. But here, the content should be fetched out of the model.
So I'm looking for the equivalent of data-bind="text: contents for the Kendo Tooltip.
Can be done by creating a small custom binder.
kendo.data.binders.widget.tooltip = {
value: kendo.data.Binder.extend({
refresh: function() {
var value = this.bindings["value"].get();
var tooltip = this.element;
tooltip.element.attr("title",value);
}
})
};
Here is a live demo.
I have an XTemplate to display html data as shown below
var headerTmp = new Ext.XTemplate(
'<br><br><br>',
'<div class="contact-display-container" style="height:100px; width:400px">',
'<div style="font-size:12px; left:15px">Hello </div>',
'</div>',
'<br><br><br>'
);
I am referring the data in a dataview
var dataView1 = new Ext.DataView({
autoScroll: false,
tpl: headerTmp,
itemSelector: 'div.contact-display-container'
});
I am trying to display the data in a window
var win = new Ext.Window({
height:700,
width:700,
border:false,
modal:true,
title: 'Review Contact Information',
items:[{
layout : 'vbox',
items : [dataView1]
}],
buttons:[{
text: 'Cancel',
handler:function(){
win.close();
}
}]
});
win.show();
But the data "Hello" is not displayed on the window. Can you please tell me where am I going wrong.
Thanks in advance :)
A dataview should be bound to an instance of a store. Try adding a store config to your dataview.
You are overnesting items in your window. You should add dataView directly as a child item to your window. If you need an extra parent level panel, either change it's layout to something like fit or if you want to keep it as a vbox, add a flex config to the dataview.
Here's a working example:
http://jsfiddle.net/KUqM9/419/
I have a static html form layout where i add extjs form fields using the "renderTo" config. In order to have form validation and simple submit methods i want to add the fields to a form panel. As the layout is managed by the html frame i don't want the form to be rendered by the panel (panel has html frame as contentEl and this should be used as is).
In extjs3 i could achieve this by adding the field not to the panel but to the BasicForm (formpanel.getForm().add(...)) but in extjs4 this method seems to be gone.
How can i do this using extjs4?
Thanks in advance.
Since you already have a Panel that uses the contentEl to render HTML into its body, I recommend to stick with this approach:
Replace the panel with an Ext.form.Panel instance - the configuration, particularly the contentEl config - can remain unchanged.
The code provided here will override a standard Ext class (Ext.layout.Layout) and introduce support for a 'renderItemTo' config property on child items of any Ext container or panel instance (including Ext.form.Panel).
The value of the config property should be the ID of an already rendered DOM node, e.g. a DIV element that is part of the HTML fragment used in as the contentEl of the parent container's body.
Ext.require(['Ext.layout.Layout'], function() {
Ext.override(Ext.layout.Layout, {
renderItem: function (item, target, position) {
if(item.renderItemTo) {
// render 'renderItemTo' components into the specified DOM element
item.render(item.renderItemTo, 1);
// don't allow container layout to seize the component
item.layoutManagedHeight = 2;
item.layoutManagedWidth = 2;
} else {
// just use standard Ext code for non-renderItemTo components
this.callOverridden(arguments);
}
},
isValidParent: function(item, target, position) {
// signal Ext that we are OK with were our 'renderItemTo' component is right now
// otherwise it would get moved during the layout process
return item.renderItemTo ? true : this.callOverridden(arguments);
}
});
});
Usage:
var panel = Ext.create('Ext.form.Panel', {
contentEl: 'form', // the DOM element ID that holds the HTML fragment for the body
title: 'My FormPanel with special FX',
items: [
{
xtype: 'textfield',
renderItemTo: 'text1', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 1',
},
{
xtype: 'textfield',
renderItemTo: 'text2', // the ID of a DOM element inside the HTML fragment
fieldLabel: 'Label 2'
}
]
});
I uploaded a working example to JSFiddle (note: resize the window if you experience a render problem - this is related to JSFiddle, not my override).
After digging through the layout system of ExtJS 4.1 i implemented a custom layout which moves the items after rendering to the desired position in the fixed markup. The result is the same as for the ExtJS 4.0.7 version from this thread. It seams to work for the ExtJS standard fields. I have some problems with my custom fields though.
Ext.define('Ext.ux.layout.Fixed', {
extend: 'Ext.layout.container.Auto',
alias: 'layout.uxfixed',
afterRenderItem: function(item) {
// move items with renderToFixedMarkup to desired position
if (item.renderToFixedMarkup) {
var target = Ext.getDom(item.renderToFixedMarkup);
this.moveItem(item, target);
}
},
isValidParent: function(item, target, position) {
// items with renderToFixedMarkup property are always positioned correctly
return (item.renderToFixedMarkup) ? true : this.callOverridden(arguments);
}
});
It can be used by setting "layout: 'uxfixed'" on the panel and the "renderToFixedMarkup" config on the items.