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

How does the modal popup's schema ID work?

11 Answers 486 Views
Grid
This is a migrated thread and some comments may be shown as answers.
NHJ
Top achievements
Rank 1
NHJ asked on 07 Dec 2019, 05:53 PM

I have a grid of parent windows and a popup modal B grid of child windows.

The two A and B grids use different database tables, but the configured column names (contents) are the same.
That is, the same table with only a different table name.

I do the dataSource.Insert () of the selected row from the modal popup B grid to the parent A grid and execute the Sync () method.

However, the success of this operation depends on the schema ID of the modal popup B grid.
If the schema ID of the modal popup B grid is an item that exists in the actual field (DB Select XML) of A grid, A grid's Sync () method does not consider it a new item.

Because of this, if you change the schema ID to any value that isn't in the actual field, it will be considered new.

What is the nature of the schema ID? I want to know exactly what value I need to specify the schema ID.

 

ex) Select Query : UserID, UserPW, etc... (select UserID, UserPW from tb_user(A) / tb_user2(B))
"B Grid" Schema ID : "UserID"
result : Rows added with dataSource.Insert () will not be considered new by the Sync() method.

Select Query : UserID, UserPW, etc... (select UserID, UserPW from tb_user(A) / tb_user2(B))
"B Grid" Schema ID : "PleaseSync" (It didn't really matter what value.)
result : The rows added with dataSource.Insert () are executed by the Sync() method to recognize the new item.

 

 

schema: {
    data : 'list' ,
    model: {
        id: 'prodNo',
        fields: {
            orderDSeq: { editable: false },
            orderNo: { editable: false },
            prodNo: {type: 'string'},
            mtrlQt: {type: 'string'},
            prodSize: {type: 'string'},
            prodUnit: {type: 'string'},
            orderQnt: {type: 'string'},
            presentStkQnt: {type: 'string'},
            prodPrice: {type: 'string'},
            totalPrice: {type: 'string'},
            spplLimitDt: {type: 'string'},
            reMark: {type: 'string'}

 

Above is the schema of A grid, And

 

schema: {
    data: 'list',
    model: {
        id: 'key',
        fields: {
             prodNm: {type: 'string'},
             orderNo: {type : 'string'},
             prodNo: { type: 'string' },
             mtrlQt: { type: 'string' },
             prodSize: { type: 'string' },
             sStk: { type: 'string' },
             prodPrice: { type: 'string' }

 

Above is the modal popup schema.

 

If you change id: key to id: prodNm, Async's sync () method no longer detects the change.

 

11 Answers, 1 is accepted

Sort by
0
Alex Hajigeorgieva
Telerik team
answered on 10 Dec 2019, 11:45 AM

Hello, Nam,

The Kendo UI DataSource schema model id is used to check if the model is new internally. If a model is added to the data source and it already has a populated Id field (regardless of the property name), it will not consider the item as new, it would consider it as an existing item and will attempt to call the Update operation during sync.

https://docs.telerik.com/kendo-ui/api/javascript/data/model/methods/isnew

So if you are dropping an item from one grid to another and wish for the receiving data source to see that model item as a new one, then you should either delete the property value which is the receiving data source schema model id or set it to a default (0 for numbers, empty string for strings and so on).

I hope this helps, let me know in case you need further information.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
NHJ
Top achievements
Rank 1
answered on 10 Dec 2019, 12:38 PM
First thank you for the answer.

But unfortunately it's a bit different from what I want.

The answer says "delete existing grid items", but I don't want to delete them.

"Existing Grid Data + Newly Added Data"
I hope it will be organized in the form.

In other words, new data is continuously added to existing data.

How is this possible?
0
Alex Hajigeorgieva
Telerik team
answered on 10 Dec 2019, 01:11 PM

Hi, Nam,

There is no need to delete existing grid items - the suggestion was to delete the value of the [id] property in order to introduce the model as new, for example:

Grid 1 data source data: [{ name:  "John", id: 1}]
Grid 2 data source data: [{ name:"Jane, id: 1}]

If you want to move "John" from grid 1 to grid 2 - > { name:  "John", id: 1 }  - the id has a value, it means it is not new so Grid 2 will find the item with id 1 and will update it so you will end up with:

Grid 1 data source data: [{ name:  "John", id: 1}]
Grid 2 data source data: [{ name:"John, id: 1}]

If you want to add a new item, it should have no id for example -> { name:  "John", id: 0 } OR { name:  "John", id: null }

In case this is not the desired behaviour, please explain what is and elaborate on the final planned functionality and behaviour, a runnable example can be very helpful as well.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
NHJ
Top achievements
Rank 1
answered on 10 Dec 2019, 01:48 PM

Sorry. Maybe that's right, but I don't think it's the same as my intention.

I'll attach a picture and a file below. (Zip : .png / source )

 

I'll explain again.

Let's list some conditions first.
1. A grid is a parent window, B grid is a modal pop-up window.

2. Grid A and Grid B try CURD on different tables, but the fields that each table comprises are the same.

3. The schema ID described below corresponds to the schema ID of the B grid.

======

Step1. Open the parent grid.

Step2. Call grid B (modal popup) via the small button to the right of the select and save buttons.

Step3. Select the desired row and press the Save button.

Step4. The rows selected through the DataSource.Insert () method are added to the A grid.

Step5. Press Save button to call saveChanges () (Sync ()) method to proceed CURD and finish the Step.


My problem is happening in the last Step5,

The cause is presumed to be the schema ID set in grid B.

If one of the data fields retrieved through Read () in grid A (ex) Select UserID, UserPW from User / Result Field: UserID, UserPW)

(Ex) Schema ID: UserID or UserPW)

The saveChanges () method adds a new row to the grid via DataSource.Insert (), but does not detect it and does nothing.

 

If I change the schema ID to something like "pleaseSchema", the saveChanges () command in the A grid is successful now.

It is no longer possible to manipulate data with CURD on B grids.
(Perhaps success in A Grid is an error, but I think it looks like success.)

In other words, you need to select only one data operation, either A grid or B grid.


Was it enough explanation?

If you need another explanation, I'll write more.

0
NHJ
Top achievements
Rank 1
answered on 10 Dec 2019, 02:07 PM
Here is what my selected row is passing from dataSource.Insert (idx, o) to o (object):

{"stdPlantSeq": 51, "plantCd": "PLANT_CD_51", "plantNm": "Manual process", "line": "L6", "prodSize": "200m", "makeNo": "20000", "makeCompNm ":" My Corporation "," buyDt ":" 2015-07-01T15: 00: 00.000Z "," buildDt ":" 2014-08-28T15: 00: 00.000Z "," rank ":" CCC "," sal ":" 20000 "," reMark ":" "," useYn ":" Y "," updatedAt ": null," updatedBy ": null," createdAt ":" 2019-12-10T14: 02: 31.000 + 0000 "," createdBy ":" system "}
... (array)

Only with that information is dataSource.insert ().
It does not contain any information about the schema ID.
However, the schema ID of grid B obviously affects CURD operations.

That's what I'm most curious about.
0
Alex Hajigeorgieva
Telerik team
answered on 12 Dec 2019, 11:52 AM

Hello, Nam,

Can you confirm that the relevant code is in ~\report\assets\js\view\mes\stdInfoMgt\std-plantMgt.js?

In it I was able to find the two data sources with the following id field names:

id: 'stdPlantSeq', // gridView01

id: 'plantCd' // gridView02

When calling insert the data source will create a new Model if the added item is not already an instance of Model:

You can find the function in kendo data at present located here:

https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.data.js#L2754-L2772

insert: function(index, model) {
            if (!model) {
                model = index;
                index = 0;
            }

            if (!(model instanceof Model)) {
                model = this._createNewModel(model);
            }

            if (this._isServerGrouped()) {
                this._data.splice(index, 0, this._wrapInEmptyGroup(model));
            } else {
                this._data.splice(index, 0, model);
            }

            this._insertModelInRange(index, model);

            return model;
        },

The Kendo UI DataSource would create a new model and it will use the internal reader that it has. The reader has access to the schema and so it also has access to the id and this is how it knows about each of these properties - it "knows" which one is an id and what are the rest of its data types.

https://github.com/telerik/kendo-ui-core/blob/master/src/kendo.data.js#L2742-L2752

_createNewModel: function(model) {
            if (this.reader.model) {
                return new this.reader.model(model);
            }

            if (model instanceof ObservableObject) {
                return model;
            }

            return new ObservableObject(model);
        },

Now this is why the recommendation when adding new records

// adding new model to gridView01 do not add the stdPlantSeq field (if you want the model to be seen as new)
var newModelToAdd = { "plantCd": "PLANT_CD_51", "plantNm": "Manual process", "line": "L6"}
gridView01.dataSource.insert(idx, newModelToAdd );

// adding new model to gridView02 do not add the plantCd field (if you want the model to be seen as new)
var newModelToAdd = {"stdPlantSeq": 51, "plantNm": "Manual process", "line": "L6"}
gridView02.dataSource.insert(idx, newModelToAdd );

I hope this explains it better.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
NHJ
Top achievements
Rank 1
answered on 13 Dec 2019, 12:32 AM

Sorry. I'm really sorry. I did not understand what I explained.

The first thing I need is "How do I behave as I intended?" I think.
The internal operation process can be known later.

First of all I know,
1. An internal function that determines whether a model is new or existing

2. And judging 1 by schema ID


I will sort out exactly what I want to ask.

1.Please tell me the code I need to change so that it works as intended.

2. Why does Grid A's saveChanges () method consider the new model to be the dataSource.insert () data only when I change the Grid B (modal popup) schema ID to "asdf"?

2-1. Also, if you write a schema ID that is identical to the actual field in A grid, please tell us why sync () treats it as an existing model.


please..

 

 

 

0
Accepted
Alex Hajigeorgieva
Telerik team
answered on 16 Dec 2019, 04:13 PM

Hello, Nam,

Please find the answers to your questions below:

 

1.Please tell me the code I need to change so that it works as intended.

 

The code that is visible in the video we received is different than the one that we have. But you need to add items to the grid, add them WITHOUT an Id field and this will solve the problem. I created a runnable example that demonstrates the same behaviour as you have described.

https://dojo.telerik.com/@bubblemaster/AmOQopAQ/3

So, to fix this, remove the id field value before insert() in the data source, I think this happens here in the code that we have:

 

 addRecord: function(data){
            /*e.preventDefault();*/
            console.log("add Record :   " + JSON.stringify(data));
            var grid = $('#grid-view-01').data("kendoGrid");
            $.each(data, function(idx, o){
                о.stdPlantSeq = null;
                grid.dataSource.insert(idx, o);
                console.log(idx + "번 찍히는중 " + o + "가 들어있음");
            });
        },

 

 

2. Why does Grid A's saveChanges () method consider the new model to be the dataSource.insert () data only when I change the Grid B (modal popup) schema ID to "asdf"?

 

Only models WITHOUT an ID are considered new. Because the id is defined as "asdf" and there is no asdf value in the model - it is considered as new. But when we insert a model with id "stdPlantSeq" and the model has stdPlantSeq  = "something" - it is not empty and it is not considered new.

2-1. Also, if you write a schema ID that is identical to the actual field in A grid, please tell us why sync () treats it as an existing model.

When an Id is defined, it means the model is not new, it should be considered as an existing model.

The existence of the Id field is the only way to distinguish if the operation is Create or Update.

  • Id Exists -> Update
  • No Id -> Create

I hope this answers your questions.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
NHJ
Top achievements
Rank 1
answered on 17 Dec 2019, 01:02 AM
I understand your words a bit.

That is, even if new data is inserted () in an existing grid, if the data has a schema ID, it is not recognized as a new model.

Is that right?

But unfortunately, as you indicate o.stdPlantSeq = null; I tried but still
It is not recognized as a new model.

The value was correctly changed to null and then inserted ().

Is this the only correct solution?


Also, I could not check because I could not access the DOJO site.

This is Korea, and please check if there are any restrictions on access.
0
NHJ
Top achievements
Rank 1
answered on 17 Dec 2019, 01:06 AM
Oh, I tried a different way to get a hint from your words.

It wasn't "o.stdPlantSeq = null;".

"delete o.stdPlantSeq;" Was correct.

Instead of making it null, you had to delete the key itself.

Thank you so much for your long help so far.
0
Alex Hajigeorgieva
Telerik team
answered on 17 Dec 2019, 08:01 AM

Hi, Nam,

The Dojo could be blocked by the firewall or some rules set in the network that you are accessing.

We had cases like this and they can be solved by the network security team in your company if they add a rule to bypass the TLS decryption for sites under kinvey.com. We can look into it if you like. To be certain what is causing the lack of access, we would need some network monitor log (Telerik Fiddler for example) to capture the network requests and responses and send it to use for further investigation.

Alternatively, when you write to us, let us know that Dojo is not accessible and we can send you an HTML file. I am attaching the HTML file from the Dojo for your reference here.

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
NHJ
Top achievements
Rank 1
Answers by
Alex Hajigeorgieva
Telerik team
NHJ
Top achievements
Rank 1
Share this question
or