[Solved] Trouble with Ajax Editing

[Robert]

Hi All.

I'm having a little trouble using the grid with Ajax editing in my project:

"Add New Record" functionality is not working.  Input boxes do not render after I press the "add new record button", just an empty row is rendered.   I noticed that the code uses ths css class .insert-button to make this clickable but this selector doesn't find anything for me..

I also noticed in the videos that someone used .ReadOnly for an Id column, but when I try that I get syntax errors when trying to use ReadOnly() on the bound column..

I've tried this from scratch with two different ASP.NET MVC projects in Visual Studio 2008 and I believe I am following the instructions.. Has anyone else had this problem?  I downloaded the Telerik Extensions yesterday (3/27/2010) ..  So, I have Extensions for ASP.NET MVC Q1 2010 with a content folder named 2010.1.309...

I am hoping I overlooked something simple..  So far my gut feeling is that these MVC controls/extensions are going to be awesome.

Thanks

Rob

[Todd Anglin]

Sorry to hear you're having trouble. For the fastest help, if you can post the code that you're using to define your Grid, that will help us make sure there are no configuration problems. In fact, that's probably the best next step.

You can also check to ensure you're using the correct build of the MVC Extensions. Builds are provided for both ASP.NET MVC 1.0 and MVC 2.0. If you're using the MVC 1.0 framework, make sure you're using the matching Telerik DLL. Also, don't forget to add the Scripts folder to the MVC project's Scripts directory. Content contains the CSS. Scripts contains the required JavaScript files that make the extensions work.

Looking forward to seeing your configuration code.

-Todd

[Robert]

Hi Todd.

Thanks for your insanely quick reply.

I hope I am missing something obvious that you find quickly!

Rob

[Robert]

<?xml version="1.0"?>
<!--
    Note: As an alternative to hand editing this file you can use the
    web admin tool to configure settings for your application. Use
    the Website->Asp.Net Configuration option in Visual Studio.
    A full list of settings and comments can be found in
    machine.config.comments usually located in
    \Windows\Microsoft.Net\Framework\v2.x\Config
