Accessing Model within Popup Editor template

10 posts, 0 answers
  1. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 05 Sep 2018 Link to this post

    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.

  2. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 06 Sep 2018 Link to this post

    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!

  3. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 06 Sep 2018 in reply to Carolyn Link to this post

    ...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...
  4. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 06 Sep 2018 Link to this post

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

  5. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2469 posts

    Posted 07 Sep 2018 Link to this post

    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.
  6. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 07 Sep 2018 in reply to Viktor Tachev Link to this post

    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?  

  7. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 08 Sep 2018 in reply to Carolyn Link to this post

    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!

  8. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 17 Sep 2018 Link to this post

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

  9. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 17 Sep 2018 Link to this post

    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

  10. Carolyn
    Carolyn avatar
    22 posts
    Member since:
    Aug 2018

    Posted 17 Sep 2018 Link to this post

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

Back to Top