[mustafaParticipant]

hello
I solved the problem a litte this
checkbox has checked..

$("#GridProduct").on("cellclick", function (event) {
    var index = event.args.rowindex
     
    $('#GridProduct').jqxGrid({ selectedrowindex: index });
}); 

How do I know if the checkbox is checked?
then i can use this

$(‘#GridProduct’).jqxGrid(‘unselectrow’, index);

[mustafaParticipant]

hello yavor
I’m sorry my english is not good

I want the sequence numbers to appear on the far left
and The example you gave didn’t work for me.
error: jqxCore: Invalid parameter ‘[setcolumnindex, SORT, 1]’ does not exist.
i am using this version : jQWidgets v9.1.6
thank you

example

1 [checkbox] PRODUCT_NAME
2 [checkbox] PRODUCT_NAME
3 [checkbox] PRODUCT_NAME
4 [checkbox] PRODUCT_NAME

[mustafaParticipant]

i will try the code
Where can I see team license prices?

thank you

[mustafaParticipant]

hello yavor
my first question .. I think I didn’t explain my question well.
In this example, there is a new line creation. I want to create a dropdown on the new line I want.
https://www.jqwidgets.com/jquery-widgets-demo/demos/jqxgrid/createremoveupdatedata.htm?arctic

and second question.. Is it true that I can create another plugin dropdown using createwidget?

and
When we buy jqwidgets licensed, is it necessary to buy it for each computer?
thank you

[mustafaParticipant]

hello yavor your answer thank you but I not use column checkbox..I’m useing grid checkbox thank you
example
https://ibb.co/6F1tK6w

[mustafaParticipant]

yes i wanted this
only How can I create elements in a new row when I press enter? example (dropdown input )

and just wondering if it’s possible
Can I use another element in the grid? ( select2 dropdown )

thank you so much

[mustafaParticipant]

hello
i solved the problem above
i couldn’t do I get the details of a row?

     handlekeyboardnavigation: function (event) {
                 
                else if (event.ctrlKey && event.which === 68) { // ctrl+d 
                    event.preventDefault();
               
                }
            },

[mustafaParticipant]

hello this try
You need global variable datasource ( window.Datasource )

    function GridDynamicDataBind(grid, gridData, gridSource) {

        gridSource.localdata = gridData;
        $("#" + grid + "").jqxTreeGrid('updateBoundData');  
        $("#" + grid + "").jqxTreeGrid('refresh');

    }

    function TreeGridDynamicDataBind(grid, gridData, gridSource) {

        gridSource.localdata = gridData;
        $("#" + grid + "").jqxTreeGrid('updateBoundData');  
        $("#" + grid + "").jqxTreeGrid('updating');  
        $("#" + grid + "").jqxTreeGrid('endUpdate'); 
        $("#" + grid + "").jqxTreeGrid('refresh');

    }

dynamic data bind

STANDART GRID

function GridInvoice() {
var data = "";
    window.GridInvoiceDataSource =

          {
              datafields: [
              { name: 'InvoiceID', type: 'string' },
              { name: 'Code', type: 'string' },
              { name: 'InvoiceItemName', type: 'string' },
              { name: 'VesselName', type: 'string' },
              { name: 'InvoiceNo', type: 'string' } 
                  commit(true);
              },
              localdata: data,
              async: false,
              datatype: "array",
              id: 'InvoiceID',

          }

    var dataAdapter = new $.jqx.dataAdapter(window.GridInvoiceDataSource);

    $("#GridInvoice").jqxGrid(
    {
        width: '100%',
        source: dataAdapter,
        pageable: true,
        columnsresize: true,
        enablehover: true,
        //autorowheight: true,
        sortable: true,

        altrows: true,
        height: '700px',
        pagesize: 30,
        theme: "web",
        editable: false,
        columns: [
             { text: 'Item Code', datafield: 'Code', width: '7%', },
             { text: 'Item Name', datafield: 'InvoiceItemName', width: '10%', },
             { text: 'Vessel', datafield: 'VesselName', width: '10%' },
             { text: 'Invoice No', datafield: 'InvoiceNo', width: '10%', }          
        ],
    });
}
 
function UpdateGridInvoice(updateData) {
 
        $.ajax({

            url: '/Invoice/UpdateInvoice/',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ updateData: updateData}),
            async: false, 
            success: function (status) {   
                if (status) { 
                   var resultData = GetInvoices();
                   GridDynamicDataBind("GridInvoice", resultData, window.GridInvoiceDataSource); 

                }
                else alertify.error("UpdateInvoice");

            },
            error: function (jqXHR, textStatus, errorThrown) {
                alertify.error("UpdateInvoice");
            }
        });
    }
}

TREEGRID

function GridInvoiceItem() {

    var data = GetInvoiceItemsHierarchy();
    window.GridInvoiceItemDataSource =
         {
             datafields: [
             { name: 'InvoiceItemID', type: 'string' },
             { name: 'ParentID', type: 'string' },
             { name: 'Name', type: 'string' },
             { name: 'Code', type: 'string' }

             ], 
             hierarchy:
        {
            keyDataField: { name: 'InvoiceItemID' },
            parentDataField: { name: 'ParentID' }
        },
             localdata: data,
             async: false,
             datatype: "array",
             id: 'InvoiceItemID',

         }

    var dataAdapter = new $.jqx.dataAdapter(window.GridInvoiceItemDataSource);
  
    $("#GridInvoiceItem").jqxTreeGrid(
    {
        width: '100%',
        height: '700px',
        source: dataAdapter,
        pageable: true,
        sortable: true, 
        pageSize: 200,
        theme: 'web',
        editable: false,
        columns: [
          { text: 'Name', datafield: 'Name', width: '50%', },
          { text: 'Code', datafield: 'Code', width: '50%', }
        ]
    });
}

