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

[Solved] Grid Editing AJAX Problems

2 Answers 174 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.
John
Top achievements
Rank 1
John asked on 28 Jul 2010, 11:06 PM
I am attempting to get the Grid to perform the AJAX editing functionality displayed in the demo.  At this point I'd be happy with just basic edit capabilities.  

I have created the basics but I'm having a trouble getting the grid to go into the editing mode.  Nothing happens when I click the Edit button.  I have a feeling these two issues are related so that's why I have included them in a single post.

Thanks,
John


Symptom 1:
I can get the data returned into the grid using the AJAX select functionality.  As soon as I add the command column the grid seems to loose it's AJAX capabilities (if I sort a column, the entire page refreshes).

If I remove the Command buttons from the controller, then the grid will begin displaying and sorting the records through AJAX.  But the moment I put the Command buttons in the grid, the AJAX functionality seems to disappear.
columns.Command(commands =>
{
    commands.Edit();
}).Title("Commands").Width(200);


Symptom 2: 
The edit command button does not do anything when clicked.  I have used Firebug to try and determine what is going wrong, but there is no noticeable activity when the Edit button is clicked (no traffic to the server, and it does not appear to make any javascript calls).  It seems like the buttons are not properly wired up to any javascript events.


MODEL
namespace TelerikTest.Models
{
    public class ToolDefinition
    {
        public int Id { get; set; }
        public string Name { get; set; }
        public string PartNumber { get; set; }
    }
}

CONTROLLER
namespace TelerikTest.Controllers
{
    public class ToolDefinitionController : Controller
    {
        Repositories.ToolDefinitionRepository repository = new Repositories.ToolDefinitionRepository();
 
        public ActionResult Index()
        {
            return View();
        }
 
        [HttpPost]
        [GridAction]
        public ActionResult IndexGridBinding()
        {
            return View(new GridModel(repository.GetToolDefinitions()));
        }
 
        [HttpPost]
        [GridAction]
        public ActionResult Edit(int Id)
        {
            throw new NotImplementedException();
        }
    }
}

MASTER PAGE
<%@ Master Language="C#" Inherits="System.Web.Mvc.ViewMasterPage" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
<%= Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.black.css")) %></head>
<body>
    <div>
        <asp:ContentPlaceHolder ID="MainContent" runat="server">
         
        </asp:ContentPlaceHolder>
    </div>
<%= Html.Telerik().ScriptRegistrar() %></body>
</html>

VIEW
<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Tool Definitions
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Tool Definitions</h2>
    <%= Html.Telerik().Grid<TelerikTest.Models.ToolDefinition>()
        .Name("ToolDefinition")
        .DataKeys(keys =>
        {
            keys.Add(td => td.Id);
        })
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax().Enabled(true)
                .Select("IndexGridBinding", "ToolDefinition")
                .Update("Edit", "ToolDefinition");
        })
        .Columns(columns =>
        {
            columns.Bound(td => td.PartNumber);
            columns.Bound(td => td.Name);
            columns.Command(commands =>
            {
                commands.Edit();
            }).Title("Commands").Width(200);
        })
        .Editable(e => e.Mode(GridEditMode.InLine))
        .Pageable()
        .Scrollable()
        .Sortable()
    %>
</asp:Content>



2 Answers, 1 is accepted

Sort by
0
Accepted
Alex Gyoshev
Telerik team
answered on 29 Jul 2010, 08:51 AM
Hello John,

Are you by any chance using a version of jquery.validate prior to 1.7? There is a problem with it overriding jquery.fn.delegate, which causes such symptoms.

Best wishes,
Alex Gyoshev
the Telerik team
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
0
James Lam
Top achievements
Rank 2
answered on 19 Aug 2010, 08:31 PM
Thanks Alex, I had this exact problem and an old version of jquery.validate.js was exactly the problem.  I am running a separate set of javascript for the rest of the site, and Telerik javascript on only pages where I use Telerik components. It looked like Html.Telerik().ScriptRegistrar() was inserting the following line: /Scripts/jquery.validate.min.js which is a actually jquery.validate 1.5.5.  When I renamed that file, then Html.Telerik().ScriptRegistrar() was now properly refering to: /Scripts/2010.2.713/jquery.validate.min.js

For now, I've fixed it by renaming all my other links; but I expected that  would first look in the Telerik MVC folder first for the scripts.  I didn't have this problem with 1.309, so I was surprised when it broke in 2.713

James
Tags
Grid
Asked by
John
Top achievements
Rank 1
Answers by
Alex Gyoshev
Telerik team
James Lam
Top achievements
Rank 2
Share this question
or