jQWidgets Forums

jQuery UI Widgets Forums Grid auto expaning row details

Tagged: 

This topic contains 10 replies, has 2 voices, and was last updated by  Syai 11 years, 6 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
  • auto expaning row details #46932

    Syai
    Participant

    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.

    auto expaning row details #46941

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    auto expaning row details #46958

    Syai
    Participant

    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
    Syai

    auto expaning row details #46963

    Peter Stoev
    Keymaster

    Hi Syai,

    Open the Grid demos. There is a Row Details demo and there’s also a Nested Grids demo.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    auto expaning row details #46988

    Syai
    Participant

    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
    Syai

    auto expaning row details #46993

    Peter Stoev
    Keymaster

    Hi 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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    auto expaning row details #46995

    Syai
    Participant

    Hello Peter,
    I am using jQWidgets v3.0.4 (2013-Nov-01).

    Regards
    Syai

    auto expaning row details #46996

    Peter Stoev
    Keymaster

    Hi Syai,

    Ok, please post a sample which we can test locally and which demonstrates your use-case.

    Best Regards,
    Peter Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    auto expaning row details #47059

    Syai
    Participant

    //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;
    }

    auto expaning row details #47076

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com/

    auto expaning row details #47230

    Syai
    Participant

    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

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.