Lose row Css style after close Popup Edit windows ?

5 posts, 1 answers
  1. Ahmed
    Ahmed avatar
    3 posts
    Member since:
    Apr 2015

    Posted 24 Apr 2015 Link to this post

    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?

  2. Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 28 Apr 2015 Link to this post

    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

    See What's Next in App Development. Register for TelerikNEXT.

  3. Ahmed
    Ahmed avatar
    3 posts
    Member since:
    Apr 2015

    Posted 02 May 2015 in reply to Dimo Link to this post

    Hi

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

  4. Ahmed
    Ahmed avatar
    3 posts
    Member since:
    Apr 2015

    Posted 04 May 2015 Link to this post

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

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8454 posts

    Posted 05 May 2015 Link to this post

    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

    See What's Next in App Development. Register for TelerikNEXT.

Back to Top