Drop down in Kendo UI Grid

25 posts, 0 answers
  1. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 22 Mar 2017 Link to this post

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

  2. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 24 Mar 2017 Link to this post

    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 visualization (charts) and form elements.
  3. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 29 Mar 2017 in reply to Stefan Link to this post

    It's a nullable field. Why do I need a default value?
  4. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 29 Mar 2017 in reply to Ozinus Link to this post

    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.

  5. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 31 Mar 2017 Link to this post

    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 visualization (charts) and form elements.
  6. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 03 Apr 2017 in reply to Stefan Link to this post

    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.
  7. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 03 Apr 2017 Link to this post

    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.
  8. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 03 Apr 2017 Link to this post

    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.

  9. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 05 Apr 2017 Link to this post

    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.
  10. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 06 Apr 2017 in reply to Stefan Link to this post

    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.

  11. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 06 Apr 2017 in reply to Ozinus Link to this post

    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}

  12. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 06 Apr 2017 Link to this post

    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}

  13. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 07 Apr 2017 Link to this post

    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...???
  14. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    1017 posts

    Posted 10 Apr 2017 Link to this post

    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 visualization (charts) and form elements.
  15. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 10 Apr 2017 in reply to Alex Hajigeorgieva Link to this post

    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)

  16. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 10 Apr 2017 in reply to Ozinus Link to this post

    Can you please share the solution which has already been tested and functional on the code I provided. 
  17. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 10 Apr 2017 in reply to Ozinus Link to this post

    Can you please share the solution which has already been tested and functional on the code I provided. 
  18. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 10 Apr 2017 Link to this post

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

  19. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2480 posts

    Posted 12 Apr 2017 Link to this post

    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.
  20. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 12 Apr 2017 in reply to Viktor Tachev Link to this post

    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! 

  21. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 17 Apr 2017 Link to this post

    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 visualization (charts) and form elements.
  22. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 28 Apr 2017 in reply to Stefan Link to this post

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

     

  23. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 02 May 2017 Link to this post

    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 visualization (charts) and form elements.
  24. Ozinus
    Ozinus avatar
    17 posts
    Member since:
    Feb 2017

    Posted 02 May 2017 in reply to Stefan Link to this post

    You have the code already. There is this link posted in the thread. The authorization token is not present.
  25. Stefan
    Admin
    Stefan avatar
    2893 posts

    Posted 03 May 2017 Link to this post

    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 "json":

    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.
Back to Top