KendoWeb data-reorderable does not work when the the data-bind of the grid uses dataSource object

4 posts, 0 answers
  1. Mike Powell
    Mike Powell avatar
    4 posts
    Member since:
    Aug 2008

    Posted 05 Apr 2013 Link to this post

     I have a div with id="grid" which uses data-bind attribute, but when I add data-reorderable attribute it does not work at all.this is the div where I want to set data-reorderable="true"

    <div id="grid" data-role="grid" data-sortable="true" data-editable="false"
    data-navigatable="true" data-resizable="true" data-reorderable="true"
    data-pageable="{numeric: true, buttonCount: 5, previousNext: true, info: true}" data-selectable="True"
    data-columns='[{"field": "LoadDisplayId", "title": "Load Id", "width": "80px"}, {"field": "BeginDate", "title": "Start Date", "width": "80px", "format": "{0:MM/dd/yyyy}"}, {"field": "EndDate", "title": "End Date", "width": "80px", "format": "{0:MM/dd/yyyy}"},{"field": "RouteName", "title": "Route Identifier", "width": "100px"},{"field": "Origin", "title": "Origin", "width": "200px"},{"field": "Destination", "title": "Destination", "width": "200px"},{"field": "BillTo", "title": "BillTo", "width": "200px"},{"field": "Carrier", "title": "Carrier", "width": "200px"}]'
    data-bind="source: gridSource, events: { change: change }">
    </div>
    the problem is in the data-bind="source: gridSource,... the gridSource comes from observable object (for clarity, I've substituted an array for my actual remote data):

    viewModel = kendo.observable({
     
    gridSource: new kendo.data.DataSource({
             data:[
                        {
                            LoadId: 125642,
                            LoadDisplayId: "L138094",
                            StatusId: 285,
                            Status: "Pending",
                            RouteName: "May200",
                            Origin: "A  Raymond Tinnerman Auto, INC ",
                            Destination: "B L Downey Company Inc.",
                            BillTo: "Behr Charleston",
                            Carrier: "AAA Cooper",
                            BeginDate: "04/01/2013",
                            EndDate: "04/01/2013",
                            NextActionDate: "04/01/2013",
                            NextAction: "Ready To Tender",
                            CheckCallException: false,
                            TenderException: false,
                            HasPendingCustomerRequest: null
                        },
                        {
                            LoadId: 125642,
                            LoadDisplayId: "L100004",
                            StatusId: 285,
                            Status: "Pending",
                            RouteName: "test",
                            Origin: "A  Raymond Tinnerman Auto, INC ",
                            Destination: "B L Downey Company Inc.",
                            BillTo: "Behr Charleston",
                            Carrier: "AAA Cooper",
                            BeginDate: "04/01/2013",
                            EndDate: "04/01/2013",
                            NextActionDate: "04/01/2013",
                            NextAction: "Ready To Tender",
                            CheckCallException: false,
                            TenderException: false,
                            HasPendingCustomerRequest: null
                        }
                ]
      })
     
    });
    the columnreordering property does not work on the Front End .... but if I use the array directly it works (not referencing kendo.data.DataSource):

    gridSource: [
                        {
                            LoadId: 125642,
                            LoadDisplayId: "L138094",
                            StatusId: 285,
                            Status: "Pending",
                            RouteName: "May200",
                            Origin: "A  Raymond Tinnerman Auto, INC ",
                            Destination: "B L Downey Company Inc.",
                            BillTo: "Behr Charleston",
                            Carrier: "AAA Cooper",
                            BeginDate: "04/01/2013",
                            EndDate: "04/01/2013",
                            NextActionDate: "04/01/2013",
                            NextAction: "Ready To Tender",
                            CheckCallException: false,
                            TenderException: false,
                            HasPendingCustomerRequest: null
                        },
                        {
                            LoadId: 125642,
                            LoadDisplayId: "L100004",
                            StatusId: 285,
                            Status: "Pending",
                            RouteName: "test",
                            Origin: "A  Raymond Tinnerman Auto, INC ",
                            Destination: "B L Downey Company Inc.",
                            BillTo: "Behr Charleston",
                            Carrier: "AAA Cooper",
                            BeginDate: "04/01/2013",
                            EndDate: "04/01/2013",
                            NextActionDate: "04/01/2013",
                            NextAction: "Ready To Tender",
                            CheckCallException: false,
                            TenderException: false,
                            HasPendingCustomerRequest: null
                        }
                ]
    The problem is that when I instantiate a new kendo.data.DataSource object,it creates a conflict. How can I solve/avoid that issue? .... (In my case I have to use new kendo.data.DataSource object )

  2. Atanas Korchev
    Admin
    Atanas Korchev avatar
    8462 posts

    Posted 09 Apr 2013 Link to this post

    Hi Mike,

     I couldn't reproduce this problem. In this live demo: http://jsbin.com/ivoxug/1/edit column reordering works as expected.

    Kind regards,
    Atanas Korchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. StevenDale
    StevenDale avatar
    100 posts
    Member since:
    Apr 2007

    Posted 08 Sep 2014 in reply to Atanas Korchev Link to this post

    The sample you posted at  http://jsbin.com/ivoxug/1/edit does not allow column resorting in IE 11.
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2877 posts

    Posted 10 Sep 2014 Link to this post

    Hello Billy,

    The problem is resolved in the latest version. Check the updated sample: http://jsbin.com/ivoxug/9/edit
    Please upgrade to Kendo UI v2014.2.903

    Regards,
    Alexander Valchev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready