Is it possible to add row to the unbound grid?

Answered (Verified) This post has 1 verified answer | 5 Replies | 1 Follower Thread's RSS feed.

adogg
Points 1,025
Replied On: Wed, Apr 25 2012 5:31 AM Reply

Hello, I want to implement such scenario: there are 2 controls on the page - tree and a grid. When user checks node in the tree page calls server via $.ajax(), retrieves node details and that details should be added as a row to the grid. So, grid initially isn't bound to any data.

Grid is defined like this:

@(Html.Infragistics().Grid<NodeDetails>().ID("detailsGrid")
.PrimaryKey("ID")
.Columns(columns =>
{
columns.For(d => d.ID).DataType("int").HeaderText("ID");
columns.For(d => d.TotalCompleted).DataType("int").HeaderText("Total Completed");
columns.For(d => d.ResponseRate).DataType("int").HeaderText("Response Rate");
columns.For(d => d.Name).DataType("string").HeaderText("Name");
columns.For(d => d.TotalInvited).DataType("int").HeaderText("Total Invited");
columns.For(d => d.TotalCompleted).DataType("int").HeaderText("Total Completed");
})
.Features(features =>
{
features.Hiding().ColumnSettings(settings =>
{
settings.ColumnSetting().ColumnKey("ID").Hidden(true).AllowHiding(false);
});
}
)
.ClientDataSourceType(ClientDataSourceType.JSON)
.Width("100%")
.Height("600px")
.Render()
  )

javascript that gets data is:

 $(document).ready(function () {
      $("#hierarchyTree").bind("igtreenodecheckstatechanged", function (evt, ui) {
           if (ui.newState == "on") {
               $.ajax({
                            type: "POST",
                            url: '@Url.Action("GetNodeDetails")',
                            data: { id: ui.node.data.ID },
                            success: function (returnData) {
                                   if (returnData.ok) {
                                         var grid = $('#detailsGrid');
                                         grid.igGridUpdating("addRow", returnData.data);
                                   }
                    }
              })
          }
     });
});

 

right now data is received but after   igGridUpdating("addRow", returnData.data) nothing is happened. I assume this is because grid isn't bound to any data source. How can I get it working?

  • Post Points: 20

Verified Answer

Answered (Verified) Replied On: Wed, Apr 25 2012 7:30 AM Reply
Verified by adogg

Hi adogg,

In the code snippet you gave there is no Updating feature enabled. You should add it before using the Updating API.

 Your code should look like this:

Code Snippet
  1. @(Html.Infragistics().Grid<NodeDetails>().ID("detailsGrid")
  2. .PrimaryKey("ID")
  3. .Columns(columns =>
  4. {
  5. columns.For(d => d.ID).DataType("int").HeaderText("ID");
  6. columns.For(d => d.TotalCompleted).DataType("int").HeaderText("Total Completed");
  7. columns.For(d => d.ResponseRate).DataType("int").HeaderText("Response Rate");
  8. columns.For(d => d.Name).DataType("string").HeaderText("Name");
  9. columns.For(d => d.TotalInvited).DataType("int").HeaderText("Total Invited");
  10. columns.For(d => d.TotalCompleted).DataType("int").HeaderText("Total Completed");
  11. })
  12. .Features(features =>
  13. {
  14.     features.Updating().EnableAddRow(false).EnableDeleteRow(false);
  15.     features.Hiding().ColumnSettings(settings =>
  16.     {
  17.         settings.ColumnSetting().ColumnKey("ID").Hidden(true).AllowHiding(false);
  18.     });
  19. }
  20. )
  21. .ClientDataSourceType(ClientDataSourceType.JSON)
  22. .Width("100%")
  23. .Height("600px")
  24. .Render()
  25. )

 

I've added line #14. Other code is yours.

 

Hope this helps,

Martin Pavlov

Infragistics, Inc.

  • Post Points: 40

All Replies

Answered (Verified) Replied On: Wed, Apr 25 2012 7:30 AM Reply
Verified by adogg

Hi adogg,

In the code snippet you gave there is no Updating feature enabled. You should add it before using the Updating API.

 Your code should look like this:

Code Snippet
  1. @(Html.Infragistics().Grid<NodeDetails>().ID("detailsGrid")
  2. .PrimaryKey("ID")
  3. .Columns(columns =>
  4. {
  5. columns.For(d => d.ID).DataType("int").HeaderText("ID");
  6. columns.For(d => d.TotalCompleted).DataType("int").HeaderText("Total Completed");
  7. columns.For(d => d.ResponseRate).DataType("int").HeaderText("Response Rate");
  8. columns.For(d => d.Name).DataType("string").HeaderText("Name");
  9. columns.For(d => d.TotalInvited).DataType("int").HeaderText("Total Invited");
  10. columns.For(d => d.TotalCompleted).DataType("int").HeaderText("Total Completed");
  11. })
  12. .Features(features =>
  13. {
  14.     features.Updating().EnableAddRow(false).EnableDeleteRow(false);
  15.     features.Hiding().ColumnSettings(settings =>
  16.     {
  17.         settings.ColumnSetting().ColumnKey("ID").Hidden(true).AllowHiding(false);
  18.     });
  19. }
  20. )
  21. .ClientDataSourceType(ClientDataSourceType.JSON)
  22. .Width("100%")
  23. .Height("600px")
  24. .Render()
  25. )

 

I've added line #14. Other code is yours.

 

Hope this helps,

Martin Pavlov

Infragistics, Inc.

  • Post Points: 40
adogg
Points 1,025
Replied On: Wed, Apr 25 2012 7:48 AM Reply

Thanks Martin. That worked. But now I have a question regarding row deletion. If I use 'deleteRow' method row becomes grayed out but stays in the grid. Is there any way to remove it completely from the grid?

  • Post Points: 20
Replied On: Wed, Apr 25 2012 8:50 AM Reply

Hi adogg,

Add "AutoCommit(true)" to your code.

 

Hope this helps,

Martin Pavlov

Infragistics, Inc.

  • Post Points: 20
adogg
Points 1,025
Replied On: Thu, Apr 26 2012 4:19 AM Reply

Thank you!

  • Post Points: 20
Replied On: Thu, Apr 26 2012 4:23 AM Reply

You are welcome.

  • Post Points: 5
Page 1 of 1 (6 items) | RSS