Accessing Model within Popup Editor template

[Carolyn]

I am opening a template via the Popup Editor on a Kendo Grid.  I would like to be able to access the Model to conditionally render markup depending on the value of a property. 

Here is a partial view of the html in the template:

@Html.HiddenFor(m => m.IsCopy)
 
    <table>
        <tr><td colspan="2" align="center"><h4 class="text-info"> Pipe Details
            @{if (Model.IsCopy == true)
                {
            @Html.Label("Copy", new { id = "lblCopy", style = "display:none; color:red" })
                    }
                }
              </h4></td></tr>

</table>

When I inspect in the browser, the hidden field IsCopy is true:

<input name="IsCopy" id="IsCopy" type="hidden" value="true" data-val-required="The IsCopy field is required." data-val="true" data-bind="value:IsCopy">

But the html for Label "Copy does not render.

[Carolyn]

In my Grid I have a custom command to Copy a record.  I am opening the record for edit in a popup editor by calling the editRow jquery function.  Once the Update button is clicked, I create a new record with the updated fields in the Controller and issue this return back to the Grid:

 return Json(new[] { p }.ToDataSourceResult(request, ModelState));

The problem is that a new record is not created but rather the record I was trying to copy is overwritten in the Grid.

Can someone suggest a better way to effect this copy?

I tried using the jquery command addRow instead of editRow but that sends an empty Model to the popup editor rather than a populated Model which can be edited...

I appreciate any suggestions!

[Carolyn]

...By the way, I am trying this approach rather than the approach of my first post - trying to conditionally add markup based on a model property...

[Carolyn]

More info:

This almost works but as stated above, the only problem is that the row selected is updated rather than a new row being added to the Datasource. 

How can I add a new row in javascript and set it as the edit row?

Here is my custom command javascript function:

function CopyRec(e) {
            e.preventDefault();
            var grid = $('#gridPipe').data('kendoGrid');
            var selectedItem = this.dataItem($(e.currentTarget).closest("tr"));
         
            var newItem = selectedItem;
            newItem.id = 0;
      
            newItem.IsCopy = true;
            newItem.PartNum = "AutoGenerate";
            newItem.Description = "AutoGenerate";
            grid.dataSource.add({
                id: newItem.id,
                MaterialId: { defaultValue: 0},
                PartNum: { defaultValue: "AutoGenerate" },
                    ClientPartNum: { defaultValue: "AutoGenerate" },
                    OuterDiameter: { defaultValue: selectedItem.OuterDiameter },
                    WallThickness: { defaultValue: selectedItem.WallThickness },
                    Specification: { defaultValue: selectedItem.Specification },
                    Grade: { defaultValue: selectedItem.Grade },
                    SeamType: { defaultValue: selectedItem.SeamType },
                    Coating1: { defaultValue: selectedItem.Coating1 },
                Coating2: { defaultValue: selectedItem.Coating2 },
                AdditionalInfo: { defaultValue: selectedItem.AdditionalInfo }
            });
          
            this.editRow(newItem);
          
        }

When this javascript executes, the Create function is triggered in the Controller - yay!  But after update code executes the selected row is updated in the DataSource - boohoo...

[Viktor Tachev]

Hello Carolyn,

Please check out the sample below that illustrates how you can copy the selected row in the Grid widget and place it in edit mode. 

• https://dojo.telerik.com/eHeNObET

Give the approach a try and let me know how it works for you.


Regards,
Viktor Tachev
Progress Telerik

[Carolyn]

Hi Viktor,

This works like a charm except there is a strange thing happening in this scenario:

If I test an edit as the first action - the existing record is updated in the Update Action in the Controller.

If I do an edit as a subsequent action (after doing a copy or a create command) - the Create Action in the Controller gets fired AND then the Update Action in the Controller gets fired too!  It fires 2 times...

Any ideas what is causing this?  

[Carolyn]

Viktor,

I figured out the problem...The row id was still 0 after an Add or Copy.  Once I gave the newly created row an id, this "scenario" outlined above stopped happening.  

Thank you again for all your help with this!

[Carolyn]

Viktor,

I found a bug.  When you go to the last page and copy the last record, the copy is indeed added to the grid at item 0 BUT the popup editor opens item 0 for edit of the page you are on and not the record you selected for copy.

Is there a way to add page to the "grid.editRow(grid.items()[0]);"

[Carolyn]

Viktor,

Also, if you click cancel in the popup Editor, the record that you copied is still in the grid.  

How can I capture the Cancel command to remove it from the grid?

Thank you,

Carolyn

[Carolyn]

Hi again Viktor,

I solved the above issue of the copy opening the popup Editor on the wrong record by changing the code you specify in your Dojo as follows:

//grid.editRow(grid.items()[0]);   <<<<replace this line with below
        var dataItem = grid.dataSource.at(0);
        grid.editRow(dataItem);

Seems to work.   Seems to resolve the cancel issue too.

Hoping this helps someone...