Decidí utilizar jqGrid, considero que su funcionalidad es muy buena, rápida y ofrece lo que necesitaba.
Descargue los archivos necesarios para el jqGrid, escogí mi tema con jQueryUI y todo lo puse en una biblioteca en mi sitio de SharePoint que llamé "Site Assets".
La pagina donde puse el jqGrid es una pagina con un Layout sencillo, únicamente tiene una zona para WebParts. En esa zona puse dos Content Editor Web Parts (CEWP): en el de arriba puse la tabla y el div que se convierten en el jqGrid y en el de abajo el que tengo vinculado a mi archivo .js donde desarrolle los javascripts.
Script en el CEWP - Grid:
Estoy usando la clase ms-toolbar para el formato de las celdas de la tabla, de esta manera hago que se parezca al formato de SharePoint sin tener que crear mis propios estilos con CSS.
En el botón SaveItem1 y SaveItem2 a pesar de que tengo un alert cuando se carga la pagina y entra jQuery, sobreescribo el evento onclick con la función que deseo.
//Selector de todos los controles input con id que contenga "SaveItem" y ponerlos en la variable btns
/*
var btns = $('input[id^="SaveItem"]');
//Para cada input encontrado, remover el atributo onclick y luego ligarlo con mi función llamada handler
$.each(btns,function(index){
$(this).removeAttr("onclick", null);
$(this).bind('click',handler);
});
*/
En el boton gobackbutton1 tengo un script que regresa a la pagina anterior para el evento onclick, no necesite sobreescribirlo con jQuery.
Script en el CEWP - jqGrid scripting file:
(Comparto el codigo que me funciono para el jqGrid )
/*
$("#list").jqGrid({
datatype: "json",
mtype: 'GET',
url:'/_layouts/servergriddata.ashx',
jsonReader: {root: 'rows',
page: 'page',
total: 'total',
records: 'records',
repeatitems: false,
id: 'ItemID'},
colNames:['Id','Server Name','Serial #','Asset Tag','Tier 3','Status','Category','Supported'],
colModel :[
{name:'ItemID', width:30},
{name:'Atrium_Name', width:90},
{name:'Atrium_SerialNumber', width:60},
{name:'Atrium_TagNumber', width:60},
{name:'Atrium_Item_Tier3', width:50},
{name:'Atrium_AssetLifecycleStatus', width:50},
{name:'Atrium_NetworkSystemType',width:50},
{name:'Atrium_Supported',width:55}],
pager: '#pager',
rowNum:25,
rowList:[25,50,75,100],
sortname: 'ItemID',
viewrecords:true,
gridview: true,
height:"555",
width:"700",
multiselect: true,
caption: 'Select from existing server',
loadtext:'Loading, please wait',
caption:'Select the server record you wish to edit'
});
*/
Para sacar los datos del servidor de SQL hice un "handler", pude haber creado un Feature pero la verdad es que me pareció mas engorroso. El handler es un archivo con extensión .ashx y utilize C# para crea toda la funcionalidad de obtención de datos y conversión de objetos a JSON. También ahí puse el código necesario para ordenar, filtrar y paginar el jqGrid.
El archivo servergriddata.ashx después lo copié y pegué en:
C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\LAYOUTS
A esta ruta se le llaman "SharePoint hive" o Panal de SharePoint. Ya que lo que necesitaba era recibir una cadena de texto en formato JSON el manejador .ashx fué mi mejor opción. Todo lo "pesado" se realiza en el servidor y no en el cliente, hay otras ventajas tambien de usarlos para SharePoint como el hecho de que son sencillos de hacer funcionar, se crea y una vez que este funcionando como se espera es copiado en el panal de SharePoint y se puede mandar llamar asi: http://servidosSharePoint/sitio/_latyouts/TuHandler.ashx Listo, una belleza!, como lo comentaba antes preferí no usar Features (Caracteristicas) por el engorro de crear los archivos xml y todas las pruebas que iba a estar haciendo no quería estar actualizando la cache a cada rato.
Para hacer mis pruebas con el handler y el jqGrid utilice IE 7 (la mayoría de mis usuarios utilizan este navegador) y Chrome con sus excelentes herramientas para el desarrollador. Con estas podía ver exactamente lo que el jqGrid hacía y como mandaba pedir los datos a mi handler, asi me di cuenta de los parametros y pude decidir como obtenerlos y usarlos.
Cuando obtengo los datos de la tabla de SQL creo objetos y los meto en un arreglo luego utilice el JavascriptSerializer para convertirlos a una cadena JSON, lo que no me daba cuenta es que jqGrid necesita información sobre los datos que esta recibiendo y esta se debe poner en la cadena serializada http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
Finalmente pude mostrar en una pagina de SharePoint (WSS3) un jqGrid con registros de una base de datos de SQL Server. Al final asi es como se vé:
Gracias por leerme. Regalame un comentario.
Bastante bien el ejemplo, pero cual era el objetivo principal por el cual utilizaste JQGrid?, solo mencionaste que se adaptaba porque era lo que necesitabas.
ResponderEliminarHola Manuel, excelente pregunta.
EliminarEl objetivo fue el encontrar una solución alternativa a la falta de Business Data Catalog (BDC) en WSS, como sabes en MOSS tienes el servicio de datos profesionales y con esto puedes traer datos de otras fuentes de datos y visualizarlas en SharePoint como un tipo de contenido, sin embargo WSS carece de BDC y no podemos comprar licencias para actualizar a MOSS.
jqGrid es un desarrollo gratuito y que logre adaptarlo perfectamente a lo queríamos: mostrar datos de otra fuente dentro de un sitio de SharePoint para poder usarla dentro del mismo.
El producto final fue un sitio de SharePoint que trae información sobre una lista de servidores que tenemos almacenada en SQL Server 2005 (casualmente la misma instancia donde están las BDs de nuestro WSS), esta info la utilizamos para crear registros en una lista de SharePoint, al hacer esto podemos utilizar toda la funcionalidad que WSS tiene como seguridad, flujos de trabajo, tipos de contenidos, etc.