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

Want to make perticular field bold based upon value of other field

6 Answers 595 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Sandesh
Top achievements
Rank 2
Sandesh asked on 01 Oct 2012, 08:46 AM
I want to mark the unread messages as bold inside my inbox,(I'm not using SMTP, They are just database records)
I have another field as "read" in the table to make it as read and unread,

How should one can make particular row bold depend on other field.

Image:
Refer Image

My code:
$(document).ready(function () {
    var keyvalue = window.document.URL.toString().split('?')[1];
    var dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "http://localhost:51565/GetMail.ashx?" + keyvalue + "&action=select",
                dataType: "json"
            },
            destroy: {
                url: "http://localhost:51565/GetMail.ashx?" + keyvalue + "&action=destroy",
                dataType: "json",
                complete: function (jqXHR, textStatus) {
                    ds.read();
                }
            },
            update: {
                url: "http://localhost:51565/GetMail.ashx?" + keyvalue + "&action=update",
                dataType: "json"
            },
 
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return { models: kendo.stringify(options.models) };
                }
 
            }
        },
        batch: true,
        pageSize: 10,
        schema: {
            model: {
                id: "id",
                fields: {
                    from: { type: "string" },
                    subject: { type: "string" },
                    body: { type: "string" },
                    time: { type: "date" }
                }
            }
        }
 
    });
 
    $("#grid").kendoGrid({
        dataSource: dataSource,
        sortable: true,
        pageable: true,
        editable: true,
        toolbar: ["save"],
        columns: [
            { field: "from", title: "From", width: 150 },
            { field: "subject", title: "Subject", width: 150 },
            { field: "body", title: "Message", width: 250 },
            { field: "time", title: "Date", width: 80, template: '#= kendo.toString(time,"MM/dd/yyyy") #' },
            { command: "destroy", title: " ", width: 110}]
    });
});

6 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 03 Oct 2012, 03:11 PM
Hi Sandesh,

 

Basically you should use the dataBound event of the Grid to iterate on the loaded rows and make them bold based on your custom field.

e.g.:
function onDataBound(e) {
    var grid = $("#Grid").data("kendoGrid");
 
    $("#Grid tbody tr").each(function () {
        var currentRowData = grid.dataItem(this);
        //Read field contains data if this email is readed
        if (!currentRowData.read) {
            $(this).css("font-weight", "bold")
        }
    });
}

 Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Sandesh
Top achievements
Rank 2
answered on 04 Oct 2012, 07:58 PM
Thank you so much..!!!
0
Sandesh
Top achievements
Rank 2
answered on 04 Oct 2012, 08:04 PM
I have another question that,
i'm doing too much effort from last 7 hours for making a row undeletable,
If user press "delete" command(It's button here),
I want to display my custom message that "This Message Can't be deleted"
(Note: I have a field "readOnly" in database for that table, based upon which I want to make row undeletable.)
0
Accepted
Vladimir Iliev
Telerik team
answered on 05 Oct 2012, 10:53 AM
Hi Sandesh,


Basically you can a create a custom command button, and based on another field in the model to delete the row or show an alert message:

Grid definition:
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()
    .Name("Grid")
    .Columns(columns =>
    {
        columns.Bound(p => p.ProductName);
        columns.Bound(p => p.UnitPrice).Width(140);
        columns.Bound(p => p.UnitsInStock).Width(140);
        columns.Bound(p => p.Discontinued).Width(100);
        columns.Command(command => command.Custom("Delete").Click("removeRow"));
    })

JavaScript:

function removeRow(e) {
        e.preventDefault();
 
        var currentRow = $(e.currentTarget).closest("tr");
        var dataItem = this.dataItem(currentRow);
 
        if (dataItem.allowDelete == false) {
            alert("This row cannot be removed!");
        }
        else {
            $("#Grid").data("kendoGrid").removeRow(currentRow);
        }
    }

Kind Regards,
Vladimir Iliev
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Konstantin
Top achievements
Rank 1
answered on 17 Feb 2017, 08:38 AM

Hello,

I need to change my Title in Grid  with "bold" text

<div>
    @(Html.Kendo().Grid<LinkWeb.Models.chargelist>()
   .Name("xchargeresult")
   .Columns(col =>
   {
       col.Bound("useralias").Title("User Alias");
       col.Bound("iocost").Title("IO Cost");
       col.Bound("quantity").Title("Quantity");
       col.Bound("scope").Title("Scope");
       col.Bound("type").Title("Type");
       col.Bound("description").Title("Description");
       col.Bound("bookingdate").Format("{0:MM/dd/yyyy}").Title("Booking Date");
   })
   .DataSource(ds =>
   ds.Ajax()
   .PageSize(20)
   .Model(m => m.Id(p=>p.ID))
   .Read(read => read.Action("GetUserXCharge", "UserInfo").Data("ReadType"))))
</div>

Could you explain how can I do it?

 

Regards,

Konstantin

0
Konstantin
Top achievements
Rank 1
answered on 17 Feb 2017, 08:56 AM

Founded :-)

 

<div>
    @(Html.Kendo().Grid<TechLinkWeb.Models.chargelist>()
   .Name("xchargeresult")
   .Columns(col =>
   {
       col.Bound("useralias").Title("User Alias").HeaderHtmlAttributes(new {style = "font-weight: bold;"});
       col.Bound("iocost").Title("IO Cost").HeaderHtmlAttributes(new { style = "font-weight: bold;" });
       col.Bound("quantity").Title("Quantity").HeaderHtmlAttributes(new { style = "font-weight: bold;" });
       col.Bound("scope").Title("Scope").HeaderHtmlAttributes(new { style = "font-weight: bold;" });
       col.Bound("type").Title("Type").HeaderHtmlAttributes(new { style = "font-weight: bold;" });
       col.Bound("description").Title("Description").HeaderHtmlAttributes(new { style = "font-weight: bold;" });
       col.Bound("bookingdate").Format("{0:MM/dd/yyyy}").Title("Booking Date").HeaderHtmlAttributes(new { style = "font-weight: bold;" });
   })
   .DataSource(ds =>
   ds.Ajax()
   .PageSize(20)
   .Model(m => m.Id(p=>p.ID))
   .Read(read => read.Action("GetUserXCharge", "UserInfo").Data("ReadType"))))
</div>

Thanks :-)

Tags
Grid
Asked by
Sandesh
Top achievements
Rank 2
Answers by
Vladimir Iliev
Telerik team
Sandesh
Top achievements
Rank 2
Konstantin
Top achievements
Rank 1
Share this question
or