Slider range color in RadGrid

10 posts, 0 answers
  1. Ken
    Ken avatar
    23 posts
    Member since:
    Oct 2012

    Posted 22 Apr 2014 Link to this post

    See attached image.. this was created in a RadGrid in a GridTemplateColumn.  what I would like to do is make each grid range color different. All values come from a database even the color, Would this be done somehow in itemcreate or itemdatabound.

    Thanks
  2. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 24 Apr 2014 Link to this post

    Hello Ken,

    You have correctly guessed that the server-side ItemDataBound event could be used for such requirement. In the ItemDataBound event handler you could get reference to the template column, then to the RadSlider control and finally, apply the customization:
    <telerik:RadGrid ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" runat="server" OnItemDataBound="RadGrid1_ItemDataBound">
        <MasterTableView AutoGenerateColumns="false">
            <Columns>
                <telerik:GridTemplateColumn UniqueName="Slider">
                    <ItemTemplate>
                        <telerik:RadSlider ID="RadSlider1" runat="server" EnableDragRange="true" IsSelectionRangeEnabled="true"
                            MinimumValue="0" MaximumValue="30" SmallChange="5" LargeChange="10"
                            .....
                            .....

    And the code-behind:
    protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
    {
        DataTable table = new DataTable();
        table.Columns.Add("ID", typeof(int));
        table.Columns.Add("RangeStart", typeof(int));
        table.Columns.Add("RangeEnd", typeof(int));
        table.Columns.Add("Color", typeof(string));
     
        table.Rows.Add(1, 5, 10, "#363636");
        table.Rows.Add(2, 15, 20, "#cc3636");
        table.Rows.Add(3, 20, 30, "#ff3636");
     
        (sender as RadGrid).DataSource = table;
    }
     
    protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
    {
        if (e.Item is GridDataItem)
        {
            GridDataItem item = e.Item as GridDataItem;
            RadSlider slider = item["Slider"].FindControl("RadSlider1") as RadSlider;
            slider.BackColor = System.Drawing.ColorTranslator.FromHtml((item.DataItem as DataRowView).Row["Color"].ToString());
        }
    }

    Another approach is to handle this entirely in the markup:
    <telerik:GridTemplateColumn UniqueName="Slider">
        <ItemTemplate>
            <telerik:RadSlider ID="RadSlider1" runat="server" EnableDragRange="true" IsSelectionRangeEnabled="true"
                MinimumValue="0" MaximumValue="30" SmallChange="5" LargeChange="10"
                 SelectionStart='<%# decimal.Parse(DataBinder.Eval((Container as GridDataItem).DataItem, "RangeStart").ToString()) %>'
                 SelectionEnd='<%# decimal.Parse(DataBinder.Eval((Container as GridDataItem).DataItem, "RangeEnd").ToString()) %>'
                 BackColor= '<%# System.Drawing.ColorTranslator.FromHtml(DataBinder.Eval((Container as GridDataItem).DataItem, "Color").ToString()) %>'
                >
            </telerik:RadSlider>
        </ItemTemplate>
    </telerik:GridTemplateColumn>


    Hope that helps.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Ken
    Ken avatar
    23 posts
    Member since:
    Oct 2012

    Posted 24 Apr 2014 Link to this post

    That works well when changing the background color.. Any chance on just changing the range color (see attached image)

    Thanks
  5. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 25 Apr 2014 Link to this post

    Hello Ken,

    It is not possible to directly change the color of the selected part of the slider. You should have in mind that actually an image is used for that part.

    Nevertheless, for your scenario I could suggest that you add the color to the ClientDataKeyNames collection and use the following code to get reference to that element in the slider and set the background color:
    <telerik:RadGrid ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource" runat="server">
        <MasterTableView AutoGenerateColumns="false" ClientDataKeyNames="Color">
           .......

    And the JavaScript:
    <telerik:RadCodeBlock runat="server">
        <script type="text/javascript">
            function pageLoad(sender, args) {
                var grid = $find("RadGrid1");
                var dataItems = grid.get_masterTableView().get_dataItems();
     
                for (var i = 0; i < dataItems.length; i++) {
                    var slider = $telerik.findControl(dataItems[i].get_element(), "RadSlider1");
                    var selectionElement = document.getElementById("RadSliderSelected_" + slider.get_id());
                    selectionElement.style.backgroundImage = "none";
                    selectionElement.style.backgroundColor = dataItems[i].getDataKeyValue("Color");
                }
            }
        </script>
    </telerik:RadCodeBlock>

    Hope that helps.


    Regards,
    Konstantin Dikov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  6. Ken
    Ken avatar
    23 posts
    Member since:
    Oct 2012

    Posted 25 Apr 2014 in reply to Konstantin Dikov Link to this post

    Seems that might work... My scenario the RadSlider is in a detail table  GridTableView not  directly in the master table.

    Thanks


  7. Ken
    Ken avatar
    23 posts
    Member since:
    Oct 2012

    Posted 25 Apr 2014 in reply to Ken Link to this post

    Thanks for the help it pointed me in the correct direction. The following is the code. for detail tables
    .
    function pageLoad(sender, args) {
        var grid = $find("<%=RadGrid1.ClientID %>");
        if (grid) {
            var MasterTable = grid.get_masterTableView();
            var Rows = MasterTable.get_dataItems();
            for (var i = 0; i < Rows.length; i++) {
                var row = Rows[i];
                row.set_selected(true);
                var childTable = row.get_nestedViews();
                if (childTable) {
                    if (childTable.length > 0) {
                        var childItems = childTable[0].get_dataItems();
                        for (var i = 0; i < childItems.length; i++) {
                            var slider = $telerik.findControl(childItems[i].get_element(), "ComponentSlider");
                            var selectionElement = document.getElementById("RadSliderSelected_" + slider.get_id());
                            selectionElement.style.backgroundImage = "none";
                            selectionElement.style.backgroundColor = childItems[i].getDataKeyValue("DisplayColor");
                        }
                    }
                }
            }
        }
    }
  8. Ken
    Ken avatar
    23 posts
    Member since:
    Oct 2012

    Posted 28 Jul 2015 Link to this post

    I am making a new page and the grid is now in a RadPageView.

    The document.getElementById("RadSliderSelected_" + slider.get_id()) returns a null

    It finds the Slider control ok and the slider.get_id() is good but the get elementById returns null.

    It works fine on same page when not in a RadPageView

    Thanks

  9. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 31 Jul 2015 Link to this post

    Hi Ken,

    You can try to modify the JavaScript with the following and use $telerik.findElement(container, id) instead:
    function pageLoad(sender, args) {
        var grid = $find("RadGrid1");
        var dataItems = grid.get_masterTableView().get_dataItems();
     
        for (var i = 0; i < dataItems.length; i++) {
            var slider = $telerik.findControl(dataItems[i].get_element(), "RadSlider1");
            var selectionElement = $telerik.findElement(dataItems[i].get_element(), "RadSliderSelected_" + slider.get_id());
            selectionElement.style.backgroundImage = "none";
            selectionElement.style.backgroundColor = dataItems[i].getDataKeyValue("Color");
        }
    }

    Please give this a try and see if it will resolve the issue on your side too.


    Regards,
    Konstantin Dikov
    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
  10. Ken
    Ken avatar
    23 posts
    Member since:
    Oct 2012

    Posted 31 Jul 2015 in reply to Konstantin Dikov Link to this post

    No luck ... selectionElement  still a null: 

    var selectionElement = $telerik.findElement(dataItems[i].get_element(), "RadSliderSelected_" + slider.get_id());

  11. Konstantin Dikov
    Admin
    Konstantin Dikov avatar
    1803 posts

    Posted 05 Aug 2015 Link to this post

    Hello Ken,

    After further testing I have noticed that when the RadPageView holding the RadGrid is not initially selected, the previous code will fail, because the RadSlider element will not be initialized at this point. If you set the Selected property of that RadPageView to true, everything should work correctly.

    Now, since setting the Selected property might not be possible in your case, you could handle the client-side OnClientTabSelected event of the RadTabStrip and when the tab holding the grid is opened, execute the code from the previous post:
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad(sender, args) {
     
            }
     
            function tabSelected(sender, args) {
                if (args.get_tab().get_id() == 0) { //change this with the corresponding TAB index, where the grid is located
                    var grid = $find("RadGrid1");
                    var dataItems = grid.get_masterTableView().get_dataItems();
                    for (var i = 0; i < dataItems.length; i++) {
                        var slider = $telerik.findControl(dataItems[i].get_element(), "RadSlider1");
                        var selectionElement = $telerik.findElement(dataItems[i].get_element(), "RadSliderSelected_" + slider.get_id());
                        selectionElement.style.backgroundImage = "none";
                        selectionElement.style.backgroundColor = dataItems[i].getDataKeyValue("Color");
                    }
                }
            }
        </script>
    </telerik:RadCodeBlock>
     
    <telerik:RadTabStrip runat="server" ID="RadTabStrip1" MultiPageID="RadMultiPage1" OnClientTabSelected="tabSelected">
        <Tabs>
            <telerik:RadTab PageViewID="Page1"></telerik:RadTab>
        </Tabs>
    </telerik:RadTabStrip>
     
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1">
        <telerik:RadPageView runat="server" Width="100%" ID="Page1">
            <telerik:RadGrid runat="server" ID="RadGrid1" OnNeedDataSource="RadGrid1_NeedDataSource">
                <MasterTableView ClientDataKeyNames="Color">
                    <Columns>
                        <telerik:GridTemplateColumn>
                            <ItemTemplate>
                                <telerik:RadSlider runat="server" ID="RadSlider1" EnableDragRange="true" IsSelectionRangeEnabled="true"
                                    MinimumValue="0" MaximumValue="30" SmallChange="5" LargeChange="10">
                                </telerik:RadSlider>
                            </ItemTemplate>
                        </telerik:GridTemplateColumn>
                    </Columns>
                </MasterTableView>
            </telerik:RadGrid>
        </telerik:RadPageView>
    </telerik:RadMultiPage>


    Regards,
    Konstantin Dikov
    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
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017