I am trying to achieve the following :

1. Hide the header & footer on home page or home view but display on other views
2. Customize the header for each view
3. Navigating to views using href tags was not showing the layout

---------------------------------------First Issue : Hide the header & footer on any specific view -------------------------------------------------------------------                             
I am using the following code for lay-out initialization in home view i.e. index.html:

How can I hide the header and footer on the home page.
Currently I used the following custom css to hide the header

I probably need to do the same to hide the footer also.
Is there any other standard approach to do this ?

------------------------------------------Second Issue : Customize the header for any specific view--------------------------------------------
Since I have the main-layout defined , the same layout will be copied to all views.
Let's say I want to change the header for a specific view to be 
<div data-role="header">              
        <div data-role="navbar">                
            <img  src="xyz/abc.jpg"></img>       
        </div> 
</div>

I was able to achieve this by adding data-layout tag to this view and defining a new layout in this view's html file.

But this was breaking the tabstrip navigation.
Could you please advise how can this be achieved ?

--------------------------Third Issue : Navigating to views directly using href tags was not showing the layout----------------------------

In my home page, I have a gird of four images created using CSS flex-box.
I have added href on each image to link to a different view.
But when clicked on the image only the view's content is displayed , the layout is not shown.
The custom css styling applied to view's elements is also broken.

I have also tried using #idOfView in the href tags but same problem exists.

Could you please let me know how this can be resolved ?

Sorry for the very lengthy post , but these are the issues I am struck with now.
Thanks in advance.

Hello,

I have a Kendo Scheduler bound to datatable dynamically. The user will have this view open whole day and would like to refresh the data in current view updated every 5/10 minutes as set in some Settings. The user do not Need to interact or refresh the page. Is there some property which i can use or any idea how to achieve a Server read automatically every n minutes and refresh current view.

Thanks

Anamika

Cut/Copy/Paste buttons stop working after fromJSON is called on a kendoSpreadsheet.

Instead, a JavaScript error occurs: "Error: Unable to get property 'clipboard' of undefined or null reference"

This is due to spreadsheet._workbook._view being undefined. It appears that this happens when fromJSON is called, as it is defined prior to that call.

This can be replicated in the example for the fromJSON function. Note that the Cut/Copy/Paste buttons are non-functional:

https://dojo.telerik.com/uQAQUxEB

Is there a solution to this issue?

Thanks

Hi,

I am opening a window on clicking a button but at the same time i want the background to be inactive/blur/hidden, such that user should not be able to click anywhere but the window.

for ex: -(attached a picture in attachment)

<script>
    function putOnHoldPopup(requestId) {
        debugger;
        $("#window").html(' <textarea id="txtArea" style="margin: 0px; height: 95px; width: 517px;resize:none;" watermark-text="Enter your comments here......"></textarea ><button>Save</button>');
        var myWindow = $("#window");
        myWindow.kendoWindow({
            width: "600px",
            height: "300px",
            title: "Provide a valid reason to put the request on hold",
            visible: false,
            actions: [
                "Minimize",
                "Close"
            ],
        }).data("kendoWindow").center().open();
        $("#example").css("overflow", "hidden");
    }
</script>

here i am trying to hide the background but it is not happening.Any other way to hide the background.Please help.

Thanks

Manish Tiwari

I dont see any forum like Angularjs so I am posting here.

My Problem is we are using Angular v1.5 and migrating jquery from 1.x to Jquery 3.1.1 and Kendo UI from 2015 to 2018 R2. After migrating dropdowns are not at all loading, autocomplete is not working properly and some style issues.

Can any one help me to get rid of the situation.And let me know if this is the correct thread for posting the question, if not please suggest.

Thanks in Advance.

When text part of a node is clicked, emdedded Treeview events triggered once for each node.  They don't work on following clicks, but nodes are visually seen checked/unchecked.

How can it be overcome? Or is it possible to disable clicking on text part?

I'm trying to add a little margin between stacked notifications to visually better separate individual notifications, however, I can't get the css right.

All demo's of stacked notifications has zero margin.

Do you have any suggestions?

I have a kendo ui multiselect setup using the code method. It populates fine and I can select values. However if I leave the field blank then run a kendo custom kendoValidator the select field never gets to the custom validation. It's like a blank is being marked as valid. Which means it never even makes it to the custom rules.Is there a setting i need when i create the control to tell it that blanks are not OK?

@(Html.Kendo().MultiSelect()
.Name("JobSelected")
.HtmlAttributes(new { @required = "required", @validationMessage = "Enter Job", @class = "form-control job" })
.DataTextField("Text")
.DataValueField("Value")
.Placeholder("Select Jobs...")
.DataSource(source =>
{
source.Read(read =>
{
    read.Action("JobsGetAll", "Application");
}).ServerFiltering(true);}).AutoBind(true))

//input is never the multiselect box

var validator = $("#personalDiv").kendoValidator({
                    rules: {
                        //implement your custom date validation
                        custom: function (input) {
                            if (input.is(".drp")) {
                                var ms = input.data("kendoDropDownList");
                                if (ms.value() == "-1") {
                                    input.parent().addClass("k-invalid");
                                    return false;
                                }
                                else {
                                    input.parent().removeClass("k-invalid");
                                    return true;
                                }
                            }
                            else if(input.is(".job")) 
                            {
                                var ms = input.data("kendoMultiSelect");
                                if (ms.value().length === 0) {
                                    input.parent().addClass("k-invalid");
                                    return false;
                                }
                                else {
                                    input.parent().removeClass("k-invalid");
                                    return true;
                                }
                            }
                            else if(input.is(".date") && input.val() != "") {
                                var currentDate = Date.parse($(input).val());
                                //Check if Date parse is successful
                                if (!currentDate) {
                                    return false;
                                }
                                //grad date needs to be in the future
                                if (input.is("#txtGradDate") || input.is("#txtStartDate")) {
                                    var d = new Date();
                                    if (currentDate < d) {
                                        return false;
                                    }
                                }
                            }
                            else if (input.is("[data-role=maskedtextbox]") && input.val() != "") {
                                var maskedtextbox = input.data("kendoMaskedTextBox");
                                return maskedtextbox.value().indexOf(maskedtextbox.options.promptChar) === -1;
                            }

                            return true;
                        }
                    }
                }).data("kendoValidator");

if (!validator.validate()) {
                    $("#personalDiv").removeClass("valid").addClass("invalid");
                    $('#btnPreviousPage').show();
                    $('#btnNextPage').show();
                    break;
                } else {
                    $("#personalDiv").removeClass("invalid").addClass("valid");
                }

The tabstrip expands to fit content to a point then stops. And if you put a splitter inside it doesn't expand at all and instead scrollbars appear.

I have a large grid in a tab and I want the tabstrip to fit to the grid size which is taller than the window. How can I do that? Can it be done with split content too?

I have a tab strip where the content of each tab contains a grid. When a user performs an action I need to refresh the grid on the selected tab as well as the grids in the tabs that are not selected. The problem that I have is that the grid in one of the tabs has columns that are frozen. When this tab is not selected and the grid is refreshed, the locked columns do not get displayed. All of the other grids in the tabs that are not selected get displayed correctly.

Link to dojo: https://dojo.telerik.com/@jedvalson/asexEDOv with instructions to reproduce the issue