Reusable template for Edit and Add

[Will Ferguson]

Hi I am using Telerik mvc grid

On the grid I have an EDIT button on each row of data
at the top of the grid i have an "ADD new Record" Buttton.

When I click Edit I get an edit page. Which is nice.
When I click Add I get something else. I get a modal form (popup or inform or inline)
What I would like to do is see exaclty the same page when I edit as when I add
Is it possible to reuse the edit template for Adding??

Is there a code example please

[Atanas Korchev]

Hello Will Ferguson,

 Normally the grid is using the same template for inserting and editing. You can check our online demos.

 I am not really sure how you have achieved the behavior which you describe. Could you attach a sample project showing this?

Regards,
Atanas Korchev
the Telerik team

[Will Ferguson]

Yes. I don't know how I have mangaed to do it . I have other devs adding java also.

But I like the edit screen result. (there is no telerik grid anywhere on the page to confuse the user)

I actually don't want popup, inline or inform to add or edit records. There is too much grid information on the screen. I prefer not seeing the grid at all when editing or adding a record.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<SoftwareSupport.Drought.DataLayer.Models.Person>>" %>

<%@ Import Namespace="SoftwareSupport.Drought.Web.Extensions" %>
<%@ Import Namespace="SoftwareSupport.Drought.Web.Helper" %>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <%
        GridEditMode mode = GridEditMode.PopUp;
        GridButtonType type = GridButtonType.Text;

    %>
    <div>
        <% using (Html.BeginForm("Index", "Person", FormMethod.Post, new { id = "SearchForm" }))
           { %>
        <label>
            Search for a Name or Company (Starting With..)</label>
        <%
            string searchby = string.Empty;
            if (!string.IsNullOrEmpty(Request.Params["searchby"]))
                searchby = Convert.ToString(Request.Params["searchby"]);
            else if (ViewData["searchby"] != null && !string.IsNullOrEmpty(Convert.ToString(ViewData["searchby"])))
                searchby = Convert.ToString(ViewData["searchby"]);

        %>
        <input type="text" id="txtSearchText" name="txtSearchText" value="<%= searchby %>" />
        <input type="submit" id="btnSearch" value="Search" />
        <%}%>
        <%-- <% using (Html.BeginForm("_GetActivity", "Person", FormMethod.Post))
           { %>
        <input type="hidden" id="hdnpersonID" name="hdnpersonID" value="" />

      <input type="submit" id="SelectMe" value="Review Selected Caller History" name= "SelectMe"  />
       <input type="submit" id="EditMe" value="Edit Selected caller" name= "EditMe"  />
       <input type="submit" id="DeleteMe" value="Delete Selected Caller" name= "DeleteMe"  />


        <input type="submit" id="AddMe" value="Add a new Caller" name= "AddMe"  />


        <%}%>--%>
    </div>
    <%: Html.Telerik().Grid(Model)
        .Name("Grid")

        .DataKeys(keys => keys.Add(c => c.PersonID))
               .ToolBar(commands => commands.Insert())
                .DataBinding(dataBinding => dataBinding.Server()

                 //   .Select("SelectPerson", "Person", new { personID = Convert.ToInt32(Request.Params["personID"]) }) // destroys paging and sorting in grid
                    .Insert("Create", "Person"))
                    //   .Update("......EditCall", "....Activity")
                    // Business requests to remove delete functions     .Delete("Delete", "Person"))
                   .ToolBar(tools =>
               tools.Custom().Text("Show Caller Activity")
                   .HtmlAttributes(new { onclick = "doActivity(); return false;" })
        )


        //       .ToolBar(tools =>
            //        {
            ////    //"Activity" button - when pressed shows the "calls and fodder" user interface
            ////  //  tools.Custom().Text("Activity").HtmlAttributes(new { onclick = "return Get_Activity()", @class = "Activity" });
            ////    tools.Custom().Text("GET History").Action("Index", "Activity", new { personID = Convert.ToInt32(Request.Params["#hdnpersonID"]) });
            ////    //// "Insert" button - when pressed inserts the new record. Initially hidden. Shown when the "Create" button is pressed.
            ////    //tools.Custom().Text("Insert").HtmlAttributes(new { onclick = "return endInsert()", style = "display:none", @class = "insert" });

        ////    // "Edit" button - when pressed edits the selected record. Initially disabled. Enabled once a record is selected
            ////    tools.Custom().Text("Edit").HtmlAttributes(new { onclick = "return beginEdit()", @class = "edit disabled" });
            ////    // "Update" button - when pressed updates the selected record. Initially hidden. Shown when the "Edit" button is pressed.
            ////    tools.Custom().Text("Update").HtmlAttributes(new { onclick = "return endEdit()", style = "display:none", @class = "save" });

        //    // "Delete" button - when pressed deletes the selected record. Initially disabled. Enabled once a record is selected
            //    tools.Custom().Text("Delete").HtmlAttributes(new { onclick = "return doDelete()", @class = "delete disabled" });

        ////    // "Cancel" button - cancels insert or edit operation. Initially hidden. Shown when the "Edit" or "Create" button is pressed.
            ////    tools.Custom().Text("Cancel").HtmlAttributes(new { onclick = "return cancel()", style = "display:none", @class="cancel" });
            //})
        .Columns(columns =>
        {
            columns.Bound(c => c.PersonID).ReadOnly().Width(0).Filterable(false); //BugFix 390:ie7 shows the filter icon on the hidden column specifically hide the filter
            columns.Bound(c => c.FirstName).Width(150);
            columns.Bound(c => c.LastName).Width(150);
            columns.Bound(c => c.CompanyName).Width(150);
            columns.Bound(c => c.Location.Locality).Width(200);
            columns.Bound(c => c.Comment);

            // Bugfix 429: Business requested to remove all delete buttons from applications
            // commenting out the command code below
            //
            //columns.Command(commands =>
            //{

            //   // commands.Delete();

            //}).Width(200);

        })
         .Scrollable(scrolling => scrolling.Height(600))
        .Selectable()
        .Pageable(p => p.PageSize(20))
        .Sortable()
        .Filterable()
        .ClientEvents(e => e.OnRowSelect("Grid_onRowSelect"))
        .Editable(editing => editing.Enabled(true).Mode(mode))
                .Editable(e => e.TemplateName("Edit"))


    %>
    <br />
    <asp:Label ID="Label1" runat="server"></asp:Label>
    <br />
    <style type="text/css">
        /* style for disabled buttons */
        .disabled
        {
            border-color: #ccc;
            color: #aaa;
        }
        .enabled
        {
            border-color: #ccc;
            color: #90BAD2;
        }
    </style>
    <script type="text/javascript">
        var btnShowCallerActivity = null;

        // tracks the selected table row (<TR> tag)
        var selectedRow;

        var hdnPersonID;

        function Grid_onRowSelect(e) {
            // update the selected row
            selectedRow = e.row;
            var id = selectedRow.cells[0].innerHTML;
            // enable the 'Edit' an 'Delete' buttons
            $('#Grid .disabled').removeClass('disabled');
            hdnPersonID = id;
            btnShowCallerActivity.show();
        }

        function doActivity() {
            var searchby = $("#txtSearchText").val();

            if (searchby != "") {
                document.location.replace('<%= ClsGeneral.UrlBase() %>Activity/Index/' + hdnPersonID + "?searchby=" + searchby);
            } else {
                document.location.replace('<%= ClsGeneral.UrlBase() %>Activity/Index/' + hdnPersonID);
            }
        }

        $(document).ready(function () {
            $(".t-grid-toolbar a").each(function (ind) {
                if ($(this).html() == "Show Caller Activity") {
                    btnShowCallerActivity = $(this);
                    $(this).hide();
                }
            });

            $("#Grid .t-grid-toolbar .t-grid-add").each(function (ind) {
               $(this).text("Add New Client")
             });
        });

    </script>
