Lose row Css style after close Popup Edit windows ?

[Ahmed]

Hi

i have add an grid and set some styles to it like row color from databound event and command button styles and it works fine, but when i cancel popup edit i found that row loss the style of if and when i try to fire edit event throw js i got err:

Uncaught TypeError: Cannot read property 'find' of undefined

my js code is:

@section scripts{
    <script type="text/javascript">
        function getAdditionalData() {
            return {
                Clinic_Code_ID: $('#Clinic_Code_ID').val(),
                Doctor_ID: $('#Doctor_ID').val(),
                Visit_Date: $('#Visit_Date').val(),
            };
        }

        $(document).ready(function () {
            $('#showGrid').click(function () {
                if ((!$('#Clinic_Code_ID').val()) && (!$('#Doctor_ID').val()) && (!$('#Visit_Date').val())) {
                    $("#SHPTData").data("kendoGrid").dataSource.data([]);
                    alert("من فضلك ادخل القيمة المراد البحث عنها");
                    return;
                }
                else {
                    $('#SHPTData').data('kendoGrid').dataSource.fetch();
                }
            });
        });

        function dataBound() {
            var grid = this;
            grid.tbody.find("tr[role='row']").each(function () {
                var model = grid.dataItem(this);
                if (model.Clinic_Code_ID == 1) {
                    $(this).css("color", "blue");
                }
                else {
                    $(this).css("color", "green");
                }
                $(".btn-success").removeClass("k-button");
                $(".btn-danger").removeClass("k-button");
            });
        }

        function onEdit(e) {
            //Triggered when the window is closed (always)
            e.container.data("kendoWindow").bind("deactivate", function () {

                dataBound();
            })
        }

        function error_handler(e) {
            if (e.errors) {
                var message = "Errors:\n";
                $.each(e.errors, function (key, value) {
                    if ('errors' in value) {
                        $.each(value.errors, function () {
                            message += this + "\n";
                        });
                    }
                });
                alert(message);
            }
        }
    </script>
}

 

i try on function onEdit replace dataBound() with:

$(".my_Editbtn").removeClass("k-button");
$(".my_Delbtn").removeClass("k-button");

Full Grid Code:

    @(Html.Kendo().Grid<MhafezClinic.Models.DBContext.VisitData>()
            .Name("SHPTData")
            .HtmlAttributes(new { style = "font-weight:bold; vertical-align:middle; font-size:medium;" })
            .AutoBind(false)
            .Columns(columns =>
{
    columns.Bound(e => e.ClinicCode)
        .ClientTemplate("#=ClinicCode.Clinic_Code_Name#")
        .Sortable(false).HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Filterable(false).Title("العيادة").Width(65);

    columns.Bound(e => e.PT_Clinic_ID)
        .HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Title("رقم الملف الطبى").Width(130);

    columns.Bound(e => e.PT_Name)
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Title("إسم المريض").Width(200);

    columns.Bound(e => e.Nots)
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Filterable(false)
        .Sortable(false).Title("ملاحظات").Width(180);

    columns.Bound(e => e.PT_Phone_No)
        .HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Filterable(false).Sortable(false).Title("رقم التليفون").Width(130);
    //columns.Bound(e => e.Visit_Date)
    //    .HtmlAttributes(new { @style = "text-align:center;" })
    //    .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Width(105)
    //    .Filterable(false).Sortable(false);
    columns.Bound(e => e.VisitTime)
        .HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Filterable(false).Sortable(false).Title("وقت الكشف").Width(100);
    columns.Bound(e => e.Kashf)
        .ClientTemplate("#=Kashf.Kashf_Name#")
        .HtmlAttributes(new { @style = "text-align:center;" })
        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
        .Filterable(false).Sortable(false).Title("نوع الكشف").Width(150);

    columns.Command(command =>
    {
        command.Edit().HtmlAttributes(new { @class = "my_Editbtn", @style = "margin-left:10px; font-weight:bold;" }).Text("تعديل");
        command.Destroy().HtmlAttributes(new { @class = "my_Delbtn", @style = "font-weight:bold;" }).Text("حذف");
    }).HtmlAttributes(new { @style = "text-align:center;" });
})
       .Pageable()
       .Sortable()
               .Editable(editable => editable.Mode(GridEditMode.PopUp))
       .DataSource(source => source.Ajax()
                    .Model(model =>
                        {
                            model.Id(e => e.ID);
                            model.Field(e => e.ID).Editable(false);
                        })
                  .Events(events => events.Error("error_handler"))
                  .Read(read => read.Action("GetData", "VisitDatas").Data("getAdditionalData"))
                  .Update(update => update.Action("GetData", "VisitDatas").Data("getAdditionalData"))
                  .Destroy(destroy => destroy.Action("GetData", "VisitDatas").Data("getAdditionalData"))
                )
      .Events(e => e.DataBound("dataBound").Edit("onEdit"))
    )

 

