How to complex Json object binding to Grid?

How to complex Json object binding to Grid?

Originally Posted 2 September 2014, 12:18 am EST

• 

  returner

  • Post Options:
  • Link
    Copy

  Originally Posted 2 September 2014, 12:18 am EST

  I want binding to complex json objects and dynamic binding column width.
  
  

  
  <wj-flex-grid items-source="bulletinBoardSales" allow-dragging="None" selection-mode="Row">
  	<wj-flex-grid-column header="Name" is-read-only="true" binding="Name.Data" ></wj-flex-grid-column>
  	<wj-flex-grid-column header="Address" is-read-only="true" binding="Address.Data"></wj-flex-grid-column>
  </wj-flex-grid>
  

  
  
  my json data was.
  

  
  [
  	{"Name":
  		{
  		"Data":"someData",
  		"Width":50
  		},
  	"Address":
  		{
  		"Data":"someData",
  		"Width":30}
  	},
  	{"Name":
  		{
  		"Data":"someData",
  		"Width":50
  		},
  	"Address":
  		{
  		"Data":"someData",
  		"Width":30}
  	}
  ]
  

  
  
  my codes atteched image.
  
  questions.
  1. How to Binding object in object binding ?
  
  2. How to dynamically setting width by object value?
  
  
  
  
  
  
  
  
  
  
• 

  c1_alexi

  • Post Options:
  • Link
    Copy

  Reply

  You may use custom cell templates that can be defined as a content of column directives, and bind column widths to Width properties from the first array item:
  in html:
  
  
  

  
      
          {{$item.Name.Data}}
          {{$item.Address.Data}}
      
  

  
  
  having the following code in a controller:
  

  
          $scope.bulletinBoardSales = [
              {
                  "Name":
                     {
                         "Data": "someData",
                         "Width": 50
                     },
                  "Address":
                      {
                          "Data": "someData",
                          "Width": 30
                      }
              },
              {
                  "Name":
                     {
                         "Data": "someData",
                         "Width": 50
                     },
                  "Address":
                      {
                          "Data": "someData",
                          "Width": 30
                      }
              }
          ];
  

• 

  manish-gupta1

  • Post Options:
  • Link
    Copy

  Reply

  Hi Gopal,
  You can show same using wjFlexGridCellTemplate in manager column.
  For your reference, please see the attached sample that implements the same.
  
  If it does not fulfill your requirement, please provide JSON structure to us.
  
  Thanks,
  Manish Kumar Gupta
  2017/05/FlexGrid_complexData.zip
  
• 

  bernardo

  • Post Options:
  • Link
    Copy

  Reply

  Hello
  
  The template you posted should work fine. I tried a similar example and it did. This could be because I am using a later version of the controls (we did improve the templating mechanism quite a bit), or it could be because my test is not accurate. If you could send me a simple test project, I would be happy to double-check what is going on.
  
  Also, I am happy to inform you that the latest build supports sub-property binding, so you can do for example:
  
  flex.columns[0].binding = 'product.name';
  flex.columns[1].binding = 'product.price';
  flex.columns[2].binding = 'customer.id';
  flex.columns[3].binding = 'customer.lastname';
• 

  returner

  • Post Options:
  • Link
    Copy

  Reply

  Thank you,
  I atteched my visual studio 2013 solution. (I used Visual Studio 2013 express)
  
  it composed to angularjs with typescript.
  when it run, shows just two grids.
  
  all of application scripts located in /app/... folder.
  
  questions.
  1. How can i update flex-grid? I want to two-way binding grid.
  I tried addNew() method of wijmo.collections.CollectionView, but failed. and items.push() it failed too.
  
  2. column template failed too. you can show /Views/GridMain.cshtml.
  2014/09/WijmoAngularExample.zip
  
• 

  bernardo

  • Post Options:
  • Link
    Copy

  Reply

  Thanks for sending the sample app.
  
  The attachment contains minor modifications needed to make it work. Basically, there are a couple of ways to add items to bound collections:
  
  1) CollectionView.addNew()
  
  The "addNew" method does not take any parameters. It creates the new item, adds it to the collection, and returns a reference to it. When you are done initializing the new item, call "commitNew" to re-enable sorting/grouping/filtering on the new item.
  
  For example:
  
  var item = cv.addNew();
  item.Name = 'New Item';
  cv.commitNew();
  
  This is the same behavior/syntax as .NET's IEditableCollectionView.AddItem.
  
  2) array.push(item)
  
  You can simply add items directly to the source collection, then call CollectionView.refresh to refresh the view and notify any listeners:
  
  var item = { Name: 'New Item' };
  cv.sourceCollection.push(item);
  cv.refresh();
  
  3) ObservableArray.push(item)
  
  If your array is observable, you can simply add items to it and it will issue the required notifications. For example:
  
  var arr = new wijmo.collections.ObservableArray();
  var item = { Name: 'New Item' };
  arr.push(item);
  
  I hope this clarifies things.
  2014/09/WijmoAngularExample2.zip
  
