Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
55
Web data grid how to add ItemTemplate row in javascript
posted

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="500px" Width="100%" DataKeyFields="MeasureObjectiveID"
HeaderCaptionCssClass="HeaderCaption" ItemCssClass="Item" AltItemCssClass="AlterItem" CssClass="Grid" BackColor="White"
AutoGenerateColumns="False">
<EditorProviders>
<ig:TextEditorProvider ID="TextEditorProvider">
<EditorControl ClientIDMode="Predictable"></EditorControl>
</ig:TextEditorProvider>
<ig:TextEditorProvider ID="TextEditorMultiLineProvider"
EditorControl-TextMode="MultiLine">
<EditorControl TextMode="MultiLine" ClientIDMode="Predictable"></EditorControl>
</ig:TextEditorProvider>
<ig:DropDownProvider ID="DataInputIndicatorType">
<EditorControl ID="EditorControl1" EditorID="IndicatorTypeDropDownList" runat="server" DisplayMode="DropDownList">
<Items>
<ig:DropDownItem Text="" Value=""></ig:DropDownItem>
<ig:DropDownItem Text="Number" Value="Number"></ig:DropDownItem>
<ig:DropDownItem Text="Date" Value="Date"></ig:DropDownItem>
<ig:DropDownItem Text="Custom" Value="Custom"></ig:DropDownItem>
</Items>
</EditorControl>
</ig:DropDownProvider>
<ig:DropDownProvider ID="DataInputIndicatorLevel">
<EditorControl ID="EditorControl2" EditorID="IndicatorLevelDropDownList" runat="server" DisplayMode="DropDownList">
<Items>
<ig:DropDownItem Text="02-Level(1,2)" Value="1,2"></ig:DropDownItem>
<ig:DropDownItem Text="02-Level(1,5)" Value="1,5"></ig:DropDownItem>
<ig:DropDownItem Text="03-Level(1,2,3)" Value="1,2,3"></ig:DropDownItem>
<ig:DropDownItem Text="03-Level(1,3,5)" Value="1,3,5"></ig:DropDownItem>
<ig:DropDownItem Text="03-Level(3,4,5)" Value="3,4,5"></ig:DropDownItem>
<ig:DropDownItem Text="05-Level(1,2,3,4,5)" Value="1,2,3,4,5"></ig:DropDownItem>
</Items>
</EditorControl>
</ig:DropDownProvider>
</EditorProviders>
<Columns>
<ig:BoundDataField DataFieldName="MeasureObjectiveID" Key="MeasureObjectiveID" Hidden="true">
</ig:BoundDataField>
<ig:UnboundCheckBoxField Key="Check" Width="15px" HeaderCheckBoxMode="Off">
</ig:UnboundCheckBoxField>
<ig:BoundDataField Header-Text="Objective Name" DataFieldName="ObjectiveName" Key="ObjectiveName" Width="350px" EnableMultiline="true">
<Header Text="Objective Name"></Header>
</ig:BoundDataField>
<ig:BoundDataField Header-Text="Measure Name" DataFieldName="MeasureName" Key="MeasureName" EnableMultiline="true" Width="350px">
<Header Text="Measure Name"></Header>
</ig:BoundDataField>
<ig:UnboundField Header-Text="IndicatorType" Key="IndicatorType" Width="100px">
<Header Text="IndicatorType"></Header>
</ig:UnboundField>
<ig:UnboundField Header-Text="IndicatorLevel" Key="IndicatorLevel" Width="100px">
<Header Text="IndicatorLevel"></Header>
</ig:UnboundField>
<ig:TemplateDataField Header-Text="Bound" Key="Bound" Width="110px">
<ItemTemplate>
<asp:DropDownList ID="ddlBound" runat="server">
<asp:ListItem Text="Yes" Value="1"></asp:ListItem>
<asp:ListItem Text="No" Value="0"></asp:ListItem>
</asp:DropDownList>
</ItemTemplate>
</ig:TemplateDataField>
</Columns>
<Behaviors>
<ig:Clipboard EnableCopy="true" EnableCut="true" EnablePaste="true" Enabled="true"></ig:Clipboard>
<ig:Activation Enabled="true">
<ActivationClientEvents />
<AutoPostBackFlags ActiveCellChanged="false" />
</ig:Activation>
<ig:ColumnFixing ShowFixButtons="false" ShowLeftSeparator="false">
<ColumnSettings>
<ig:ColumnFixingSetting ColumnKey="ObjectiveName" EnableFixing="true" />
</ColumnSettings>
</ig:ColumnFixing>
<ig:EditingCore BatchUpdating="true">
<EditingClientEvents CellValueChanging="" CellValueChanged="" />
<Behaviors>
<ig:CellEditing EditModeActions-EnableOnKeyPress="true" Enabled="true" EditCellCssClass="EditCell">
<ColumnSettings>
<ig:EditingColumnSetting ColumnKey="ObjectiveName" EditorID="TextEditorMultiLineProvider" />
<ig:EditingColumnSetting ColumnKey="MeasureName" EditorID="TextEditorProvider" />
<ig:EditingColumnSetting ColumnKey="IndicatorType" EditorID="DataInputIndicatorType" />
<ig:EditingColumnSetting ColumnKey="IndicatorLevel" EditorID="DataInputIndicatorLevel" />
</ColumnSettings>
</ig:CellEditing>
</Behaviors>
</ig:EditingCore>
<ig:Selection CellSelectType="Single" RowSelectType="Multiple" ColumnSelectType="None" SelectedCellCssClass="SelectedCell">
<SelectionClientEvents CellSelectionChanged="CellSelectionChanged" />
<AutoPostBackFlags CellSelectionChanged="false" ColumnSelectionChanged="false" RowSelectionChanged="false" />
</ig:Selection>
<ig:RowSelectors RowSelectorCssClass="RowSelector" HeaderRowSelectorCssClass="HeaderCaption" Enabled="true" />
</Behaviors>
</ig:WebDataGrid>

<script type="text/javascript">

function CellSelectionChanged(grid, sender, a, b, c) {
for (var i = 0; i < sender.getSelectedCells().get_length() ; i++) {
var cell = sender.getSelectedCells().getItem(i);
if (cell.get_row()._index + 1 == grid._rows.get_length()) {
grid.get_rows().add(Array(getGUID()));
}
}
}

    </script>

I can add row but drop down in TemplateDataField not have

help me please.

Parents
No Data
Reply
  • 15320
    Offline posted

    Hello Choochat,

    Thank you for posting in our community.

    Adding new row on CellSelectionChanged event is not the best approach, unless you want to add new row tabbing from the last currently available cell in the grid.

    I would recommend you to use for instance a button on the page, clicking on which will add the new row. Note also that you need to enable the RowAdding behavior in order the add method to function.

    Attached is a sample with similar scenario for your reference.

    Please take a look at it and let me know if it resolves your issue.

     

    Sincerely,

    Tsanna

    WDGAddDropDownTemplateOnClient.zip
Children