Telerik Kendo UI Grid - Inline editing of composite object as a single column with multi-field widget

5 posts, 0 answers
  1. Ahmed
    Ahmed avatar
    3 posts
    Member since:
    Jan 2017

    Posted 10 Jan 2017 Link to this post

    We are considering kendo ui to replace GWT in our ERP product. The main motivator is kendo grid. We have many composite objects that are rendered and edited as a single column. The column editor will contain multiple fields.
    An example: In sales invoice lines, the product column should display product code (autocomplete field), product name (Link), and a button to open products browser (a modal dialog with search fields and a grid that displays products along with images, names, available quantities, etc).After selecting a product in the products browser the grid should update the product in the row that requested the browser.
    I think I know how to implement the products browser. But the composite editor is the one I do not know how to implement.
    My question is: how can I edit a composite object in a single grid column using a composite widget? And we need inline editing not popup editors.
    I have been browsing the demos to find a close example but could not find any. My search was "kendo grid composite object custom editor".
    Attached two screen shots of our current ui that uses GWT.
  2. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 12 Jan 2017 Link to this post

    Hello Ahmed,

    Yes, you can easily edit complex fields - for your convenience I created small example which you can use as baseline to achieve the desired behavior:

    Regards,
    Vladimir Iliev
    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. Ahmed
    Ahmed avatar
    3 posts
    Member since:
    Jan 2017

    Posted 12 Jan 2017 Link to this post

    Hello Valdimir,

    Thanks for your reply

    Your answer was to the point, but I asked the wrong question :)

    What I want to achieve is set the value of an object using an editor. Not edit individual properties of an object.

    In the posted example, you have edited the CategoryID and CategoryName properties of the Category object. I changed the template to the following: "#=Category.CategoryName# - Description: #=Category.Description#"

    Now, whenever I add a new row, the description property is "undefined". What I need is to have an editor set a whole object, not individual properties of that object

    To further clarify what I need, currently in our ERP system when you want to change category in a line, you click it and start typing the product code and then press enter, the system searches for a product with the same code and fetches an object similar to this:

    var product = {id:123,code:'abc',arabicName='name1',englishName:'name2',imgId:'0xFFFF0001596DF29E4F000400FF20128D'}

    I want to set that whole object "as it is" in the product property of the currently edited row

     

  4. Ahmed
    Ahmed avatar
    3 posts
    Member since:
    Jan 2017

    Posted 15 Jan 2017 Link to this post

    I was able to accomplish what I needed through the save event. Inside the save event, I search for the value provided in the editor, If any category was found in index (value-1) or with the same name, I set the category directly in the model

    This is the snippet that contains what I did, http://dojo.telerik.com/OwoVET

    Is this a correct approach?

  5. Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2194 posts

    Posted 16 Jan 2017 Link to this post

    Hi Ahmed,

    From the last replies it seems that better fit would be using the ComboBox widget which already implements search functionality, own dataSource and working with objects. Similar demo can be found in the Grid examples:

    Regards,
    Vladimir Iliev
    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