Unable to use Custom Editor in Spreadsheet

[Jatin]

Hi team,

I'm using jquery spreadsheet wrapper on my React application. I wanted the autocomplete feature in the dropdown list of cell values. I found this thread useful.

I tried implementing http://dojo.telerik.com/AyOXo/3 (given in above thread), but in my case, the el.getKendoPopup(); is returning undefined and I'm clueless why this is happening.

I have attached an image for reference, dlg is undefined, and because of which dlg.setOptions() fails. Could you please help me resolve this?

Let me know if you need any other details.

Thanks!

[Veselin Tsvetanov]

Hello Jatin,

I will need to replicate the issue locally in order to troubleshoot the problem in question. Therefore, I would like to ask you to modify the Dojo sample in question, so that it reproduces the problem and send it back to me.

Looking forward to hearing from you.

Regards,
Veselin Tsvetanov
Progress Telerik

[Jatin]

Hello Veselin,

Unfortunately, I have implemented the spreadsheet widget in React and I couldn't find a way to put that code in Dojo.

So I have attached the react code where I have implemented this functionality.

Please let me know if I could help more in any way. Thanks!

import React, { useEffect } from "react";

import "./spreadsheet.styles.scss";

import "@progress/kendo-ui";

import { Spreadsheet } from "@progress/kendo-spreadsheet-react-wrapper";

import api from "../../../Api";

import jszip from "jszip";

import kendo from "@progress/kendo-ui";

import { withRouter } from "react-router-dom";

