KendoUI Grid with MultiSelect, addNew item in MultiSelect - kendo-ui

In the sample i combinate kendoGrid with a kendoMultiSelect column.
my Sample: kendoGrid with kendoMultiselect Sample
Adding for new item works. But the dataBinding it does not work. As soon as you leave the field, the value is lost.

I cleaned the old version of Sample:
kendoGrid with kendoMultiselect Sample Adding for new item
Steps:
click into the column country select a item => it works
click into the column country and type "Test 99"
click Add new item ==> it goes to datasource.add(); ==> and go to create on Server
this version it works

Related

Kendo grid. Update only current row in popup, even if other was changed

For example I have many many rows which contains 2 columns: checkbox and input, and popup window with editing. In DataSource I have 'Update' event, which call method for updating from controller.
Question: Is it possible to make such situation: User check checkbox on first row -> open popup for second row -> submit changes. Only second row should be updated, not all.
I want pass to server item only from current row. Actual result is that all changed rows passed to method 'Update'
This situation appears because in my application combined "incell" and "popup" editing for Kendo Grid.

Kendo ListView and MVVM 'edit template' cancel button resets bound data to initial state

I have a Kendo ListView bound to an Observable object and all is working well.
I'm able to:
Add items to the list
Edit existing items by using the edit template below
Delete items
One oddity though is when I switch an item to edit view and click Cancel it resets all data back to the original data. So if I started with one item with say name and amount fields, I edit the item and change the amount, then add two more items to the list all is well. But then I click edit on any of the items and immediately click cancel, from here it removes all the additional items I added and resets the data for the first item back to what it was at the beginning.
Why would the cancel action do that?
This dojo snippet shows the exact problem I'm having: http://dojo.telerik.com/IKowo
Kendo version 2016.3.1118
EDIT:
One further development, I found a forum post on Telerik stating that you have to have an ID column and a schema:model:id setup otherwise things won't work as expected.
I've updated the dojo snippet as follows: http://dojo.telerik.com/IKowo/2
Since adding the ID to the mix it looks like the amounts aren't being affected by the cancel button but the newly added items still get removed.
Follow the example provided here by telerik
//Binding Listview to local data array & Perform CRUD
http://dojo.telerik.com/eWih/2
The Only Requirement for the cancel event not deleting the new Items is:
The id field should be kept 0 when adding the new item to the datasource
It should be incremented / Updated in the datasource transport.create event (REQUIRED)
happy coding!

Kendo UI - Click Grid Row to Populate Another Grid

I have a Kendo grid that when you click on a row, I would like it to update the contents of another grid on the page. How would you write a function to tell the grid to update the second grid? As an example, the first grid would be a list of states and the second grid would show all of the cities within the selected state.
Just bind the click event on the rows of your first table :
$("#states tbody").on("click", "tr", changeState);
and then change the data of your second table accordingly :
$("#cities").data("kendoGrid").dataSource.data(getListOfCities());
Here is just some sample code : jsFiddle

Click an element in jqgrid and select the row it is in

When you click on a row in jqgrid it gets "selected" (applies some coloring and styles), other "selected" rows get deselected. However, when I click on an input button element in one of the cells in a row nothing happens... the row is not "selected". How would I make the clicking of this button (or link or whatever) cause the row to be "selected" (and deselected when a different row is clicked)?
Solution:
In the gridComplete method of jqgrid I can attach a click handler to each button, get the ID of the button's parent row and then call jqgrid's setSelection method on it, passing in the required row id as a parameter.
$('#mygrid').find('input[type=button]').each(function() {
$(this).click(function(){
var therowid = $(this).parents('tr:last').attr('id');
$('#mygrid').jqGrid('setSelection', therowid );
});
});
On "tricky" thing about this is that instruction on the jqgrid website show two different ways to go about doing this. The above uses the new API which does things rather differently so you will find a mix of suggestions online that switch between this new API and the older one.

Telerik grid manage filter icons

I#m using Telerik Grid and MVC3. I managed it to build my own filterDialogs, we had to create custom filter for each column. Everything works fine, when I click on my filter button, the gridData gets filtered. The only thing is that the filter icon doesnt change its state to active. So i went along and added the needed class after my filter command:
grid.filter(filterSettings)
$j('#targetColumn').addClass('t-active-filter');
When I filter for a first column, it works. But if I filter for a second column, the filter icon of the first column turns its state back to inactive. There must be some information that is sended from the server to the grid, so the grid goes along and adds/removes the class to the column header.
I got the answer from here. Before filtering I have to set the column filtersetting mannually:
var column = grid.columnFromMember(PropertyName);
if (column) {
column.filters = [filterSettings];
}
grid.filter(filterSettings)
And everythin works :)

Resources