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

Accessing certain grid detail when adding children

0 Answers 86 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Daniel
Top achievements
Rank 1
Daniel asked on 13 Apr 2012, 07:36 AM

 Hi,
 
 I am using kendo ui, and having a problem with kendo grid. 
 The grid is used with a datasource and has a structure like:

var productsGrid = $("#productsGrid").kendoGrid({
    dataSource: productsDataSource,
    scrollable: {
        virtual: true
    },
    sortable: true,
    selectable: false,

    detailTemplate: kendo.template($("#template").html()),
    detailInit: detailInit,
    columns:
        [
            { width: "80px", template: "<a href='javascript:deletAssetClass(\"#=uid#\")'>delete</a>" },
            { field: "Name", title: "Name" }
        ]
});
 where productDataSource is 

var productDataSource  
= new kendo.data.DataSource({
    transport:
                {
                    read: {
                        url: "api/Products",
                        contentType: "application/json; charset=utf-8",
                        dataType: "json"
                    }
                },
    schema: {
        model: Product
    }
}); 

 and Product schema is :
var AssetClass = kendo.data.Model.define({
    id: "Id",
    fields: {
        Id: { editable: false, nullable: true },
        Name: { editable: false, nullable: true },
}
});

I have a button below the grid, and when click it I call in javascript:
productsGrid.add({ id: "prodId", Name: "ProductName"});
productsGrid.sync();

 and a row with the new product is added to the grid on the UI. That is the expected result (to be displayed only on gui, a SAVE in the database will be made with all added products when pressing another button below the grid), and it works.

 The problem arises when I want to add (the same way) a item to this product. The item is described below, in the detail of the grid.

 Template is: 
<script type="text/x-kendo-template" id="template">
    <div class="items"/>
    Add new item to product
    <br/>
    Type:
    <div class="securityType"></div> 
    <input id="itemHiddenImput" type="hidden" value="${data.productId}" />  // <-------------- 
    <input id="itemName" type="text" style="width=60px;"/>
    <button onclick="addItem();"> Add Item</button
</script>

 I have another source for the items of the products of course, but when calling AddItem() in javascript, I need somehow to know to what product this item belongs (in which product I want to add it). 
 Here comes the question: I couldn't find a way to get the corresponding product to which I add the item, when pressing the button on the template, when calling addItem. 

 Does anyone have a idea ? 
 Thank you

No answers yet. Maybe you can help?

Tags
Grid
Asked by
Daniel
Top achievements
Rank 1
Share this question
or