jQWidgets Forums
Forum Replies Created
-
Author
-
April 3, 2012 at 10:38 pm in reply to: Bind docking windows to knockout observableArray? Bind docking windows to knockout observableArray? #3200
Hi Minko,
Thanks for the code, however, I get a knockout exception: Unable to get value of the property ‘nodeType’: object is null or undefined
This is what I have:
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <link rel="stylesheet" href="jqwidgets-ver1.9/jqwidgets/styles/jqx.base.css" type="text/css" /> <!-- add the jQuery script --> <script type="text/javascript" src="jqwidgets-ver1.9/scripts/jquery-1.7.1.min.js"></script> <!-- add the knockout script --> <script type="text/javascript" src="jqwidgets-ver1.9/scripts/knockout-2.0.0.js"></script> <!-- add the jQWidgets framework --> <script type="text/javascript" src="jqwidgets-ver1.9/jqwidgets/jqxcore.js"></script> <!-- add one or more widgets --> <script type="text/javascript" src="jqwidgets-ver1.9/jqwidgets/jqx-all.js"></script> <!-- add my javascript script --> <script type="text/javascript">
var theme = 'classic',
PeopleModel = function () {
this.people = ko.observableArray([{ name: 'Franklin', credits: 250 }, { name: 'Mario', credits: 5800}]);var self = this,
sectionsCount = 0,
windowsCount = 0,
maxSections;
//This method will handle the new added sections
function handleSection(el) {
var id = 'knockout-section-' + sectionsCount;
sectionsCount += 1;
el.id = id;
}
//This method will handle the new added windows
function handleWindow(el) {
var id = 'knockout-window-' + windowsCount,
section = windowsCount % sectionsCount;
windowsCount += 1;
$(el).attr('id', id);
$('#docking').jqxDocking('addWindow', id);
$(el).detach();
$(el).appendTo($('#knockout-section-' + section));
}
//We define the docking's sections count to be equal to the startup count of the objects in the
//people array. This is not mandatory but it's important to create all different sections before the docking initialization
maxSections = this.people().length;
//This method handles adding a new person (when the user click on the Add button)
this.addPerson = function () {
if (this.personName() && this.personCredits()) {
this.people.push({
name: this.personName(),
credits: this.personCredits()
});
}
}
//This custom render takes care of adding new windows
this.buildWindow = function (element) {
var el = element[1];
if (sectionsCount < maxSections) {
handleSection(el);
handleWindow($(el).children('.knockout-window'));
} else {
handleWindow($(el).children('.knockout-window'));
$(el).remove();
}
}
};ko.applyBindings(new PeopleModel());
$('#docking').jqxDocking({ theme: theme, orientation: 'horizontal', width: 380, mode: 'docked' });</script> <title></title></head><body> <form id="form1" runat="server"> <div id="main"> <div id='jqxWidget'> <div id="docking" data-bind="template: { foreach: people, afterRender: buildWindow }"> <div class="knockout-section"> <div class="knockout-window"> <div>Name <span data-bind="text: name"></span></div> <div> Credits count: <span data-bind="text: credits"></span> </div> </div> </div> </div> </div> </div> </form></body></html>
Thanks,
JonApril 3, 2012 at 10:09 pm in reply to: Re-sizing jqWidgets controls according to screen resolution Re-sizing jqWidgets controls according to screen resolution #3199How soon do you think it will be till all of your controls will resize and use percentages? For Single Page Applications, this is a very valuable feature considering most people will have different resolutions and we will want to utilize all screen real estate.
Thanks,
JonI agree with AndyXie, this would be a great feature because if I have a lot of columns in my grid in a master-detail view and the details are on the right, the grid will have some of the columns hidden. If I set the width to be 50% of the page, the user could maximize the page to see more of the columns that were previously hidden due to the details view.
Jon
April 3, 2012 at 8:00 pm in reply to: jqwidgets and knockoutjs binding to selectedrow jqwidgets and knockoutjs binding to selectedrow #3197So since it is not an observable, it didnt change. When I used another variable and changed that in the function it did change:
this.selectedRowValue = ko.observable();this.selectedRow = function (args) {
if ($('#jqxgrid').jqxGrid('getrowdata', args) == null) {
return '';
}
self.selectedRowValue($('#jqxgrid').jqxGrid('getrowdata', args));
};Jon
April 3, 2012 at 6:38 pm in reply to: jqwidgets and knockoutjs binding to selectedrow jqwidgets and knockoutjs binding to selectedrow #3195Hi Peter,
Thank you for the response. I implemented what you had and the method was getting called every time. However if I put in something like this:
<div id="jqbindings"> <div data-bind="updateSelection: selectedRow" id="jqxgrid"> </div> <input type="text" data-bind="value: selectedRow().name" /> </div>
to have my UI update when the function is called, I noticed the UI doesn’t get updated. I’m not sure since the function is observable if the UI will get updated.
Thanks,
JonApril 2, 2012 at 9:37 pm in reply to: jqwidgets and knockoutjs binding to selectedrow jqwidgets and knockoutjs binding to selectedrow #3172I was looking into this more, and maybe for the jqxgrid there could be a way to bind the selectedrowindex to an observable in the view model like so:
$("#jqxgrid").jqxGrid(
{
source: dataAdapter,
autoheight: true,
pageable: false,
theme: 'darkblue',
sortable: true,
altrows: true,
enabletooltips: true,
showsortcolumnbackground: false,
selectionmode: 'singlerow',
selectedrowindex: 'selectedRowIndex',
columns: [
{ text: 'Name', dataField: 'name', width: 200 },
{ text: 'Sales', dataField: 'sales', width: 200, cellsalign: 'right' },
{ text: 'Price', dataField: 'price', width: 200, cellsformat: 'c2', cellsalign: 'right' }
]
});Then when the selectedrowindex changes, we could have a computed function that would get the values like I had in the original post.
Thanks,
Jon -
AuthorPosts