Default grid sort behaviour

12 posts, 1 answers
  1. Matei
    Matei avatar
    3 posts
    Member since:
    Jul 2012

    Posted 24 Jul 2012 Link to this post

    Good day,

    I have a grid with a few columns. I group by 3 of these fields already in my datasource. I don't want to allow the user the option to sort or group, but by default, I want the grid to have a specific column sorted descending.

    The column I want to be sorted descending is ProductType.
    If I enable grouping on the grid, this then shows the groups at the top. If I click on the ProductType group at the top of the grid then it sorts descending. That is the behaviour I want set on the grid by default.

    Is this possible?

    Thank you in advance!

    Below is my code:

        var accountSearchDataSource = new kendo.data.DataSource({
            transport: {
                read: {
                    url: function () {
                        if (selectedPortfolioId) {
                            return UrlLibrary.FetchAccountsByPortfolioId + '/' + selectedPortfolioId;
                        } else {
                            return null;
                        }
                    },
                    dataType: 'json'
                }
            },
            pageSize: 10,
            group: [{ field: "CountryCode" }, { field: "AccountNumber" }, { field: "ProductType"}]
        });
        $('#accountSearchResultsGrid').kendoGrid({
            dataSource: accountSearchDataSource,
            selectable: "row",
            pageable: true,
            height: 500,
            columns: [
                { field: 'AccountNumber', title: 'Account Number' },
                { field: 'ProviderName', title: 'Provider Name' },
                { field: 'ProductName', title: 'Product Name' },
                { field: 'ProductType', title: 'Product Type', width: 80 },
                {
                    field: 'PriceClass',
                    title: 'Price Class',
                    template: function (e) {
                        if (!e.PriceClass) {
                            return '';
                        } else {
                            return e.PriceClass;
                        }
                    }
                },
                {
                    field: 'ClientFee',
                    title: 'Default Fee',
                    template: function (e) {
                        if (e.ClientFee == false) {
                            return 'Yes';
                        } else {
                            return 'No';
                        }
                    },
                    width: 70
                },
                {
                    field: 'ClientFee',
                    title: 'Client Fee',
                    template: function (e) {
                        if (e.ClientFee == true) {
                            return 'Yes';
                        } else {
                            return 'No';
                        }
                    },
                    width: 70
                },
                {
                    field: 'Approved',
                    title: 'Approved',
                    template: function (e) {
                        if (e.ClientFee != null) {
                            if (e.Approved == true) {
                                return '<input type="checkbox" name="approved" checked="checked" disabled="disabled" />';
                            } else {
                                return '<input type="checkbox" name="approved" id="approved' + e.ProductId + '" />';
                            }
                        } else {
                            return '<input type="checkbox" name="approved" disabled="disabled" />';
                        }
                    },
                    width: 70
                }]
        });
  2. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 28 Aug 2012 Link to this post

    Hi,

    are there any news regarding this issue?

    Thanks!
  3. Kendo UI is VS 2017 Ready
  4. Matei
    Matei avatar
    3 posts
    Member since:
    Jul 2012

    Posted 28 Aug 2012 Link to this post

    Hi Timon,

    I haven't managed to find a solution so far. I couldn't spend more time on this issue unfortunately, but it still remains unresolved.
  5. T.
    T. avatar
    25 posts
    Member since:
    Aug 2012

    Posted 28 Aug 2012 Link to this post

    Hi  Matei,

    thanks fro quick response,
    so until there is no solution from Kendo we have to deal with serverSorting I think.

  6. pucsoftware
    pucsoftware avatar
    24 posts
    Member since:
    Sep 2006

    Posted 10 Dec 2012 Link to this post

    This sounds like exactly what I need. I'm not doing any grouping but just need to configure the grid with a sorted field during initialization. Disappointing that Telerik has not responded to this post as of yet.
  7. Answer
    Marcin Butlak
    Marcin Butlak avatar
    26 posts
    Member since:
    Dec 2012

    Posted 11 Dec 2012 Link to this post

    Maybe you should try to read the manual first: http://docs.kendoui.com/api/framework/datasource#sortdir-string. but if you want to group and sort. There is a typo in docs it should be:
    group: [{ field: "FieldName", dir: "sorttype" }]
  8. pucsoftware
    pucsoftware avatar
    24 posts
    Member since:
    Sep 2006

    Posted 13 Dec 2012 Link to this post

    Marcin,

    I have read the manual. Have you? The portion in the manual does describe the method and parameters but doesn't show where to correctly code the config section for the sort. For example, is "sort" part of the transport config? The datasource root? The schema?
     
    I tried this on the datasource like below:

    var dsFiling = new kendo.data.DataSource({
      transport: {
        read: {
          url: "URL-TO-SERVICE"
          , type: "POST"
          , contentType: "application/json; charset=utf-8"
          , dataType: "json"
        }
      },
      schema: {
        data: function (response) {
          return response.data;
        }
      }
      , sort: { field: "ItemNo", dir: "desc" }
    });
    This should have worked but didn't. I could have been doing something incorrectly when using the datasource with my grid. After trying several locations in the config I applied this directly to the grid datasource.
    $("#grid").kendoGrid({
        dataSource: {
            transport: {
              read: "URL-TO-SERVICE"
              , type: "POST"
              , contentType: "application/json; charset=utf-8"
              , dataType: "json"
            }
            , schema: {
                model: {
                    fields: {
                        ItemNo: { type: "number" }
                        , PartyName: { type: "string" }
                        , DateFiled: { type: "date" }
                        , Description: { type: "string" }
                    }
                }
            , data: function (response) {
                  return response.data;
              }
            , total: function (response) {
                  return response.total;
                }
              }
            , pageSize: 25
            , serverPaging: true
            , serverFiltering: true
            , serverSorting: true
            , sort: { field: "ItemNo", dir: "desc" } //-- SPECIFY THE SORTING IN THE dataSource config
        } //-- end datasource
        , pageable:{
           input: true
           , numeric:true
        }
        , height: 450
        , filterable: true
        , sortable: true
        , columns: [{
            field: "ItemNo"
            , title: "Item No"
            , width: 75
            , template: '<a href="/#=ItemNo#" target="_self" >#=ItemNo#</a>'
          }, {
            field: "DateFiled"
            , title: "Date Filed"
            , width: 90
            , format: "{0:MM/dd/yyyy}"
          }, {
            field: "PartyName"
            , title: "Party Name"
            , width: 200
          }, {
            field: "Description"
            , title: "Description"
            , width: 400
          }
        ]
    });

    So, it appears that the sort can be set at the root of the datasource config - at least it can on the grid component. This type of answer would have been an adequate response to this post. My response, which shows an example of the config in use, is ideal and most helpful for newbies to kendoui. Your response, Marcin, is not helpful. If you know the answer, why not take a moment to share it. Merely, giving a link to the docs with a snide comment comes across as a troll looking for an opportunity to boost their own inflated ego, yet lacking the knowledge or professionalism worth any attention. Don't lower yourself to the masses that are usually found on these forums. Be helpful or be silent.

    For the record, I've been working with Ext Js for quite a while so I understand setting up these types of components. The documentation doesn't explicitly specify the location of the sort in the config which could have been addressed by answering a simple post like this one. There are at least two posts that ask this question as well as one I found on StackOverflow. None of them answered correctly. I've also been a paying customer of Telerik for over 8 years, back when all they had was asp.net controls. So, IMO, while they have added several new products, their support on these forums have diminished.

  9. Marcin Butlak
    Marcin Butlak avatar
    26 posts
    Member since:
    Dec 2012

    Posted 13 Dec 2012 Link to this post

    "The documentation doesn't explicitly specify the location of the sort"
    But it does look at the header of the documentation it says "kendo.data.DataSource". Now lets go to the Grid configuration we find the option "dataSource" next to it we see "kendo.data.DataSource | object" (Instance of DataSource or Object with DataSource configuration). Hence you have got also a simple example:
    $("#grid").kendoGrid({
         dataSource: {
             data: [{title: "Star Wars: A New Hope", year: 1977}, {title: "Star Wars: The Empire Strikes Back", year: 1980}],
             pageSize: 1
         }
     });
    From my point of view the documentation is well written. I'm using kendoui for about 2 weeks now and have no problem with doing things only reading the guides, demos and api reference. I'm only pointing this out because someone invested his time to put the information there to safe time for other developers searching for it. There is a tendency I see lately, that people have become very very lazy... If they have a problem the only place they usually looking for is a support forum. Fine this place is to help people also but it should be the last place you are looking for when you ask a question about a configuration option. And now for the education part my friend: if you are looking for help next time be more careful in your opinions about others because the only response you get will be silence... Have a good day.
  10. pucsoftware
    pucsoftware avatar
    24 posts
    Member since:
    Sep 2006

    Posted 13 Dec 2012 Link to this post

    The documentation nor the example you've just referenced are clear on how to configure the grid for a default "sort", at least not for the novice user. I have read the documentation, even before my original post. Like I said, there are several sections in the grid and datasource config and no docs that show where the sort should go. There are also no samples that show this, either. However, there are a couple of posts asking this question that went unanswered. I have used the sort several times to provide dynamic sorting through the column headers, but even so it wasn't clear on how to enable default sorting when the grid first loads. Clearly I wasn't alone as others have posted questions about this very same thing. So, someone posting a question about this deserves more of a response other than being ignored by Telerik or a link to a document that DOES NOT address the question. I found the answer by experimenting some more with the code a little bit. Afterward, it did help make the docs make a little more sense. Hopefully, my post will give someone a clearer answer to the question and provide some insight on how the components work together, which is a lot more than you provided.

    I'd hardly consider your "Maybe you should try to read the manual first" with a link to the documents helpful. Did you even know the answer? If you did, then why not give an appropriate response. Oh, your ego. I forgot. If anyone is making opinions about others it is yourself: "Lazy?" Is this your opinion to someone's question who's answer you have already figured out. This was my first question on this forum. I've created half my site without having to ask one question and using only the docs and forum posts for my answers. You have no idea how long I looked for an answer or if I had already read the documentation (which I agree is nicely done, but still did not provide the answer in of itself). As for "The last place someone should look is the support forums" may be your opinion but not good advice. Together, the docs and the forum, provide a more thorough learning experience. If mundane questions bother you then don't respond. If you respond poorly then expect a likewise retort.
  11. Hennie
    Hennie avatar
    7 posts
    Member since:
    Jun 2012

    Posted 14 Dec 2012 Link to this post

    Hey guys,

    Same issue here.

    I added the 
    sort: { field: "ItemNo", dir: "desc" }
    to the datasource for my grid and the default behavior of the grid is that it sorts descending just as i expect it, however, if you are grouping by that same field in the datasource, like so:
    group: [{ field: 'ItemNo' }]
    then it does not apply the sort behavior anymore.

    So basically having the grid sort descending by default will work, unless you are also grouping by that field, in which case it won't work, unless there's a different way to do it which i'm not familiar with at this point...

  12. Marcin Butlak
    Marcin Butlak avatar
    26 posts
    Member since:
    Dec 2012

    Posted 14 Dec 2012 Link to this post

    Hennie,

    As I mentioned before you must use the group parameter if you want to group and sort together. In your case this would look like:
    group: [{ field: "ItemNo", dir: "desc" }]
  13. Hennie
    Hennie avatar
    7 posts
    Member since:
    Jun 2012

    Posted 14 Dec 2012 Link to this post

    That worked! Thank you.

    I wasn't lazy i promise! :) I did read your previous post, except for some reason i read "sort" instead of "group" where you gave the example the first time. Thanks again!
Back to Top
Kendo UI is VS 2017 Ready