const SpreadsheetKendo = (props) => {

let currentData = {};

const lookupObj = {};

let sheet;

const rowCount = props.location.state?.nooftfn + 1;

const MySpreadSheet = React.createRef();

kendo.spreadsheet.registerEditor("popup", function () {

var context, dlg, model;

return {

edit: function (options) {

context = options;

open();

},

icon: "k-font-icon k-i-text",

};

function create() {

if (!dlg) {

model = kendo.observable({

value: "",

data: ["Test 1", "Second test"],

ok: function () {

context.callback(model.value);

dlg.close();

},

cancel: function () {

dlg.close();

},

});

var el = window.$(

"<div data-visible='true' data-role='popup' data-origin='top right' data-position='top left' data-collision='fit' data-width='200'>" +

" <input data-role='autocomplete' data-no-data-template='false' data-bind='value: value, source: data'/>" +

" <div style='margin-top: 1em; text-align: right'>" +

" <button style='width: 5em' class='k-button' data-bind='click: ok'>OK</button>" +

" <button style='width: 5em' class='k-button' data-bind='click: cancel'>Cancel</button>" +

" </div>" +

"</div>"

);

kendo.bind(el, model);

dlg = el.getKendoPopup();

}

}

function open() {

create();

dlg.setOptions({

anchor: window.$(".k-spreadsheet-editor-button"),

});

dlg.open();

var value = context.range.value();

if (value != null) {

model.set("value", value);

}

}

});

var dataSource = new kendo.data.DataSource({

transport: {

read: onRead,

},

batch: true,

schema: {

model: {

id: "TFNData",

},

},

});

let sheets = [

{

name: "Products",

rows: 6,

sheetsbar: false,

rows: [

{

autoWidth: true,

height: 50,

},

{

cells: [

{ background: "#fef0cd",

editor: "popup" }

]

}

// {

// cells: [

// { value: "Select color:", bold: true },

// { background: "#fef0cd", editor: "color" },

// ],

// },

],

columns: [

// Requestor

{ width: 40 }, // A: Seq

//Marketing

{ width: 90 }, // B: TFN

{ width: 60 }, // C: IsPreviouslyUsed

//Requestor

{ width: 250 }, // D: TfnDescription

{ width: 125 }, // E: Marketing Program

{ width: 125 }, // F: Product

{ width: 125 }, // G: SubProduct

{ width: 125 }, // H: Timing

{ width: 125 }, // I: Channel

{ width: 125 }, // J: SubChannel

{ width: 125 }, // K: CreativeSegment

{ width: 125 }, // L: Hit

{ width: 125 }, // M: ADUIENCE

{ width: 125 }, // N: ATTRIBUTION PROGRAM

{ width: 200 }, // O: Campaign Name

{ width: 125 }, // P: Language

{ width: 125 }, // Q: Brand

{ width: 125 }, // R: Website Assoc.

{ width: 125 }, // S: TFN Type

{ width: 200 }, // T: Vanity URL

{ width: 200 }, // U: VANITYURL 2

{ width: 128 }, // V: Ext Ref ID

{ width: 125 }, // W: Affinity Partnership

{ width: 125 }, // X: Reward Card

{ width: 125 }, // Y: RSVP to Callcenter

{ width: 125 }, // Z: Campaign StartDate

{ width: 125 }, // AA: Campaign EndDate

{ width: 125 }, // AB: Requestor

//Marketing

{ width: 125 }, // AC: Callcenter

//Telesales

{ width: 125 }, // AD: IVR Audio

{ width: 125 }, // AE: Script

{ width: 125 }, // AF: Zip Code Capture

{ width: 125 }, // AG: Specific Queue

{ width: 125 }, // AH: Special Instructions Telesales

{ width: 125 }, // AI: VerifiedByTelesales

{ width: 125 }, // AJ: VerifiedByTelesalesYesNo

{ width: 125 }, // AK: Request Submitted

//Callcenter

{ width: 125 }, // AL: DID

{ width: 125 }, // AM: VerifiedByCallCenter

{ width: 125 }, // AN: VerifiedByCallCenterYesNo

//Tester

{ width: 125 }, // AO: Test User

{ width: 125 }, // AP: Test Verified

{ width: 125 }, // AQ: Test Date

{ width: 200 }, // AR: Test Comments

//System

{ width: 125 }, // AS: TfnDataID

{ width: 48 }, // AT: Spacer

],

frozenColumns: 4,

frozenRows: 1,

},

];

async function onRead(options) {

// let result = await api.getTfnData(props.match.params.tfnid);

let result = {"tfnrequest_id":5317,"createduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"user":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"assigned_to":{"lookupid":37,"lookupname":"GroupType","lookupvalue":"4","displaytext":"TFN Telesales"},"request_type":{"lookupid":751,"lookupname":"RequestType","lookupvalue":"2","displaytext":"Regional"},"status":{"lookupid":120,"lookupname":"WorkflowStatus","lookupvalue":"5","displaytext":"TeleSales In-progress"},"tfn_data":[{"tfndata_id":12134,"createduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"lv_language__":{"lookupid":318,"lookupname":"Language","lookupvalue":"1","displaytext":"English"},"lv_tragetaud__":{"lookupid":440,"lookupname":"MarketingProgram","lookupvalue":"1","displaytext":"Acquisition"},"lv_product__":{"lookupid":351,"lookupname":"Product","lookupvalue":"1","displaytext":"MAPD"},"lv_timing__":{"lookupid":589,"lookupname":"Timing","lookupvalue":"16","displaytext":"Other"},"lv_channel__":{"lookupid":446,"lookupname":"Channel","lookupvalue":"2","displaytext":"Digital"},"lv_camplob__":{"lookupid":344,"lookupname":"SubChannel","lookupvalue":"20","displaytext":"Digital Landing Pages"},"lv_brand__":{"lookupid":366,"lookupname":"Brand","lookupvalue":"8","displaytext":"Allina Health"},"test_user":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"modifieduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"sequence":"1.00","requestor":"Kathryn Souza","tfndesc":"\\nAge-in Allina Landing Page Dynamic 1","lv_language":"1","campaignstartdate":"2018-10-30","campaignenddate":"2025-12-30","lv_camplob":"20","lv_product":"1","lv_brand":"8","reqsubmitteddatetime":"2018-10-19","tfntype":true,"vanityurl":"\\nAllinaAetnaMedicare.com/learn","lv_timing":"16","lv_tragetaud":"1","lv_channel":"2","webassociation":true,"did":"8019343207","tfn":"8552459936","callcenter":"CXP","createddatetime":"2018-10-19","modifieddatetime":"2018-11-01","ispreviouslyused":1,"creativesegment":"WEB TO CALL","audience":"None","attributionprogram":"None","campaignname":"None","tfnnumber":5585},{"tfndata_id":12135,"createduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"lv_language__":{"lookupid":318,"lookupname":"Language","lookupvalue":"1","displaytext":"English"},"lv_tragetaud__":{"lookupid":440,"lookupname":"MarketingProgram","lookupvalue":"1","displaytext":"Acquisition"},"lv_product__":{"lookupid":351,"lookupname":"Product","lookupvalue":"1","displaytext":"MAPD"},"lv_timing__":{"lookupid":589,"lookupname":"Timing","lookupvalue":"16","displaytext":"Other"},"lv_channel__":{"lookupid":446,"lookupname":"Channel","lookupvalue":"2","displaytext":"Digital"},"lv_camplob__":{"lookupid":344,"lookupname":"SubChannel","lookupvalue":"20","displaytext":"Digital Landing Pages"},"test_user":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"modifieduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"sequence":"2.00","requestor":"Kathryn Souza Test 3","tfndesc":"\\nAge-in Allina Landing Page Dynamic 2","lv_language":"1","campaignstartdate":"2018-10-30","campaignenddate":"2025-12-30","lv_camplob":"20","lv_product":"1","lv_brand":"Allina Health Test","reqsubmitteddatetime":"2018-10-19","tfntype":true,"vanityurl":"\\nAllinaAetnaMedicare.com/coverage","lv_timing":"16","lv_tragetaud":"1","lv_channel":"2","webassociation":true,"did":"8018064518","tfn":"8002935167","callcenter":"CXP","createddatetime":"2018-10-19","modifieddatetime":"2018-11-01","ispreviouslyused":1,"creativesegment":"WEB TO CALL","audience":"None","attributionprogram":"None","campaignname":"None","tfnnumber":5310},{"tfndata_id":12136,"createduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"lv_language__":{"lookupid":318,"lookupname":"Language","lookupvalue":"1","displaytext":"English"},"lv_tragetaud__":{"lookupid":440,"lookupname":"MarketingProgram","lookupvalue":"1","displaytext":"Acquisition"},"lv_product__":{"lookupid":351,"lookupname":"Product","lookupvalue":"1","displaytext":"MAPD"},"test_user":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"modifieduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"sequence":"3.00","requestor":"Kathryn Souza Test 6","tfndesc":"2021_AET_2022AEP_DM_H1_NonMT","lv_language":"1","campaignstartdate":"2018-10-30","campaignenddate":"2025-12-30","lv_camplob":"NonMT","lv_product":"1","lv_brand":"AET","reqsubmitteddatetime":"2018-10-19","tfntype":true,"vanityurl":"\\nIHMedicare.com/learn","lv_timing":"2022AEP","lv_tragetaud":"1","lv_channel":"DM","webassociation":true,"tfn":"8338386830","callcenter":"CXP","createddatetime":"2018-10-19","modifieddatetime":"2018-11-01","ispreviouslyused":1,"creativesegment":"WEB TO CALL","hit":"H1","audience":"None","attributionprogram":"None","campaignname":"None","tfnnumber":10090},{"tfndata_id":12137,"createduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"lv_language__":{"lookupid":318,"lookupname":"Language","lookupvalue":"1","displaytext":"English"},"lv_tragetaud__":{"lookupid":440,"lookupname":"MarketingProgram","lookupvalue":"1","displaytext":"Acquisition"},"lv_product__":{"lookupid":351,"lookupname":"Product","lookupvalue":"1","displaytext":"MAPD"},"lv_timing__":{"lookupid":589,"lookupname":"Timing","lookupvalue":"16","displaytext":"Other"},"lv_channel__":{"lookupid":446,"lookupname":"Channel","lookupvalue":"2","displaytext":"Digital"},"lv_camplob__":{"lookupid":344,"lookupname":"SubChannel","lookupvalue":"20","displaytext":"Digital Landing Pages"},"lv_brand__":{"lookupid":617,"lookupname":"Brand","lookupvalue":"6","displaytext":"Innovation Health"},"test_user":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"modifieduser":{"user_id":283,"username":"[e-mail]","first_name":"Kathryn","last_name":"Anderson"},"sequence":"4.00","requestor":"Kathryn Souza","tfndesc":"\\nAge-in Innovation Health Landing Page Dynamic 2","lv_language":"1","campaignstartdate":"2018-10-30","campaignenddate":"2025-12-30","lv_camplob":"20","lv_product":"1","lv_brand":"6","reqsubmitteddatetime":"2018-10-19","tfntype":true,"vanityurl":"\\nIHMedicare.com/coverage","lv_timing":"16","lv_tragetaud":"1","lv_channel":"2","webassociation":true,"tfn":"8338365621","callcenter":"CXP","createddatetime":"2018-10-19","modifieddatetime":"2018-11-01","ispreviouslyused":1,"creativesegment":"WEB TO CALL","audience":"None","attributionprogram":"None","campaignname":"None","tfnnumber":10083}],"title":"AHA IH Age-In Landing Pgs","numoftfn":4,"lv_status":"5","islocked":true,"createddatetime":"2018-10-19","lockeddatetime":"2018-10-22","statuschangeddatetime":"2018-10-22","lv_group":"4","lv_datastatus_req":"4","lv_datastatus_mkt":"4","lv_datastatus_ts":"3","lv_datastatus_cc":"2","request_type_id":"2"}

