This is a migrated thread and some comments may be shown as answers.

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

3 Answers 82 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Mike Powell asked on 05 Apr 2013, 02:19 PM

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 )

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

3 Answers, 1 is accepted