This is a migrated thread and some comments may be shown as answers.

Accessing Model within Popup Editor template

9 Answers 682 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Carolyn
Top achievements
Rank 1
Carolyn asked on 05 Sep 2018, 10:32 PM

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.

9 Answers, 1 is accepted

Sort by
0
Carolyn
Top achievements
Rank 1
answered on 06 Sep 2018, 06:24 PM

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!

0
Carolyn
Top achievements
Rank 1
answered on 06 Sep 2018, 06:25 PM
...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...
0
Carolyn
Top achievements
Rank 1
answered on 06 Sep 2018, 10:12 PM

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...

0
Viktor Tachev
Telerik team
answered on 07 Sep 2018, 12:21 PM
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. 


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


Regards,
Viktor Tachev
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Carolyn
Top achievements
Rank 1
answered on 07 Sep 2018, 10:03 PM

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?  

0
Carolyn
Top achievements
Rank 1
answered on 08 Sep 2018, 02:28 PM

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!

0
Carolyn
Top achievements
Rank 1
answered on 17 Sep 2018, 02:54 PM

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]);"

0
Carolyn
Top achievements
Rank 1
answered on 17 Sep 2018, 02:56 PM

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

0
Carolyn
Top achievements
Rank 1
answered on 17 Sep 2018, 04:56 PM

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...

Tags
General Discussions
Asked by
Carolyn
Top achievements
Rank 1
Answers by
Carolyn
Top achievements
Rank 1
Viktor Tachev
Telerik team
Share this question
or