1
votes

I am working on a kendo Grid, on its databound event, I have called a function to check whether value in each of the row's second block is greater than first block. If true then I change color of texts inside by adding a class. But, the problem is the added class gets away finally when I see on browser. If there are two rows with error the first row that I am editing doesn't hold the class but the later ones holds that well.

 dataBound: configureGridProperties,

Code for dataBound is

    function configureGridProperties(e) {
    try {
        if (true) {
            $('#grid .k-grid-content tr[role=row]').each(function (i) {
                var sh = $(this).find('.sh').text();
                var sm = $(this).find('.sm').text()
                var eh = $(this).find('.eh').text()
                var em = $(this).find('.em').text()
                var startMin = parseInt(sh) * 60 + parseInt(sm);
                var endMin = parseInt(eh) * 60 + parseInt(em);
                if (startMin > endMin) {
                    showOutputExplicitly('Start time cannot be less than end time');
                    
                 
                  $(this).find('.sh, .sm,.eh,.em').addClass('timeError');
                    $('div.k-grid-pager').hide();
             
                    errorInTime = false;
                }
                else {
                       $(this).find('.sh, .sm,.eh,.em').removeClass('timeError');                      
                    if (!$('.timeError').length > 0) {
                        $('div.k-grid-pager').show();
                        hideErrorMsgSlow();
                        errorInTime = true;
                    }
                }
            });
        }          
        return false;
    } catch (e) {
    }

pic for the situation . >

enter image description here

The second row that I just edited(start time 23) doesn't hold the colorChange class, but earlier ones hold that. Is there any other event that occurs after dataBound event?

1
Try this dataBound: function() { setTimeout(configureGridProperties, 1); }DontVoteMeDown
@DontVoteMeDown Yes it worked magically... ThanksRajdeep
Great. Posted it as an answer.DontVoteMeDown

1 Answers

3
votes

It happens that when dataBound is called, the grid html elements are not rendered yet with the new data. I know that is strange, but I don't know other way than using setTimeout to make this work. So this may work:

dataBound: function(e) {
    window.setTimeout(configureGridProperties.bind(this, e), 1);
}

Reference: