ClienntValueChanged RadSlider in RadGrid

5 posts, 1 answers
  1. Mordaque
    Mordaque avatar
    7 posts
    Member since:
    Jul 2011

    Posted 04 Aug 2011 Link to this post

    Hi,

    Can I get the DataKey of my RadGrid in ClientValueChanged Event of RadSlider ?

    My Slider is in Template Column.

    Thank for your help.

    Regards.
  2. Niko
    Admin
    Niko avatar
    387 posts

    Posted 08 Aug 2011 Link to this post

    Hello Mordaque,

    The best approach is to iterate through the data items of the grid and check for each of them whether the current slider's element is part of its DOM descendants. Here is a sample implementation so that you can visualize the approach:
    function SliderValueChanged(slider, args)
    {
        var grid = getGrid();
        var masterTable = grid.get_masterTableView();
        var foundRows = $telerik.$.grep(masterTable.get_dataItems(), function(item, index)
        {
            return $telerik.$.contains(item.get_element(), slider.get_element());
        });
        var row = foundRows[0];
        console.log(row, row.getDataKeyValue("Id"), row.getDataKeyValue("Value"));
    }
    function getGrid() { return $find("<%= theGrid.ClientID %>"); }

    Hope this helps.

    Regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mordaque
    Mordaque avatar
    7 posts
    Member since:
    Jul 2011

    Posted 09 Aug 2011 Link to this post

    Hi Telerik team,

    Thank for your answer.

    I have tried your exemple but the method row.getDataKeyValue("ID") return null value.

    In my MasterTableView i have : <MasterTableView DataKeyNames="ID"  ...
    More details of my Grid
    <telerik:RadGrid AutoGenerateColumns="False" Width="95%" ID="rdGridOpportunite"
            runat="server" CellSpacing="0" Culture="fr-FR" GridLines="None" ShowGroupPanel="True"
            onitemdatabound="rdGridOpportunite_ItemDataBound" AllowPaging="True"
            PageSize="6" onitemcreated="rdGridOpportunite_ItemCreated"
            onneeddatasource="rdGridOpportunite_NeedDataSource"
            onprerender="rdGridOpportunite_PreRender"
            onitemcommand="rdGridOpportunite_ItemCommand">
            <GroupPanel Text="Glisser-Déplacer les colonnes pour faire un regroupement" />
            <StatusBarSettings LoadingText="Chargement" />
            <ClientSettings AllowDragToGroup="true" AllowExpandCollapse="true" />
     
            <MasterTableView DataKeyNames="ID" AllowAutomaticInserts="false"  HierarchyLoadMode="Client" CommandItemDisplay="Top" HorizontalAlign="Center" HeaderStyle-HorizontalAlign="Center" NoMasterRecordsText="Aucun résultat">
                <CommandItemSettings ShowRefreshButton="false" AddNewRecordText="Insérer un nouvel élement" ShowAddNewRecordButton="true" ExportToPdfText="Export to PDF"></CommandItemSettings>
                <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column"></RowIndicatorColumn>
                <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column"></ExpandCollapseColumn>
                <NestedViewTemplate>
                    <asp:Panel ID="pnlData" runat="server" Width="60%" HorizontalAlign="Center" style="margin-left:auto;margin-right:auto;">
                        <table class="gridview">
                            <tr>
                                <td rowspan="4">
                                    Informations complémentaires
                                </td>
                            </tr>
                            <tr>
                                <th>Type CA</th>
                                <th>Type Prestation</th>
                                <th>Contact</th>
                                <th>Offre</th>
                            </tr>
                            <tr>
                                <td><%#Eval("TypeCA.Libelle") %></td>
                                <td><%#Eval("TypePrest.Libelle") %></td>
                                <td><%#Eval("Contact.Nom") %></td>     
                                <td><%#Eval("Offre.Libelle") %> <p style="font-style:italic"><%#Eval("Offre.Responsable.Mail") %> </td>                     
                            </tr>
                        </table>
                        <br />
                    </asp:Panel>
                </NestedViewTemplate>
                <Columns>
                    <telerik:GridHyperLinkColumn HeaderText="N°" ItemStyle-Width="15px"
                        DataNavigateUrlFields="ID" DataTextField="Numero" Groupable="false"
                        DataNavigateUrlFormatString="EditOpportunite.aspx?ID={0}&opp=1">
    <ItemStyle Width="15px"></ItemStyle>
                    </telerik:GridHyperLinkColumn>
                    <telerik:GridBoundColumn DataField="Client.Libelle"
                        FilterControlAltText="Filter column4 column" HeaderText="Client" Groupable="true"
                        UniqueName="column4" GroupByExpression="Client.Libelle">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn FilterControlAltText="Trier" HeaderText="Description"
                        UniqueName="column3" ItemStyle-Width="260px" Groupable="false">
                        <ItemTemplate>
                            <div id="divApercu<%#Eval("ID")%>">
                                <%#Eval("DescriptionCourte") %>  
                                <img src="../../Images/loupe.png" width="10px" alt"voir description" onclick="afficheDesc('<%#Eval("ID") %>')" />
                            </div>
                            <div id="div<%#Eval("ID") %>" onmouseout="afficheDesc('<%#Eval("ID") %>')" style="display:none;position:absolute;background-color:#CCCCCC;width:200px;border:solid 2px Black;padding:5px">
                                Déscription complète : <br />
                                <%#Eval("Description") %>
                            </div>
                        </ItemTemplate>
     
    <ItemStyle Width="260px"></ItemStyle>
                    </telerik:GridTemplateColumn>
                    <telerik:GridBoundColumn DataField="Responsable.Libelle"
                        FilterControlAltText="Filtrer" HeaderText="Responsable"
                        UniqueName="column">
                    </telerik:GridBoundColumn>
                    <telerik:GridBoundColumn DataField="TypeStatut.Libelle"
                        FilterControlAltText="Trier" HeaderText="Statut"
                        UniqueName="statut">
                    </telerik:GridBoundColumn>
                    <telerik:GridTemplateColumn FilterControlAltText="Trier"
                        HeaderText="Montant" UniqueName="TemplateColumn2" Groupable="false">
                        <ItemTemplate>
                            <table>
                                <tr>
                                    <td>HT</td>
                                    <td><%#Eval("MontantHT") %></td>
                                </tr>
                                <tr>
                                    <td>Pondéré</td>
                                    <td><%#Eval("MontantPondere") %></td>
                                </tr>
                            </table>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn FilterControlAltText="Filter TemplateColumn1 column"
                        HeaderText="Intuition Commerciale" DataField="ID" UniqueName="TemplateColumn1" Groupable="true"
                        GroupByExpression="IntuitionCommercial GROUP BY IntuitionCommercial">
                        <ItemTemplate>
                            <telerik:RadSlider CssClass="SliderCrm" ID="RdSlidIntuitionComm" runat="server" Width="150px"
                                AnimationDuration="400" ThumbsInteractionMode="Push" EnableAjaxSkinRendering="false"
                                ShowDecreaseHandle="false" TrackMouseWheel="false" ShowDragHandle="false" ShowIncreaseHandle="false" ItemType="Item" EnableTheming="true" TrackPosition="TopLeft"
                                Height="50px" OnClientValueChanged="SliderCrmValueChanged" SelectedValue='<%#Eval("IntuitionCommercial") %>' >
                                    <Items><telerik:RadSliderItem Value="10" Text="10%" /></Items>
                                    <Items><telerik:RadSliderItem Value="30" Text="30%"/></Items>
                                    <Items><telerik:RadSliderItem Value="60" Text="60%"/></Items>
                                    <Items><telerik:RadSliderItem Value="90" Text="90%"/></Items>
                                </telerik:RadSlider>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                    <telerik:GridTemplateColumn ItemStyle-HorizontalAlign="Left"  Groupable="false" HeaderText="Action" UniqueName="tplColAction">
                        <ItemTemplate>
                        </ItemTemplate>
                    </telerik:GridTemplateColumn>
                </Columns>
     
                <EditFormSettings>
                    <EditColumn FilterControlAltText="Filter EditCommandColumn column"></EditColumn>
                </EditFormSettings>
     
            <HeaderStyle HorizontalAlign="Center"></HeaderStyle>
            </MasterTableView>   
             
            <FilterMenu EnableImageSprites="False"></FilterMenu>
            <HeaderContextMenu CssClass="GridContextMenu GridContextMenu_Default"></HeaderContextMenu>
        </telerik:RadGrid>

    Regards.
  5. Answer
    Niko
    Admin
    Niko avatar
    387 posts

    Posted 09 Aug 2011 Link to this post

    Hi Mordaque,

    In the MaterTableView you should set the ClientDataKeyNames with the names of the columns that you wish to be populated in the client data item collection. Please, refer to the following article for more information on the topic - http://www.telerik.com/help/aspnet-ajax/p_telerik_web_ui_gridtableview_clientdatakeynames.html.

    Hope this helps.

    Regards,
    Niko
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  6. Mordaque
    Mordaque avatar
    7 posts
    Member since:
    Jul 2011

    Posted 15 Aug 2011 Link to this post

    it work fine.
     
    thank.

    Regards.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017