I have main page: main.html
In this page I have a viewmodel with a hierarchical datasource
datasource: [{id:"", items:[{.....}]}];
In a modal window I have a Treeview. Treeview call a datasource in main page.
In my datasource there is a variable check: true/false
I want that when I check or uncheck a checkbox in the treeview this bind a datasource.. so when I close a modal window, and the I re-open it I will find the selected/unselected checkbox restored...
If you have an HTML like this:
<div id="win" class="k-content">
<div id="treeview"></div>
</div>
Where you have a kendoWindow which id is win containing a kendoTreeView with id treeview, you should initialize them using:
var treeview = $("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true
},
dataSource: data
}).data("kendoTreeView");
var kwin = $("#win").kendoWindow({
visible : true,
modal : true,
resizable: false
}).data("kendoWindow");
And no matter if the DataSource for the tree is local (array) or remote. Since you are not going to be destroying the window, just opening and closing, the data is always there.
Running example here
Related
I am new in Kendo MVVM. Trying to bind datasource data to a listview but it does not show the data.Tried to mix and match all available examples. Want to use the template which is not working. Here is the code sample
http://dojo.telerik.com/IwawE
Modified the dojo with the fixes
http://dojo.telerik.com/IwawE/5
Your data binding declaration is incomplete and results in javascript errors when kendo tries to instantiate the listview.
data-bind="source:gsSystem,
visible: isVisible,
events: { click: }"
Firstly, there is no 'isVisible' property on your view model so the binding will return 'undefined' resulting in the listview not being shown. Either remove that binding or add the property as part of the model, for example:
isVisible: true
Secondly, there is no function defined for the click event. Usually you would specify one such as:
events: { click: onClick }
and add the handler to the model:
onClick: function (e) {
alert("Clicked");
}
However in the case of the ListView, there is no click event available. Instead, remove the event from the ListView declaration and add it to the div within the template instead:
<script type="text/x-kendo-template" id="tmpl">
<div data-bind="events: { click: onClick }">#:text#</div>
</script>
In my Kendo grid, I've a column (address). Instead of displaying customer's address, it shows a button. On clicking the button, I want to open a Kendo window as a modal and display the address.
...
{ field: "address",
title: "Customer Address",
width: "130px",
filterable: false,
template: '<span class="viewButton"><input type="button" value="Address" class="k-primary"></input></span>'
},
...
I've tried various strategies, including a custom command, an onClick event handler for the grid etc. But none seems to work. The best I've achieved so far is using custom command, in which I can open the Kendo window, but unable to display the underlying data for the column.
Any ideas for any possible way to achieve this?
You can get hold of current dataItem and show it in window.
$("#grid").on("click", ".viewButton",function(e){
var dataItem = grid.dataSource.dataItem($(e.currentTarget).closest('tr'));
var yourText = dataItem.address;
});
I have a kendo ui grid populated from a datasource ajax call.
<div id="my-grid">
<div kendo-grid="myGrid">
k-options="myGridConfig"></div>
</div>
</div>
# myController
this.myGridConfig = {
dataSource: {
transport: {
read: '/api/endpoing',
dataType: 'json'
}
The grid is been populated correctly but when it does the browsers scroll is not been displayed.
Your code isn't valid markup. It appears you have a div within a div within a div...why? Are you applying any other styles to the grid that may eliminate the scrollbar? Can you provide a screenshot? You can try adding scrollable: true when instantiating the grid widget.
I would like to have a button and when the user clicks on it a filter form pops down just below the button. I would like to utilize Kendo UI controls to achieve the effect.
In fact, what I need is almost exactly the 'filtering' that can be found on this example:
http://demos.telerik.com/kendo-ui/grid/filter-menu-customization
However, I'm not dealing with a grid of data so I can't use that example above.
There are different possible implementations. Here I will describe one based on kendoWindow since then you have a lot of possible customizations for that filtering form.
This is the HTML that includes the button:
<div>
This is the container that includes a
<button id="filter" class="k-button">Filter</button>
that is used to display a form
</div>
And then you define the HTML form. Example:
<div id="form">
<div>Filtering value:<input data-role="autocomplete"/></div>
<button class="k-button">Filter</button>
</div>
Doing the form initialization is:
var form = $("#form").kendoWindow({
title : "Filter",
visible : false,
modal : false,
draggable: false
}).data("kendoWindow");
Where initially we set the form as not visible.
You can define it as modal, draggable or even define the opening and closing effect.
Finally, for opening and placing the form just bellow the button you should:
$("#filter").on("click", function(e) {
// Find clicked button
var button = $(e.currentTarget);
// and get its position
var pos = button.offset();
// shift down the form to open by the height of the button + 5px (margin)
pos.top += button.outerHeight() + 5;
// Apply positioning to the form
form.wrapper.css(pos);
// display form
form.open();
});
You can see this here : http://jsfiddle.net/OnaBai/mpq6k/
I'm trying to toggle the visible property of a Kendo UI window through the data-bind method using an MVVM pattern but it is not responding as it should according to the Kendo documentation.
<div id="KendoWindow"
data-role="window"
data-bind="visible:WindowVisible"
data-title="Title does not show"
data-width="500"
data-height="300"
>
<div class="span4" >
<label for="Comment">Comments</label>
<textarea id ="Comment" data-bind="value: Comment"></textarea>
</div>
I am initializing it properly but if I set the WinowVisible property to false in the viewModel like so,
this.set("WindowVisible", false);
the window stays visible.
If I set it through jQuery like so :
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:false
});
it will then become invisible. Then I can't make it visible again if I run this code:
var dialog = $("#KendoWindow").data("kendoWindow");
dialog.setOptions({
visible:true
});
Maybe try adding data-visible="false" to the window, then when the ShowWindow becomes true, it should become visible. I have a checkbox bound to the boolean value, as well as a button click function setting the boolean and both seem to work fine.
See sample...
http://jsbin.com/jecih/1/edit