function AddInvoiceItem(addData) {
 
        $.ajax({
            url: '/InvoiceItem/AddInvoiceItem/',
            type: 'POST',
            dataType: 'json',
            contentType: 'application/json; charset=utf-8',
            data: JSON.stringify({ incomingData: addData }),
            async: false,
            success: function (status) { 
                if(status)
               {   var resultData = GetInvoiceItems();
                   TreeGridDynamicDataBind("GridInvoiceItem", resultData, window.GridInvoiceItemDataSource); 
                }
                else {
                    DynamicAlertifyFunction('error', 'AddInvoiceItem');
                }
            },
            error: function (e) {
                DynamicAlertifyFunction('error', 'AddInvoiceItem');
            }
        });
    }
}

[mustafaParticipant]

hi dimitar
There is a problem
The first option comes down

  $("#dropListItemsForInvoice").jqxDropDownList({
        source: GetInvoiceItemsHierarchy(),
        promptText: "Select Item",
        displayMember: "Name",
        valueMember: "InvoiceItemID",
        height: "34px",
        width: "135%",
        dropDownHeight: 500, 
        dropDownWidth: 510,
        selectedIndex: 0, 
        dropDownHorizontalAlignment: 'left',
        theme: "web",
    });

    $("#dropListItemsForInvoice").jqxDropDownList('insertAt', { label: 'Select Item', value: 0 }, 0);

thank you

[mustafaParticipant]

thank you for reply dimitar

[mustafaParticipant]

hi dimitar
No need to answer the first question

Ship names seems (headers)
But the knowledge of each vessel does not appear
example

var sourceColumnsAB = [{ MasterID:1, VesselID : ‘1453’,StockKG: ’55’},{MasterID:2, VesselID : ‘1455’, StockKG: ’88’}];

[mustafaParticipant]

2

example bind data

// renderer for grid cells.
    var numberrenderer = function (row, column, value) {
        return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
    }
    var sourceColumnsAB = [{ VesselID : '1',StockKG: '55'},{VesselID : '2', StockKG: '88'}];

    var vessels= GetVessels();
    var columns = [];
    var theme = "";
    for (var i = 0; i < vessels.length; i++) {
        var VesselName = vessels[i].Name;
        var VesselID = vessels[i].VesselID;

        if (i == 0) {
            var cssclass = 'jqx-widget-header';
            if (theme != '') cssclass += ' jqx-widget-header-' + "web";
            columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
        }
        datafields[datafields.length] = { name: VesselName, value: VesselID };
        columns[columns.length] = { text: VesselName, datafield: VesselID, width: 60, align: 'center' };
    }

    var source =
    {
      
        datafields: [
                    { name: 'StockKG', type: 'string' },
                    { name: 'VesselID', type: 'string' }
        ],
        localdata: sourceColumnsAB,

        
        updaterow: function (rowid, rowdata) {
            // synchronize with the server - send update command   
        }
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#GridEstimation").jqxGrid(
           {
               width: 850,
               source: dataAdapter,
               editable: true,
               columnsresize: true,
               selectionmode: 'multiplecellsadvanced',
               columns: columns
           });
}

[mustafaParticipant]

hello dimitar
I want to show you my problem step by step

first 1

  var stocks= GetStocks();
      
    var numberrenderer = function (row, column, value) {

        return '<div margin-top: 5px;">' + (stocks[row].Name) + '</div>';
    }

var theme = "";
             var datafields = [];
             var columns = [];
             for (var i = 0; i < data.length; i++) {
                 var text = String.fromCharCode(65 + i);
      
                 if (i == 0) {
                     var cssclass = 'jqx-widget-header';
                     if (theme != '') cssclass += ' jqx-widget-header-' + theme;
                     columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
                 }
                 datafields[datafields.length] = { name: text };
                 columns[columns.length] = { text: text, datafield: text, width: 60, align: 'center' };

All does not appear
Which should I modified the css?

[mustafaParticipant]

and
the data does not appear
Where am I doing wrong?
thank you

    // renderer for grid cells.
    var numberrenderer = function (row, column, value) {
        return '<div style="text-align: center; margin-top: 5px;">' + (1 + value) + '</div>';
    }
    var sourceColumnsAB = [{ VesselID : '1',StockKG: '55'},{VesselID : '2', StockKG: '88'}];

    var vessels= GetVessels();
    var columns = [];
    var theme = "";
    for (var i = 0; i < vessels.length; i++) {
        var VesselName = vessels[i].Name;
        var VesselID = vessels[i].VesselID;

        if (i == 0) {
            var cssclass = 'jqx-widget-header';
            if (theme != '') cssclass += ' jqx-widget-header-' + "web";
            columns[columns.length] = { pinned: true, exportable: false, text: "", columntype: 'number', cellclassname: cssclass, cellsrenderer: numberrenderer };
        }
        datafields[datafields.length] = { name: VesselName, value: VesselID };
        columns[columns.length] = { text: VesselName, datafield: VesselID, width: 60, align: 'center' };
    }

    var source =
    {
      
        datafields: [
                    { name: 'StockKG', type: 'string' },
                    { name: 'VesselID', type: 'string' }
        ],
        localdata: sourceColumnsAB,

        
        updaterow: function (rowid, rowdata) {
            // synchronize with the server - send update command   
        }
    };

    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#GridEstimation").jqxGrid(
           {
               width: 850,
               source: dataAdapter,
               editable: true,
               columnsresize: true,
               selectionmode: 'multiplecellsadvanced',
               columns: columns
           });
}

[mustafaParticipant]

thanks

[Author]

Posts