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

Reusable template for Edit and Add

5 Answers 325 Views

Grid

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

This question is locked. New answers and comments are not allowed.

5 Answers, 1 is accepted

answered on 28 Feb 2011, 11:42 PM

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>

answered on 01 Mar 2011, 08:42 AM

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

Registration for Q1 2011 What’s New Webinar Week is now open. Mark your calendar for the week starting March 21st and book your seat for a walk through all the exciting stuff we ship with the new release!