-->
<configuration>
    <configSections>
        <sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
            <sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
                <section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                <sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35">
                    <section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="Everywhere"/>
                    <section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                    <section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                    <section name="roleService" type="System.Web.Configuration.ScriptingRoleServiceSection, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" requirePermission="false" allowDefinition="MachineToApplication"/>
                </sectionGroup>
            </sectionGroup>
        </sectionGroup>
    </configSections>
    <appSettings/>
    <connectionStrings>
        <add name="ApplicationServices" connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;AttachDBFilename=|DataDirectory|aspnetdb.mdf;User Instance=true" providerName="System.Data.SqlClient"/>
    <add name="bizopp" connectionString="server=srv1;initial catalog=bizopp;user=bizopp;password=xxxxxxx;"/>
  </connectionStrings>
    <system.web>
        <!--
            Set compilation debug="true" to insert debugging
            symbols into the compiled page. Because this
            affects performance, set this value to true only
            during development.
    -->
        <compilation debug="true">
            <assemblies>
                <add assembly="System.Core, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add assembly="System.Web.Abstractions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add assembly="System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add assembly="System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add assembly="System.Data.DataSetExtensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Xml.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
                <add assembly="System.Data.Linq, Version=3.5.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
            </assemblies>
        </compilation>
        <!--
            The <authentication> section enables configuration
            of the security authentication mode used by
            ASP.NET to identify an incoming user.
    -->
        <authentication mode="Forms">
            <forms loginUrl="~/Account/LogOn" timeout="2880"/>
        </authentication>
        <membership>
            <providers>
                <clear/>
                <add name="AspNetSqlMembershipProvider" type="System.Web.Security.SqlMembershipProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" connectionStringName="ApplicationServices" enablePasswordRetrieval="false" enablePasswordReset="true" requiresQuestionAndAnswer="false" requiresUniqueEmail="false" passwordFormat="Hashed" maxInvalidPasswordAttempts="5" minRequiredPasswordLength="6" minRequiredNonalphanumericCharacters="0" passwordAttemptWindow="10" passwordStrengthRegularExpression="" applicationName="/"/>
            </providers>
        </membership>
        <profile>
            <providers>
                <clear/>
                <add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" connectionStringName="ApplicationServices" applicationName="/"/>
            </providers>
        </profile>
        <roleManager enabled="false">
            <providers>
                <clear/>
                <add connectionStringName="ApplicationServices" applicationName="/" name="AspNetSqlRoleProvider" type="System.Web.Security.SqlRoleProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>
                <add applicationName="/" name="AspNetWindowsTokenRoleProvider" type="System.Web.Security.WindowsTokenRoleProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>
            </providers>
        </roleManager>
        <!--
            The <customErrors> section enables configuration
            of what to do if/when an unhandled error occurs
            during the execution of a request. Specifically,
            it enables developers to configure html error pages
            to be displayed in place of a error stack trace.

        <customErrors mode="RemoteOnly" defaultRedirect="GenericErrorPage.htm">
            <error statusCode="403" redirect="NoAccess.htm" />
            <error statusCode="404" redirect="FileNotFound.htm" />
        </customErrors>
    -->
        <pages>
            <controls>
                <add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
                <add tagPrefix="asp" namespace="System.Web.UI.WebControls" assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            </controls>
            <namespaces>
                <add namespace="System.Web.Mvc"/>
                <add namespace="System.Web.Mvc.Ajax"/>
                <add namespace="System.Web.Mvc.Html"/>
                <add namespace="System.Web.Routing"/>
                <add namespace="System.Linq"/>
                <add namespace="System.Collections.Generic"/>
        <add namespace="Telerik.Web.Mvc.UI"/>
        <add namespace="SEOManager.Models"/>
        <add namespace="SEOManager.Code"/>
        <add namespace="SEOManager"/>
            </namespaces>
        </pages>
        <httpHandlers>
            <remove verb="*" path="*.asmx"/>
            <add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35" validate="false"/>
            <add verb="*" path="*.mvc" validate="false" type="System.Web.Mvc.MvcHttpHandler, System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </httpHandlers>
        <httpModules>
            <add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </httpModules>
    </system.web>
    <system.codedom>
        <compilers>
            <compiler language="c#;cs;csharp" extension=".cs" warningLevel="4" type="Microsoft.CSharp.CSharpCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
                <providerOption name="CompilerVersion" value="v3.5"/>
                <providerOption name="WarnAsError" value="false"/>
            </compiler>
            <compiler language="vb;vbs;visualbasic;vbscript" extension=".vb" warningLevel="4" type="Microsoft.VisualBasic.VBCodeProvider, System, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089">
                <providerOption name="CompilerVersion" value="v3.5"/>
                <providerOption name="OptionInfer" value="true"/>
                <providerOption name="WarnAsError" value="false"/>
            </compiler>
        </compilers>
    </system.codedom>
    <system.web.extensions/>
    <!--
        The system.webServer section is required for running ASP.NET AJAX under Internet
        Information Services 7.0.  It is not necessary for previous version of IIS.
  -->
    <system.webServer>
        <validation validateIntegratedModeConfiguration="false"/>
        <modules runAllManagedModulesForAllRequests="true">
            <remove name="ScriptModule"/>
            <remove name="UrlRoutingModule"/>
            <add name="ScriptModule" preCondition="managedHandler" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add name="UrlRoutingModule" type="System.Web.Routing.UrlRoutingModule, System.Web.Routing, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
        </modules>
        <handlers>
            <remove name="WebServiceHandlerFactory-Integrated"/>
            <remove name="ScriptHandlerFactory"/>
            <remove name="ScriptHandlerFactoryAppServices"/>
            <remove name="ScriptResource"/>
            <remove name="MvcHttpHandler"/>
            <remove name="UrlRoutingHandler"/>
            <add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add name="MvcHttpHandler" preCondition="integratedMode" verb="*" path="*.mvc" type="System.Web.Mvc.MvcHttpHandler, System.Web.Mvc, Version=1.0.0.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
            <add name="UrlRoutingHandler" preCondition="integratedMode" verb="*" path="UrlRouting.axd" type="System.Web.HttpForbiddenHandler, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a"/>
        </handlers>
    </system.webServer>
</configuration>

[Todd Anglin]

Just to help with any additional code you share, make sure you use the "Format Code Block" tool. It helps make posted code more readable.

The most important thing we need to see is the configuration for the Grid. So, something like:

<% Html.Telerik().Grid()....

-Todd

[Robert]

I edited my previous post. 

[Robert]

Here's the grid code..

