Popup edit button logic and placement

4 posts, 0 answers
  1. Michael
    Michael avatar
    8 posts
    Member since:
    Dec 2013

    Posted 22 Dec 2013 Link to this post

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

     

                })

            )

        )

    }
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 23 Dec 2013 Link to this post

    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!
  3. Michael
    Michael avatar
    8 posts
    Member since:
    Dec 2013

    Posted 27 Dec 2013 Link to this post

    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?
  4. Michael
    Michael avatar
    8 posts
    Member since:
    Dec 2013

    Posted 27 Dec 2013 Link to this post

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


Back to Top