[fgaonetMember]

Yes, that what I did. My concern is too many codes I need to write explicitly.

I only need one column editable in my 20-column grid. I have to explicitly set editable with false for all other 19 columns.

That is ok if no other way.

Thanks

[fgaonetMember]

Got it. Use createeditor property:

createeditor: function (row, cellvalue, editor) {
editor.jqxNumberInput({ decimalDigits: 0, digits: 3 });

Thank you!

[fgaonetMember]

Do you mean that my original way is the best and only way?

[fgaonetMember]

shimmoril,

I tested your code on my IE8. The tab can stretch to full available area. The iFrame content is too large, and can’t be viewd completely. You need to change your iFrame to scrolling=”yes”, so the whole content can be viewed by moving the sroll bars.

[fgaonetMember]

I was not 100% correct stating my problem on the above post. Actually, my content page has several div with percent height and width.

I found a solution. I placed a div with 100% height and width under the body, and move all other elements into this div. It fixed my problem.

[fgaonetMember]

I have a similar problem. The tabs are set to 100% height and width. The tab content is another page loaded by AJAX. While the browser window resizing, the tabs automatically resize itself as expected, but the content page does not follow the change.

For example, my content page is a div with 100% height and width too. If I shrink the browser window, some of the content page are cut out; if I enlarge the bowser window, the content page does not stretch the tab.

Is it possible to improve this? At least we need a “resize” event on jqxTabs, and we can manually resize or reload the content on this event.

Any idea?

Thanks

[fgaonetMember]

Hi, Dimitar:

Thank you for your reply! It works almost as my expected. Only one thing needs to be modified.

When I start editing, it shows “NaN”. If I leave without any input, it shows “0”. How can I keep it as blank if nothing entered?

Thanks again!

[fgaonetMember]

The big different is contentType, I think. As my above code, I use

contentType: “application/json; charset=utf-8”,

If I comment out this line, I got the error in both of dataAdapter.dataBind() and $(“#jqxWidget”).jqxListBox().

Thanks,

[fgaonetMember]

Hi, Peter:

I did try your code. It works on local data. My issue is loading json data by jqx.dataAdapter.

I just wonder that if the jqxListBox internally calls the jqxDataAdapter’s dataBind method, why it can pass the load error as dataBind() used outside of jqxListBox.

Never mind it any more. I will use regular ajax to download json data instead of jqx.dataAdapter.

I appreciate your effort very much. Thank you!

[fgaonetMember]

Hi Peter:

You are correct. I may set the Grid’s width and height to ’100%’ to show scroll bar. However, there are 2 issues in this setting:

1. If the height of total data rows is less the window’s height, the Grid shows many blank rows to “fill up” the window. For example, in your Grid Demo, if you set the data row to 10, and use an 22″ monitor, you will see many blank rows after the data row.

2. In case we need a pager, we have to set autoheight=true. For example, I set 20 rows per page for regular users using 22″ monitor. Some small monitor users can only see the first 10 data rows, and no way to scroll down to the bottom of the Grid to change the page-size.

In our project, our data is very dynamical. It may be 1000 rows, and also possible a few rows, or even nothing (0 row). I am looking for a way to show the scroll bar as soon as the data rows can’t be completely showed in the window IN ANY CASE, at least working on the above two scinarios. Is it possible now? or is it on your road map? or Is there a workaround?

Thank you very much!

[fgaonetMember]

Thank you, Peter!

I tried to use downloadComplete, but it still not working. I added a loadError function, and tested again. Following is my test code. While running dataAdapter.dataBind(); I got: Internal Server Error. Continuing to run $(“#jqxWidget”).jqxListBox(), I got: Data is Loaded.

Can you reproduce it?

By the way, I still can’t format my code after following your instruction. I used to use the simple text editor in other forums, and still need more practice to use yours. Sorry for my poor code!

   <script type="text/javascript">
        $(document).ready(function() {
            var source = {
                type: "POST",
                url: “../Services/Services.asmx/GetNames”,
                datatype: "json",
                datafields: [{ name: "Name" }, { name: "ID"}]
            };
            var dataAdapter = new $.jqx.dataAdapter(source, {
                contentType: "application/json; charset=utf-8",
                loadError: function(jqXHR, status, error) {
                    alert("Request failed: " + error);
                },
                downloadComplete: function(edata, textStatus, jqXHR) {
                    alert("Data is Loaded");
                }
            });
            dataAdapter.dataBind();//Request failed: Internal Server Error
            $("#jqxWidget").jqxListBox({ source: dataAdapter, displayMember: "Name", valueMember: "ID", width: 200, height: 250 }); //Data is Loaded
        });
        
    </script>

[fgaonetMember]

I know and that is why I said:”if I use the last line of code ($(“#jqxWidget”).jqxListBox()), the result shows correctly. ”

My question is the dataAdapter.dataBind() can’t trigger data loading. If I comment out the last line in my code (see above), it does NOT show the html table.

Maybe you missunderstood my question due to the post editor. It always changes my code after publishing.

[fgaonetMember]

I am trying to use jqx.dataAdapter loading json data. See below for my code. While running the code, nothing happens. However, if I comment out the dataAdapter.dataBind(), and use the last line of code ($(“#jqxWidget”).jqxListBox()), the result shows correctly. It means all setting on dataAdapter are correct.

It seems that dataAdapter.dataBind() does not trigger the data loading. What is I missed?

Thanks.

$(document).ready(function() {
var source = {
type: “POST”,
url: “../Services/Services.asmx/GetNames”,
datatype: “json”,
datafields: [{ name: “Name” }, { name: “ID”}]
};
var dataAdapter = new $.jqx.dataAdapter(source, {
contentType: “application/json; charset=utf-8”,
loadComplete: function() {
var records = dataAdapter.records;
var length = records.length;
var html = “NameID”;
for (var i = 0; i < length; i++) {
var record = records[i];
html += "”;
html += “” + record.Name + “”;
html += “” + record.ID + “”;
html += “”;
}
html += “”;
$(“#jqxWidget”).html(html);
}
});
dataAdapter.dataBind();
//$(“#jqxWidget”).jqxListBox({ source: dataAdapter, displayMember: “Name”, valueMember: “ID”, width: 200, height: 250 });
});

[fgaonetMember]

Peter:

Thank you for your reply!

I did use jqxListBox(‘getSelectedItems’).length to get the selectedItemsCount. I wonder how to bind jqxListBox’s property to Knockout ViewModel’s property. Right now, I use the following code to do the binding:

window.vm = new AppViewModel();
ko.applyBindings(window.vm);
$(“#jqxListBox”).bind(‘select’, function(event) {
window.vm.sltCount($(“#jqxListBox”).jqxListBox(‘getSelectedItems’).length);

Is this the correct way?

In my application, I may need to change a jqxListBox’s property dynamically. For example, I need to bind jqxListBox.checkboxes to ViewModel’s “showBoxes” property. Is there any way like the following?

function AppViewModel() {
this.showBoxes = ko.observable(true);
}
$(“#jqxListBox”).jqxListBox({ data-bind=”checkboxes: showBoxes” });

Thank you in advance for your clear answer, either “yes” or “no” or “in road map” or any other workaround solutions. It all helpful for me to plan my development.

[fgaonetMember]

Peter:

Thank you for your reply! As my understanding to your anwser, I guess that jqxListBox has no built-in method of “selectAll” and “getCheckedItems” available. I need to build my own “selectAll” and “getCheckedItems” in “select” or “checkChange” event by loop each item. Am I correct?

Thanks,

[Author]

Posts