jQWidgets Forums

Forum Replies Created

Viewing 12 posts - 16 through 27 (of 27 total)
  • Author
    Posts

  • williamtourinho
    Participant

    Hi Petter, here a example to better understand my problem. Thank you for your time.

    $(document).ready(function () {
    var theme = getTheme();
    var data = generatedata(500);
    var source =
    {
    localdata: data,
    datatype: “array”
    };
    var dataAdapter = new $.jqx.dataAdapter(source);

    var cellrenderer = function (row, column, value) {
    var html = ‘

    ‘ + value +’

    ‘;
    return html;
    }

    $(“#jqxgrid”).jqxGrid(
    {
    width: 685,
    source: dataAdapter,
    showfilterrow: true,
    filterable: true,
    theme: theme,
    columns: [
    { text: ‘Name’, columntype: ‘textbox’, filtertype: ‘textbox’, filtercondition: ‘starts_with’, cellsrenderer: cellrenderer, datafield: ‘name’, width: 115 },
    {
    text: ‘Product’, filtertype: ‘checkedlist’, datafield: ‘productname’, width: 220
    },
    { text: ‘Available’, datafield: ‘available’, columntype: ‘checkbox’, filtertype: ‘bool’, width: 67 },
    { text: ‘Ship Date’, datafield: ‘date’, filtertype: ‘date’, width: 210, cellsalign: ‘right’, cellsformat: ‘d’ },
    { text: ‘Qty.’, datafield: ‘quantity’, filtertype: ‘number’, cellsalign: ‘right’ }
    ]
    });
    $(‘#button’).jqxButton({ height: 25, theme: theme });
    $(‘#button’).click(function () {
    var rows = $(‘#jqxgrid’).jqxGrid(‘getrows’);
    var rowindex = $(‘#jqxgrid’).jqxGrid(‘getselectedrowindex’);

    $(“#NameRow_” + rowindex).css(“color”, “blue”);
    });
    });

    select cell, press button and them move the scroll bar to see behavior


    williamtourinho
    Participant

    Ok Peter, Thank you.


    williamtourinho
    Participant

    Hi Peter,
    My question is: When the source has, for example, 4 items and the grid height is not auto the lines of the grid after that first 4 rows will not be alternate.
    Imagine a grid with:

    height: 700px,
    altrows: true,
    source: mysource // the source have 4 rows

    In this situation the “altrows” will work for the first 4 rows/div, but for the rest of the div’s (the div’s without data) the “altrows” property will not work.
    When the virtual mode is true, you can set the property “showemptyrow” to true, but when virtual mode is false, the empy rows will not appear.

    Thanks for the feedback.


    williamtourinho
    Participant

    Thank you Peter, know it’s working:)


    williamtourinho
    Participant

    Yes, it is 2.5.5. If you see i have the .js files with the link to your files.
    The button click update is the only think that doesn’t hapen..


    williamtourinho
    Participant

    The example is not working in my pc Peter..
    When i press the button the items in the grid don’t update.. I had made this:

    function generatedata(rowscount, hasNullValues) {
    // prepare the data
    var data = new Array();
    if (rowscount == undefined) rowscount = 100;
    var firstNames =
    [
    “Andrew”, “Nancy”, “Shelley”, “Regina”, “Yoshi”, “Antoni”, “Mayumi”, “Ian”, “Peter”, “Lars”, “Petra”, “Martin”, “Sven”, “Elio”, “Beate”, “Cheryl”, “Michael”, “Guylene”
    ];

    var lastNames =
    [
    “Fuller”, “Davolio”, “Burke”, “Murphy”, “Nagase”, “Saavedra”, “Ohno”, “Devling”, “Wilson”, “Peterson”, “Winkler”, “Bein”, “Petersen”, “Rossi”, “Vileid”, “Saylor”, “Bjorn”, “Nodier”
    ];

    var productNames =
    [
    “Black Tea”, “Green Tea”, “Caffe Espresso”, “Doubleshot Espresso”, “Caffe Latte”, “White Chocolate Mocha”, “Caramel Latte”, “Caffe Americano”, “Cappuccino”, “Espresso Truffle”, “Espresso con Panna”, “Peppermint Mocha Twist”
    ];

    var priceValues =
    [
    “2.25”, “1.5”, “3.0”, “3.3”, “4.5”, “3.6”, “3.8”, “2.5”, “5.0”, “1.75”, “3.25”, “4.0”
    ];

    for (var i = 0; i < rowscount; i++) {
    var row = {};
    var productindex = Math.floor(Math.random() * productNames.length);
    var price = parseFloat(priceValues[productindex]);
    var quantity = 1 + Math.round(Math.random() * 10);

    row["id"] = i;
    row["available"] = productindex % 2 == 0;
    if (hasNullValues == true) {
    if (productindex % 2 != 0) {
    var random = Math.floor(Math.random() * rowscount);
    row["available"] = i % random == 0 ? null : false;
    }
    }
    row["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
    row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
    row["name"] = row["firstname"] + " " + row["lastname"];
    row["productname"] = productNames[productindex];
    row["price"] = price;
    row["quantity"] = quantity;
    row["total"] = price * quantity;

    var date = new Date();
    date.setFullYear(2012, Math.floor(Math.random() * 11), Math.floor(Math.random() * 27));
    date.setHours(0, 0, 0, 0);
    row["date"] = date;

    data[i] = row;
    }

    return data;
    }

    $(document).ready(function () {

    var data = generatedata(500);

    var source =
    {
    localdata: data,
    datatype: "array"
    };

    var theme = getTheme();

    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
    width: 685,
    source: dataAdapter,
    showfilterrow: true,
    filterable: true,
    theme: theme,
    selectionmode: 'multiplecellsextended',
    columns: [
    { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
    {
    text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
    },
    { text: 'Available', datafield: 'available', columntype: 'checkbox', filtertype: 'bool', width: 67 },
    { text: 'Ship Date', datafield: 'date', filtertype: 'date', width: 210, cellsalign: 'right', cellsformat: 'd' },
    { text: 'Qty.', datafield: 'quantity', filtertype: 'number', cellsalign: 'right' }
    ]
    });
    $('#button').jqxButton({ height: 25, theme: theme });
    $('#button').click(function () {
    data = generatedata(500);
    $("#jqxgrid").jqxGrid('updatebounddata');
    });
    });


    williamtourinho
    Participant

    Hi Peter, I am using the 2.5.5 but the behavior is the same.
    My MVC example is not the best one but i hope you can understand. In my code, when i press the button the data is updated but the items in the filter not. When i press the button again, the items in the filter are updated…

    var data = [];
    $(document).ready(function () {

    var sourcePerson =
    {
    datatype: ‘jsonp’,
    datafields: [
    { name: ‘Name’, type: ‘string’ }
    ],
    url: ‘@Url.Content(“~/People/GetPerson”)’,
    root: ‘Rows’,
    data: {
    token: “null”,
    },
    processdata: function (data) {

    data.model = JSON.stringify(“william”);
    }
    };

    // Source
    var dataPersonAdapter = new $.jqx.dataAdapter(sourcePerson, {
    downloadComplete: function (data, status, xhr) {
    },
    loadComplete: function (data) {
    },
    loadError: function (xhr, status, error) {
    //alert(status + ‘: ‘ + xhr);
    }
    });

    // cell render
    var cellsrenderer = function (row, column, value) {
    return ‘

    ‘ + value + ‘

    ‘;
    }

    // column render
    var columnrenderer = function (value) {
    return ‘

    ‘ + value + ‘

    ‘;
    }

    $(“#jqxPersonGrid”).jqxGrid(
    {
    width: 396,
    height: 730,
    autoheight: false,
    altstart: 0,
    source: dataPersonAdapter,
    showfilterrow: true,
    filterable: true,
    theme: ‘mybag’,
    altrows: true,
    sortable: true,
    columns: [
    { text: ‘Name’, filtertype: ‘checkedlist’, createfilterwidget: function(column, columnElement, widget)
    {
    widget.jqxDropDownList({ dropDownWidth: 130 });
    }, datafield: ‘Name’, renderer: columnrenderer, cellsrenderer: cellsrenderer, width: 66 }
    ]
    });

    $(“#jqxPersonGrid”).bind(“bindingcomplete”, function (event) {
    alert(“data updated”);
    });

    });

    function updateGrid() {
    $(‘#jqxPersonGrid’).jqxGrid(‘updatebounddata’);
    }


    williamtourinho
    Participant

    I have found the solution. I cant use the “editmode: ‘dblclick’,”. This was creating the problem.


    williamtourinho
    Participant

    Ok Peter Stove, thanks for your feedback again.
    I will wait for the next version:)


    williamtourinho
    Participant

    Try unchked some items in the product checklist. Whait for the updatebounddata and you will see that all the items in the check list are selected.
    Thanks.
    Here is the example:

    widgets

    $(document).ready(function () {
    var theme = ”;

    var data = [];
    for (var i = 0; i < 10; i++){
    var row = {};
    row["name"] = "Name " + parseInt(Math.random()* 100);
    row["productname"] = "Product " + i;

    data[i]= row;
    }

    function updateData() {
    for (var i = 0; i < 10; i++){
    var row = {};
    data[i]["name"] = "Name " + parseInt(Math.random()* 100);
    }
    }

    var source =
    {
    localdata: data,
    datatype: "array"
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid(
    {
    width: 685,
    source: dataAdapter,
    showfilterrow: true,
    filterable: true,
    theme: theme,
    selectionmode: 'multiplecellsextended',
    columns: [
    { text: 'Name', columntype: 'textbox', filtertype: 'textbox', filtercondition: 'starts_with', datafield: 'name', width: 115 },
    {
    text: 'Product', filtertype: 'checkedlist', datafield: 'productname', width: 220
    }
    ]
    });

    function UpdateTimerFunction () {
    updateData();
    $('#jqxgrid').jqxGrid('updatebounddata');
    }

    var UpdateTimerIntervalId = setInterval(UpdateTimerFunction, 5000);

    });


    williamtourinho
    Participant

    Ok, thanks. I will be waiting for it.
    Just one more question, can you say when it wil be available?


    williamtourinho
    Participant

    Thank you very much. You save my day;)

Viewing 12 posts - 16 through 27 (of 27 total)