[Solved] Script Registrar with Telerik grid

[Gabe Calabria]

I am using the telerik grid as well.
In my grid, for each row I need to call a script. Since I have started to implement using the Script Registrar, these calls in my rows are firing because its says the function is undefined. Here is an example:

Init my Grid:

 <% Html.Telerik().Grid<aspnet_Role>(Model.People)
                            .Name("peopleGrid").PrefixUrlParameters(false)
                            .AssetKey("roleAssetGroup")
                            .Columns(columns =>
                            {
                                columns.Add(r => r.Name).Title("Name");
                                columns.Add(r =>
                                {
            %>
            <%= String.Format("<a id='btn{0}' href=\"javascript:test();\">Delete</a><div id='modal{0}'></div>", r.PeopleId, Url.Content("~/"), r.Name)%>
            <%
                }).Title("&nbsp;").Width(50).HtmlAttributes(new { align = "center" });
                            })
                            .Scrollable(scrolling => scrolling.Height(500))
                            .Render();
 %>

Then I call Script Registrar:

 <% Html.Telerik().ScriptRegistrar()
        .OnDocumentReady(() =>
        {  %>


            function test(){
                alert('hello world');
            }

    <% }); %>

I get no errors until I click the link and it says that test() is undefined.

Any ideas ?

[Atanas Korchev]

Hello Gabe Calabria,

OnDocumentReady is suitable for registering script statements which should run when the page is loaded. Using your code the following will be output:

jQuery(document).ready(function() {
     function test() {
           alert('Hello');
     }
});

The 'test' function will be defined in the scope of an anonymous JavaScript function and thus will not be "visible" to any other function. The solution is to either define the test function in your page:
<script type="text/javascript">
    function tesxt() {
    }
</script>
or make it a method of the global "window" object:

<% Html.Telerik().ScriptRegistrar()
        .OnDocumentReady(() =>
        {  %>
            window.test(){
                alert('hello world');
            }
             
    <% }); %>
           
I hope this helps,
Atanas Korchev
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Gabe Calabria]

Well the function that I am going to be calling is one that I am loading from a source js in the ScriptRegistrar. I was just trying the inline defined one to test because I could get either to work. I need to be able to call out to a js function that is loaded from a source in the script registrar though, any ideas on that then ?

[Atanas Korchev]

Hi Gabe Calabria,

This should be possible too. Please paste here your markup so we can check it out for any problems.

Regards,
Atanas Korchev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Gabe Calabria]

Here's there code, it just tells me that deletePerson() is not defined...  If i call the deletePerson() function outside of the telerik grid it works...

Telerik Grid:

 <% Html.Telerik().Grid<aspnet_Role>(Model.People)
                            .Name("peopleGrid").PrefixUrlParameters(false)
                            .AssetKey("roleAssetGroup")
                            .Columns(columns =>
                            {
                                columns.Add(r => r.Name).Title("Name");
                                columns.Add(r =>
                                {
            %>
            <%= String.Format("<a id='btn{0}' href=\"javascript:deletePerson();\">Delete</a><div id='modal{0}'></div>", r.PeopleId, Url.Content("~/"), r.Name)%>
            <%
                }).Title("&nbsp;").Width(50).HtmlAttributes(new { align = "center" });
                            })
                            .Scrollable(scrolling => scrolling.Height(500))
                            .Render();
 %>

Register my external js with Script Registrar:

 <% Html.Telerik().ScriptRegistrar()
            .Scripts(script => script.AddGroup("PageScripts", group =>
                    group.Add("~/Scripts/people.js")));
 %>

My js source from ../Scripts/people.js:

function deletePerson(){

   alert('hello world');

}

[Georgi Krustev]

Hi Gabe,

I have created a test project which implements the required functionality. I used your code snippets as a base. For your convenience I have attached it to this message.

To observe the working grid please review ServerGrid page.

Greetings,
Georgi Krustev
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Gabe Calabria]

Thanks a bunch, that helped!