Capturing State of CheckBox in Custom Edit

[David]

I need to capture the state of the checkboxs in the Tree View within a Custom Editor.
In my case I haven't been able to use the examples provided in the demos.
They refer to Model. In my case the model refers to a deferent model then the once used for the tree.
For reference I will use parentModel and childModel
At the top of the cshtml I have @model parentModel

Within the editor I have defined a TreeView with a different data source this would be childModel.

The sample code is as follows.
    @if (Model.Length > 0)
{
      <text>Checked nodes: @(String.Join(", ",Model)) </text>
}
else
{
     <text>No nodes checked. </text>
}
Real simple huh?
Well Model is always 1 because one record is sent to the Editor.
Inspection indicates that Model is defined as parentModel.
How do I check for the childModel instead?

[David]

I also want to point out that in .ItemAction(item => item.Checked = Model.Contains(item.Id);
Model.Contains is undefined.

[Petur Subev]

Hello David,

I am not sure I understand the question. Please demonstrate your case with a small demo project and give concrete steps to follow and describe what should be the expected behavior from your point of view so we can investigate and assist you.

Thank you for the understanding.

Kind Regards,
Petur Subev
Telerik

[David]

Scenario:

For each row in a grid I need to show in a string that list
all of the nodes that have been selected.

               Id            Title       Selected List

               1             1A          node2,node3, node5

               2             1B          node1,node3, node20122

               …

 

What I need to do is capture in the editor which nodes are
checked and return that back to the main grid as a string

I select Edit for  Id 1.

In the Editor I select  node1, node3, and node4.  Then select update

 The grid will show in the column “selected List” for Id1 (node1, node3, node4)

Now I select Edit for Id2.

               In the Editor I select node1, node5, node1002. Then select update

               The grid will show in the column “selected List” for Id2 (node1, node5, node1002)

 Setup:

               The relation
between the grid rows and the treeview is many to many with a  join table between them.

               DB TableA -> TabeB <- TableC

               TableA and TableC could have 1000s or rows each.

 In my Index.cshtml I have a grid with that uses a Custom PopUp Editor called EditModelA

 In my EditModelA I am trying to use the Demo ListViewEditor as a reference.

Issue:

     When I get to the part where it uses “Mode.” It tries to reference back to the model
used in the Index.cshtml.  How do I reference the actual correct model?
I have found a work around but would rethere use the structure in the demo (less code and cleaner).
Side question would be should I pass the TableC in as a list and link to that instead of calling back to the Server for the treeview? If so How do I set up the dataSource in the treeview?  In some regards that would make my code cleaner, but putenchly passing a lot o data that dones not need to be passed.

               (The following two lines in the Demo are where it feference the parent Model and not
the dataSource of the treeview)

             Item.Checked = Model.Contains(item.Id)
                        @if (Model.Length > 0)

 ModelA
 Id
 Title
 string selectedList{get; set;}
 <... othere items ...>
 List<ModelB>ItemB{get; set;}
ModelB
 id
 ModleAId
 ModelCId
 ModelC
 Id
 DescriptionIndex.cshtml:@(Html.Kendo().Grid<ModelA>().Name("GridA")
 .DataSource( ds => ds
  .Ajax()
  .Model(mdl => mdl.Id(m => m.Id)
 .Read(r => r.Action("Read","MyController"))
 .Update(u => u.Action("Update","MyController))
)
Columns(columns =>
{
 columns.Bound(c => c.Id).Hidden(true);
 columns.Bound(c => c.Title);
 columns.Bound(c => c.selectedList);
 columns.Template(tmp => {}).ClientTemplate("@
  <a href='javascript: void(0)' class='k-grid-edit' onclick'editRow(this)' title='' button edit><span class='fa fa-pencil fa-sm'></span></a>");
}
.Editable(ed => ed.Mode(GridEditMode.PopUp).TemplateName("EditModelA"))
)EditorTemplates\EditModelA.cshtml
@model ModelA @(Html.Kendo().TreeView()
 .Name("treeViewB")
 .Checkboxes(_chk => chk
  .Name("checkedFields")
  .CheckChildren(true)
 )
 .DataSource(ds => ds.Read("ReadB","MyController"))Following is from the TreeView CheckBox DEMO
 .ItemAction(item =>
 {
  item.Checked = Model.Contains(item.Id);
 }))
<div id="result">
@if (Model.Length > 0)
{
 <text>Checked nodes: @(String.Join(", ", Model)) </text>
}
else
{
 <text>No nodes checked.</text>
}
</div>

[Petur Subev]

Hello David,

Basically the TreeView widget is not intended to be used as an Editor or Editor Template for the Grid. What we could suggest you is to use hierarchy of Grids or MultiSelect widget like shown here. 

Also it is not getting clear what exactly your setup is just from the explanation. if you have a particular question regarding the usage of the TreeView please clarify it by giving concrete steps to follow and demonstrate it in a runnable small demo project.

Anyway how to get the selected items of a TreeView is covered in the documentation here:

http://docs.telerik.com/kendo-ui/getting-started/web/treeview/overview#gathering-the-checked-nodes-from-a-treeview

Kind Regards,
Petur Subev
Telerik

[David]

Let me reformat my question
In my view I have a ModelA it has properties Id (int) and selectedItems(string).
In my view I have a grid it is loaded with ModelA data.
For the grid I have a custom popup Editor.
In the custom popup Editor I need to access id and return updated string for selectedItems.
I CAN NOT use an embedded list so SelectListFor(m => m.someList) will not work.
I will use a listView defined in the custom editor that I need to pass the id as a parameter.
1. How do I reference the Id as the input parameter to my List view Data Source Read statement?
    .dataSource(d => d.Read(r => r.Action("GetList","MyController", new { id = ????})))
2. After I get my list of selected Items from the listview( which will have a template to make it a checkbox list), how do I assign the list to the ModelA.selectedItems? 
Please do not tell to go look at how to build a list or gather the data from a list. I can do that I need to be able to work with the data in the Parent Model( use the Id and assign to the selectedItmes).
I would try to create a JSFiddle but not sure how I would demonstrate that when I need a view and a Custom Template. That and I havent been able to get JSFiddle to reconize any of the kendo widgets(yes I have the External Resources added in it).
 

[David]

I found a sample in this thread that is claiming to do what I need to do.
    http://www.telerik.com/forums/custom-popup-editor-with-additional-fields
However I can't run the code but inspecting the code in the Editor it has this function
@model EmployeeViewModel

<script type="text/javascript">
function getCurrentParentId() {
var currentItem = ${JSON.stringify(data)} ;
return {id: currentItem.EmployeeID};
}
</script>
I can call a similar function and if I return ( return{id: 7};) it will return 7 to my controller. However if I format the var as listed  var currentItem = ${JSON.stringify(data)} ;    I get an error at ${ stating it is looking for ";" so I tried this var currentItem = $({JSON: stringify(data)}; no compile error but runtime error data is undefined.
I am including my view and template

[David]

Here is a screen shot with the Grid in the background and the Custom editor listed if it helps at all.
this is with a TreeView (checkboxs).

[Petur Subev]

Hello again David,

To the questions:

1. The dataItem that is currently being edited by the Grid can be retrieved like so:
   

   var item = $("#gridName").data("kendoGrid").editable.options.model;
   //alert(item.PersonID);

2. I would like to give some information about the case here. Please notice that inside the editor template you are not able type all your logic in C#. This is because this template is not executed on the server. It is just once read on the server (by passing an empty model to it) and then it is serialized and re-used on the client side each time the Grid enters edit mode. Thus said consider typing your logic with the client side API of the treeview / grid widgets and their dataSources. I already mentioned how you should get the current editing model from the Grid, on a side note you will have to send this parameter to the server when the TreeView sends its request. Basically the easiest way to do this is to set the AutoBind option of the TreeView to false and manually invoke the dataSource.read() method when the edit event of the Grid occurs.

Kind Regards,
Petur Subev
Telerik

[David]

Thanks for your reply.
I have tried placing the var item = $("#clientAttributes").data("kendoGrid").editable.options.model;
in the getCurrentAttributeId() function and got the following error.
I also tried placing it just inside the $(document).ready(function() {
In both cases it throws this error when I select edit from the Grid.
Uncaught TypeError: Cannot read property 'options' of undefined
Where should I place the declaration of item?

[Petur Subev]

Hello David,

What is that getCurrentAttributeId function you mentioned?

You can retrieve the element that is being edit only when the Grid is in edit mode. For example if  something inside the popup editor happens (click event or change event of a input element) you can use the approach that I shared.

On a side note, if you want to do this for an editor template you need to do a slightly different approach, please check the attached demo for example which uses slightly different approach.

I hope this is what you are searching for.

Kind Regards,
Petur Subev
Telerik

[David]

Thanks for the reply, Once I get your code to compile I'll take a look at it.
In the mean time The function you asked about is the one I call to get the attributeId to pass as a parameter to the Listview dataSource. I had my code included in the prevue's reply and a screen shot of what I am trying to accomplish.

 

[David]

Get the following error when I try to run your code.
Error 1 Unable to find version '1.0.0.0' of package 'MicrosoftWebInfrastructure'. KendoMVCWrappers
It is in the reference.
Tried removing the reference and  adding it back in but still does not compile.

[Petur Subev]

Hello David,

I re-attached the project with a modified packages file. I also got the same error message in the error list on my side and even before removing it the project was re-building successfully. After removing the package I do not see the error anymore.

Kind Regards,
Petur Subev
Telerik

[David]

After looking at html of your app at run time I see that on edit it alters the tr class to "k-grid-edit-row".
In my app when I select the edit it does not change the class to this "k-grid-edit-row".
So when I try to call the function for getting the current value it fails on the line
var tr = grid.tbody.find('.k-grid-edit-row').
Finely something that makes since.
Please can you revisit my index.cshtml included in attachment ClientAttribute_3.zip.
Then tell me:
    1. How do I get it to change the class to 'k-gird-edit-row'?
 or
    2. Can I use the data-Uid instead?
         if so how would I format the var tr = ?
Thanks and we are finely getting some were.

[Petur Subev]

Hello David,

This is because your are using Popup editing mode. However in such scenario you cannot find which row exactly is about to edit, since the Grid is still not in edit mode (it still creates the editors the momoment that function executes).

You mentioned that you are going to use a ListView which is not directly bound through MVVM to the record that you are going to edit. Which means that you can still declare the widget the same way with the AutoBind option set to false. And you can manually perform the request when the edit event of the Grid is triggered. Inside the edit event of the Grid you will have the model the model available.

e.g.

function onGridEdit(e) {
     //Since AutoBind of the widget is set the false you will have to manually perform the Read and send the extra parameter
     //at the same time
     $("#myListViewWidget").data("kendoListView").dataSource.read( {myValue: e.model.TheField});
}

I hope this helps.

With the approach above you wont need to use any Data function of the dataSource.

Regards,
Petur Subev
Telerik

 

 

[David]

:) YES That did it we are done !!!!!!!
Thank you for your PATIENCE in this event.
To those of you who bothered to look at all of this here is the final solution.
Recap I have a view with a grid, the gird calls a Custom Editor Popup, the PopUp has a ListView,
The ListView has a many to many relation to the identifier field of the grid row.
Solution:
In the View:
    function onGridEdit(e) {
     $("#myListViewWidget").data("kendoListView").dataSource.read( {myValue: e.model.TheField});
    }  

  Event for the Grid:
       .Events (e => e.Edit("onGridEdit"))

In the PopUp:
      Attachted to the ListView:
           .DataSource(d => d.Read(r => r.Action("GetListFromControllerFunction","ControllerName")))