and command buttons style is back, but i need rows style "color" back again

so how can i do that please?

[Dimo]

Hi Ahmed,

When editing is cancelled, the Grid re-renders the table row. Please implement your customizations (for the edited row only) in a cancel event handler as well. Keep in mind that the cancel event is fired before the table row is re-rendered, so you need to wrap your code in setTimeout().

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-cancel

Note that you cannot use e.container in this case, because it points to an element, which is about to be replaced.

function onCancel(e) {
    setTimeout(function () {
        var row = e.sender.wrapper.find("tr[data-uid='" + e.model.uid + "']");
        row.css("background", "red");
    });
}

Regards,
Dimo
Telerik

[Ahmed]

Hi

please where i can add cancel event code ? for whole grid or other place ?

[Ahmed]

Hi

I try it as your code and button have styles i need but i have two problem:

i set row color to be blue if Clinic_Code_ID = 1 and else color green - and set custom button:

command.Custom("PTSheet").Text("السجل الطبى").Click("EditData").HtmlAttributes(new { @style = "font-weight:bold;" });

 to hid only if PT_Clinic_ID === null

now all things works fine on DataBound Event - but now when i click cancel the row color is Black and custom button is visible for the row i click on cancel and i don't need that i need it work as i did it in DataBound Event or try to fire js code that in DataBound again:

function dataBound() {
    var grid = this;
    grid.tbody.find("tr[role='row']").each(function () {
        var model = grid.dataItem(this);

        if (model.Clinic_Code_ID == 1) {
            $(this).css("color", "blue");
        }
        else {
            $(this).css("color", "green");
        }

        $(".my_Editbtn").removeClass("k-button");
        $(".my_Delbtn").removeClass("k-button");

        var gridData = grid.dataSource.view();

        for (var i = 0; i < gridData.length; i++) {
            var currentUid = gridData[i].uid;
            if (gridData[i].PT_Clinic_ID === null) {
                var currentRow = grid.table.find("tr[data-uid='" + currentUid + "']");
                var createUserButton = $(currentRow).find(".k-grid-PTSheet");
                createUserButton.hide();
            }
        }
    });
}

 

Grid Code:

