Display and hide Column at Client Side

[Syed]

Hi There
I have a very simple requirement inside Telerik Rad Grid, and I hope someone able to help me out here.
I have two set of dates say Start date and End date inside Grid and I am using Telerik:RadDatePicker in EditItemTemplate.
I have columns in my Grid from July to June(Total 12 months) which is by default hidden when I initial edit the Grid. What I want as soon as someone select the dates  in start and end data column based on dates selected it automatically display the column(July … june) using client application. I don’t want to use server side event as I have to enforce my users to enter values for these months.
For example if user put  initial start date: 12/07/2015 and End date is 30/10/2015 then as soon as date get selected it make the month of July to October visible using client event. If in case user change his mind and change the start date to 15/08/2015 then month of July should be disappear.
I am using the form edit mode of Rad grid
I hope it will be clear
Any questions please let me know
Thanks
Syed

[Syed]

   <telerik:RadGrid ID="GRDProjectPhaseInfo" OnItemCreated="GRDProjectPhaseInfo_ItemCreated" OnItemDataBound="GRDProjectPhaseInfo_ItemDataBound" OnInsertCommand="GRDProjectPhaseInfo_InsertCommand" OnUpdateCommand="GRDProjectPhaseInfo_UpdateCommand" runat="server" CellSpacing="0" DataSourceID="DSProjectPhaseSetupInfo" GridLines="None" Skin="Glow" Style="z-index: 1; left: 21px; top: 335px; position: absolute; height: 429px; width: 840px"
        AllowSorting="True" AutoGenerateEditColumn="True">
        <ClientSettings AllowColumnHide="True" AllowRowHide="True" AllowColumnsReorder="True">
            <Selecting AllowRowSelect="True" />
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
            <ClientEvents OnCommand="GridCommand" />

        </ClientSettings>

        <MasterTableView AutoGenerateColumns="False" CommandItemDisplay="Top" DataKeyNames="ProjectPhaseSetUpID" DataSourceID="DSProjectPhaseSetupInfo">
            <CommandItemSettings AddNewRecordText="Add Project Phase" />
            <Columns>
                <telerik:GridBoundColumn DataField="ProjectPhaseSetUpID" DataType="System.Int32" Display="False" FilterControlAltText="Filter