try {

let reqTypeId = result.request_type_id;

let res = result.tfn_data.map((item, index) => {

let obj = {};

for (let key in lookupObj) {

if (key.startsWith("lv_")) {

obj[key] = item[key + "__"]?.displaytext.toString().trim();

} else {

obj[key] = item[key]?.toString().trim();

}

}

obj["tfndata_id"] = item.tfndata_id;

obj["request_type_id"] = reqTypeId;

obj["sequence"] = index + 1;

return obj;

});

res.forEach((item) => {

currentData[item["tfndata_id"]] = item;

});

options.success(res);

} catch (err) {

options.error(err);

}

}

useEffect(async () => {

window.JSZip = jszip;

sheet = MySpreadSheet.current.widgetInstance.activeSheet();

let headers = {"data":[{"tfnfield_id":20,"category":"MarketingField","fieldname":"Tfn","displaytext":"TFN","dbcolumn":"TFN","editortype":1,"displayorder":100},{"tfnfield_id":44,"category":"MarketingField","fieldname":"PrevUsed","displaytext":"Prev. Used","dbcolumn":"ispreviouslyused","ispersisted":true,"editortype":1,"displayorder":200},{"tfnfield_id":23,"category":"RequestorField","fieldname":"TfnDesc","displaytext":"TFN Description","dbcolumn":"TFNDESC","editortype":1,"displayorder":300},{"tfnfield_id":9,"category":"RequestorField","fieldname":"TargetAudience","displaytext":"Marketing Program","dbcolumn":"LV_TRAGETAUD","ispersisted":true,"editortype":2,"lookupcategory":"TFN","lookupname":"MarketingProgram","displayorder":400},{"tfnfield_id":8,"category":"RequestorField","fieldname":"Product","displaytext":"Product","dbcolumn":"LV_PRODUCT","ispersisted":true,"editortype":2,"lookupcategory":"TFN","lookupname":"Product","displayorder":500},{"tfnfield_id":38,"category":"RequestorField","fieldname":"SubProduct","displaytext":"Sub Product","dbcolumn":"SUBPRODUCT","editortype":2,"lookupcategory":"TFN","lookupname":"SubProduct","displayorder":600},{"tfnfield_id":22,"category":"RequestorField","fieldname":"Timing","displaytext":"Timing/Subprogram","dbcolumn":"LV_TIMING","editortype":2,"lookupcategory":"TFN","lookupname":"Timing","displayorder":700},{"tfnfield_id":10,"category":"RequestorField","fieldname":"Channel","displaytext":"Channel","dbcolumn":"LV_CHANNEL","ispersisted":true,"editortype":2,"lookupcategory":"TFN","lookupname":"Channel","displayorder":800},{"tfnfield_id":46,"category":"RequestorField","fieldname":"MediaGrouping","displaytext":"Media Grouping","dbcolumn":"MEDIA_GROUPING","ispersisted":true,"editortype":1,"displayorder":900},{"tfnfield_id":7,"category":"RequestorField","fieldname":"CampaignLOB","displaytext":"Sub-Channel","dbcolumn":"LV_CAMPLOB","ispersisted":true,"editortype":2,"lookupcategory":"TFN","lookupname":"SubChannel","displayorder":1000},{"tfnfield_id":45,"category":"RequestorField","fieldname":"MediaChannel","displaytext":"Media Channel","dbcolumn":"MEDIA_CHANNEL","ispersisted":true,"editortype":1,"displayorder":1100},{"tfnfield_id":42,"category":"RequestorField","fieldname":"CreativeSegment","displaytext":"Creative Segment","dbcolumn":"CREATIVESEGMENT","editortype":2,"lookupcategory":"TFN","lookupname":"CreativeSegment","displayorder":1200},{"tfnfield_id":39,"category":"RequestorField","fieldname":"Hit","displaytext":"Hit","dbcolumn":"HIT","editortype":2,"lookupcategory":"TFN","lookupname":"Hit","displayorder":1300},{"tfnfield_id":40,"category":"RequestorField","fieldname":"Audience","displaytext":"Audience","dbcolumn":"AUDIENCE","editortype":2,"lookupcategory":"TFN","lookupname":"Audience","displayorder":1400},{"tfnfield_id":41,"category":"RequestorField","fieldname":"AttributionProgram","displaytext":"Attribution Program","dbcolumn":"ATTRIBUTIONPROGRAM","editortype":2,"lookupcategory":"TFN","lookupname":"AttributionProgram","displayorder":1500},{"tfnfield_id":13,"category":"RequestorField","fieldname":"CampaignName","displaytext":"Campaign Name","dbcolumn":"CAMPAIGNNAME","ispersisted":true,"editortype":2,"lookupcategory":"TFN","lookupname":"CampaignName","displayorder":1600},{"tfnfield_id":4,"category":"RequestorField","fieldname":"Language","displaytext":"Language","dbcolumn":"LV_LANGUAGE","ispersisted":true,"editortype":2,"lookupcategory":"TFN","lookupname":"Language","displayorder":1700},{"tfnfield_id":14,"category":"RequestorField","fieldname":"Brand","displaytext":"Brand","dbcolumn":"LV_BRAND","ispersisted":true,"editortype":2,"lookupcategory":"TFN","lookupname":"Brand","displayorder":1800},{"tfnfield_id":12,"category":"RequestorField","fieldname":"WebAssociation","displaytext":"Web Association","dbcolumn":"WEBASSOCIATION","editortype":8,"displayorder":1900},{"tfnfield_id":17,"category":"RequestorField","fieldname":"TfnType","displaytext":"TFN Type","dbcolumn":"TFNTYPE","editortype":2,"lookupcategory":"TFN","lookupname":"TfnType","displayorder":2000},{"tfnfield_id":33,"category":"RequestorField","fieldname":"VanityUrl","displaytext":"Vanity URL","dbcolumn":"VANITYURL","editortype":1,"displayorder":2100},{"tfnfield_id":34,"category":"RequestorField","fieldname":"VanityUrl2","displaytext":"VANITY URL 2","dbcolumn":"VANITYURL2","editortype":1,"displayorder":2200},{"tfnfield_id":35,"category":"RequestorField","fieldname":"ExtRefID","displaytext":"External Reference ID","dbcolumn":"EXT_REF_ID","editortype":1,"displayorder":2300},{"tfnfield_id":15,"category":"RequestorField","fieldname":"ProviderCode","displaytext":"Provider Code","dbcolumn":"AFFINITYPARTNERSHIP","editortype":8,"displayorder":2400},{"tfnfield_id":11,"category":"RequestorField","fieldname":"MeetingRelated","displaytext":"RSVP to Call Center","dbcolumn":"MEETINGRELATED","editortype":8,"displayorder":2500},{"tfnfield_id":5,"category":"RequestorField","fieldname":"CampaignStartDate","displaytext":"Campaign Start Date","dbcolumn":"CAMPAIGNSTARTDATE","ispersisted":true,"editortype":5,"displayorder":2600},{"tfnfield_id":6,"category":"RequestorField","fieldname":"CampaignEndDate","displaytext":"Campaign End Date","dbcolumn":"CAMPAIGNENDDATE","ispersisted":true,"editortype":5,"displayorder":2700},{"tfnfield_id":1,"category":"RequestorField","fieldname":"Requestor","displaytext":"Requestor","dbcolumn":"REQUESTOR","ispersisted":true,"editortype":1,"displayorder":2800},{"tfnfield_id":27,"category":"TelesalesField","fieldname":"Callcenter","displaytext":"Call Center","dbcolumn":"CALLCENTER","editortype":2,"lookupcategory":"TFN","lookupname":"Callcenter","displayorder":2900},{"tfnfield_id":24,"category":"TelesalesField","fieldname":"IvrAudio","displaytext":"IVR Audio","dbcolumn":"LV_IVRAUDIO","editortype":2,"lookupcategory":"TFN","lookupname":"IVRAudio","displayorder":3000},{"tfnfield_id":25,"category":"TelesalesField","fieldname":"Script","displaytext":"Script","dbcolumn":"LV_SCRIPT","editortype":2,"lookupcategory":"TFN","lookupname":"Script","displayorder":3100},{"tfnfield_id":26,"category":"TelesalesField","fieldname":"ZipCodeCapture","displaytext":"Zip Code Capture","dbcolumn":"ZIPCODECAPTURE","editortype":8,"displayorder":3200},{"tfnfield_id":28,"category":"TelesalesField","fieldname":"SpecificPodQueueRouting","displaytext":"Specific Pod/Queue Routing","dbcolumn":"SPEQUEUEROUTING","editortype":1,"displayorder":3300},{"tfnfield_id":29,"category":"TelesalesField","fieldname":"SpecialInstructionsTelesales","displaytext":"Special Instructions","dbcolumn":"T_SPECIALINSTRUCTIONS","editortype":1,"displayorder":3400},{"tfnfield_id":19,"category":"TelesalesField","fieldname":"VerifiedByTelesales","displaytext":"Verified by Telesales","dbcolumn":"VERIFIED_BY_TS","editortype":5,"displayorder":3500},{"tfnfield_id":18,"category":"RequestorField","fieldname":"RequestSubmitted","displaytext":"Request Submitted DateTime","dbcolumn":"REQSUBMITTEDDATETIME","editortype":5,"displayorder":3600},{"tfnfield_id":30,"category":"CallcenterField","fieldname":"Did","displaytext":"DID","dbcolumn":"DID","editortype":1,"displayorder":3700},{"tfnfield_id":47,"category":"CallcenterField","fieldname":"SpanishDID","displaytext":"Spanish DID","dbcolumn":"DID_SPANISH","editortype":1,"displayorder":3800},{"tfnfield_id":32,"category":"CallcenterField","fieldname":"VerifiedByCC","displaytext":"Verified By CallCenter","dbcolumn":"VERIFIED_BY_CC","editortype":5,"displayorder":3900},{"tfnfield_id":48,"category":"CallcenterField","fieldname":"verified_by_cc_flag","displaytext":"Verified By CallCenter (Yes/No)","dbcolumn":"VERIFIED_BY_CC_FLAG","editortype":1,"displayorder":4000},{"tfnfield_id":49,"category":"TesterField","fieldname":"TestUser","displaytext":"Test User","dbcolumn":"TEST_USER","editortype":1,"displayorder":4100},{"tfnfield_id":50,"category":"TesterField","fieldname":"TestVerified","displaytext":"Test Verified","dbcolumn":"TEST_VERIFIED","editortype":1,"displayorder":4200},{"tfnfield_id":51,"category":"TestField","fieldname":"TestDate","displaytext":"Test Date","dbcolumn":"TEST_DATE","editortype":1,"displayorder":4300},{"tfnfield_id":52,"category":"TestField","fieldname":"TestComments","displaytext":"Test Comments","dbcolumn":"TEST_COMMENTS","editortype":1,"displayorder":4400}],"status":200,"statusText":"OK","headers":{"content-length":"8265","content-type":"application/json"},"config":{"url":"http://localhost:8000/api/tfn/fields","method":"get","headers":{"Accept":"application/json","Authorization":"Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbl90eXBlIjoiYWNjZXNzIiwiZXhwIjoxNjM5NDA1NDE0LCJqdGkiOiJiNjg1M2NjNDg4NmY0NTdiOGNiNTk2NzFjY2VlOWJiMSIsInVzZXJfaWQiOjQ0MX0.2X715iyhWakQiD5IAA_oUoOME84DIikP04H58t5YHb8"},"baseURL":"http://localhost:8000","transformRequest":[null],"transformResponse":[null],"timeout":5000,"xsrfCookieName":"XSRF-TOKEN","xsrfHeaderName":"X-XSRF-TOKEN","maxContentLength":-1,"maxBodyLength":-1,"transitional":{"silentJSONParsing":true,"forcedJSONParsing":true,"clarifyTimeoutError":false}},"request":{}}

headers.data.forEach((element) => {

lookupObj[element.dbcolumn.toLowerCase()] = element.displaytext;

});

let fieldsArr = [{ field: "sequence", title: "#" }];

for (let key in lookupObj) {

fieldsArr.push({

field: key,

title: lookupObj[key],

});

}

// sheet.setDataSource(dataSource, [

// { field: "Sequence", title: "#" },

// { field: "Campaign_Start_Date", title: "Campaign Start Date" },

// { field: "Brand", title: "Brand" },

// ]);

sheet.setDataSource(dataSource, fieldsArr);

}, []);

