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

Drop down in Kendo UI Grid

24 Answers 162 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Ozinus
Top achievements
Rank 1
Ozinus asked on 22 Mar 2017, 03:38 PM

Ref: http://demos.telerik.com/kendo-ui/grid/editing-custom

 

My implementation saves [object object] in the databases intermittently. Some times it works other time it doesn't work and then I have re-select the item for it to save right. is there anything to look for here..?  

24 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 24 Mar 2017, 09:25 AM
Hello Sadaf,

This is not a known issue and it was not reproduced in our testing scenarios.

I can suggest checking the request which is sent to the server in the network tab to observe if the value is sent correctly.

If sometimes it is not sent as expected please check if there is any pattern when the value is not sent.

If the value is not sent only for new items, I can assume that a default value is not set in the model:

Category: { defaultValue: { CategoryID: 1, CategoryName: "Beverages"} },

If the issue still occurs, please send a fully runnable example reproducing the issue, and I will gladly assist.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Ozinus
Top achievements
Rank 1
answered on 29 Mar 2017, 04:43 PM
It's a nullable field. Why do I need a default value?
0
Ozinus
Top achievements
Rank 1
answered on 29 Mar 2017, 07:24 PM

I have few times to upload solution. It didnt work so I am only sending you fAccountSetupController_UI you can remove _UI from it and add to an MVC project.

The website page with the issue is this: Accounts.cshtml 

Two files for MVC: Accounts.cshtml  + AccountSetupController_UI.cs

Secondly,

The web api controller is: AccountSetupController (its already calling sample data).

Rest of the files AccountSetupController, IAccountsRepository, IBisamDWRespository, Models, SampleDataContext
are part of Web API project.

Lastly, my drop down list uses the 'specialattribution' filed value as text as well as value. The reason is I always save the actual value in the table (not the id like you would expect). The drop down data is only for display purposes not really a look up table.I have tried the conventional way too but it still doesnt work. First time it always saves [object][object]. 

 

Thanks.

0
Stefan
Telerik team
answered on 31 Mar 2017, 08:56 AM
Hello Sadaf,
 
I was not able to reproduce the issue only with the provided files.

Please send a fully runnable example or a live URL where the issue can be observed.

Also, it was mentioned that the issue does not occur all of the time, please advise if there is any specific scenario in which the issue occurs?

I will be expecting the additional information in order to investigate further, thank you in advance.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Ozinus
Top achievements
Rank 1
answered on 03 Apr 2017, 08:11 PM
I have been tying to attach two zip files which are around 100MB in total. PLease advise how as forum doesnt allow more than 2MB.
0
Ozinus
Top achievements
Rank 1
answered on 03 Apr 2017, 08:14 PM
These are the two screen shots... tells you which UI drop down to change. basically when you try to up an empty drop down with a value it send [object object] to the other end.
0
Ozinus
Top achievements
Rank 1
answered on 03 Apr 2017, 11:26 PM

https://drive.google.com/open?id=0B_ghnfZyKlxxQlpTa1RQbGhIN0U

Since I cant attach 100MB files, here is the link for you to download. UI.zip and API.zip. This is runnable project with the issue.

When you select some item from 'special attribution' drop down list. It send [object Object] across and saves it as that in DB. Please see the screen shots too.

 

Thanks.

0
Stefan
Telerik team
answered on 05 Apr 2017, 08:25 AM
Hello Sadaf,

Thank you for sharing the example with us.

The issue occurs because the SpecialAttribution field is set to string in the model, which is converting the object values to the string  [object][object].

Once the type string was removed, the value is sent correctly as object:

SpecialAttribution: { defaultValue: { SpecialAttribution: "ATTRIB_NETTED", SpecialAttribution: "ATTRIB_NETTED" }}

I noticed that then an error occur in the UpdateAccount method of the controller, but this is not directly related to the Kendo UI Grid.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ozinus
Top achievements
Rank 1
answered on 06 Apr 2017, 12:52 PM

OK. Why do I have to remove the type: "string", It is of type string.

Second, It has changes the object graph and now my Web API (methos: UpdateAccount ) doesn't like it.

0
Ozinus
Top achievements
Rank 1
answered on 06 Apr 2017, 07:00 PM

