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

Kendo Grid Set URL in the Columns

3 Answers 494 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Bharathi
Top achievements
Rank 2
Bharathi asked on 28 Apr 2014, 09:02 PM
Hi,

      I have a grid and i need to set hyperlink for three columns and also I have these column font color change depend on the column value... How do i do that..

here is my Index.cshtml

columns: [
           { field: "BatchNo", width: "150px" },
           { field: "BatchDate",
             width: "250px",
            format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
      parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"] },
           { field: "FileType", width: "250px" },
           { field: "BatchFileName", width: "600px" },
           { field: "BatchRecords", title: "StageCount", width: "150px", template: "\u003cb\u003e\u003ca href=\u0027/#=FileType#/Index?Batchno=#=BatchNo#\u0027\u003e#=BatchRecords#\u003c/a\u003e\u003c/b\u003e" },
           { field: "LoadCount", width: "150px", template: '#=SetLoadColor(BatchRecords,LoadCount,ReportCount)#'  },
           { field: "ReportCount", width: "150px", template: '#=SetReportColor(BatchRecords,LoadCount,ReportCount)#' },
           { field: "Status",
             width: "150px",
             template: "#=Status#",
             editor: statusDropDownEditor
           },
           { field: "EntityCode", width:"150px" },
           { field: "EntityName", width:"150px" },
           { field: "CreatedBy", width:"200px" },
           { field: "CreatedDate",
             width:"250px",
              format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
      parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"] },
           { field: "ModifiedBy", width:"350px" },
           { field: "ModifiedDate",
             width:"250px",
              format: "{0:dd-MMM-yyyy hh:mm:ss tt}",
      parseFormats: ["yyyy-MM-dd'T'HH:mm:ss.zz"] },
           { command: ["edit"], title:" ", width:"200px"}],
           editable: "inline",
       pageable: true,
       sortable: true,
       filterable: true,
       columnMenu: true,
       resizable: true,

My Functions to change the column color..

function SetLoadColor(BatchRecords,LoadCount,ReportCount)
{
    if(BatchRecords===LoadCount||LoadCount===0 )
    return LoadCount;
    else
    return "<font color=\"red\">"+LoadCount+"</font>";
}
 
function SetReportColor(BatchRecords,LoadCount,ReportCount)
{
    if(BatchRecords===ReportCount&&LoadCount===ReportCount||ReportCount===0 )
    return ReportCount;
    else
    return "<font color=\"red\">"+ReportCount+"</font>";
}

I need to set hyperlink like this "href=/#=FileType#/Index?Batchno=#=BatchNo" on all three columns...along with color change rule..

3 Answers, 1 is accepted

Sort by
0
Accepted
Dimiter Madjarov
Telerik team
answered on 29 Apr 2014, 12:15 PM
Hello Bharathi,


You could pass the current dataItem to the JavaScript function via the data keyword. Then you could access all of the required fields in the function in order to check the condition and then again to build the link tag.
E.g.
template: "#=setLoadColor(data)#

function setLoadColor(data) {
    //check condition 
 
    return "<a href='/" + data.FileType+ "/Index?Batchno=" + data.BatchNo + "' style='color: red;'>link</a>";
}

An alternative approach would be to build the link tag directly in the template and then bind to the dataBound event in order to iterate the Grid data and apply the font color styles.

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Bharathi
Top achievements
Rank 2
answered on 13 May 2014, 08:45 PM
Hi 

      I'm able to create URL column with color condition using the previous post answer, but also I'm trying to do that create custom kendo button that redirects to different page by using the condition on the column value,and also this is not generated in all rows, this button should be created on only specific rows and columns value matched for the given condition, so how do i include the create custom button in the function.
function setLoadColor(data) {
    //check condition
  
    return "<a href='/" + data.FileType+ "/Index?Batchno=" + data.BatchNo + "' style='color: red;'>link</a>";
 
if(data.FileType == "given condition")
{
//create custom button on that row in the kendo grid -- help needed here
}
 
 
}




0
Dimiter Madjarov
Telerik team
answered on 13 May 2014, 09:21 PM
Hi Bharathi,


In the current you could return a different result from the function depending on the condition.
E.g.
function setLoadColor(data) {
    var result = "<a href='/" + data.FileType+ "/Index?Batchno=" + data.BatchNo + "' style='color: red;'>link</a>";
  
if(data.FileType == "given condition")
{
    result += "<button>...</button>"; //append button code
}
  
 return result;
}

I wish you a great day!

Regards,
Dimiter Madjarov
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
Grid
Asked by
Bharathi
Top achievements
Rank 2
Answers by
Dimiter Madjarov
Telerik team
Bharathi
Top achievements
Rank 2
Share this question
or