jQWidgets Forums

Forum Replies Created

Viewing 15 posts - 16 through 30 (of 47 total)

Author

Posts

July 4, 2013 at 12:45 pm in reply to: Loading Combobox Loading Combobox #24503

Syai

Participant

Hi Dimitar,
Sorry if the question is invalid. I still have some doubts on this. I’m trying to used the combobox with these properties in Jqx grid. Below are the problems I’m facing.

1) When we enter the search string in the combobox, the “search string” has to be cleared on selecting the item to the particular row. But the search string is remained same for other rows also. So whenever I click on another rows, it is calling the dataadapter with the searchstring and returning the results which are not related to the searched key.
2) I don’t want to make the cell value as blank when the data is already existing in the cell. It is clearing the cell value.

Can you please help me resolving these thing. Can you also let me know if I’m following anything wrong.

Regards,
Syai,
Osmosys

July 4, 2013 at 6:01 am in reply to: Loading Combobox Loading Combobox #24459

Syai

Participant

Hi Dimitar,

Can you please confirm below things.
1) To make this work, we’ve to bind the data to the Combobox before we enter data in the field itself.
2) After binding the data only it will search for the existing Items of the Combobox and will show the results?

Regards,
Syai,
Osmosys

July 3, 2013 at 11:29 am in reply to: Default Value for JQX Combobox Default Value for JQX Combobox #24400

Syai

Participant

Hi Mariya,
Thanks for the reply. I’ve tried the solution you provided. It is working fine for “Column Type” as “Dropdownlist”. When I try the same for Combobox, it isn’t working. Can you please suggest me the solution for combobox.

Regards,
Syai,
Osmosys

June 28, 2013 at 12:59 pm in reply to: Best way to hide columns in JQX Grid Best way to hide columns in JQX Grid #24118

Syai

Participant

Thank you Peter. This helps me a lot and the grid is loading very quick now.

Regards,
Syai Reddy D

June 28, 2013 at 8:42 am in reply to: Best way to hide columns in JQX Grid Best way to hide columns in JQX Grid #24078

Syai

Participant

Hi Peter,
Thanks for the quick reply. I’ve a question, I’ve a page, when the page is loading, I’ll pass a value as input, depending on that input, it have to hide some columns and show other columns. If I pass another input, it has to check and hide some other columns. If I want to check these conditions, where do I check? Which is better way to check? On LoadComplete event? or On BindingComplete event? or is there any other way to achieve this?

I’m sorry if the question isn’t valid.

Regards,
Syai

June 22, 2013 at 10:59 am in reply to: Make Row Read-Only Make Row Read-Only #23627

Syai

Participant

Hi Mariya,

Thanks for the reply. I’ve tried this method and I’ve observed that for every cell, this goes to the method and checks. Does is possible to check only one column data and then make the entire row instead of checking for each cell values.

Regards,
Syai,
Osmosys

June 21, 2013 at 8:13 am in reply to: Set Column Width Dynamically Set Column Width Dynamically #23556

Syai

Participant

Hi Mariya,

Thank you very much for the solution. It is working like charm.

Regards,
Syai,
Osmosys

April 30, 2013 at 10:28 am in reply to: Problem with CreateEditor of Grid Column Problem with CreateEditor of Grid Column #20335

Syai

Participant

Hi Peter,
Thanks for the quick response. Is this the process we need to follow for this kind of scenarios or there any better way to achieve it?

Regards,
Syai,
Osmosys

April 3, 2013 at 9:16 am in reply to: Facing an issue with editor.jqxcombobox in Editable Grid Facing an issue with editor.jqxcombobox in Editable Grid #18490

Syai

Participant

Hi Peter,

I’ve tried the code you provided with version 2.8. The problem I faced is because of serverside paging. It is working fine now.

Thanks,
Syai

April 2, 2013 at 3:19 pm in reply to: Facing an issue with editor.jqxcombobox in Editable Grid Facing an issue with editor.jqxcombobox in Editable Grid #18430

Syai

Participant

Hi Peter,

I’ve gone through the flow of code executing. I found the problem while binding the data to combobox through “dataadapter”. Below is the error it is giving. Could you please help me to resolve this.

The data is still loading. When the data binding is completed, the Grid raises the ‘bindingcomplete’ event. Call this function in the ‘bindingcomplete’ event handler.

Regards,
Syai

April 2, 2013 at 12:52 pm in reply to: Facing an issue with editor.jqxcombobox in Editable Grid Facing an issue with editor.jqxcombobox in Editable Grid #18415

Syai

Participant

Hi Peter,

I tried with the initeditor also. I’m facing the same issue.

Regards,
Syai

April 2, 2013 at 12:01 pm in reply to: Facing an issue with editor.jqxcombobox in Editable Grid Facing an issue with editor.jqxcombobox in Editable Grid #18408