The problem is that payload starts to look different by removing the type: "string"

 

{"PortfolioOldCode":"00H","PortfolioName":"Acadian Fund Limited (EUR)                                                                          ","BaseCurrency":"EUR","PerfStartDate":"2008-03-31T04:00:00.000Z","PerfEndDate":"2010-06-01T04:00:00.000Z","PortfolioId":869,"CombinedPortfolioId":null,"JudicialForm":"A","ValuationFrequency":1,"ValuationType":0,"AttribFlag":0,"ReportingType":null,"AccountType":"Participant                                       ","MFCustFlag":"AAM","FeesManagement":"","Holder2":"","AvailableReturns":"","IncentiveFeeManagement":null,"IncentiveFeeType":"","OtherReportingCurrency":null,"AUMStartDate":"","AUMEndDate":"","SecondPerfStartDate":"","FiscalYearMonthStart":"","CommingledFundId":"117","ActStatus":"1","SpecialAttribution":{"AttId":6,"SpecialAttribution":"ATTRIB_EU_BR"},"Modified":true,"AsOfDate":null,"AlternateAttributionCurrency":null,"KarnoskySinger":null,"FirstUnitValueDate":null,"FirstMarketValueDate":null,"FirstReturnDate":null,"UpdatedBySource":false,"Attrib_Flag":null}

0
Ozinus
Top achievements
Rank 1
answered on 06 Apr 2017, 07:02 PM

And is different when the drop down is is selected second time.Notice the special attribution values is this and the one I posted before.

{"PortfolioOldCode":"00H","PortfolioName":"Acadian Fund Limited (EUR)                                                                          ","BaseCurrency":"EUR","PerfStartDate":"2008-03-31T04:00:00.000Z","PerfEndDate":"2010-06-01T04:00:00.000Z","PortfolioId":869,"CombinedPortfolioId":null,"JudicialForm":"A","ValuationFrequency":1,"ValuationType":0,"AttribFlag":0,"ReportingType":null,"AccountType":"Participant                                       ","MFCustFlag":"AAM","FeesManagement":"","Holder2":"","AvailableReturns":"","IncentiveFeeManagement":null,"IncentiveFeeType":"","OtherReportingCurrency":null,"AUMStartDate":"","AUMEndDate":"","SecondPerfStartDate":"","FiscalYearMonthStart":"","CommingledFundId":"117","ActStatus":"1","SpecialAttribution":{"AttId":6,"SpecialAttribution":"ATTRIB_EU_BR"},"Modified":true,"AsOfDate":null,"AlternateAttributionCurrency":null,"KarnoskySinger":null,"FirstUnitValueDate":null,"FirstMarketValueDate":null,"FirstReturnDate":null,"UpdatedBySource":false,"Attrib_Flag":null}

0
Ozinus
Top achievements
Rank 1
answered on 07 Apr 2017, 03:48 PM
OK. I have come up with the solution and it saves correctly. But it sill displays [object object] on the UI. This is really urgent now...???
0
Alex Hajigeorgieva
Telerik team
answered on 10 Apr 2017, 11:21 AM
Hello Sadaf,

I am glad to hear that you have found the correct way to handle things on the server side. Now straight over to your question:

To display the current value of the SpecialAttribution field correctly(instead of [Object object]), add this to the column template of the Kendo UI Grid:

template: "#= SpecialAttribution.SpecialAttribution #",

You could debug templates easily by placing "# console.log(data)#" in them or defining them as functions where functions are allowed. It is just a tip for the future and is proven to save a lot of time in the long run.

Another thing which I suggest is to remove the data source type: json:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-type

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Ozinus
Top achievements
Rank 1
answered on 10 Apr 2017, 12:38 PM

It doesn't work. 

 

Uncaught TypeError: Cannot read property 'SpecialAttribution' of null
    at eval (eval at compile (kendo.all.js:194), <anonymous>:3:648)
    at init._rowsHtml (kendo.all.js:49999)
    at init._renderContent (kendo.all.js:50557)
    at init.refresh (kendo.all.js:50433)
    at init.d (jquery.min.js:2)
    at init.trigger (kendo.all.js:124)
    at init._process (kendo.all.js:6938)
    at init.success (kendo.all.js:6683)
    at success (kendo.all.js:6610)
    at Object.n.success (kendo.all.js:5599)