ProjectPhaseSetUpID column"
                    HeaderText="ProjectPhaseSetUpID" ReadOnly="True" SortExpression="ProjectPhaseSetUpID" UniqueName="ProjectPhaseSetUpID">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PhaseSetUpProgrammeID" DataType="System.Int32" Display="False" FilterControlAltText="Filter ProgrammeID column"
                    HeaderText="PhaseSetUpProgrammeID" ReadOnly="True" SortExpression="PhaseSetUpProgrammeID" UniqueName="PhaseSetUpProgrammeID">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PhaseSetUpProjectID" DataType="System.Int32" Display="False" FilterControlAltText="Filter ProjectID column"
                    HeaderText="PhaseSetUpProjectID" ReadOnly="True" SortExpression="PhaseSetUpProjectID" UniqueName="PhaseSetUpProjectID">
                    <ColumnValidationSettings>
                        <ModelErrorMessage Text="" />
                    </ColumnValidationSettings>
                </telerik:GridBoundColumn>

                <telerik:GridDropDownColumn DataSourceID="DSProjectPhase"   ListTextField="ProjectPhaseDetailDescription" ListValueField="ProjectPhaseID"
                    HeaderText="Phase" DataField="ProjectPhaseID" UniqueName="ProjectPhaseID"
                    DropDownControlType="DropDownList" AllowAutomaticLoadOnDemand="true"
                    AllowVirtualScrolling="true" ShowMoreResultsBox="true" ItemsPerRequest="10" EnableEmptyListItem="True" EmptyListItemValue="-1" EmptyListItemText="Select a value">
                    <HeaderStyle Font-Names="Verdana" Font-Size="10pt" Width="250px" Font-Bold="False" />
                    <ItemStyle Font-Names="Verdana" Font-Size="10pt" Width="250px" />
                    <ColumnValidationSettings EnableRequiredFieldValidation="True">
                        <RequiredFieldValidator ErrorMessage="Phase is required Field" Font-Bold="True" Font-Names="Verdana" Font-Size="10pt" ForeColor="Red" InitialValue="-1" SetFocusOnError="True" ToolTip="Phase is required Field">Phase is required Field</RequiredFieldValidator>
                        <ModelErrorMessage Text=""></ModelErrorMessage>
                    </ColumnValidationSettings>
                    <FilterTemplate>

                        <telerik:RadComboBox ID="RadComboBoxTitle" Skin="BlackMetroTouch" DataSourceID="DSProjectPhase"
                            DataTextField="ProjectPhaseDetailDescription"
                            DataValueField="ProjectPhaseID" Height="250px" AppendDataBoundItems="true" SelectedValue='<%# TryCast(Container, GridItem).OwnerTableView.GetColumn("ProjectPhaseTypeID").CurrentFilterValue%>'
                            runat="server" OnClientSelectedIndexChanged="TitleIndexChanged" Font-Names="verdana" Font-Size="12">
                            <Items>
                                <telerik:RadComboBoxItem Text="All" />
                            </Items>
                        </telerik:RadComboBox>
                        <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">

                            <script type="text/javascript">

                                function TitleIndexChanged(sender, args) {

                                    var tableView = $find("<%# TryCast(Container,GridItem).OwnerTableView.ClientID %>");

                                    tableView.filter("ProjectPhaseTypeID", args.get_item().get_value(), "EqualTo");



                                }

                            </script>

                        </telerik:RadScriptBlock>

                    </FilterTemplate>
                </telerik:GridDropDownColumn>
                <telerik:GridNumericColumn DataField="PhasePercentageofOverallProject" DataType="System.Int64" FilterControlAltText="Filter PhasePercentageofOverallProject column"
                    HeaderText="% of Project" ReadOnly="false" SortExpression="PhasePercentageofOverallProject" UniqueName="PhasePercentageofOverallProject" MaxLength="12" AllowFiltering="True">
                    <ColumnValidationSettings EnableRequiredFieldValidation="true">

                        <RequiredFieldValidator ForeColor="Red" ErrorMessage="% of Project is required field"></RequiredFieldValidator>

                    </ColumnValidationSettings>

                    <HeaderStyle HorizontalAlign="Left" Width="100px" />
                    <ItemStyle Width="100px" />

                </telerik:GridNumericColumn>


                <telerik:GridTemplateColumn HeaderText="Start Date" UniqueName="BaseLineStartDate"
                    HeaderStyle-HorizontalAlign="Left" GroupByExpression="HoldiayStartDate Group By HoldiayStartDate"
                    SortExpression="BaseLineStartDate">

                    <EditItemTemplate>

                        <telerik:RadDatePicker ID="dpBaseLineStartDate" runat="server" DbSelectedDate='<%# Bind("BaseLineStartDate", "{0:d}")%>'
                            SharedCalendarID="" MinDate="1900/01/01" ZIndex="10000000" DateInput-DateFormat="MMMM dd, yyyy" Calendar-CultureInfo="en-NZ">

                            <ClientEvents OnDateSelected="DateSelected" />

                        </telerik:RadDatePicker>
                        <asp:RequiredFieldValidator ForeColor="Red" ID="rfvBaseLineStartDate" runat="server" ErrorMessage="Baseline Start Date is Require Field"
                            ControlToValidate="dpBaseLineStartDate" Display="Dynamic"></asp:RequiredFieldValidator>




                    </EditItemTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblBaseLineStartDate" runat="server" Text='<%# Eval("BaseLineStartDate", "{0:d}")%>' />

                    </ItemTemplate>

                    <ItemStyle Width="20%" HorizontalAlign="Left" />

                </telerik:GridTemplateColumn>

                <telerik:GridTemplateColumn HeaderText="Baseline Due Date" UniqueName="BaseLineDueDate" HeaderStyle-HorizontalAlign="Left"
                    GroupByExpression="BaseLineDueDate Group By BaseLineDueDate" SortExpression="BaseLineDueDate">

                    <EditItemTemplate>

                        <telerik:RadDatePicker ID="dpBaseLineDueDate" runat="server" DbSelectedDate='<%# Bind("BaseLineDueDate", "{0:d}")%>'
                            SharedCalendarID="" MinDate="1900/01/01" ZIndex="10000000" DateInput-DateFormat="MMMM dd, yyyy">

                            <DateInput ID="DateInput1" runat="server">

                                <ClientEvents OnLoad="onClientLoadHandler" />

                            </DateInput>

                        </telerik:RadDatePicker>

                        <asp:RequiredFieldValidator ForeColor="Red" ID="rfvBaseLineDueDate" runat="server" ErrorMessage="Baseline due Date is Require Field"
                            ControlToValidate="dpBaseLineDueDate" Display="Dynamic"></asp:RequiredFieldValidator>

                        <asp:CompareValidator ForeColor="Red" ID="cvBaseLineDueDate" runat="server" Display="Dynamic" SetFocusOnError="true"
                            ControlToValidate="dpBaseLineDueDate" ControlToCompare="dpBaseLineStartDate" Type="Date"
                            Operator="GreaterThanEqual" ErrorMessage="Baseline Due Date must be Greater Then or equal Baseline Start Date"></asp:CompareValidator>

                    </EditItemTemplate>

                    <ItemTemplate>

                        <asp:Label ID="lblBaseLineDueDate" runat="server" Text='<%# Eval("BaseLineDueDate", "{0:d}")%>' />

                    </ItemTemplate>

                    <ItemStyle Width="20%" HorizontalAlign="Left" />

                </telerik:GridTemplateColumn>


                <telerik:GridNumericColumn DataField="BaseLineCostEstimate" DataType="System.Int64" FilterControlAltText="Filter BaseLineCostEstimate column"
                    HeaderText="Current Year Baseline Cost" ReadOnly="false" SortExpression="BaseLineCostEstimate" UniqueName="BaseLineCostEstimate" MaxLength="12" AllowFiltering="True">

                    <ColumnValidationSettings EnableRequiredFieldValidation="true">

                        <RequiredFieldValidator ForeColor="Red" ErrorMessage="Baseline Cost Estimate is required field"></RequiredFieldValidator>

                    </ColumnValidationSettings>

                    <HeaderStyle HorizontalAlign="Left" Width="100px" />
                    <ItemStyle Width="100px" />

                </telerik:GridNumericColumn>
                <telerik:GridNumericColumn DataField="WholeProjectBaseLineCostEstimate" DataType="System.Int64" FilterControlAltText="Filter WholeProjectBaseLineCostEstimate column"
                    HeaderText="Whole Phase Cost Estimate" ReadOnly="false" SortExpression="WholeProjectBaseLineCostEstimate" UniqueName="WholeProjectBaseLineCostEstimate" MaxLength="12" AllowFiltering="True">

                    <ColumnValidationSettings EnableRequiredFieldValidation="true">

                        <RequiredFieldValidator ForeColor="Red" ErrorMessage="Whole phase Baseline Cost Estimate is required field"></RequiredFieldValidator>

                    </ColumnValidationSettings>

                    <HeaderStyle HorizontalAlign="Left" Width="100px" />
                    <ItemStyle Width="100px" />

                </telerik:GridNumericColumn>
            </Columns>
        </MasterTableView>

    </telerik:RadGrid>

[Eyup]

Hello Syed,

I suggest that we continue our conversation on your ticket with ID: 971561. Please have in mind that avoiding multiple threads with similar issues will enable us to respond more quickly and efficiently to your posts.

Regards,
Eyup
Telerik