Syai

Participant

Hi Peter,

Below is the code that i’m using. And below the code I’ve given some comments related to my problem.

@{
    ViewBag.Title = "TestPageJQGrid";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>
    TestPageJQGrid</h2>
<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example demostrates how we can manipulate data at client
        side. The Grid plugin provides you callback functions when you add, remove or update
        a row. </title>
    
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = 'office';
            // prepare the data            
            var data = {};
            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", "Cramel 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"];
            //var dateValues = ["12/31/2012", "12/31/2012", "02/20/2012", "12/31/2012", "01/12/2012", "02/20/2012", "01/12/2012", "10/12/2012", "02/20/2012"]
            var dateValues = ["31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012", "31/12/2012", "14/12/2012", "20/02/2012"]
            var generaterow = function (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["firstname"] = firstNames[Math.floor(Math.random() * firstNames.length)];
                row["lastname"] = lastNames[Math.floor(Math.random() * lastNames.length)];
                row["productname"] = productNames[productindex];
                row["Date"] = dateValues[productindex];
                row["price"] = price;
                row["quantity"] = quantity;
                row["total"] = price * quantity;
                return row;
            }
            for (var i = 0; i < 10; i++) {
                var row = generaterow(i);
                data[i] = row;
            }
            var source =
{
    localdata: data,
    datatype: "local",
    datafields: [
{ name: 'firstname', type: 'string' },
{ name: 'lastname', type: 'string' },
{ name: 'productname', type: 'string' },
{ name: 'quantity', type: 'number' },
{ name: 'price', type: 'number' },
{ name: 'total', type: 'number' },
{ name: 'Date', type: 'date', format: 'dd/MM/yyyy' }
],
    addrow: function (rowid, rowdata, position, commit) {
        // synchronize with the server - send insert command                    
        // call commit with parameter true if the synchronization with the server is successful                     
        //and with parameter false if the synchronization failed.                    
        // you can pass additional argument to the commit callback which represents the new ID if it is generated from a DB.                    
        commit(true);
    },
    deleterow: function (rowid, commit) {
        // synchronize with the server - send delete command                    
        // call commit with parameter true if the synchronization with the server is successful                     
        //and with parameter false if the synchronization failed.                    
        commit(true);
    },
    updaterow: function (rowid, newdata, commit) {
        // synchronize with the server - send update command                    
        // call commit with parameter true if the synchronization with the server is successful                     
        // and with parameter false if the synchronization failed.                    
        commit(true);
    }
};
            var dataAdapter = new $.jqx.dataAdapter(source);
            var self = this;
            var supplierSource =
        {
            datatype: "json",
            datafields: [
                { name: 'TutorName' },
                { name: 'TutorId' }
            ],
            id: 'supTutorId',
            //root: 'RowsTutors',
            url: '@Url.Action("GetTutorsData", "Controller")'
        };
            //INITIALIZE THE DATA ADAPTER FOR THE SUPPLIER SOURCE
            var supplierDataAdapter = new $.jqx.dataAdapter(supplierSource, { autoBind: false, async: false });
            // initialize jqxGrid            
            $("#jqxgrid").jqxGrid(
 {
     width: 500,
     height: 350,
     pageable: true,
     source: dataAdapter,
     autoheight: true,
     theme: theme,
     editable: true,
     columns: [{
         text: 'First Name', datafield: 'firstname', width: 100
     },
 { text: 'Last Name', datafield: 'lastname', width: 100 },
 { text: 'Date', datafield: 'Date', width: 100, columntype: 'datetimeinput', width: 90, align: 'center', cellsalign: 'right', cellsformat: "dd/MM/yyyy",
     createeditor: function (row, cellvalue, editor) {
         editor.jqxDateTimeInput({ culture: 'fr-FR' });
     }
 },
 { text: 'Product', datafield: 'productname', align: 'center', cellsalign: 'center', width: 180 },
 { text: 'Quantity', datafield: 'quantity', width: 80, align: 'center', cellsalign: 'right' },
 { text: 'Unit Price', datafield: 'price', width: 90, align: 'center', cellsalign: 'right', cellsformat: 'c2' },
 { text: 'Total', datafield: 'total', width: 100, align: 'center', cellsalign: 'right', cellsformat: 'c2' },
 { text: 'Supplier', datafield: 'Tutor', columntype: 'combobox', align: 'center', width: 90,
     createeditor: function (row, cellvalue, editor) {
         debugger;
         editor.jqxComboBox({ displayMember: 'TutorName', valueMember: 'TutorId', source: supplierDataAdapter, dropDownWidth: 200 });
         debugger;
         var items = editor.jqxComboBox('getItems');
         $.each(items, function () {
             var item = this; item.title = item.label;
         });
     }
 }
 ]
 });
            $("#addrowbutton").jqxButton({ theme: theme });
            $("#addmultiplerowsbutton").jqxButton({ theme: theme });
            $("#deleterowbutton").jqxButton({ theme: theme });
            $("#updaterowbutton").jqxButton({ theme: theme });
            // update row.            
            $("#updaterowbutton").on('click', function () {
                var datarow = generaterow();
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    var commit = $("#jqxgrid").jqxGrid('updaterow', id, datarow);
                    $("#jqxgrid").jqxGrid('ensurerowvisible', selectedrowindex);
                }
            });
            // create new row.            
            $("#addrowbutton").on('click', function () {
                var datarow = generaterow();
                var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow, 'top');
                $('#jqxgrid').jqxGrid('gotopage', -1);
            });
            // create new rows.            
            $("#addmultiplerowsbutton").on('click', function () {
                // $("#jqxgrid").jqxGrid('beginupdate');
                for (var i = 0; i < 10; i++) {
                    var datarow = generaterow();
                    var commit = $("#jqxgrid").jqxGrid('addrow', null, datarow);
                }
                // $("#jqxgrid").jqxGrid('endupdate');
            });            // delete row.            
            $("#deleterowbutton").on('click', function () {
                var selectedrowindex = $("#jqxgrid").jqxGrid('getselectedrowindex');
                var rowscount = $("#jqxgrid").jqxGrid('getdatainformation').rowscount;
                if (selectedrowindex >= 0 && selectedrowindex < rowscount) {
                    var id = $("#jqxgrid").jqxGrid('getrowid', selectedrowindex);
                    var commit = $("#jqxgrid").jqxGrid('deleterow', id);
                }
            });
        });   
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div style="float: left;" id="jqxgrid">
        </div>
        <div style="margin-left: 10px; float: left;">
            <div>
                <input id="addrowbutton" type="button" value="Add New Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="addmultiplerowsbutton" type="button" value="Add Multiple New Rows" />
            </div>
            <div style="margin-top: 10px;">
                <input id="deleterowbutton" type="button" value="Delete Selected Row" />
            </div>
            <div style="margin-top: 10px;">
                <input id="updaterowbutton" type="button" value="Update Selected Row" />
            </div>
        </div>
    </div>