The second part with the .insert-button seems to have no affect...

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Telerik().Grid<RewriteRule>()
        .Name("RulesGrid")
        .DataKeys(keys =>
        {
            keys.Add(rr => rr.Id);
        })
        .ToolBar(commands => commands.Insert())
        .DataBinding(dataBinding =>
        {
            dataBinding.Ajax()
                .Select("_SelectAjaxEditing", "Home")
                .Insert("_InsertAjaxEditing", "Home")
                .Update("_SaveAjaxEditing", "Home")
                .Delete("_DeleteAjaxEditing", "Home");
        })
        .Columns(columns =>
        {
            columns.Bound(rr => rr.OldUrl).Width(200);
            columns.Bound(rr => rr.NewUrl).Width(200);
            columns.Command(commands =>
            {
                commands.Edit();
                commands.Delete();
                commands.Select();
            }).Width(180).Title("Commands");
        })
        .Pageable()
        .Scrollable()
        .Sortable()
%>


<% Html.Telerik().ScriptRegistrar().OnDocumentReady(() => {
    %> $('.insert-button').click(function(e) {
            e.preventDefault();
            alert('clicked');
            $('#RulesGrid').data('tGrid').addRow();
    });
<% }); %>

[Robert]

I've attached a screenshot showing which scripts I have in my scripts folder..
I do have the correct version of the telerik DLL referenced.. I tried the other one for giggles and it depends on asp.net mvc 2.0 and doesn't even compile (as expected).

[Robert]

Screenshot of the grid in action..  (Note the missing command buttons).

[Robert]

Removed for security.

[Todd Anglin]

Thanks for supplying all of the details.

I tried to recreate your scenario exactly, and I was unable to reproduce the behavior in my project. The one key difference is that I'm using ASP.NET MVC 2 instead of 1. If you have the option, can you try building a quick sample in your environment with MVC 2 and see if that solves the problem?

Also, as a side note, you technically don't need the extra "OnDocumentReady" script to show the insert row. This behavior is provided out of the box. In fact, the script as it's currently configured isn't doing anything. There is no ".insert-button" rendered on the page. The "Add New Record" button uses the ".t-grid-add" class.

In short, your config looks correct. Try MVC 2 and let me know if there is a difference.

-Todd

[Robert]

ok, here goes nothing....

[Robert]

Go Figure... It worked perfectly in VS 2010, first try...   I guess I'm using VS 2010 for any MVC projects with the Telerik exensions/controls for the moment...

One thing to note is that I couldn't find the Telerik Assembly in the .NET tab of the add reference dialog box in VS 2010 so I had to browse to it by path... 

Thanks for your help!  I wonder if others will have this same issue with VS 2008 or if my system is just starting to degrade...

Rob

[Todd Anglin]

Glad you were able to solve your problem!

In my local testing, I'm using VS 2008, so you should be able to use either environment when properly configured. I assume you also used MVC 2 in VS 2010, so the problem may in fact be with MVC 1. I'll do more research later to see if that's the case.

As for the reference, the Extensions installer does not add the Telerik.Web.Mvc DLL to the GAC, and thus you won't find it in the .NET tab of the Add Reference dialog. If all projects on your box will be using the same version of the Extensions, you can always add the DLL to the GAC, but otherwise I'd use BIN deployment/referencing.

Enjoy the MVC grid!

-Todd

[Robert]

Hi Todd.

I too am guessing the issue is in MVC1 and/or the Telerik MVC 1 DLL.. I did use MVC 2 in VS 2010.. I tried to upgrade my existing MVC 1.0 application without any luck (vs just failed to upgrade) so I created a new MVC 2.0 project from scratch..  

Thanks again for all your help!  I'm frustrated that it didn't work the first time and the second time.  But certainly the third time was a charm..  Thanks again for the idea of trying VS 2010.. I saw all the demos were recorded in VS 2008 so I ruled that option out.. 

What is interesting is that the Telerik DLLs do show up in VS 2008 in the .NET tab, but not in VS 2010... (at least on my system) ... 

Regardless, I'm excited that I will be able to finish this feature of my application today as I planned.  I'm really very suprised and happy I got a response on a Sunday and that we were able to find a solution that will work for me.

Thanks

Rob

[Robert]

An answer to anyone reading this.. .ReadOnly() appears to be in the Telerik DLL for MVC2 dll, but not the Telerik dll for MVC1.

[f boucheros]

Hi I got the same issue.

By just changing the Telerik dll version from 1 to 2 the bug is fix (what ever the VS 2008 or 2010).

So the question is what the problem with the version 1?

Does this bug can be fix and how?

Do I need to change to version 2 to be able to use the grid insert feature?

thanks

Frank