What is the best way to have a web slider within WebDataGrid that can cause an event to recalculate a value in another column?
Hello Aleksandr,
What you can do is add the WebSlider to the contents of a TemplateDataField and use its ValueChanged event to modify the other cells. To do this you'll need to be able to access the row that contains the updated slider. A simple approach would be to add a hidden field to the template that contains the row's data key value. You can then get the value of the hidden field and use that to get the row. From the row you can then access the cell you want to update and modify its value:
I have attached the sample I used to verify this approach. Please let me know if you have any questions or concerns.
Thanks. This mostly works.
However the result I need to set is combination of other columns
when I try to get value of other columns in the row I get undefined.
<script type="text/javascript">
function slider_valueChanged(sender, eventArgs) {
var grid = $find("<%= grid.ClientID %>");
var rowID = sender.get_element().parentNode.querySelector(".rowID").value;
var row = grid.get_rows().get_row(rowID);
var a = row.get_cellByColumnKey("Alpha").value;
var b = row.get_cellByColumnKey("Beta").value;
var shock = eventArgs.get_newValue() * 0.01;
var r = a + b * shock;
row.get_cellByColumnKey("Result").set_value(r);
// Needed to make sure that the RowUpdating server event fires as expected
grid.get_behaviors().get_activation().set_activeCell(row.get_cellByColumnKey("ValueSlider"));
}
</script>
<ig:WebDataGrid ID="grid" runat="server" Height="350px" Width="1200px"
OnInitializeRow="WebDataGrid1_InitializeRow">
<Columns>
<ig:BoundDataField Key="ID" Width="25px">
<Header Text="ID"></Header>
</ig:BoundDataField>
<ig:BoundDataField DataFieldName="Factor" Key="Factor" Width="200px">
<Header Text="Factor" />
<ig:BoundDataField DataFieldName="Alpha" Key="Alpha" Width="100px" DataFormatString="{0:P2}">
<Header Text="Alpha" />
<ig:BoundDataField DataFieldName="Beta" Key="Beta" Width="100px" DataFormatString="{0:F2}">
<Header Text="Beta" />
<ig:TemplateDataField Key="ValueSlider">
<Header Text="Value Slider"></Header>
<ItemTemplate>
<ig:WebSlider ID="slider" runat="server" MinValueAsString="-50" MaxValueAsString="50" ValueType="Double"
ValueAsString='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "Shock") %>'>
<ClientEvents ValueChanged="slider_valueChanged" />
</ig:WebSlider>
<input type="hidden" class="rowID" value='<%# DataBinder.Eval(((Infragistics.Web.UI.TemplateContainer)Container).DataItem, "ID") %>' />
</ItemTemplate>
</ig:TemplateDataField>
<ig:BoundDataField DataFieldName="Result" Key="Result" Width="100px" DataFormatString="{0:P2}">
<Header Text="Result" />
</Columns>
</ig:WebDataGrid>
The issue that I see is how you are getting the value from the cells. The JavaScript properties have getter and setter methods that you need in place of just calling a property, so what you would want to do instead is call get_value() rather than just calling value:
I also see a couple of other small changes I recommend making. Since you are performing modifications of values I imagine you'll most likely want to be able to send that info to the server so that the data source can be updated. To do this you'll need three things: a DataKeyField set so each record has a primary key; the EditingCore behavior enabled so that editing transactions can be processed; the Activation behavior enabled as updates are sent to the server when the active row is changed or a postback occurs. Once you have all these changes in place your markup should look something like this:
thanks. I will try the getter methods. No I don't need to send data back to server. It's an interactive tool only.