tabstrip UI control showing message as content is loadind

[Pallavi]

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!

[Dimiter Topalov]

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