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

Popup edit button logic and placement

3 Answers 56 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Michael
Top achievements
Rank 1
Michael asked on 22 Dec 2013, 10:12 AM
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);

 

            })

        )

    )

}

3 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 23 Dec 2013, 08:01 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Michael
Top achievements
Rank 1
answered on 27 Dec 2013, 02:09 PM
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?
0
Michael
Top achievements
Rank 1
answered on 27 Dec 2013, 05:29 PM
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>
            )
        )


Tags
Grid
Asked by
Michael
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Michael
Top achievements
Rank 1
Share this question
or