I use a ribon menu and would like to dynamic add tool-tipping, how can I?

Here is my code example:

Code:

<div id="rr" style="width: 700px;"></div>
<script>

$(function () {
var data = {
tabs: [{
title: 'Home'
, tooltip: 'Welcome to the home menu'
, groups: [{
title: 'Clipboard'
, tools: [{
type: 'toolbar'
, tools: [{
name: 'paste'
, tooltip: 'Paste stuff'
, text: 'Paste'
, iconCls: 'icon-paste-large'
, iconAlign: 'top'
, size: 'large'
}]
}, {
type: 'toolbar'
, dir: 'v'
, tools: [{
name: 'cut'
, tooltip: 'Cut stuff'
, text: 'Cut'
, iconCls: 'icon-cut'
, iconAlign: 'left'
, size: 'small'
}, {
name: 'copy'
, tooltip: 'Copy stuff'
, text: 'Copy'
, iconCls: 'icon-copy'
, iconAlign: 'left'
, size: 'small'
}, {
name: 'format'
, tooltip: 'Format stuff'
, text: 'Format'
, iconCls: 'icon-format'
, iconAlign: 'left'
, size: 'small'
}]
}]
}, {
title: 'other title'
, tools: [{
type: 'toolbar'
, tools: [{
width: '200px'
}]
}]
}]
}]
}


$('#rr').ribbon({
data: data
});
});
</script>

I want to add a layout component to the panel and put the tools in the north panel, the existing combotree into the center and some buttons in the south, how can this be done?

I need to add a toolbar to an editor of type combotree in the DataGrid Inline Editing example. Can you please provide a code example how to do this using java script? The editor of type combogrid works fine.

Code:

<table id="tt"></table>
<script>
var products = [
{ productid: 'FI-SW-01', name: 'Koi' },
{ productid: 'K9-DL-01', name: 'Dalmation' },
{ productid: 'RP-SN-01', name: 'Rattlesnake' },
{ productid: 'RP-LI-02', name: 'Iguana' },
{ productid: 'FL-DSH-01', name: 'Manx' },
{ productid: 'FL-DLH-02', name: 'Persian' },
{ productid: 'AV-CB-01', name: 'Amazon Parrot' }
];
var productfamilies = [{
"id": "a",
"text": "Animals",
"iconCls": "icon-save",
"children": [{
"id": "t",
"text": "Tame",
"checked": true,
"children": [{
"id": "n",
"text": "No legs",
"checked": true
}, {
"id": "s",
"text": "Some legs",
"state": "closed"
}]
}, {
"id": "w",
"text": "Wild",
"state": "open",
"attributes": {
"url": "/demo/book/abc",
"price": 100
},
"children": [{
"id": "f",
"text": "Four legs",
"checked": true
}, {
"id": "o",
"text": "Other legs",
"state": "closed"
}]
}]
}, {
"id": "p",
"text": "Plants",
"state": "open",
"children": [{
"id": "g",
"text": "Green"
}, {
"id": "b",
"text": "Brown"
}]
}];

