Kendo Grid Set URL in the Columns

[Bharathi]

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..

[Dimiter Madjarov]

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

 

 

[Bharathi]

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
}


}

[Dimiter Madjarov]

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