0

i am using jqwidgets .

I am trying to implement JQxGrid.At this moment,I am getting Json encoded values returned by linkrenderer javascript variable like this:

  <a href="http://www.jqwidgets.com/edit/myid1">http://www.jqwidgets.com/edit/myid1</a>

  <a href="http://www.jqwidgets.com/edit/myid2">http://www.jqwidgets.com/edit/myid2</a>

  <a href="http://www.jqwidgets.com/edit/myid3">http://www.jqwidgets.com/edit/myid3</a>

But i want "linkrenderer" to return results like this:

  <a href="http://www.jqwidgets.com/edit/myid1">myid1</a>

  <a href="http://www.jqwidgets.com/edit/myid2">myid2</a>

  <a href="http://www.jqwidgets.com/edit/myid3">myid3</a>

I would appreciate your help in this regard.

My code:

  <script type="text/javascript">
    $(document).ready(function () {
        // prepare the data
        var source =
        {
            datatype: "json",
            datafields: [
                { name: 'CompanyName', type: 'string'},
                { name: 'ContactName', type: 'string'},
                { name: 'ContactTitle', type: 'string'},
                {name: 'CustomerID',type:'string'},


           ],
            url: 'data.php',
            cache: false
        };


       var linkrenderer = function (row, column, value)
   {
            if (value.indexOf('#') != -1) {
                value = value.substring(0, value.indexOf('#'));
            }
            value = "http://www.myurl.com/edit/" + value;
            var format = { target: '"_blank"' };
            var html = $.jqx.dataFormat.formatlink(value, format);
            return html;
        }



        var dataAdapter = new $.jqx.dataAdapter(source);

        $("#jqxgrid").jqxGrid(
        {
           width: 600,
            source: dataAdapter,
            theme: 'classic',
             pageable: true,
            autorowheight: true,
            autoheight: true,
            altrows: true,

            columns: [
              { text: 'Company Name', datafield: 'CompanyName', width: 250},
              { text: 'ContactName', datafield: 'ContactName', width: 150 },
              { text: 'Contact Title', datafield: 'ContactTitle', width: 180 },
               { text: 'CustomerID', cellclassname: 'column', datafield: 'CustomerID', width: 180, cellsrenderer: (linkrenderer) },

          ],
          ready: function () {
                var rows = $('#jqxgrid').jqxGrid('getrows');
                for (var i = 0; i < rows.length; i++) {
                    var currentCell = $('#jqxgrid').jqxGrid('getcellvalue', i, "CustomerID");

                };
          }
        });    
 $.getJSON( dataAdapter, function( data ) {
var items = [];

 $.each( data, function( key, val ) {
  items.push( "<li id='" + key + "'>" + val + "</li>" );
 });

 $( "<ul/>", {
   "class": "my-new-list",
   html: items.join( "" )
  }).appendTo( "#jqxgrid" );
   });          
    });
  </script>

 </head>
<body class='default'>
  <div id="jqxgrid"></div></body>

1 Answer 1

0

Instead of using $.jqx.dataFormat.formatlink() to create the html of your link, why don't you create it on your own? So your function LinkRenderer() should look like this :

var href = "http://www.myurl.com/edit/" + value;
return '<a href="'+href+'" target="_blank">'+value+'</a>';

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.