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

[Sandesh]

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}]

    });

});

[Vladimir Iliev]

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

[Sandesh]

Thank you so much..!!!

[Sandesh]

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

[Vladimir Iliev]

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

[Konstantin]

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

[Konstantin]

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 :-)