Use of Kendo observable binding in Kendo UI grid - kendo-grid

I am using Kendo observable object to bind the Kendo ui grid. When adding/editing the values in the data source it is reflecting in the grid as well as the observable array. When using load button and explicitly adding values to the Kendo observable is not reflecting in the grid.
Here is sample working code.
http://dojo.telerik.com/#bijum/ASoTu

Here is an example that works:
http://dojo.telerik.com/IVuko
I made the following changes:
bound the Grid to the personDataArray ObservableObject, and not to just a field of the ObservableObject
set schema.data to point to the data field of the personDataArray.
called dataSource.read() when setting new data to the personDataArray
I think the last step should not be needed, but not sure.

Related

How to assign a dynamic value to input List property in angular

I want to render multiple dropdowns in angular based on the result from api.
From the api 2 dropdown controls are returned with different data however my code shows same data for both of the controls
Can anyone suggest how to assign a dynamic value to the property "list" in the input element?. I think if that is possible my problem would be solved or please let me know if there is any other solution
As list is an input attribute not a property, you can assign dynamic value to list using:
[attr.list] ='object.property'.
for more info see the issue

Kendo UI grid rendering

I have a scenario here, Consider there are two kendo ui grids(jquery), Grid1 and Grid2 both are of same schema. On adding data in the first grid ie Grid-1, should automatically reflect the grid-2. However the same data I am changing in the Grid-2 should not affect the Grid-1 unless I have made an explicit event to change the same. In my case it is working bi directionally not the way I want to be. I am using Kendo observable.

Kendo tree in kendo grid - collapse issue

I am trying to get kendo tree in kendo grid.
I could able to achieve to get the data, but not the tree functionality.
below is the link for same
http://dojo.telerik.com/oDakE
can anyone help me why the expand and collapse is not working
have you tried kendoTreeList, it accepts a json sort of like a treeview but you assign a parent id to each node, and displays as a grid.

How do I refresh kendo grid when datasource is changed

I have used kendo grids and charts fine and refreshed them with the following example code:
$("#Product").data("kendoGrid").dataSource.read();
How do I refresh kendo grid when datasource is changed without redrawing the grid.
I think this gives you better answer
Kendo ui datasource refresh? like
$("#Product").data("kendoGrid").dataSource.read();
$("#Product").data("kendoGrid").refresh();

Removing items on click based on checkbox status using angularjs

I am using this Plunkr. It displays a list of products. When I click on remove button, the items which are checked should be removed from the list.
<button ng-click="onClick()" class="k-button">Remove</button>
I have tried various things however, nothing is working. I am not exactly getting what logic should go in the following logic
$scope.onClick = function () {
}
I know it is something very simple however, I am not able to get it. Any help would be appreciated.
If you ask about logic, i will try to explain it here..
First inside onClick function get your gird's datasource variable, then find all selected checkboxes and use jquery each to iterate over each checkbox and find closest data-uid attribute. Every grid row has uid in its DOM, with this uid value get kendo observable object from datasource with getByUid method.
Last using datasource pass this observable object to remove method of datasource.
This is Kendo datasource API, hopes it helps you to write the code..