In cell editing for Column Template

8 posts, 0 answers
  1. Sohail
    Sohail avatar
    8 posts
    Member since:
    Sep 2017

    Posted 10 Oct Link to this post

    Hi, I have a grid with column templates where each column hold two or more values.I'm trying to achieve 'in cell' edit for such templates.

    I would like to request if post any sample here to achieve in cell editing for a column template.I'm attaching a snapshot of how my grid looks like. Thanks

  2. Sohail
    Sohail avatar
    8 posts
    Member since:
    Sep 2017

    Posted 10 Oct in reply to Sohail Link to this post

    Posting my sample grid here again.
  3. Sohail
    Sohail avatar
    8 posts
    Member since:
    Sep 2017

    Posted 10 Oct in reply to Sohail Link to this post

    I'm posting my  grid here again.
  4. Sohail
    Sohail avatar
    8 posts
    Member since:
    Sep 2017

    Posted 10 Oct Link to this post

    Please find the attached grid here.
  5. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 12 Oct Link to this post

    Hello, Sohail,

    I can assume that there was an issue with attaching the Grid code if possible please try again as there was probably an issue with the server or the internet connection.

    As for editing the Grid with the template, please have in mind that the column template is only a presentation layer. When the Grid is in edit mode it will render one editor based on the field bound to the edited column.

    Please provide more details for the desired result and we will try to provide a suggestion best suited for it.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Sohail
    Sohail avatar
    8 posts
    Member since:
    Sep 2017

    Posted 13 Oct in reply to Stefan Link to this post

    Hi Stefan,

    Thanks for your response.My code looks something like below.I want to apply in cell editing to the columns QUANTITY and SALES which use a column template and each cell holds two values. I want to achieve two things

    a.I would like to apply in cell edit to both the values contained in each cell.

    b.Also would like to know the events that i can use inside a text box so that the change in value of one text box can impact the value of another text box  .For example: when i change a value in the QUANTITY column, it should  effect the value in SALES column as well.

     $("#quantity").kendoGrid({
                    dataSource: {
                        transport: {
                            update: {
                                url: "/api/Quantity",
                                type: "POST",
                                dataType: "json"
                            },
                            create: {
                                url: "/api/Quantity",
                                type: "PUT",
                                dataType: "json"
                            }
                        },
                        parameterMap: function(options, operation) {
                         
                        },
                        schema: {
                            model: {
                               
                                fields: {
                                                                   
                                    SALES: { type: "Number", defaultValue: 0,  editable: true, nullable: false, validation: { required: true, min: -99999999999999.99, max: 99999999999999.99 } },
                                    QUANTITY_PREVIOUS: { type: "Number", defaultValue: 0,  editable: false, nullable: false, validation: { required: true, min: -99999999999999.99, max: 99999999999999.99 } },
                                    SALES_PREVIOUS: { type: "Number", defaultValue: 0,  editable: false, nullable: false, validation: { required: true, min: -99999999999999.99, max: 99999999999999.99 } },
                                    QUANTITY: { type: "Number", defaultValue: 0,  editable: false, nullable: false, validation: { required: true, min: -99999999999999.99, max: 99999999999999.99 } },
                                    
                            }
                        },
                    },
                    toolbarTitle: "Total Sales",
                    toolbar:["save","cancel"],
                    groupable: false,
                    sortable: true,
                    height: 500,
                    editable: true,
                    autoSync:true,
                      

                    columns:  [
                                { field: "", title: "", lockable: true, width: 30, 
                              template: "<div>Current:</div><div>Previous:</div>", format: null, attributes: { class: " text" } },
                                
                          { field: "QUANTITY", title: "Actual Qty", lockable: true,editable:true, width: 40, 
                           template: "<div><input type='text' id='Test' name='Act_Qty' value='#=(QUANTITY_PREVIOUS+QUANTITY)#'/></div>
                                     <div><input type='text' name='Prev_Qty' value='#=(QUANTITY_PREVIOUS)#'/></div>", format: null, attributes: { class: " text-right "}},

                           { field: "SALES", title: "Actual Sales", lockable: true,editable:true, width: 40, 
                                    template: "<div><input type='text' id='Test' name='Act_sales' value='#=(SALES_PREVIOUS+SALES)#'/></div>
                                        <div><input type='text' name='Prev_Sales' value='#=(SALES_PREVIOUS)#'/></div>", format: null, attributes: { class: " text-right" 
    }},
                               
                    ],
                });

     

     

  7. Stefan
    Admin
    Stefan avatar
    1394 posts

    Posted 17 Oct Link to this post

    Hello, Sohail,

    Thank you for the provided code.

    Regarding the questions:

    1) One column will make only one editor for the field, if there are two fields shown in the template, only the main one could be edited, using the built-in editing of the Grid. A custom editor can be added, and the binding has to be done manually:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-columns.editor

    2) I can suggest using the built-in Edit event of the Grid, then use the e.contaier, to find the input inside the container and attach an event listener to it:

    https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-edit

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  8. Sohail
    Sohail avatar
    8 posts
    Member since:
    Sep 2017

    Posted 18 Oct in reply to Stefan Link to this post

    Thanks a lot Stefan.That helps
Back to Top