Solved

Kendo grid filed with href

Posted on 2014-09-16
4
573 Views
Last Modified: 2014-09-22
My Kendo grid has "Add New" button with the function:
 me.filter.add(function () {
                        //Open the page used to add a new CallLog
                        app.router().navigate("/CallCenter/Call", true);
This works.

Here is my grid:
me.grid = me.gridContainer.kendoGrid({
                        dataSource: me.dataSource,
                        selectable: false,
                        sortable: true,
                        filterable: true,
                        pageable: true,
                        columns: [
                            { title: "Inquiry #", filterable: true, field: "CallId", width: 120 }, (1)
                           // { title: "Inquiry #", filterable: false, field: "CallId", template: kendo.template($("#" + TEMPLATE_CALLLOGS_NAME).html()) },
                           { title: "Property Code", filterable: true, field: "PropertyCode" },
                            { title: "Property Name", filterable: true, field: "PropertyName" },
                            { title: "Contract", filterable: true, field: "ContractCode" }
}
When grid populates with the data the Inquiry# column displays some content.  I need to replace the underlined column "Inquiry#" with the one directly following it that uses  TEMPLATE_CALLLOGS_NAME
I need help to create TEMPLATE_CALLLOGS_NAME script so it opens the same form.
Something like this:
<script type="text/x-kendo-template" id="template_calllog_calllogname">
    <a href="/CallCenter/Call/">
    </a>
</script>
If I use the script I am showing here, that content of the "Inquiry#" column does not show and now Href links also.

Please help.
0
Comment
Question by:Aquarus
  • 3
4 Comments
 
LVL 82

Expert Comment

by:leakim971
ID: 40327201
could you provide link to your page ?

try this :
var cellOfInquiryTitle = $("td:contains('Inquiry #')");
var rowOfTitles = cellOfInquiryTitle.closest("tr");
var rows = rowOfTitles.nextAll("tr");
$("td:first", rows).each(function() {
    $("a", this).click(function(evt) {
           evt.preventDefault();
           var href = $(this).attr("href");
           $(this).closest("td").next().load(href);
    });
});

Open in new window

0
 

Author Comment

by:Aquarus
ID: 40327898
The link to the page that  works was in the description of my question.  I am sorry it did not come out clearly.  

"My Kendo grid has "Add New" button with the function:
  me.filter.add(function () {
                         //Open the page used to add a new CallLog
                         app.router().navigate("/CallCenter/Call", true);
 

I have the template script like this:
<script type="text/x-kendo-template" id="template_calllog_calllogname">
    <a href="/CallCenter/Call/">
    </a>
</script>

How should I put what you suggested in this script and where is the link to my "/CallCenter/Call" form?
0
 

Accepted Solution

by:
Aquarus earned 0 total points
ID: 40328205
This is the correct script for template.
 script type="text/x-kendo-template" id="template_calllog_calllogname">
     <!--<a href="/CallCenter/Call/">-->
    <a href="/CallCenter/Call/#: CallHeaderID #" title="Open Call" data-id="link">#: CallId #</a>
     
</script>
0
 

Author Closing Comment

by:Aquarus
ID: 40336152
This information is only for newbies who wants to learn step by step and knowledge-wise only at the beginning of the learning.
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

832 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question