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

Functions of JS file not accessible .....

3 Answers 64 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.
Ravi Keshwani
Top achievements
Rank 1
Ravi Keshwani asked on 05 Oct 2010, 05:58 AM
Hi,

       I am  new to telerik MVC. I have a project where I had add Jquery JS file in a page named /jquery.contextMenu.js  for showing context menu on right click of the td. And when I am trying to access any function of it, the exception is thrown as  "Object does'nt support this property or method " In IE on the line "$("td.showContext"). and "$("td.showContext").contextMenu is not a function" in Mozilla . When I copy the functions from /jquery.contextMenu.js in the page under $(document).ready it shows the context menu properly. Below is the code for it...

Master Page :
<head runat="server">
    <title><asp:ContentPlaceHolder ID="TitleContent" runat="server" /></title>
 
    <%= Html.Telerik().StyleSheetRegistrar()
        .DefaultGroup(group => group.Add("telerik.common.css")
                                    .Add("telerik.Office2007.css"))
    %>
   </head>
and also added
  <%= Html.Telerik().ScriptRegistrar() %>
at the end of the master page.

Page inherited from master page  :

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    System Types
 
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 <script src="../../Scripts/2010.2.825/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="../../Scripts/2010.2.825/jquery.contextMenu.js" type="text/javascript"></script>  
 <script type="text/javascript">

     
         function contextMenuWork(action, el, pos) {
            
             switch (action) {
                 case "delete":
                     {

                         alert("Clicked Delete");
                         break;
                     }
                 case "insert":
                     {
                         alert("Clicked insert");
                         break;
                     }

                 case "edit":
                     {
                         alert("Clicked edit");
                     }
             }
         }
         $(document).ready(function () {

             $("td.showContext").contextMenu({ menu: 'myMenu' }, function (action, el, pos) { contextMenuWork(action, el, pos); });
         });

</script>

    <%
        Html.Telerik().Grid(Model)
            .EnableCustomBinding(true)
            .Name("SystemTypeGrid")
            .DataKeys(d=>d.Add(c=>c.Id))
            .ToolBar(commands => commands.Insert().ButtonType(GridButtonType.ImageAndText).ImageHtmlAttributes(new
            {
                style =
            "margin-left:0"
            })
            )
            .DataBinding(db=>db
                    .Server()
                    .Insert("New","SystemType")
                    .Update("Update","SystemType")
                    )
                      
              
            .Columns(cols =>
                {
                    cols.Bound(col => col.Id).Hidden(true);
                    cols.Bound(col => col.Title).Width(200).HtmlAttributes(new { @class = "showContext" });;
                    cols.Bound(col => col.FinalSoftWare).Title("Final Software").Width(130);
                    cols.Bound(col => col.Description).Width(300);
                    cols.Command(commands => commands
                                .Edit()
                            );
                })
                .Sortable()
                .Scrollable()
                .Editable(e=>e.Mode(GridEditMode.PopUp))   
                .Selectable()
                //.ClientEvents(events => events
                //            .OnRowSelect("Grid_onRowSelect")
                //            )

                .Render();  
            
                     
     %>
     <table id="tbl1">
        <tr class="row">
            <td> Table Row </td>
        </tr>
     </table>  
   <ul id="myMenu" class="contextMenu">
    <li class="insert"><a href="#insert">Add New</a></li>       
    <li class="edit"><a href="#edit">Edit</a></li>                   
    <li class="delete"><a href="#delete">Delete</a></li>           
</ul>
   
</asp:Content>

Also please tell me how can I add cssclass to the rows of the grid of telerik.

Thanks in Advance...

3 Answers, 1 is accepted

Sort by
0
Jigar
Top achievements
Rank 1
answered on 05 Oct 2010, 07:06 AM
Hi Ravi,

Try this

<%= Html.Telerik().StyleSheetRegistrar()
        .DefaultGroup(group => group.Add("telerik.common.css")
                                    .Add("telerik.vista.css"))
%>

And You may have a look at "http://www.telerik.com/help/aspnet-mvc/getting-started-using-telerik-extensions-for-asp.net-mvc-in-your-project.htmlhelp" page. This will give you a better idea.

Regards,

Jigar.
0
Ravi Keshwani
Top achievements
Rank 1
answered on 05 Oct 2010, 09:52 AM
Dear Jigar,

 I Know what you have described in ur post.. The scenario is if I use any other Jquery plugin into my application the js file is loaded but the functions are not accessible.

Please try to create such scenerio you will understand the issue.

Thanks

Ravi
0
Anderson
Top achievements
Rank 1
answered on 10 Dec 2010, 01:12 PM
I'm having the same trouble...

the jQuery is working fine, but it can't load the context menu...
if I put the context menu in another place out of the grid, it works fine,
but when I try to put it in a "td", it not work...


Tags
Grid
Asked by
Ravi Keshwani
Top achievements
Rank 1
Answers by
Jigar
Top achievements
Rank 1
Ravi Keshwani
Top achievements
Rank 1
Anderson
Top achievements
Rank 1
Share this question
or