</body>
</html>

Step 1: If you observe the createeditor of Supplier, When we click on the cell, it triggers and first debugger is getting executed and binding the required items to the combobox.

Step 2: Now I’m navigating page 2 of the grid.

Step 3: Again I clicked on the cell of “supplier column”. Here the debugger has to get executed and have to bind the items to combobox by getting from the server. This is not happening.
When I’m clicking on the cell and try to debug, the execution of script is entered into jquery-1.9.0.min.js and then to the “jqxgrid.js” and nothing is happening. The combobox is remained as blank without the items.

Regards,
Syai

April 2, 2013 at 11:24 am in reply to: Facing an issue with editor.jqxcombobox in Editable Grid Facing an issue with editor.jqxcombobox in Editable Grid #18403

Syai

Participant

When I’m debugging, before the loading of dataadapter, the script of jquery 1.9.0 is tried to getting executed and that didn’t come out of that script. Does it make any sense? If not please let me know.

Regards

April 2, 2013 at 11:22 am in reply to: Facing an issue with editor.jqxcombobox in Editable Grid Facing an issue with editor.jqxcombobox in Editable Grid #18402

Syai

Participant

Peter Stoev,

I’ve declared the source and dataadapter above the grid initialization itself. For the first time when I click on the cell of combobox, it is working fine till going to another page.

Regards,
Syai

March 29, 2013 at 7:24 am in reply to: Combobox in Grid Combobox in Grid #18242

Syai

Participant

Hi,

Can anyone help me on this. Here I’m trying to pass selected row value to server through source but the value it is passing the value as null. I need to assign the value when the cell value of the row is changed. So I’m calling the dataadapter in initeditor. Below is the piece of code I’ve used in source.

var moduleSource =        
{            
     datatype: "json",            
     datafields: [                
                 { name: 'Name' },                
                 { name: 'Id' },                
                 { name: 'StartDate' },                
                 { name: 'EndDate' }            
                ],                        
     data: { 'SelectedDate':  _selServiceDate },            
     id: 'CourseModuleId',            
     url: '@Url.Action("GetModulesOnCourseData", "Controller")'        
};
//INITIALIZE THE DATA ADAPTER FOR THE MODULE SOURCE
var moduleDataAdapter = new $.jqx.dataAdapter(courseModuleSource, { autoBind: false, async: false});

Here ” _selServiceDate” is the date I’m getting on selecting the combobox of the row from selected row. This value is not getting sent to the server side.

Regards,
Syai

Author

Posts

Viewing 15 posts - 16 through 30 (of 47 total)

← 1 2 3 4 →