jQWidgets Forums
jQuery UI Widgets › Forums › Grid › auto expaning row details
Tagged: grid control
This topic contains 10 replies, has 2 voices, and was last updated by Syai 11 years, 6 months ago.
-
Author
-
Hello,
When ever i load my grid the row details is automatically expanding ,I want it to load only when expand arrow is clicked.
and also how to enable grid contents copy.as i cant select any text inside grid..Thank you.
Hi Syai,
How to you initialize the Row Details? Could you look at the Grid’s Row Details demo? If you created them with rowdetailstemplate, then check the Boolean value of the rowdetailshidden parameter. By default it is true, but if you have set it to false, then the details would be expanded automatically.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/hello peter,
Sorry but i couldn’t find it…Can you please give some example so that i can find it….and also i want to Make all the fields required validation can you give some demo on that to…..
Thank you very much.Regards
SyaiHi Syai,
Open the Grid demos. There is a Row Details demo and there’s also a Nested Grids demo.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hello Peter,
I used same template of that row details demo.but its not working.if you can give some example code ehre i can make changes and also can you please tell me how to make text inde grid selectable so I can copy the text i want.As by default grid doesn’t allow coping text inside grid.
Thank you for your concern
regards
SyaiHi Syai,
Which version of jQWidgets do you use? The template was introduced in a recent version and is not supported in older.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hello Peter,
I am using jQWidgets v3.0.4 (2013-Nov-01).Regards
SyaiHi Syai,
Ok, please post a sample which we can test locally and which demonstrates your use-case.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com///Whenever this method is called an ajax call is made to the webservice to get values and call filessource method.
function Filedetails() {
var SaveORUpdate = $(“#<%=btnSave.ClientID%>”).val();
var checklistid = $(“#<%=hfChecklistID.ClientID%>”).val();
if (SaveORUpdate != “Save”) {
$.ajax({
type: ‘POST’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
success: function (data) {
debugger;
filessource(data.d);
},
error: function () {
alert(“There was an error connecting to the server!”);
}
});
}}
//Files grid view.
function filessource(data) {
debugger;
_Column = [
{ text: ‘checklistid’, hidden: true, datafield: ‘intID’, width: “0%” },
{ text: ‘File type’, datafield: ‘FileType’, width: “20%” },
{ text: ‘File path’, datafield: ‘FilePath’, width: “50%” },
{ text: ‘File name’, datafield: ‘FileName’, width: ‘30%’ }
]var source = {
localdata: data,
datatype: “json”,
deleterow: function (rowid, commit) {commit(true);
},
addrow: function (rowid, rowdata, position, commit) {
debugger;
//ReLoading the data after the adding row
commit(true);},
updaterow: function (rowid, newdata, commit) {
debugger;
//this method checks is intID is present/assigned to some value or not.
if (!isNaN(newdata.intID)) {
$.ajax({
type: ‘POST’,
contentType: ‘application/json; charset=utf-8’,
dataType: ‘json’,
success: function (data) {commit(true);
},
error: function () {
alert(“There was an error connecting to the server!”);
}
});
}},
datafields:
[{ name: ‘intID’, type: ‘int’ },
{ name: ‘FileType’, type: ‘string’ },
{ name: ‘FilePath’, type: ‘string’ },
{ name: ‘FileName’, type: ‘string’ }]
};var dataAdapter = new $.jqx.dataAdapter(source);
//Outer grid
$(“#jqxgridDropdown”).jqxGrid(
{
width: 728,
source: dataAdapter,
enabletooltips: true,
selectionmode: ‘singlerow’,
rowdetails: true,
filterable: true, //Allows to filter function for the data.
sortable: true, //sort The data.if required.
autoheight: true, //Sets the total height of the grid.
autorowheight: true, //Sets the row height automatically.
editable: true,
showtoolbar: true,
rendertoolbar: function (toolbar) {
debugger;
var me = this;
var container = $(“<div style=’margin: 5px;’></div>”);
var span = $(“<span style=’float: left; margin-top: 5px; margin-right: 0px;’></span>”);
var addInput = $(” <input id=’addrowbutton’ type=’button’ value=’Add New Row’ />”);
var deleteInput = $(” <input id=’deleterowbutton’ type=’button’ value=’Delete selected row’ />”);
toolbar.append(container);
container.append(span);
container.append(addInput);
container.append(deleteInput);
},
//Experiment end.
//method to stop the enter event and act as normal.
columns: _Column});
// $(“#addrowbutton”).jqxButton();
$(“#addrowbutton”).on(‘click’, function () {var datarow = generaterow();
var commit = $(“#jqxgridDropdown”).jqxGrid(‘addrow’, null, datarow);
});// delete row.
// $(“#deleterowbutton”).jqxButton();
$(“#deleterowbutton”).on(‘click’, function () {
var selectedrowindex = $(“#jqxgridDropdown”).jqxGrid(‘getselectedrowindex’);
var rowscount = $(“#jqxgridDropdown”).jqxGrid(‘getdatainformation’).rowscount;
if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
var id = $(“#jqxgridDropdown”).jqxGrid(‘getrowid’, selectedrowindex);
var commit = $(“#jqxgridDropdown”).jqxGrid(‘deleterow’, id);
}
});
}//creating new blank row.
var generaterow = function () {
var row = {};
row[“FileType”] = “”;
row[“FilePath”] = “”;
row[“FileName”] = “”;
return row;
}//This method stores the value that are entered in the grid.
function FileDetails() {
var rows = $(‘#jqxgridDropdown’).jqxGrid(‘getrows’);
return rows;
}Hi Syai,
Sorry, but we cannot use the provided code for testing. If we copy and paste it on a new .htm file, and then run the file, nothing will happen. By sample I meant something as the samples which we provide with the download package. The easiest thing would be if you modify some of our samples in such way that it demonstrates your scenario.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hello peter,
Happy new year,may God bless you and your family………You doing wonderful job.I have resolved the problems which I stated before.Today my question is can you please give me demo example of the all the operation(loading data,updating,inserting,using rowdetails and nested grid.) in jqxGrid using ajax call….most of your examples are from the generateddata() function.I know if there is no example then it may take some while but if you create once you can put it in the demo menu..it will benefit others also……Thanking you.
Best Regards
Syai -
AuthorPosts
You must be logged in to reply to this topic.