Get row ID from grid

2 posts, 0 answers
  1. Bob
    Bob avatar
    24 posts
    Member since:
    Dec 2014

    Posted 25 May Link to this post

    I am having trouble getting my 'Edit' link in a row of a grid to get the row's ID so that I can fire my JavaScript. I'm doing it this way because I need to call a different controller, but just for the 'Edit' link and not the 'Details' or 'Delete' links.

    This is my Grid and JavaScript code:

    @(Html.Kendo().Grid(Model)
    .Name("facilityContactGrid")
    .Columns(columns =>
          {
              columns.Bound(c => c.ContactLastName).Width(174);
              columns.Bound(c => c.ContactFirstName).Width(140);
              columns.Bound(c => c.ContactTitleDescription).Width(223);
              columns.Bound(c => c.ContactPhoneNumber).Width(108);
              columns.Bound(c => c.ContactActiveFlag).Width(95);
              columns.Bound(c => c.PrimaryContactFlag).Width(107);
      
              columns.Bound(c => c.ContactID)
                  .ClientTemplate(Html.ActionLink("Details", "Details", new { ContactID = "#=ContactID#" })
                  .ToHtmlString())
                  .Title("Details")
                  .Width(93);
              columns.Bound(c => c.ContactID)
                  .Title("Edit")
                  .Filterable(false)
                  .ClientTemplate("<a onclick=\"EditFacilityContact(this,'#= ContactID #')\" href='\\#'>Edit</a>");
               
              columns.Bound(c => c.ContactID)
                  .ClientTemplate(Html.ActionLink("Delete", "Delete", new { ContactID = "#=ContactID#" })
                  .ToHtmlString())
                  .Title("Delete")
                  .Width(97);
          }).Editable(editable => editable
            .DisplayDeleteConfirmation("Are you sure you want to delete this item?"))
            .Pageable()
            .Resizable(resize => resize.Columns(true))
            .Sortable()
            .Scrollable(scr => scr.Height(470))
            .Filterable()
            .DataSource(dataSource => dataSource
                .Ajax()
                .Model(model => model.Id(p => p.ContactID))
                .PageSize(15)
                .ServerOperation(false))
         )
    <script type="text/javascript">
        function EditFacilityContact() {
            var grid = $("#facilityContactGrid").data("kendoGrid");        //   THIS IS WORKING
      
      
            alert("YOU ARE HERE!!");
            return false;
        }
    </script>

    I'm I have tried using grid.select() and various forms of that, but none of the rows are "selected", I'm just clicking the 'Edit' link.

     

    Any help with this will be greatly appreciated.

  2. Eyup
    Admin
    Eyup avatar
    3007 posts

    Posted 27 May Link to this post

    Hi Bob,

    You are already passing the ContactID in the column template definition. You will just need to access it in the client-side event handler:
    function EditFacilityContact(anchorEl, contactID) {
        var grid = $("#facilityContactGrid").data("kendoGrid");
        alert(contactID);
    }

    Please make the suggested modification and let me know if it works for you.

    Regards,
    Eyup
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
Back to Top