return (

<Spreadsheet

rows={rowCount}

toolbar={false}

sheetsbar={false}

sheets={sheets}

ref={MySpreadSheet}

/>

);

};

export default withRouter(SpreadsheetKendo);

[Veselin Tsvetanov]

Could you, please, prepare a sample in StackBlitz where React is supported out of the box:

https://stackblitz.com/

As a side note, I noticed that you are binding the Spreadsheet.Sheet to a DataSource. Doing so after the initial configuration of the widget will entirely clear the Sheet contents (including the custom cell editor). I am not sure whether that is the reason for the observed issue, but it can be related.

[Jatin]

Hi Veselin,

I have uploaded the code on stackblitz

Here is the link - https://stackblitz.com/edit/react-gqmq7r

If you select the A2 cell and click on the editor button you will see the error.

 

Please let me know if you need any other details.

 

Thanks!

[Konstantin Dikov]

For some reason the "getKendoPopup does not return the widget, even though it is bound correctly. After some testing I was able to retrieve the reference to the popup with the following change:

        kendo.bind(el, model);
        dlg = el[0].kendoBindingTarget.target;

Here is the modified example:

• https://stackblitz.com/edit/react-dwzvwa

Hope this helps.

[Jatin]

Hello,

Thanks, it's now working.

I also have another question, let me explain it.

When we open or click the A icon to load the custom editor, the data list is not loaded by default. The user has to type something first and then the list is loaded based on what the user has typed. Can we load the list whenever the user opens or clicks the A icon of the custom editor?

 

Steps to reproduce this issue:

1. Visit https://stackblitz.com/edit/react-vpw3go (example)
2. Comment line no 543 (i.e obj['sequence'] = index + 1;)
3. Click on A2 cell, now click on the A icon to load the custom editor.
4. The input of the custom editor is empty (i.e the data list), it is expected to load the list first instead of loading it after the user has typed in something.

Let me know if you need any other details.

Thanks!

[Veselin Tsvetanov]

Hi Jatin,

The AutoComplete widget has not been designed to return all items upon initial click in its input. If you need to allow the user see all available options initially, you should use the ComboBox widget instead:

" <input data-role='combobox' data-no-data-template='false' data-bind='value: value, source: data'/>" +

The ComboBox has a dropdown arrow button, which allows the user to open the popup list without typing in the input.

Here is a modified version of the StackBlitz sample:

https://stackblitz.com/edit/react-yfuewr