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

tabstrip UI control showing message as content is loadind

1 Answer 34 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Pallavi
Top achievements
Rank 1
Pallavi asked on 17 Mar 2017, 02:38 PM

HIi Team,

 I am using tabstrip control i need to implement a funcationality which tells the screen is laoding.
in my Case its taking 5-7 sec to load i need to put image to user telling the screen is loading so that they do not hit any button  in the mean while everyting is graded out...

function onSelect(e) {
        
            $(e.contentElement).html("");
        }
 
<script type="text/javascript">
    $m = jQuery.noConflict();
    $m(document).ready(function myfunction()
    {
        function onSelect(e) {
        
            $(e.contentElement).html("");
        }
 
        $m("#tabstrip").kendoTabStrip({
            select: onSelect,
            tabPosition: "left",
            dataTextField: "desc",
            dataContentUrlField: "Url",
            dataValueField: "menuOrder",
            dataBound: function (e) {
                e.sender.select(0);
            }
 
        })//.data("kendoTabStrip").select(0);
        var dataSource = new kendo.data.DataSource(
        {
            transport:
            {
                read:
                {
                    url: "http://localhost:58030/Config/api/Featus/GetMenu",
                    type: "GET",
                    dataType: "json",                              
                    contentType: "application/json",
                    charset: "utf-8"
                }
            },
            data: {
                name: { type: "string" },
                desc: { type: "string" },
                menuOrder: { type: "string" },
                Url: { type: "string" }
            },
 
 
        });
        var tabStrip1 = $m("#tabstrip").data("kendoTabStrip");
        tabStrip1.setDataSource(dataSource);
 
    });
 
</script>

 Let me know where should i put this  loading  content.

<div id="divProcessing">

<p>Processing, please wait . . . <img src="../../Content/ajax-loader.gif"></p>

</div>

Should i put this code in tabstrip  control or in the tabstrip contents where it is displayed ?

I have done in mvc  can you help me to achive in Kendo UI

Thanks in advance!

1 Answer, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 21 Mar 2017, 09:17 AM
Hi Pallavi,

Please check out the following forum post and the subsequent discussion for a sample implementation of displaying a loading mask over a TabStrip:

http://www.telerik.com/forums/display-loader-or-progress-when-tab-loading#CNGe5gAEPEW4B8TvxiTqcA

Here are links for the respective API reference of the TabStrip events and options, used in the sample:

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events-select

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events-contentLoad

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#events-activate

http://docs.telerik.com/kendo-ui/api/javascript/ui/tabstrip#configuration-animation

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
General Discussions
Asked by
Pallavi
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Share this question
or