Drop down in Kendo UI Grid

[Ozinus]

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..?  

[Stefan]

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

[Ozinus]

It's a nullable field. Why do I need a default value?

[Ozinus]

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.

[Stefan]

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

[Ozinus]

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.

[Ozinus]

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.

[Ozinus]

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.

[Stefan]

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

[Ozinus]

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.

[Ozinus]

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}

[Ozinus]

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}

[Ozinus]

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...???

[Alex Hajigeorgieva]

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

[Ozinus]

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)

[Ozinus]

Can you please share the solution which has already been tested and functional on the code I provided. 

[Ozinus]

Can you please share the solution which has already been tested and functional on the code I provided. 

[Ozinus]

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;
                    },

[Viktor Tachev]

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

[Ozinus]

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! 

[Stefan]

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

[Ozinus]

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 ..?

 

[Stefan]

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

[Ozinus]

You have the code already. There is this link posted in the thread. The authorization token is not present.

[Stefan]

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