@(Html.Kendo().Grid<MhafezClinic.Models.DBContext.VisitData>()
                .Name("SHPTData")
                .HtmlAttributes(new { style = "font-weight:bold; vertical-align:middle; font-size:medium;" })
                .Columns(columns =>
                {
                    columns.Bound(e => e.ClinicCode)
                        .ClientTemplate("#=ClinicCode.Clinic_Code_Name#")
                        .HtmlAttributes(new { @style = "text-align:center;" })
                        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                        .Filterable(false).Title("العيادة").Width(65);


                    columns.Bound(e => e.PT_Clinic_ID)
                        .HtmlAttributes(new { @style = "text-align:center;" })
                        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                        .Title("رقم الملف الطبى").Width(110);

                    columns.Bound(e => e.PT_Name)
                        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                        .Title("إسم المريض").Width(200).Sortable(true);

                    columns.Bound(e => e.Nots)
                        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" }).Filterable(false)
                        .Title("ملاحظات").Width(180);

                    columns.Bound(e => e.PT_Phone_No)
                        .HtmlAttributes(new { @style = "text-align:center;" })
                        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                        .Filterable(false).Title("رقم التليفون").Width(120);

                    columns.Bound(e => e.Visit_Date)
            .HtmlAttributes(new { @style = "text-align:center;" })
            .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
            .Filterable(false).Title("تاريخ الكشف").Width(110);

                    columns.Bound(e => e.VisitTime)
                        .HtmlAttributes(new { @style = "text-align:center;" })
                        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                        .Filterable(false).Title("وقت الكشف").Width(70);

                    columns.Bound(e => e.Kashf)
                        .ClientTemplate("#=Kashf.Kashf_Name#")
                        .HtmlAttributes(new { @style = "text-align:center;" })
                        .HeaderHtmlAttributes(new { @style = "font-weight:bold; text-align:center;" })
                        .Filterable(false).Title("نوع الكشف").Width(100);

                    columns.Command(command =>
                    {
                        command.Edit().HtmlAttributes(new { @class = "my_Editbtn", @style = "margin-left:10px; font-weight:bold;" }).Text("تعديل");
                        command.Destroy().HtmlAttributes(new { @class = "my_Delbtn", @style = "margin-left:10px; font-weight:bold;" }).Text("حذف");
                        command.Custom("PTSheet").Text("السجل الطبى").Click("EditData").HtmlAttributes(new { @style = "font-weight:bold;" });

                    }).HtmlAttributes(new { @style = "text-align:center;" }).Width(350);
                })
    .Editable(editable => editable.Mode(GridEditMode.PopUp))
                                                                                                                                   .Pageable()
                                                                                                                                   .DataSource(source => source.Ajax()
                                                                                                                                                .Model(model =>
                                                                                                                                                {
                                                                                                                                                    model.Id(e => e.ID);
                                                                                                                                                    model.Field(e => e.ID).Editable(false);

                                                                                                                                                })
        .Sort(e => e.Add("Visit_Date").Ascending()).Sort(e => e.Add("VisitTime").Ascending())
        .Events(events => events.Error("error_handler"))
        .Read(read => read.Action("Read_Visits", "VisitDatas"))
        .Update(Update => Update.Action("Read_Visits", "VisitDatas"))
        .Destroy(Destroy => Destroy.Action("Read_Visits", "VisitDatas"))

     )
  .Events(e => e.DataBound("dataBound").Cancel("onCancel"))
)

so how can i set to set color row depinding on Clinic_Code_ID value as i set it before and hide custom button if PT_Clinic_ID is null too as DataBound Event code, but in your code:

function onCancel(e) {
    setTimeout(function () {
        var row = e.sender.wrapper.find("tr[data-uid='" + e.model.uid + "']");
        $(".my_Editbtn").removeClass("k-button");
        $(".my_Delbtn").removeClass("k-button");
    });
}

Thanks a lot ....

[Dimo]

Hello Ahmed,

Thge dataBound() function, which you are using, is iterating all data items for each rendered table row. This is highly unnecessary and will decrease the client-side performance.

You don't need these nested loops:

grid.tbody.find("tr[role='row']").each(function () {
    // ...
    var gridData = grid.dataSource.view();

    for (var i = 0; i < gridData.length; i++) {
    // ...
    }
});

Either iterate the table rows, or the data items, but not both at the same time.

http://docs.telerik.com/kendo-ui/web/grid/how-to/style-rows-cells-based-on-data-item-values


In the onCancel() function code, which I showed in my previous reply, you can obtain reference to the data item object (row model) quite easily:

function onCancel(e) {
    setTimeout(function () {
        var row = e.sender.wrapper.find("tr[data-uid='" + e.model.uid + "']");
        var model = e.sender.dataItem(row);
        // if () {} ....
    });
}

Once you have the data item (model) perform the same customizations, which you do in dataBound().

Regards,
Dimo
Telerik