Popup edit button logic and placement

[Michael]

Is it possible to move to edit button to the toolbar?

I have a grid of users and would the user logged in should only be allowed to edit their own info.

The solution I’m looking for is either:

1: only show edit button for the row containing them self

2. An edit button in the toolbar that opens the edit form with their info.

 My code so far:

@(Html.Kendo().TabStrip()

    .Name("Afdelinger")

    .Items(tabstrip =>

   
{

        tabstrip.Add()

            .Text("Odense")

            .Selected(true)

            .Content(

                @<text>

                    @RenderEmployeeGrid("Odense")

                </text>

            );

        tabstrip.Add()

            .Text("Købbenhavn")

            .Content(

                @<text>

                    @RenderEmployeeGrid("København")

                </text>

            );

    })

)

 

@helper RenderEmployeeGrid(string office)

{

   
@(

   
Html.Kendo().Grid<ADUser>()

        .Name("ActiveDirectoryUsers" + office)

        .Columns(columns =>

        {

            columns.Bound(p =>
p.ThumbnailPhoto64).Width(96).ClientTemplate("<img width='96'
height='96' src='data:image/png;base64,#=ThumbnailPhoto64#' />");

            columns.Bound(m =>
m.DisplayName).Width(300);

            columns.Bound(m =>
m.Mail).Width(125).ClientTemplate("<a href='mailto:#= Mail #'>#= Mail
#</a>");

            columns.Bound(m =>
m.TelephoneNumber).Width(125).ClientTemplate("<a href='tel:#=
TelephoneNumber #'>#= TelephoneNumber #</a>");

            columns.Bound(m =>
m.Mobile).Width(125).ClientTemplate("<a href='tel:#= Mobile #'>#= Mobile
#</a>");

  
         columns.Command(commands
=>

            {

                commands.Custom("Vis").Click("showDetails");

                commands.Edit();

            }).Title("Commands").Width(200);

        })

        .ToolBar(toolbar =>

          {

              toolbar.Custom().Text("Click
me").Action("ADUser_Update", "ADUser");

          })

        .Sortable()

        .Filterable()

        .Editable(editable => editable.Mode(GridEditMode.PopUp).TemplateName("ADUser_Update"))

        .Pageable(pageable => pageable

            .Refresh(true)

            .PageSizes(true)

            .ButtonCount(10))

            .Events(events =>
events.DataBound("hideEditButton"))

        .DataSource(dataSource => dataSource

            .Ajax()

            .Read(read => read.Action("MembersByOffice_JSON", "ADUser", new { Office = office }))

            .Update(update => update.Action("ADUser_Update", "ADUser"))

            .PageSize(10)

            .Sort(sort => sort.Add(m =>
m.DisplayName))

            .Model(model => {

                model.Id(p =>
p.SAmAccountName);

                model.Field(field =>
field.ThumbnailPhoto).Editable(false);

 

            })

        )

    )

}

[Petur Subev]

Hello Michael,

Both are possible, however you will need to do some custom JavaScript to achieve it:

• Toolbar can be customized by creating template like shown here:
  http://demos.kendoui.com/web/grid/toolbar-template.html
  You can create button which invokes the editRow method of the Grid and puts the needed row into edit mode. To find the row that refers to the current user you can loop through the rows in the tbody and use the dataItem method of the Grid to get the underlying model (and check the property that you look for)
• To create edit button inside the column, you can create template column with conditional logic which check if the row refers to the current user and if it does generate edit button. How to execute conditional logic inside template is covered here.
  e.g.
  http://jsbin.com/AyuVOsI/2/edit
  
  

Kind Regards,
Petur Subev
Telerik

[Michael]

Tried for a while now but woth no luck! My JS skills ain't adequate.

var y = grid.dataItem(grid.tbody.find("tr[data-uid='d145cdb4-d575-479d-babf-571da0935ef6']"));
grid.editRow(y);

opens the row with the data-uid in edit mode but i dont know the id. all i know is the value of a hidden td

eg.

<td role="gridcell" style="display:none">anee</td>

how do i get the dataItem for that row?

[Michael]

I got something working. Only problem is that i have to disable paging and use jsonResult.MaxJsonLength = int.MaxValue;
It will work for now but if we hirer some more its going to be slow..

going to put on my thinking cap again to find a workaround.


<script>
    function edit() {
        var grid = $("#ActiveDirectoryUsersOdense").data("kendoGrid");
        var dataItem = $("#ActiveDirectoryUsersOdense").data("kendoGrid").dataSource.get('michael.madsen');
        var row = $("#ActiveDirectoryUsersOdense").data("kendoGrid").tbody.find("tr[data-uid='" + dataItem.uid + "']");
        grid.editRow(row);
    }
</script>

.ToolBar(t => t.Template(
            @<text>
                 <div class="toolbar">
                    <a class="k-button" href="javascript:void(0);" onclick="edit()">Rediger dine oplysninger</a>
                </div>
             </text>
            )
        )