Issues in using popup from external css

[Hema]

Hi,

I am new to this kendo ui. so i am facing some issues in this. Any sort of suggestion would help me to complete this part. I am having two questions in below code

 I am having a popup class outside of kendo ui(social networking login popup) which is working fine in all parts of the page.But if i keep that class inside kendo ui, popup is not working. I want to know if kendo ui does not allow out side class to use inside it.

Other one is in the below code near user_id field can how can i use iframe in popup style to call links from different websites

<script>
   $(function() {   
                     $("#grid").kendoGrid({
                dataSource: { 
                  transport: {
                        read: "data/jobs.php"
                    },

                    
                 sort: { field: "date_created", dir: "desc" },
                    schema: {
                        data: "data",
                        total: function(response) {
                        return $(response.data).length;
                       
                    }
                    }, 
                   pageSize: 15
                  
                },
                filterable: true,
                groupable: true,
                sortable: true,
                pageable: true,
                height: "525px",
                width: "100px",
                columns: [{ field: "title",title: "Title", template: "<a id='title' href='showbill.php?id=#=data.billorder_id#'>#=title#</a>"  }, 
                             { field: "city",title: "Location"},
                           { field: "date_created", title: "bill Posted" }, 
                           
                       { field: "user_id",filterable: false,title: "Status", template: '#=Getvalue(user_id,billorder_id,bill_applied)#' }  
                // i want to know how can i use iframe to load outside link in a popup style.                                   ]
                                              });
                               }); 


                          function Getvalue(value,id,bill) {
                           
                              var mid = id;
                           if (value > '0')
                           { 
                        var   value = "Applied";
                            return "<b>"+ value + " ON "+ bill + " </b>"; 
                              
                        }
                                else {
                                  var value = "Apply"; 


// this class is not calling any popup. 
                                return "<a href="#" class="outsideclass">"+ value + " ON "+ bill + " </a>"; 

                                                 }
                              }
                        
   </script>
   

[Alexander Valchev]

Hello Hema,

There is a syntax error connected with the quotation marks in the return statement of the Getvalue function. Please use a combination with a single and double quotations or escape the inner ones.

return '<a href="#" class="outsideclass">'+ value + ' ON '+ bill + '</a>';

Regarding your comment "this class is not calling any popup", could you specify how you call the popup? Have in mind that the rows are not rendered right after grid initialization but when the data is received through the asynchronous read transport. Please try to bind the click of the class at the dataBound event.

How can i use iframe in popup style to call links from different websites?

I suggest using KendoUI Window widget with turned on iframe option. As an example:

$("#wnd").kendoWindow({
    content: "http://www.w3schools.com",
    iframe: true
})

As a general information instead of using standard <a> elements you may also consider using a custom command.
I hope this will help.

Regards,
Alexander Valchev
the Telerik team