How can I turn a binding handler for slickGrid into something I can have one handler and create instances

[Paul D'Andrea]

Hi,

In y project there are tabs with a binding handler created for each to setup a slickGrid here is the html:

<div id="clientELINKGrid" style="width: 249px; height: 545px; border-bottom: solid 1px #ccc;" data-bind="slickClientELINKGrid: { data: items, columns: columns, options: options }"></div>

Now for this one like other tabs with similar html there is also a binding handler that I would like to make a generic one to create an instance of for use... How can I make it instance-able or reuse-able code...

The following is the JavaScript for the binding handler:

ko.bindingHandlers.slickClientELINKGrid = {
		init: function (element, valueAccessor) {
			var settings = valueAccessor();
			clientELINKGridData = ko.toJS(settings.data); // instead of ko.utils.unwrapObservable(settings.data) then gridData can be declared outside binding
			var columns = ko.utils.unwrapObservable(settings.columns);
 
			//Get User Preference Column Order
			var rtnObjArry = getUserPrefColOrder(columns, eLinkClientColumnOrderPrefKey);
			columns = rtnObjArry[0];
			defaultELINKClientGridColumnOrder = rtnObjArry[1];
			newELINKClientGridColumnOrder = rtnObjArry[2];
 
			//Set options
			var options = ko.utils.unwrapObservable(settings.options) || clientELINKGridOptions; //settings.options; //{};
 
			//Setup Critical Grid
			clientELINKGrid = new Slick.Grid(element, clientELINKGridData, columns, options);
			clientELINKGrid.setSelectionModel(new Slick.RowSelectionModel());
 
			//Create On Column ReOrder event handler
			clientELINKGrid.onColumnsReordered.subscribe(function (e, args) {
				var colConfigData = clientELINKGrid.getColumns();
				var rtnObjArry = setUserPrefColOrder(colConfigData, eLinkClientColumnOrderPrefKey);
				defaultELINKClientGridColumnOrder = rtnObjArry[0];
				newELINKClientGridColumnOrder = rtnObjArry[1];
			});

			//Subscribe on selected rows changed for up down arrow presses; prevents them after on press or click; not sure why...not digging into SlickGrid at this time to find out either for now...
			clientELINKGrid.onSelectedRowsChanged.subscribe(function (e, args) {
			if (!eLinkClientViewModel.initialize) {
					//while (clientSelectActive) {
					sleep(30);
					//}
					//clientSelectActive = true; //This var is set to false in EventResponse.cshtml when the Distribution List (DL) is updated...
				}
				var row = args.rows[0];
				if (row != undefined) {
					setClientSelectedRow(row, 'ELINK');
				};
				//clickCalled = false;
			});

		},
		update: function (element, valueAccessor, allBindingAccessor, eLinkClientViewModel) {
			var settings = valueAccessor();
			clientELINKGridData = ko.toJS(settings.data); // instead of ko.utils.unwrapObservable(settings.data); //just for subscription
			clientELINKGrid.updateRowCount();
			clientELINKGrid.resizeCanvas(); // NB Very important for when a scrollbar appears
			clientELINKGrid.setData(clientELINKGridData, false);
			clientELINKGrid.render();
} //End of SlickGrid Bind Handler

[Gunnar Liljas]

What do you mean by "generic"?

--
You received this message because you are subscribed to the Google Groups "KnockoutJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to knockoutjs+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Noirabys]

hi,

make the instance available within the update method and not a global variable

ko.utils.domData.set(element,'yourModel', clientELINKGrid );

var , clientELINKGrid  = ko.utils.domData.get(element,'yourModel');

best regards

 noirabys