Opening Edit Popup via script

2 posts, 0 answers
  1. Nga
    Nga avatar
    8 posts
    Member since:
    Oct 2012

    Posted 16 Jan 2013 Link to this post

    Hello,

    I have a grid that is set to PopUp when Editing
    .Editable(ed=>ed.Mode(GridEditMode.PopUp).TemplateName("ActionedBy"))
    So I can click on the edit button next to each row in the grid to enter editing mode (which pops up) or click on the Add new button on the toolbar to also open the popup to create a new item.

    If I don't want the add new button, but want to have a link somewhere in my page to add new .. How can I open up the "add new" popup?
    Can this be done via Javascript?

    then if I wanted to remove the edit button next to each row, and make the Name column a hyperlink , so if you click on that item, it will open the "Editing" popup mode for that item ?

    Regards,
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2196 posts

    Posted 18 Jan 2013 Link to this post

    Hi Nga,


    Please find the answers of your questions below:

    1. You can use the Grid API to create new row using JavaScript - please check the example below using the AddRow method:
      // get a reference to the grid widget - replace with your grid name
      var grid = $("#grid").data("kendoGrid");
      grid.addRow();
         
    2. Basically you can create column template using ClientTemplate method which contains anchor tag which calls JavaScript function to put the current row in edit mode using the EditRow method:
      //Client template
      columns.Bound(p => p.User).ClientTemplate("<a class='editRow' href='javascript: void(0)'>#=User# </a> ");
      Attach click event to all links with class "editRow":
      $(function () {
          $(".editRow").live("mousedown", function (event) {
              grid = $(this).closest("[data-role=grid]").data("kendoGrid");
              grid.editRow($(this).closest("tr"));
          })
      }
             
    Kind regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top