HiI am using Hierarchical grid for displaying data. In the Inner grid, while adding or editing large content in any column I am not able to select all the contents at a time inside the column. For example while adding the contents if I have to delet some part it needs to be done by Backspace or Delet button one character at a time. I am not able to use "Ctrl + A" or mouse selection or "Shift + Home" for selection of data.Please Note : The selection works fine in outer grid.Any suggestions are welcome.
Hello,
I'm just following up to see if you had the time to review the attached sample. Do you see the same behavior ? If not please feel free to modify it and duplicate the issue, then I will be glad to investigate that for you.
It still seems strange since I tested this with all major browsers - Chrome, Firefox and IE 8, IE 9, IE10 and IE11 and it worked fine. I edited a cell with a large content and was successfully using Ctrl + A and Shift + Home to select the content.
Please see the attached sample which I modified in order to allow editing of the child grids. (I have referenced the js resources locally since IE has some erratic issued when loading from the CDN). Do you see the described issue ?
Looking forward to hearing from you.
Hi,1) When I press Ctrl + A nothing happens. Also I checked the browser console and there is no error when I press cntrl + A.
2) I will try to modify your code as its hierarchycal grid without adding/editing functionality and try to reproduce it.
I did further analysis on this and I found that, its a browser issue. When I am trying to select all contents using Internet Explorer version 8 it does not work however when I am using it with Google Crome it works fine and I am able to select all contents with "shift + Home" and "mouse selection" though the "Cntrl + A" does not work on Crome as well.
Can you find any browser specific issue in the code provided by me.
Thanks.
Your code seems ok. I used the updating feature as it is configured in your grid and was not able to experience any issues. This makes it possible that issue lies in other feature or outside of the grid, but I am not able to just copy the same configuration since I donot have the same data source as yours. In order to proceed further please provide the following:
1) More details on the issue - if you are not able to select the whole content with Ctrl +a, then what happens when you press Ctrl + a ? Nothing ? Did you see any error message in the browser console at that situation ?
2) Feel free to modify my sample in order to reproduce this behavior or prepare an isolated sample of yours and send it back for investigation.
I will be glad to help you further with that.
Hi Hristo,Thanks for the update. I have not provided the whole code as its a large file so the part that was given which i think has the issue.The code that you had given is hierarchical grid but no add/edit capacity. The issue occurs while adding/editing text.For your reference please check the following complete code.
$("#testCaseDetailsGrid").igHierarchicalGrid({
caption: "Test Case Edit Grid",
dataSource: testCaseDetails,
dataSourceType: 'json',
responseDataKey: "testCaseDetails",
height : "850px",
defaultColumnWidth : "900px",
autoGenerateColumns: false,
autoGenerateLayouts: false,
rest: true,
primaryKey: "id",
columns: [
{ key: "id",
headerText: "Group Id",
dataType: "number",
width: "4px"},
{ key: "groupName",
headerText: "Test Group",
dataType: "string"},
{ key: "status",
headerText: "Status",
dataType: "string"}
],
columnLayouts: [
{
// Define looks and behavior for the second level in the hierarchy
key: "testCases",
defaultColumnWidth : "90px",
width: "100%",
headerText: "Test Case id",
{ key: "testGroup",
{ key: "testName",
headerText: "Test Name",
{ key: "testShortDescription",
headerText: "Test Description",
{ key: "testQuery",
headerText: "Query for Test result",
dataType: "string",
width: "370px"},
{ key: "testEnv",
headerText: "Test Environment",
width: "130px",
template: '<a href="#" onClick="openTestEnvironmentAliasDialog(\${id}, \'\${testEnv}\',\'targetEnv\', \'\${testScriptType}\')">\${testEnv}</a>'},
{ key: "expectedResults",
headerText: "Expected Results",
{ key: "baselineEnv",
headerText: "Baseline Env",
template: '<a href="#" onClick="openTestEnvironmentAliasDialog(\${id}, \'\${baselineEnv}\',\'baseEnv\', \'\${testScriptType}\')">\${baselineEnv}</a>'},
{ key: "baselineQuery",
headerText: "Query for Baseline results",
{ key: "testDependencies",
headerText: "Test dependencies",
{ key: "testScriptType",
headerText: "Test Script Type",
template: '<a href="#" onClick="openTestScriptTypeDialog(\${id}, \'\${testScriptType}\')">\${testScriptType}</a>'},
{ key: "isResuableForRegression",
headerText: "Reusable for Regression",
width: "110px"},
{ key: "preparedBy",
headerText: "Prepared By",
features: [{
// Configure GroupBy with Summary for child level
name: "GroupBy",
type: "local",
},
name: "Paging",
pageSize: 5
name: "Sorting",
type: "local"
name: "Filtering",
name: "Tooltips",
visibility: "always"
name: "RowSelectors"
name: "Updating",
enableDataDirtyException: false,
enableAddRow: true,
editMode: "row",
columnSettings: [
{ columnKey: "id",
editorOptions: { type: "number", disabled: true}
{ columnKey: "testGroup",
editorOptions: {type: "string"},
validation: true,
required: true,
{ columnKey: "testName",
{ columnKey: "isResuableForRegression",
editorType: "combo",
editorOptions: {
mode: "dropdown",
dataSource: ["Yes", "No"],
readOnly: true,
dropDownOnReadOnly: true,
{ columnKey: "testEnv",
dataSource: testEnv,
{ columnKey: "baselineEnv",
{ columnKey: "testScriptType",
dataSource: testType,
{ columnKey: "testQuery",
editorType: "text",
type: "text",
textMode: "multiline"},
{ columnKey: "baselineQuery",
rowAdded: function(event, ui) {
delete ui.values.ig_pk;
$.ajax({
type: "POST",
contentType: 'application/json',
dataType: 'json',
url : 'createTestCaseRecord',
data : JSON.stringify(ui.values),
success: function() {
window.location.reload(true);
}
});
editRowEnded: function(event, ui) {
if (!ui.rowAdding) {
if(queryCompareDetails != null) {
ui.values.keyColumns = queryCompareDetails.keyColumns;
ui.values.mandatoryColumns = queryCompareDetails.dataColumns;
ui.values.deltaColumns = queryCompareDetails.deltaColumns;
ui.values.textColumns = queryCompareDetails.textColumns;
ui.values.dollarFmtColumns = queryCompareDetails.dollarFmtColumns;
ui.values.additionalColumns = queryCompareDetails.additionalColumns;
url : 'updateTestCaseRecord',
rowDeleted: function(event, ui) {
url : 'dropTestCaseRecord',
data : ui.element.find("td:eq(0)").text(),
]
features: [
// Configure GroupBy with summary for root level
groupByAreaVisibility: "top",
labelDragHelperOpacity: 0.2,
emptyGroupByAreaContent: "Drag here columns to group by"
}, {
pageSize: 25
name: "Selection"
enableDeleteRow: false,
{ columnKey: "status",
editorOptions: { type: "string", disabled: true}
url : 'createTestGroup',
url : 'updateTestGroup',
Could you please go through the code and let me know if anything is missing. Thanks