Grid Row Selector

[Mark Reynolds]

I need the ability to perform dynamic selection and totalling. So if you select rows 3-5, then the total of a column will be calculated dynamically.

I expect to do this via JScript. But I need an event to fire as rows are selected and then the ability to access the grid to recover the values needing totalling.

Here is what I've got so far (the display is working fine, it is the interaction that has me stalled):

 

<%=Html.Telerik().Grid(Model)
.Name("WellGrid")
.ClientEvents(events => events.OnRowSelected("onRowSelected"))
.Columns(columns =>{
columns.Bound(o => o.WellID);
columns.Bound(o => o.WellName);
columns.Bound(o => o.CompletionDate);
columns.Bound(o => o.TotalCost);
})
.Sortable()
.Filterable()
.Scrollable() %>

<textarea id="TextArea1" cols="20" rows="2"></textarea>

<script language="jscript" type="text/jscript">
function onRowSelected(e) {
    TextArea1.value = ??????????
}
</script>

[Atanas Korchev]

Hi Mark Reynolds,

You should find the cell of interest and extract the value:

var total = 0;

function onRowSelected(e) {
     var row = e.row;
     var cell = row.cells[0];
     var value = parseInt(cell.innerHTML);
    
     total += value;
     TextArea1.value = total;
}

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Mark Reynolds]

Way-good help.

Is there a way to tell the grid to select-by-row? And how can I tell which rowS (plural) are selected?

[Atanas Korchev]

Hi Mark Reynolds,

Could you please clarify what you mean by "select-by-row"? Do you mean multiple row selection? If yes - currently we don't support that. This answers the second question - you can have only one selected row in the current release. Fortunately you can use some JavaScript to achieve multiple-row selection:

1. Do not call the Selectable() method of the grid and remove the subscription to the OnRowSelected client event
2. Handle the OnLoad client event like this:
   
   

   <script type="text/javascript">
       function onLoad() {
           $('tr:has(td)', this.element).live('click', function(e) {
               $(this).toggleClass('t-state-selected');
   
               if (!e.ctrlKey) {
                   $(this).siblings().removeClass('t-state-selected');
               }
           });
       }
   </script>

To get all selected rows you can use the following jQuery selector:

var $selectedRows = $('#Grid tr.t-state-selected'); //where Grid is the Name of the grid

Then you can enumerate them and update the totals:

var total = 0;
var $selectedRows = $('#Grid tr.t-state-selected');
$selectedRows.each(function() {
    var row = this;
    var value = parseInt(row.cells[0].innerHTML);
    total += value;
});

I hope this helps,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[James Davies]

Mark,

Could you also use a 'checkbox on every row' approach?

For example, see:

  http://www.telerik.com/community/forums/aspnet-mvc/grid/support-for-checkboxes.aspx

  Regards,
  Jim

[shanker bangari]

Hi,


I  want total row counts in grid by using jqery i am trying like this code. but it's not working please give nay  solutions.

function toggle() {
    var $check1 = $('#ctgfy');
    var FiscalYearGrid = $('#FiscalYearGrid');
    var $selectedRow = $('#FiscalYearGrid').find('tr.t-rows');
    if ($($check1).is(':checked'))
     {
         for (i = 1; $selectedRow.length>i; i++) {
             $('#ctfy').attr('checked', 'checked');
         }
    }
}

 

thanks and regards
shanker.B