1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Issue in data binding the integer Value from data source.

Issue in data binding the integer Value from data source.

Hi,

I need help from you. I have data on integer type when I binding the data source it can pull the data from the data source.
So only the string value can pull from the data source?

For Further Information, I had attached my code here

kanban.js
...
var kanbanObj = new ej.kanban.Kanban({
        dataSource: data,
        keyField: 'MessageStatusID', -------------------->Here the keyfield value is integer type
        enableTooltip: true,
        width: '100%',
        height: '100%',

       
        cardSettings: {
            headerField: 'EventID',
            template: '#cardTemplate',
            selectionType: 'Multiple'
        },
columns: [
        { headerText: 'To Do', keyField: 1, template: '#headerTemplate' },----------------------------------------> Here the data of keyfield
        { headerText: 'In Progress', keyField: 2, template: '#headerTemplate' },
        { headerText: 'Done', keyField: 5 , template: '#headerTemplate' }
        ],
        cardDoubleClick: onCardDoubleClick,
...
datasource.js

window.kanbanData = [
   {
      "EventID":23,
      "EventType":"Panic",
      "ReceivedDateTime":"2019-11-25T09:19:38",
      "MessageStatusID":2,   ----------------------------------------------------> This the integer data i need to bind in kanban
      "AddressedBy":"CS User",
      "CSSystemId":1, "Status": "Open",
      "UserID":1,
      "User":"test user",
      "Comment":"sadas comment",
      "Primary":"987546574",
      "Neighbour":"784237442",
      "Emergency":"9877482734",
      "Police":"9876543210 045224582810",
      "LocationName":"Blore",
      "Address":"ECR, MG ROAD, Bangalore, TN, IND",
      "Geo":"102.230000, 534.230000"
   },
...


Kindly Help Me.



5 Replies
HB Hareesh Balasubramanian Syncfusion Team April 6, 2020 11:46 AM UTC

Hi Arshad, 

Greetings from Syncfusion Support. 

We have checked the possibility at our end, the keyField,  property is as sting type and it is used to map the data for columns. For further reference kindly refer the below UG link, 


 
Code:  
window.kanbanData = [
   {
      "EventID":23,
      "EventType":"Panic",
      "ReceivedDateTime":"2019-11-25T09:19:38",
      "MessageStatusID":2,     ----à map to cardSettings.headerField
      "AddressedBy":"CS User",
      "CSSystemId":1,  
      "Status": "Open",   ---à map to keyField
      "UserID":1,
      "User":"test user",
      "Comment":"sadas comment",
      "Primary":"987546574",
      "Neighbour":"784237442",
      "Emergency":"9877482734",
      "Police":"9876543210 045224582810",
      "LocationName":"Blore",
      "Address":"ECR, MG ROAD, Bangalore, TN, IND",
      "Geo":"102.230000, 534.230000"
   }, 

We had prepared the sample based on your requirement, which is available in the below link 


Kindly check the above sample and documentation links and get back to us for further assistance. 

Regards, 
Hareesh 


AR Arshad April 16, 2020 11:17 AM UTC

Hi Hareesh Balasubramanian,

I think you don't understand my problem.

I will explain it clearly from the beginning.
Here is my code that is the data source from API.


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

[
  {
    "eventID": 1,
    "eventType": "Panic                                             ",
    "receivedDateTime": "2020-03-29T00:00:00",
    "messageStatusID": 1,
    "addressedBy": "",
    "csSystemId": 1,
    "userID": 4,
    "user": "test,user",
    "comment": "test notes                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          ",
    "primary": "987546574                                                                                           ",
    "neighbour": "784237442                                                                                           ",
    "emergency": "9877482734                                                                                          ",
    "police": null,
    "locationName": "Blore                                                                                               ",
    "address": "ECR,MG ROAD,Bangalore,TN,IND",
    "geo": "102.23,534.23"
  },
  {
    "eventID": 2,
    "eventType": "Panic                                             ",
    "receivedDateTime": "2020-03-29T00:00:00",
    "messageStatusID": 1,
    "addressedBy": "",
    "csSystemId": 1,
    "userID": 4,
    "user": "test,user",
    "comment": "prod test                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           ",
    "primary": "987546574                                                                                           ",
    "neighbour": "784237442                                                                                           ",
    "emergency": "9877482734                                                                                          ",
    "police": null,
    "locationName": "Blore                                                                                               ",
    "address": "ECR,MG ROAD,Bangalore,TN,IND",
    "geo": "102.23,534.23"
  }
]


-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

index.js

...
var data = ej.base.extend([], window.kanbanData, null, true); // To maintain the property changes, extend the object.
    var kanbanObj = new ej.kanban.Kanban({
        dataSource: data,
        keyField: 'messageStatusID',
        enableTooltip: true,
        width: '100%',
        height: '100%',

        
        cardSettings: {
            headerField: 'EventID',
            template: '#cardTemplate',
            selectionType: 'Multiple'
        },
...

above code, the data is not getting from the API when the key field is an integer.
So kindly help me to fix it with the integer type.

Note: If I change the integer value to string data then it works fine. So I need it to be used in integer type itself. So mention any other way to is this type of data.

HB Hareesh Balasubramanian Syncfusion Team April 17, 2020 02:57 PM UTC

Hi Arshad, 

Thanks for the update. 

We have checked the “If I change the integer value to string data then it works fine. So I need it to be used in integer type itself” possibility at our end but regret to let you know this is not feasible with our Kanban component. The purpose for the keyField property is to categorize the cards into the respective columns and we have maintained it in the string type. We have prepared a sample with the keyField property and it can be viewed from the following link. 
 
 
Here we can explain about how the keyField functions into the kanban 
Code snippet: 
var kanbanData = [ 
  { 
    Id: "Task 1", 
    Title: "Task - 29001", 
    Status: "Open", 
    Summary: "Analyze the new requirements gathered from the customer." 
  }, 
  { 
    Id: "Task 2", 
    Title: "Task - 29002", 
    Status: "InProgress", 
    Summary: "Analyze the new requirements gathered from the customer." 
  } 
]; 
 
//Initialize Kanban control 
var kanbanObj = new ej.kanban.Kanban({ 
  dataSource: kanbanData, 
  keyField: "Status", 
  columns: [ 
    { headerText: "To Do", keyField: "Open" }, 
    { headerText: "In Progress", keyField: "InProgress" } 
  ], 
  cardSettings: { 
    contentField: "Summary", 
    headerField: "Title" 
  } 
}); 
//Render initialized Kanban control 
kanbanObj.appendTo("#Kanban"); 
 
and output of the above code as below 
 
 
 
Kindly refer the below links for more references, 
 
 
Kindly refer to the above sample and links and get back to us for further assistance. 
 
Regards, 
Hareesh 
10

AR Arshad April 18, 2020 11:29 AM UTC

Thank You,

I had solved by converting into a string but now I had issues on updating the kanban data.
I had attached the source code of index.js and the dashboard.html below. I cant update the data when I change the comment and remaining data also. please help me.

Attachment: demo_21b5697.zip

HB Hareesh Balasubramanian Syncfusion Team April 22, 2020 02:26 PM UTC

Hi Arshad, 

Thanks for the update. 

We have validated your shared code snippets and we suspect that you have using the older version of Kanban component. Kindly update it to the current version (v18.1.45) in that we have handled the card editing using the Dialog component in the source end itself. And for further reference kindly refer to the below UG links. 


If you have any other concerns please revert for further assistance. 

Regards, 
Hareesh 


Loader.
Up arrow icon