• 

  gopala-chintakindi

  • Post Options:
  • Link
    Copy

  Reply

  How to bind a array to column using wijmo grid in typescript
  
  Each employee has a managers collection. So I want like below. Please see attached.
  
  
  

  Name        Managers
  ABC         Manager 1: BBB
              Manager 2: CC
              Manager 3 : D
  ZZZ         Manager 1: XXX
              Manager 2: YY

  
  
  
• 

  returner

  • Post Options:
  • Link
    Copy

  Reply

  Thank you for reply.
  
  binding width propery was success solution. thank you.
  
  additional problem.
  
  I need custom cell template some columns.
  
  I tried two ways.
  
  1. add to custom code to html - fail - code below
  

  
  <code>
  
                      <a href="detailView?id={{$item.Day31.Data}}" rel="nofollow">{{$item.day31.data}}</a>
                  
  </code>
  

  
  error message : Uncaught Error: [$parse:lexerr] Lexer Error: Unterminated quote at columns 46-66 [">{{$item.day31.Data] in expression [$item.day31.Data}}" class="ng-binding ng-scope">{{$item.day31.Data].
  
  
  2. include some html code to model - success - code below
  

  
  <code>
  //typescript code.
  export class BulletinBoardColumnTest {
          IsCollapse: boolean = false;
          Data: string = "Datas";
          Html: string = "<span title='" + "columnData" + "'>columnData</span>";
          Width: number = 200;
      }
  </code>
  

  
  

  
  <code>
  {{$item.day31.Data}}
  </code>
  

  
  
  question : Could not use custom cell templates like my first (#1) code? Impossible or mis-understood custom cell template uses?

• Marked as Answer

  

  gopala-chintakindi

  • Post Options:
  • Link
    Copy

  Reply

  Thank you very much Manish. It worked.
• 

  bemes9226

  • Post Options:
  • Link
    Copy

  Reply

  
  Hi Team,
  I have new query .
  data = below template data i have taken,
  but in "template" we have serviceType is number ,actually i want to bind "Types" Name property need to bind, json data.it is a seperate json .
  based on the Template under serviceType as value and Types under Id we need to put condtion true or false.
  if(serviceType === Types.Id)
  this.service.push(Types.Name)
  
  bind the this.service in grid
  
  "GetCategorizedWorkFlowTemplatesResult": {
  "Types": [
  {
  "Id": 0,
  "Identity": "",
  "Name": ""
  },
  {
  "Id": 1,
  "Identity": "",
  "Name": "General"
  }
  ]
  "Templates":[
  {
  "ClientDisplay": "",
  "ServiceType": 1,
  "Disabled": false,
  "HasRegion": false,
  },
  {
  "ClientDisplay": "reg",
  "ServiceType": 1,
  "Disabled": true,
  "HasRegion": false,
  },
  }
  ]
  }
  
• 

  sharad.tomer

  

  • Post Options:
  • Link
    Copy

  Reply

  Hi,
  
  We have posted the response for this query on your original post. Please refer to the following post:
  https://www.grapecity.com/forums/wijmo/data-binding-for-complex-d
  
  Regards
• 

  paujintrack

  • Post Options:
  • Link
    Copy

  Reply

  According to your description, Do you want to delete old rows before add rows to your jqGrid? if so, please refer to:
  
  #Delete a specific row
  
  function deleteGridRow(){
  
  var rowID = returnRowID();
  var colDomainID = jQuery('#list').jqGrid('getCol','domain_id',false)[rowID-1];
  var colCodeGroup = jQuery('#list').jqGrid('getCol','code_group',false)[rowID-1];
  
  var strURL = "source/common/get_code_header.asp";
  strURL = strURL + "?domain_id=" + colDomainID; //domain_id and code_group is group-key
  strURL = strURL + "&code_group=" + colCodeGroup;
  
  if( rowID != null ) jQuery("#list").jqGrid('delGridRow',rowID,{url:strURL,reloadAfterSubmit:false});
  else alert("Please Select Row to delete!");
  
  }
  http://www.trirand.com/blog/?page_id=393/help/delete-row
  
  #Delete all rows.
  
  var myGrid = $("#list"); // the variable you probably have already somewhere
  var gridBody = myGrid.children("tbody");
  var firstRow = gridBody.children("tr.jqgfirstrow");
  gridBody.empty().append(firstRow);
• 

  manish.gupta

  

  • Post Options:
  • Link
    Copy

  Reply

  Hi,
  It seems you have responded on the incorrect thread since this thread is related to the Wijmo FlexGrid.
  
  Please post the response on the correct thread
  
  Regards,
  Manish Gupta