This is a migrated thread and some comments may be shown as answers.

Display and hide Column at Client Side

2 Answers 84 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Syed
Top achievements
Rank 1
Syed asked on 17 Sep 2015, 01:34 AM
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

2 Answers, 1 is accepted

Sort by
0
Syed
Top achievements
Rank 1
answered on 17 Sep 2015, 01:41 AM
   <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>

This is how my aspx page look like

0
Eyup
Telerik team
answered on 18 Sep 2015, 08:03 AM
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
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 Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Syed
Top achievements
Rank 1
Answers by
Syed
Top achievements
Rank 1
Eyup
Telerik team
Share this question
or