</asp:Content>

[Atanas Korchev]

Hello Will Ferguson,

 What do you mean by Java? Telerik Extensions for ASP.NET MVC do not support Java - only C# and VB.NET.

 The popup, inline and inform editing modes are the only ones supported built-in. It seems that you have some sort of custom editing implementation.  

If you don't want any of the built-in editing modes then you have to implement some way of custom editing. One way to do this is to add a template column with a link inside which will navigate to a new page  containing the editing form. Here is a code snippet which will help you to get started:

columns.Template(c =>
{
%>
        <%= Html.ActionLink("Edit", "Edit", "Home", new { personID = c.PersonID }) %>
<%
});

Regards,
Atanas Korchev
the Telerik team

[Will Ferguson]

Yes ok I suppose I do need Custom editing. Problem is I allready have this for the command column containing edit
Where I want it now is on the "Add New Record" button. Which is of course not in a column but att the top of the grid.
What does that code look like? I have this currently

.Insert(

 

"Create", "Person"))

how do I stop telerik using one of it's modes and use my custom template?

 

[Atanas Korchev]

Hello Will Ferguson,

 You can do this by defining a custom template for the toolbar (just like with the columns). Please check the custom toolbar template example which shows how to do that.

Regards,
Atanas Korchev
the Telerik team