0
Ozinus
Top achievements
Rank 1
answered on 10 Apr 2017, 12:45 PM
Can you please share the solution which has already been tested and functional on the code I provided. 
0
Ozinus
Top achievements
Rank 1
answered on 10 Apr 2017, 12:45 PM
Can you please share the solution which has already been tested and functional on the code I provided. 
0
Ozinus
Top achievements
Rank 1
answered on 10 Apr 2017, 02:30 PM

I am not sure why it is conditional but here is the solution below, I had to do the conditional dancing on the server side as well.

   template: function(dataItem) {
                        if (dataItem.SpecialAttribution == null)
                            return "";
                        if (dataItem.SpecialAttribution == "[object Object]")
                            return dataItem.SpecialAttribution.SpecialAttribution;
                        else
                            return dataItem.SpecialAttribution;
                    },

0
Viktor Tachev
Telerik team
answered on 12 Apr 2017, 11:08 AM
Hi,

I am glad that the feature is up and running. Thank you for sharing the resolution with the community.


Regards,
Viktor Tachev
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Ozinus
Top achievements
Rank 1
answered on 12 Apr 2017, 05:40 PM

Since you have the code sample I have one more question.

I wanted to use the existing grid but a new API call to refresh the data. Table/grid schema doesn't change but the data will be new. whats the right way to accomplishing this. So say, I call a new web api and wanted to refresh the data in the existing grid by clicking on a button. Thx! 

0
Stefan
Telerik team
answered on 17 Apr 2017, 05:57 AM
Hello,

Apologies for the delayed response, we are short staff due to a national holiday.

This can be achieved using the data method of the dataSource.

For example, once the button is clicked, make a new call to the API and store the data in a variable, then pass this variable to the data method:

http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#methods-data

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Ozinus
Top achievements
Rank 1
answered on 28 Apr 2017, 06:57 PM

Thanks for the above.

I have another question which is security related. I have the following code snippet for the data grid population.

  dataSource: {
                autoSync: true,
               // type: "json",
                transport: {
                    read: {
                        url: serviceEndPointBase + "v1/AccountSetup/GetNewAccounts",
                        type: "get",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader('Authorization', window.auth);
                        },
                    },
                    update: {
                        url: serviceEndPointBase + "v1/AccountSetup/UpdateNewAccount",
                        type: "post",
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader('Authorization', window.auth);
                        },
                    },
                    parameterMap: function (data, type) {
                        return kendo.stringify(data);
                    }
                },

The issue I am having with Window authentication it doesn't work and keep getting 401 error with GetNewAccounts call. It is calling a web api. And client lives in a different server and web api on a  different server. The ajax calls usinq jquery are working just fine. Is there a known issue with the grid. Do you have a solution for it ..?

 

0
Stefan
Telerik team
answered on 02 May 2017, 08:42 AM
Hello,

This is not a known issue and it was not reproducible in our testing scenarios.

Could you please check if the authorization token is present in the request.

If they are, then the Kendo UI has no control over how they are processed as it is only responsible for sending it with the request.

If they are not part of the request, please send a runnable example demonstrating this and I will investigate further.

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data (charts) and form elements.
0
Ozinus
Top achievements
Rank 1
answered on 02 May 2017, 12:10 PM
You have the code already. There is this link posted in the thread. The authorization token is not present.
0
Stefan
Telerik team
answered on 03 May 2017, 11:28 AM
Hello,

I used the previously provided example and the authorization header is sent as expected:



Also, I can suggest checking the window.auth inside the beforeSend event to ensure that it contains the correct value.

Additionally, for JSONP request, the dataType property have to be set manually to "":

transport: {
                  read: {
                      url: serviceEndPointBase + "v1/AccountSetup/GetNewAccounts",
                      type: "get",
                      dataType:"json"
                      beforeSend: function (xhr) {
                          xhr.setRequestHeader('Authorization', window.auth);
                      },
                  }

Regards,
Stefan
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Ozinus
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Ozinus
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Viktor Tachev
Telerik team
Share this question
or