kendo grid cancel edit on nested datasource - kendo-ui

I have viewmodel with nested json datasource.
Here is my DEMO (use second contact "personal contact" for testing)
[{ person_id:1, person_name:"John",
contact: [
{email:"john#domain.com"}
]
}]
I am binding videmodel to grid with contacts detail template:
+ person
=> contact 1
=> contact 2
Grid is editable using custom popup editor template, where I can edit person and contacts all in one form. Available personal contacts are presented using listview with form above it (click on the row binds fields).
My problem lies with canceling edit. Because contacts grid detail listview is binded to a data subset, it is not automatically synced to a before edit state. I don't want to resync whole grid, just force that contact detail listview to rebind.
Is there any "smart" way to make detail listview aware of a data change? I am creating and binding detail listview at detailInit. Maybe store record id somewhere with listview and rebind it on grid cancel event?
Because data store is nested only top level responds correctly to the update and cancel actions. Nested (listview) levels doesn't in at least two ways: (1) when you edit top and nested item and update, grid will refresh, but detail listview will not (2) when you edit top and nested level and update, then open edit again and simply cancel, nested level is not persisted when editor is again opened - data is rolled back to its original state (?). All this points to store nested level not being handled correctly "by default" and some smarter way around is required which I lack knowledge or ideas.

Found out that editing misbehaved due to missing "record id". Once I provided unique id I am getting expected results.

Related

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!

How to query Umbraco's 7.X page setting (Grid Layout) to create a menu?

I'm using Umbraco 7.3.3 to create a home page with a verical parallax scroll menu. My approach is to create a Editor/View for each specific section and use a setting (from Grid Layout property editor) to render the ID that I'll use as anchor for my main navigation.
I've also tried to create the sections as Child Documents but it's lacks the ability to freely reorder the sections.
Is the first option the best approach to create a Grid Layout with Parallax Scroll navigation? Can someone point a different/better way to create a "scroll down" navigation menu?
The backbone is OK but I don't know how to query CurrentPage's settings under MainNavigation.cshtml Partial (I'm using Fanoe Starter Kit).
How can I query by a specific CurrentPage's setting?
I'm expecting something like:
// first try (Does NOT work)
CurrentPage.GetProperty("content").Where(s => s.some lambda expression)
//another tried option based on GetGridHtml method (Does NOT work)
CurrentPage.GetGrid("content")...
Here is the setting configuration for each row that should have a navigation item in menu:
[{
"label": "Section Name",
"description": "Type the section name",
"key": "id",
"view": "textstring",
"applyTo": "row"
}]
I've made an extra research and I found (here and here) that there is no API that handles the serialized JSON stored by the Grid Layout Editor.
Limitations With the above usage scenarios in mind, consider the grids limitations. First of all, all content entered into the grid is stored as a single property value on the content node, as a big JSON object. This means that as soon as the values are stored in the database, there is no managed api to drill into the grid content and target specific cell content - so a grid layout is not a recommended storage of reusable content - it simply wasn't designed for this scenario. If you wish to reuse content in multiple pages, it is still recommended that you store these pieces of content as separate content nodes, so they can be stored, cached and queried as usual.

Kendo Grid - Lazy Load On Popup Edit

I am using Kendo UI ASP.NET MVC Grid (Razor) in Ajax mode with a popup editor.
As an example say: Customers have orders
User of the application go to a grid that displays all customers. User is allowed to add/edit/delete customers (and their orders). But when the user clicks on edit and the popup editor comes up that is when I want to load orders. I do not want to load orders eagerly since a customer may have many orders and the user may never edit any customer at all.
Seems like this should be a simple thing to do. I have looked through all forums/questions. I have not been able to find such an example. Can someone help me with this?
Thanks a bunch!
j
Are the orders already loaded when the initial grid is loaded (are they in the model)?
If not, one way to do this is define a grid in your popup editor and set .Autobind(false) and set its Read action to a Controller/action.
When editing a record, you can fire a .refresh() on the datasource of the Orders grid.
I would need some more info on the structure of the template and the grid.

How to add a new item to a dropdownlist in a create form in MVC 3?

I have a Form to create a new model object and persist it. That form is displayed in a lightbox or popup.
Some fields are dropdownlist showing related info that lives in another table (other model object related to the main model).
What I need to achieve is without leaving the creation form, create a new item of the related type and update the DropDownList in order to continue filling fields and finaly submit the form.
I have done this in winforms but not really sure which is the best approach in MVC 3:
Trigger another popup with a small form?
Use some kind of editable dropdownlist?
Place a small hidden form right next/after the DDL to allow entering the info to create an item in DDL (and to DB also)?
What do you thing is the best option?
Thanks!
There is no editable dropdown list in HTML. There are some toolkits that simulate it, but in general these are clumbsy and really complex. It's a lot easier to stick with basic controls.
You would proably do best to have a small + sign next to the field, and then popup an editing field that inserts the element into the combobox and sends it to the controller via ajax to add to the database.
An alternative to a second pop up is having a toggle add button. When toggled, then show a small area where you can enter the name. Using ajax, save the name, and then refresh your dropdown. This works well if you only have a few attributes to fill in.

jgGrid Search Dropdown Not Changing

This may be a followup to this question Possible to make jqGrid Search Box Stay on Page? - Or it may be unrelated because clicking the search button manually shows the same behavior.
We have a dynamically generated grid that is created by a) making an ajax request to get the grid columns based on a report id and then b) setting up the grid model and fetching the data. When the page loads initially, we pass in a starting report id, but there is a dropdown box on the page that lets the user change reports.
When the dropdown changes, I unload any existing grid, make the ajax request to get the columns, set up the grid model, and then get the data. The columns change, the data changes, and everything looks correct - except the search columns do not change in the search dropdown.
If I close the search box and reopen it, it still has the old search columns. Likewise, if I click the reset button or reload the entire grid.
I found it after a bit more poking around. I needed to set the recreateFilter option to true
prmSearch = {recreateFilter:true,multipleSearch:true,overlay:false,sopt:['cn','eq','ne','lt','le','gt','ge','in','ni','nc']};

Resources