Need access Kendo Grid data row wise.

6 posts, 0 answers
  1. dipak
    dipak avatar
    10 posts
    Member since:
    Jun 2018

    Posted 06 Jul 2018 Link to this post

    I have used Kendo Grid in my project, i need access values in each row, row wise. And need to compare the values between two columns. 

    For example:-

     Student ID     Student Name  Student Physics StudentChemistry

       1                       xx                       44                         33

       2                        yy                        55                         66

    The marks between two columns is required to be compared, and have to highlight the cell which contain less value.

    Any row wise data iteration example would be helpful.

    Thanks in advance.

    Dipak

     

  2. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 10 Jul 2018 Link to this post

    Hello Dipak,

    Based on the provided information I assume that the requirement is to highlight the value of the cell which value is smaller. Please correct me if I am wrong.

    A possible solution is to use a column.template and within that template check which value is less than the other and highlight it.

    For your convenience bellow you will find a small sample which demonstrates the above approach:



    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. dipak
    dipak avatar
    10 posts
    Member since:
    Jun 2018

    Posted 11 Jul 2018 Link to this post

    Thanks Georgi, for your response. Yes i was looking for similar thing, but wanted to do this using JQuery script, so that i can have flexibility to access grid values at runtime. 

    Thanks.

    Dipak

  4. dipak
    dipak avatar
    10 posts
    Member since:
    Jun 2018

    Posted 11 Jul 2018 Link to this post

    Thanks Georgi, for your reply. Yes, i was looking for some thing similar like this. But looking for JQuery script which will perform the iteration on an event and additionally it would be helpful to access data in the Grid in run time.

    Thanks,

    Dipak

  5. Georgi
    Admin
    Georgi avatar
    684 posts

    Posted 12 Jul 2018 Link to this post

    Hello Dipak,

    So basically the requirement is to iterate through the rows, compare the values of each item and highlight the column which contains smaller value. Correct me if I am wrong.

    I have created a function which accepts a grid and names of the columns that should be compared:

    function compareFields(grid, firstField, secondField) {
        grid.tbody.find('tr').each(function () {
            var dataItem = grid.dataItem($(this));
     
            if (dataItem[firstField] > dataItem[secondField]) {
                var columnIndex = grid.columns.map(x => x.field).indexOf(secondField);
     
                $(this).find('td:eq(' + columnIndex + ')').css('background-color', 'yellow');
            } else {
                var columnIndex = grid.columns.map(x => x.field).indexOf(firstField);
     
                $(this).find('td:eq(' + columnIndex + ')').css('background-color', 'yellow');
            }
        })
    }

    Below you will find a small sample which uses the above function:



    Regards,
    Georgi
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. dipak
    dipak avatar
    10 posts
    Member since:
    Jun 2018

    Posted 18 Jul 2018 in reply to Georgi Link to this post

    Thanks Georgi, yes i was looking for similar implementation. Thanks a lot.
Back to Top