var data = {
"total": 28, "rows": [
{ "productid": "FI-SW-01", "productname": "Koi", "productfamilyid": "a", "productfamilyname": "Animals", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "productname": "Dalmation", "productfamilyid": "t", "productfamilyname": "Tame", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "productfamilyid": "n", "productfamilyname": "No legs",  "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "productfamilyid": "s", "productfamilyname": "Some legs", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
{ "productid": "RP-LI-02", "productname": "Iguana", "productfamilyid": "w", "productfamilyname": "Wild", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
{ "productid": "FL-DSH-01", "productname": "Manx", "productfamilyid": "f", "productfamilyname": "Four legs", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
{ "productid": "FL-DSH-01", "productname": "Manx", "productfamilyid": "o", "productfamilyname": "Other legs", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
{ "productid": "FL-DLH-02", "productname": "Persian", "productfamilyid": "p", "productfamilyname": "Plants", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
{ "productid": "FL-DLH-02", "productname": "Persian", "productfamilyid": "a", "productfamilyname": "Animals", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "productfamilyid": "t", "productfamilyname": "Tame", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
]
};

var columns = [
{ field: 'itemid', title: 'Item ID', width: 60 },
{
field: 'productid', title: 'Product', width: 100,
formatter: function (value, row, index) {
// console.log(index);
return row.productname || value;
},
editor: {
type: 'combogrid',
options: {
panelWidth: 400,
columns: [[
{ field: "productid", title: "productid", width: 100 }
, { field: "name", title: "name", width: 200 }
]],
idField: 'productid',
textField: 'name',
data: products,
required: true,
toolbar: [{ iconCls: 'icon-save' }, { text: "<div id='abc'>My menu</div>" }]
}
}
},
{
field: "productfamilyid", title: "productfamilyid", width: 100,
formatter: function (value, row,index) {
// console.log(row);
if (row) {
return row.productfamilyname;
} // else return value;
},
editor: {
type: 'combotree',
options: {
// idField: "id",
// textField: "text",
panelWidth: 400,
data: productfamilies,
required: true,
toolbar: [{ iconCls: 'icon-save' }, { text: "<div id='abc'>My menu</div>" }]
}
}
},
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox' },
{ field: 'attr1', title: 'Attribute', width: 180, editor: 'text' },
{
field: 'status', title: 'Status', width: 50, align: 'center',
editor: {
type: 'checkbox',
options: {
on: 'P',
off: ''
}
}
},
{
field: 'action', title: 'Action', width: 80, align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
return s + c;
} else {
var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';
return e + d;
}
}
}
];



$(function () {
$('#tt').datagrid({
title: 'Editable DataGrid',
iconCls: 'icon-edit',
width: 760,
height: 250,
singleSelect: true,
idField: 'itemid',
data: data,
columns: [columns],
onEndEdit: function (index, row) {
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
},
onBeforeEdit: function (index, row) {
row.editing = true;
$(this).datagrid('refreshRow', index);
},
onAfterEdit: function (index, row) {
row.editing = false;
$(this).datagrid('refreshRow', index);
},
onCancelEdit: function (index, row) {
row.editing = false;
$(this).datagrid('refreshRow', index);
}
}).datagrid('enableFilter');
});
function getRowIndex(target) {
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target) {
$('#tt').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target) {
$.messager.confirm('Confirm', 'Are you sure?', function (r) {
if (r) {
$('#tt').datagrid('deleteRow', getRowIndex(target));
}
});
}
function saverow(target) {
$('#tt').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target) {
$('#tt').datagrid('cancelEdit', getRowIndex(target));
}
function insert() {
var row = $('#tt').datagrid('getSelected');
if (row) {
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#tt').datagrid('insertRow', {
index: index,
row: {
status: 'P'
}
});
$('#tt').datagrid('selectRow', index);
$('#tt').datagrid('beginEdit', index);
}
</script>

Many tanks for your help!

Perfect, thanks!

By the way, I tried to add a picture but I never saw that after I made "Post". You obviously understood anyway.

Kind regards

I need a second textbox header row in datagrid and wonder if that is possible to add?

The purpose is to give the user the option to update a table column using this textbox row and push set. I can manage the set code but need help in how to configure a second column row and overwrite the column names with textbox.

Here's an image example attached of how it should look. The "SET" row is what I want to add.


My example code where the column is repeated two times. However the first should be the text boxes, just like the filter pane implements.

Code:

<table id="tt"></table>
<script>
var products = [
    {productid:'FI-SW-01',name:'Koi'},
    {productid:'K9-DL-01',name:'Dalmation'},
    {productid:'RP-SN-01',name:'Rattlesnake'},
    {productid:'RP-LI-02',name:'Iguana'},
    {productid:'FL-DSH-01',name:'Manx'},
    {productid:'FL-DLH-02',name:'Persian'},
    {productid:'AV-CB-01',name:'Amazon Parrot'}
];
var data = {
"total": 28, "rows": [
{ "productid": "FI-SW-01", "productname": "Koi", "unitcost": 10.00, "status": "P", "listprice": 36.50, "attr1": "Large", "itemid": "EST-1" },
{ "productid": "K9-DL-01", "productname": "Dalmation", "unitcost": 12.00, "status": "P", "listprice": 18.50, "attr1": "Spotted Adult Female", "itemid": "EST-10" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 38.50, "attr1": "Venomless", "itemid": "EST-11" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake", "unitcost": 12.00, "status": "P", "listprice": 26.50, "attr1": "Rattleless", "itemid": "EST-12" },
{ "productid": "RP-LI-02", "productname": "Iguana", "unitcost": 12.00, "status": "P", "listprice": 35.50, "attr1": "Green Adult", "itemid": "EST-13" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 158.50, "attr1": "Tailless", "itemid": "EST-14" },
{ "productid": "FL-DSH-01", "productname": "Manx", "unitcost": 12.00, "status": "P", "listprice": 83.50, "attr1": "With tail", "itemid": "EST-15" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 23.50, "attr1": "Adult Female", "itemid": "EST-16" },
{ "productid": "FL-DLH-02", "productname": "Persian", "unitcost": 12.00, "status": "P", "listprice": 89.50, "attr1": "Adult Male", "itemid": "EST-17" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot", "unitcost": 92.00, "status": "P", "listprice": 63.50, "attr1": "Adult Male", "itemid": "EST-18" }
]
};
var columns = [
{ field: 'itemid', title: 'Item ID', width: 60 },
{
field: 'productid', title: 'Product', width: 100,
formatter: function (value, row) {
return row.productname || value;
},
editor: {
type: 'combobox',
options: {
valueField: 'productid',
textField: 'name',
data: products,
required: true
}
}
},
{ field: 'listprice', title: 'List Price', width: 80, align: 'right', editor: { type: 'numberbox', options: { precision: 1 } } },
{ field: 'unitcost', title: 'Unit Cost', width: 80, align: 'right', editor: 'numberbox' },
{ field: 'attr1', title: 'Attribute', width: 180, editor: 'text' },
{
field: 'status', title: 'Status', width: 50, align: 'center',
editor: {
type: 'checkbox',
options: {
on: 'P',
off: ''
}
}
},
{
field: 'action', title: 'Action', width: 80, align: 'center',
formatter: function (value, row, index) {
if (row.editing) {
var s = '<a href="javascript:void(0)" onclick="saverow(this)">Save</a> ';
var c = '<a href="javascript:void(0)" onclick="cancelrow(this)">Cancel</a>';
return s + c;
} else {
var e = '<a href="javascript:void(0)" onclick="editrow(this)">Edit</a> ';
var d = '<a href="javascript:void(0)" onclick="deleterow(this)">Delete</a>';
return e + d;
}
}
}
];
$(function(){
$('#tt').datagrid({
title:'Editable DataGrid',
iconCls:'icon-edit',
width:660,
height:250,
singleSelect:true,
idField:'itemid',
data:data,
columns: [columns, columns],
onEndEdit:function(index,row){
var ed = $(this).datagrid('getEditor', {
index: index,
field: 'productid'
});
row.productname = $(ed.target).combobox('getText');
},
onBeforeEdit:function(index,row){
row.editing = true;
$(this).datagrid('refreshRow', index);
},
onAfterEdit:function(index,row){
row.editing = false;
$(this).datagrid('refreshRow', index);
},
onCancelEdit:function(index,row){
row.editing = false;
$(this).datagrid('refreshRow', index);
}
}).datagrid('enableFilter');
});
function getRowIndex(target){
var tr = $(target).closest('tr.datagrid-row');
return parseInt(tr.attr('datagrid-row-index'));
}
function editrow(target){
$('#tt').datagrid('beginEdit', getRowIndex(target));
}
function deleterow(target){
$.messager.confirm('Confirm','Are you sure?',function(r){
if (r){
$('#tt').datagrid('deleteRow', getRowIndex(target));
}
});
}
function saverow(target){
$('#tt').datagrid('endEdit', getRowIndex(target));
}
function cancelrow(target){
$('#tt').datagrid('cancelEdit', getRowIndex(target));
}
function insert(){
var row = $('#tt').datagrid('getSelected');
if (row){
var index = $('#tt').datagrid('getRowIndex', row);
} else {
index = 0;
}
$('#tt').datagrid('insertRow', {
index: index,
row:{
status:'P'
}
});
$('#tt').datagrid('selectRow',index);
$('#tt').datagrid('beginEdit',index);
}
</script>

Thanks for any help!

Now with 'getParentGrid' I got it to work better but it does not expand the list as I expect.
Now it looks like this: as_Is.png
And should look like this: should_be.png

I got the right format (should_be.png) by collapsing and expanding each row once going up to the highest level.
Here is the new code:

Code:

<div id="dg_main"></div>

<script type="text/javascript">

   function f_dg(iID, lev, oID) {

      if (!oID) {
         oID = {};
         lev = 0;
         iID = "";
      }
      var thislevel = Object.keys(oID).length;

      var fit = false;
      if (lev === 0) { fit = true; }
      lev++;
      var datagrid = {
         singleSelect: true
         , pagination: true
         , view: detailview
         , url: "static/home_data.aspx"
         , fit: fit
         , fitColumns: true
         , title: ":" + lev + iID
         , detailFormatter: function (index, row) {
            return "<div class='ddv' style='padding:5px 0'></div>";
         }
         , columns: [[
            { field: "itemid", title: "Item ID", width: 80 }
            , { field: "productid", title: "Product ID", width: 100 }
            , { field: "listprice", title: "listprice", width: 80, align: "right" }
            , { field: "unitcost", title: "Unit Cost", width: 80, align: "right" }
            , { field: "attr1", title: "Attribute", width: 220 }
            , { field: "status", title: "Status", width: 60, align: "center" }
            , { field: lev + iID, title: lev + iID, width: 60, align: "center" }
         ]]
         , onExpandRow: function (index, row) {
            var zID = "_" + lev + iID + index;
            if (!$("#pan_" + zID)[0]) {
               var ddv = $(this).datagrid("getRowDetail", index).find("div.ddv");
               ddv.panel({
                  id: "pan_" + zID
                  , cache: false
               })
                  .tabs({
                     tabHeight: 25
                     , showHeader: true
                     , tabPosition: "top"
                     , onSelect: function (title) {
                        var pdg = $(this).datagrid('getParentGrid');
                        var zdg = $("#g_" + zID + title);
                        if (!zdg.data("datagrid")) {
                           $(zdg).datagrid(f_dg(zID + title, lev, oID));
                        }
                        else {
                           zdg.datagrid({
                              url: "static/home_data.aspx"
                              , onLoadSuccess: function () {
                                 var p_grid = $(this).datagrid('getSelfGrid');
                                 fn_fix(p_grid, index);
                              }
                           });
                        }
                        var p_grid = $(this).datagrid('getSelfGrid');
                        fn_fix(p_grid, index);
                     }
                  })
                  .tabs("add", { id: "tab1_" + index, title: "tab1", content: "<div id='g_" + zID + "tab1'>tab1_" + index + "</div>" })
                  .tabs("add", { id: "tab2_" + index, title: "tab2", content: "tab2_" + index + "" })
                  ;
            }
         }
      }
      return datagrid;
   }

   function fn_fix(grid, index) {
      grid.datagrid("fixDetailRowHeight", index);
      var p1 = grid.datagrid("getParentGrid");
      if (p1) {
         p1.datagrid("fixDetailRowHeight", grid.datagrid("getParentRowIndex"));
         var p2 = p1.datagrid("getParentGrid");
         if (p2) {
            p2.datagrid("fixDetailRowHeight", p1.datagrid("getParentRowIndex"));
            var p3 = p2.datagrid("getParentGrid");
            if (p3) {
               p3.datagrid("fixDetailRowHeight", p2.datagrid("getParentRowIndex"));
            }
         }
      }
      $("#dg_main").datagrid("fixDetailRowHeight", 0);
   }
   $("#dg_main").datagrid(f_dg());
</script>

How can this be expanded automatically?
Thanks for help!

I have sub-grids containing tabs and want to fix the DetailRowHeight dynamically. In my current solution I need to track the path to expanded sub-grid and revers to top grid and do fixDetailRowHeight. I fail trying and hope there is a better way. Below is my code example, please advise.

Code:

<div id="dg_main"></div>

<script type="text/javascript">

    function f_dg(iID, lev, oID) {
       
        if (!oID) {
            oID = {};
            lev = 0;
            iID = "";
        }
        var thislevel = Object.keys(oID).length;

        var fit = false;
        if (lev === 0) { fit = false; }
        lev++;
        var datagrid = {
            singleSelect: true
            , pagination: true
            , view: detailview
            , url: "static/home_data.aspx"
            , fit: fit
            , fitColumns: true
            , title: ":" + lev + iID
            , detailFormatter: function (index, row) {
                return "<div class='ddv' style='padding:5px 0'></div>";
            }
            , columns: [[
                { field: "itemid", title: "Item ID", width: 80 }
                , { field: "productid", title: "Product ID", width: 100 }
                , { field: "listprice", title: "listprice", width: 80, align: "right" }
                , { field: "unitcost", title: "Unit Cost", width: 80, align: "right" }
                , { field: "attr1", title: "Attribute", width: 220 }
                , { field: "status", title: "Status", width: 60, align: "center" }
            ]]
            , onExpandRow: function (index, row) {
                var zID = "_" + lev + iID + index;
                if (!$("#pan_" + zID)[0]) {
                    var ddv = $(this).datagrid("getRowDetail", index).find("div.ddv");
                    ddv.panel({
                        id: "pan_" + zID
                        , cache: false
                    })
                        .tabs({
                            tabHeight: 25
                            , showHeader: true
                            , tabPosition: "top"
                            , onSelect: function (title) {
                                var zdg = $("#g_" + zID + title);
                                if (!zdg.data("datagrid")) {
                                    $(zdg).datagrid(f_dg(zID + title, lev, oID));
                                }
                                else {
                                    zdg.datagrid({
                                        url: "static/home_data.aspx"
                                        , onLoadSuccess: function () {
                                            $("#dg_main").datagrid("fixDetailRowHeight", index);
                                        }
                                    });
                                }
                                $("#dg_main").datagrid("fixDetailRowHeight", index);
                            }
                        })
                        .tabs("add", { id: "tab1_" + index, title: "tab1", content: "<div id='g_" + zID + "tab1'>tab1_" + index + "</div>" })
                        .tabs("add", { id: "tab2_" + index, title: "tab2", content: "tab2_" + index + "" })
                        ;
                }
            }
        }
        return datagrid;
    }
    $("#dg_main").datagrid(f_dg());
</script>