Not loading Ajax call as a Modal window

[Manash]

Hi 

I want to load the Normal view as a modal window when  kendo Toolbar button is clicked. Inside View I am calling Partial view as a whole form. (inside form there are another 2 partial views along with another inputs and 2 submit buttons).

But form is not loading as modal form instead it loads as normal form displaying url action route (GET request). Could you please help me what changes needed to get the ActionResult View loads as a Modal window.  when submit I need to execute POST method. but my GET method is not displaying correctly as a modal window.  

 

[HttpGet]
       public ActionResult AddStructureNode(string currrentNode)
       {
           List<CustomerReference> _CustomerReferenceList = null;

           AddStructureNode addNode = new Infrastructure.AddStructureNode();
           Structure oStructure = new Structure();

           addNode.LoadScreen(0);
           addNode.UserOnly = true;
           _CustomerReferenceList = addNode.CustomerReferenceList;
           return PartialView("_AddStructureNode",addNode);

       }

[HttpPost]
       public ActionResult AddStructureNode()
       {
           return View();
       }

 

AddStructureNode View 

@model StB.Infrastructure.AddStructureNode


    <div id="window">
        @Html.Partial("_AddStructureNode", Model)
    </div>

 

Partial View (_AddStructureNode)

@model StB.Infrastructure.AddStructureNode

@{
    Layout = null;
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/kendo")
    @Scripts.Render("~/bundles/jquery-ui")
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/SBScripts")
}

<div>
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()


        <div class="form-horizontal">

            @Html.Hidden("orgCode")
            @Html.Hidden("siteCode")
            @Html.Hidden("clientCode")
            @Html.Hidden("systemID")

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-11"><h3>Add New Structure</h3></div>
            </div>

            <hr />


            @Html.ValidationSummary(true)

            @if ((bool)HttpContext.Current.Session["divNoItem-visible"] == true)
            {
                <div id="divNoItem"></div>
            }


            <div id="trLevel" class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.Label("Level", new { @class = "col-md-3 control-label" })
                        <div class="col-md-9">
                            @Html.TextBoxFor(m=>m.NewStructure.NextLevel, new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level is ready only" })
                            @Html.TextBoxFor(m=>m.NewStructure.NextLevelDescription, new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level Details is ready only" })
                        </div>
                    </div>
                </div>
                <div class="col-md-4"></div>
            </div>

            @if ((bool)HttpContext.Current.Session["Code-visible"] == true)
            {
                <div id="trCode" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Structure", new { @class = "col-md-3 control-label" })
                            <div class="col-md-9">
                                @Html.TextBox("txtCode", "", new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level is ready only" })
                                @Html.TextBox("txtDescription", "", new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level Details is ready only" })
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }

            @if ((bool)HttpContext.Current.Session["ItemDisplay-visible"] == true)
            {
                <div id="trItemDisplay" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Items", new { @class = "col-md-3 control-label" })
                            <div id="tvStructureDisplay" class="col-md-9">
                                @Html.Partial("_StructureDisplayTreeView", HttpContext.Current.Session["LoadedStructures"] as IEnumerable<StB.Models.Structure>)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }



            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div class="form-group">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <button id="AddNode" type="submit" value="Add" name="btnSearch" class="buttonmed pull-right" data-toggle="tooltip" , title="Press this button to Add Node">Add</button>
                        </div>
                        <div class="col-md-4">
                            <button id="Close" type="submit" value="Clear" class="buttonmed" name="btnClear" data-toggle="tooltip" , title="Press this button to close">Close</button>
                        </div>
                        @*<div class="col-md-6"></div>*@
                    </div>
                </div>
                <div class="col-md-4"></div>
            </div>


        </div>
    }

</div>

 

SBScripts file Scripts

var myWindow = $("#window");

function onClose() {
    //   undo.fadeIn();
    myWindow.close;
}

myWindow.kendoWindow({
    width: "600px",
    title: "Add Node Structure",
    visible: false,
    actions: [
        "Pin",
        "Minimize",
        "Maximize",
        "Close"
    ],
    close: onClose,
    open:onOpen
}).data("kendoWindow");


function onOpen(myWindow) {
    myWindow.open();
}

$(document).ready(function () {
    $("form.k-edit-form").kendoValidator();
});


toolbar button click event

function ShowDialog(e) {
    var structurecode = $('#hdnstructureCode').val();
    var url = '/HierarchyBuilder/AddStructureNode';

    alert("St Code : " + structurecode);
    $.ajax({
        url: url,
        type: 'GET',
        data: { 'StructureCode': structurecode },
        dataType: 'json',
        async: true,
        cache: false,
        complete: function () {
            // $('#progress').hide();
        },
        success:
            callbackFuntion(url)
    });
}


function callbackFuntion(_url) {
    window.location = _url;
}

 

I call ShowDialog event when kendo toolbar button is clicked. so I have to load the form via ajax. 

Could you please show me where in my scripts has to be changed. I tried Content and Refresh methods but not successful. Thanks.

Thusith

 

[Nencho]

Hello Manash,

I revised the implementation for the ShowDialog, which should be responsible for loading the content form the partial view. I am afraid that I was unable to locate any insertions of the html that is requested through the configured url. Since this is an ajax call, you should handle the success function and use the returned html to place it in the content of the window. 

This topic and different techniques are discussed in details in the following forum thread:

https://www.telerik.com/forums/loading-animation-when-waiting-for-ajax-window-to-load#rs9Bvf1jVEu0IZX2Ird4sg

As for the modal functionality 

Regards,
Nencho
Progress Telerik

[Manash]

Hi Nencho

Well I included response results in in AddStrcutureNode view and it shows it returns content in PartailView but Modal window is not displayed. instead it shows the error "Uncaught TypeError: Cannot read property 'center' of undefined at init.ShowDialog3". 

Below is my script

$(document).ready(function () {

  $('#windowX').kendoWindow({

        width: "900px",

        height: "500px",

        title: "Add Temp Node",

        visible: true,

        modal: true,

        resizable: true,

        actions: ["Close"],

    }).data('kendoWindow');

    console.log("kendo windowX created...")

});

 

function ShowDialog3() {

   

    var url = '/HierarchyBuilder/AddStructureNode';      

    

    $.ajax({

        url: url,

        type: 'GET',

        async: true,

        cache: false,

        success: function (data) {

            console.log("Success completed --> "+data);         

            $('#windowX').html(data);          

        }

      

    });

    var win = $('#windowX').data('kendoWindow');

    win.center().open();

}

 

Bwlow is my action method which returns PartialView to ActionResult View (named AddStrcutureNode)

    [HttpGet]

       public ActionResult AddStructureNode()

        {

            List<CustomerReference> _CustomerReferenceList = null;

            

            AddStructureNode addNode = new Infrastructure.AddStructureNode();

            Structure oStructure = new Structure();

 

            addNode.LoadScreen(0);

            addNode.UserOnly = true;

            _CustomerReferenceList = addNode.CustomerReferenceList;

 

            return PartialView("_AddStructureNode",addNode);

 

        }

 

AddStrcureNode View 

@model StB.Infrastructure.AddStructureNode


@{
      Layout = null;
}
    <div id="windowX">
        @Html.Partial("_AddStructureNode", Model)
    </div>

 

Due to above error I don't get Modal window I guess. but results returns in Chrome browser as a resonse. Ajax method returns PartialView but not displaying in Contoller ActionResultView. Please note that I am executing this by clciking kenod toolbar

Below is toolbar functionality code 

items.Add().Type(CommandType.Button).Text("New").Id("New2").ImageUrl(Url.Content("~/Content/images/Add.gif")).Click("ShowDialog3");

 

below is _AddStrcutureNode Partial View to be displayed in Modal window.

@model StB.Infrastructure.AddStructureNode

@{
    Layout = null;
    @*@Styles.Render("~/Content/css")*@
    @*@Scripts.Render("~/bundles/kendo")*@
    @*@Scripts.Render("~/bundles/jquery-ui")*@
    @*@Scripts.Render("~/bundles/jqueryval")*@
    @*@Scripts.Render("~/bundles/SBScripts")*@
}

<div id="form1">
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()


        <div class="form-horizontal">

            @Html.Hidden("orgCode")
            @Html.Hidden("siteCode")
            @Html.Hidden("clientCode")
            @Html.Hidden("systemID")

            <div class="row">
                <div class="col-md-1"></div>
                <div class="col-md-11"><h3>Add New Structure</h3></div>
            </div>

            <hr />


            @Html.ValidationSummary(true)

            @if ((bool)HttpContext.Current.Session["divNoItem-visible"] == true)
            {
                <div id="divNoItem"></div>
            }


            <div id="trLevel" class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.Label("Level", new { @class = "col-md-3 control-label" })
                        <div class="col-md-9">
                            @*@Html.TextBox("txtLevel", "", new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level is ready only" })*@
                            @Html.TextBoxFor(m=>m.NewStructure.NextLevel, new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level is ready only" })
                            @*@Html.TextBox("txtLevelDetails", "", new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level Details is ready only" })*@
                            @Html.TextBoxFor(m=>m.NewStructure.NextLevelDescription, new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level Details is ready only" })
                        </div>
                    </div>
                </div>
                <div class="col-md-4"></div>
            </div>

            @if ((bool)HttpContext.Current.Session["Code-visible"] == true)
            {
                <div id="trCode" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Structure", new { @class = "col-md-3 control-label" })
                            <div class="col-md-9">
                                @Html.TextBox("txtCode", "", new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level is ready only" })
                                @Html.TextBox("txtDescription", "", new { style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", data_placement = "right", title = "Level Details is ready only" })
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }


            @if ((bool)HttpContext.Current.Session["Description-visible"] == true)
            {
                <div id="trDescription" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("", new { @class = "col-md-3 control-label" })
                            <div class="col-md-9">

                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }



            <div id="trProject" class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div class="form-group">
                        @Html.Label("Project", new { @class = "col-md-3 control-label" })
                        <div class="col-md-9">
                            @Html.DropDownListFor(m => m.Project, new SelectList(Model.CustomerReferenceList.ToList(), "Code", "CodeName"), string.Empty, new { data_toggle = "tooltip", data_placement = "right", title = "Please Select from List" });

                        </div>
                    </div>
                </div>

                <div class="col-md-4">
                    <div class="form-group">
                        @Html.Label("User Only", new { @class = "col-md-3 control-label" })
                        <div class="col-md-9">
                            @Html.CheckBoxFor(x => x.UserOnly)

                        </div>
                    </div>
                </div>
                @Html.Label("Project", "Project Required", new { @class = "col-md-3 control-label", Style = "visiblity:hidden;" })
            </div>

            @if ((bool)HttpContext.Current.Session["ClientParent-visible"] == true)
            {
                <div id="trClientParent" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Client Parent", new { @class = "col-md-3 control-label" })
                            <div class="col-md-9">
                                @Html.DropDownListFor(m => m.ClientParent, new SelectList(Model.ClientParents), new { id = "ddlClientParent" })
                                @Html.CheckBoxFor(m => m.IsLink, new { id = "chkClientLink", style = "@'visibility:((bool) HttpContext.Current.Session['ClientLink-visible'] == true)'" }) Is Link?
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }

            @if ((bool)HttpContext.Current.Session["FunctionGroup-visible"] == true)
            {
                <div id="trFunctionGroup" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Function Group", new { @class = "col-md-3 control-label" })
                            <div class="col-md-9">
                                @Html.DropDownListFor(m => m.FG, new SelectList(Model.FGList), new { id = "ddlFunctionGroup" })
                                @Html.Label("ErrorFG", "Function Group Required", new { @class = "col-md-3 control-label", Style = "visiblity:hidden;" })
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }


            @if ((bool)HttpContext.Current.Session["FGClass-visible"] == true)
            {
                <div id="trFGClass" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Class", new { @class = "col-md-3 control-label" })
                            <div class="col-md-9">
                                @Html.DropDownListFor(m => m.ClassClassification, new SelectList(Model.Classes), new { id = "ddlClass" })
                                @Html.Label("ErrrorClass", "Class Required", new { @class = "col-md-3 control-label", Style = "visiblity:hidden;" })
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }

            @if ((bool)HttpContext.Current.Session["FGSubClass-visible"] == true)
            {
                <div id="trFGSubClass" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Sub Class", new { @class = "col-md-3 control-label" })
                            <div class="col-md-9">
                                @Html.DropDownListFor(m => m.SubClassClassification, new SelectList(Model.SubClasses), new { id = "ddlClass" })
                                @Html.Label("ErrorSubClass", "Class Required", new { @class = "col-md-3 control-label", Style = "visiblity:hidden;" })
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }

            @if ((bool)HttpContext.Current.Session["PowerWizard-visible"] == true)
            {
                <div id="trPowerWizard" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            <table>
                                <tr>
                                    <td>Primary Node:</td>
                                    <td>
                                        @Html.DropDownList("ddlPrimaryNode")
                                    </td>
                                </tr>
                                <tr>
                                    <td> Customer/Roadside Site:</td>
                                    <td>
                                        @Html.CheckBox("chkClientLink") Is Link?
                                    </td>
                                </tr>
                                <tr>
                                    <td> System Type:</td>
                                    <td>
                                        @Html.DropDownList("ddlSystemType")
                                    </td>
                                </tr>
                                <tr>
                                    <td>Level:</td>
                                    <td>
                                        @Html.DropDownList("ddlLevel")
                                    </td>
                                </tr>
                            </table>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }

            @if ((bool)HttpContext.Current.Session["Power-visible"] == true)
            {
                <div id="trPower" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Client Location", new { @class = "col-md-3 control-label" })
                            <div class="col-md-9">
                                @Html.TextBox("txtPowerID")
                                @Html.Label("ErrorPowerID", "* Invalid Client Location.", new { @class = "col-md-3 control-label", Style = "visiblity:hidden;" })
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }

            @if ((bool)HttpContext.Current.Session["ItemDisplay-visible"] == true)
            {
                <div id="trItemDisplay" class="row">
                    <div class="col-md-4"></div>
                    <div class="col-md-4">
                        <div class="form-group">
                            @Html.Label("Items", new { @class = "col-md-3 control-label" })
                            <div id="tvStructureDisplay" class="col-md-9">
                                @*@if (Request.IsAjaxRequest())
                                {
                                    @Html.Partial("_StructureDisplayTreeView", HttpContext.Current.Session["LoadedStructures"] as IEnumerable<StB.Models.Structure>)
                                }*@
                                @*@if(Request.IsAjaxRequest())
                                {
                                    @Html.Partial("_StructureDisplayTreeView", HttpContext.Current.Session["LoadedStructures"] as IEnumerable<StB.Models.Structure>)
                                }
                                else
                                {
                                    @Html.Partial("_StructureDisplayTreeView", HttpContext.Current.Session["LoadedStructures"] as IEnumerable<StB.Models.Structure>)
                                }*@
                                @Html.Partial("_StructureDisplayTreeView", HttpContext.Current.Session["LoadedStructures"] as IEnumerable<StB.Models.Structure>)
                            </div>
                        </div>
                    </div>
                    <div class="col-md-4"></div>
                </div>
            }


            <div id="trItemGrid" class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div class="form-group">
                        @*@Html.Label("Items", new { @class = "col-md-3 control-label" })*@
                        <div id="pvClassItemsGrid" class="col-md-9">
                            @*@Html.Partial("_ClassItemGrid", Model.ClassItems)*@
                        </div>
                    </div>
                </div>
                <div class="col-md-4"></div>
            </div>


            <div class="row">
                <div class="col-md-4"></div>
                <div class="col-md-4">
                    <div class="form-group">
                        <div class="col-md-4"></div>
                        <div class="col-md-4">
                            <button id="AddNode" type="submit" value="Add" name="btnSearch" class="buttonmed pull-right" data-toggle="tooltip" , title="Press this button to Add Node">Add</button>
                        </div>
                        <div class="col-md-4">
                            <button id="Close" type="submit" value="Clear" class="buttonmed" name="btnClear" data-toggle="tooltip" , title="Press this button to close">Close</button>
                        </div>
                        @*<div class="col-md-6"></div>*@
                    </div>
                </div>
                <div class="col-md-4"></div>
            </div>

            @*<div id="AddNodeModal" title="Add Structure Node" style="border:3px solid #000; background-color:#ebe3e3;">
                yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
                @{Html.RenderAction("AddStructureNode", "HierarchyBuilder", new { StructureCode = Model.NewStructure.Code  });}

            </div>*@


        </div>
    }

</div>

 

Al I want is when toolbar button is clicked located on the main window I want to display modal forms whcich is a form with many inputs to post after user input. First I ant to display blank form in Modal window. Could you please tell me why I am getting error on open method? I did not incude any scripts as 2nd reference in any of the form. only in Layout form. Please I am struggling to get this modal form as I tried everyway. anything missing. it looks like my win object is undefined which results in throwing undefined 'open' property. Help is very much appreciated. 

Attached file is error with results retruned from partialview

Manash

[Nencho]

Hello Manash,

I am afraid that I was unable to replicate the demonstrated exception, because I was unable to get the provided snippet runnable. This is why, I would like to ask you to submit a support ticket, along with a runnable sample attached. Hence, we will be able to locally test the issue and pin down the reason for it.

Thank you in advance for your cooperation.

Regards,
Nencho
Progress Telerik

[Manash]

Hi Nencho

 

Well, Its difficult to produce run-able project since this project has lots of views and controllers quite complex. but I am trying to send relevant information along with screen shots for you to guess why I can't load modal window on Grid page. I was able to load Modal window in 2 places successfully trying myself. I had many scripts errors saying 'Undefined 'center' property etc. but I manged to create 2 modal window which has simple TextArea input. see screen Scr2 andScr3. In Scr3 when I clicked general tab it loads another view with form and Kendo Grid. in scr4 screen there is a Highlighted Button 'Open window'. when I clicked I want to open Kendo modal window with textArea input to get simple text entry. Actually its should be link than button. but I wanted to test for window as my previous ones tested on button. but when I clicked it i get the results similar to Screen Scr4. with some errors on right side. I placed scripts on Gridview partial page and previous page and every possible way. but none successful as it gives more errors like "kendo is not defined and many more. I guess if get rid of scr4 errors I could be able to load modal window, right? If I can load modal window just before loading grid page why can't I load same in Grid page? Do i have to place some scripts? 

 

Below is my Grid View which has button to load Kendo window. (this is where error comes) . at the end of this form Kendo Grid is loaded as Prtial View. 

@model StB.Models.Structure

@using System.Linq

 

<div id="kendoTabStrips">

 

    @using (Html.BeginForm("GetGeneralData", "HierarchyBuilder", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "GeneralDataEdit" }))

    {

 

        @Html.HiddenFor(m => m.Code, Model.Code)

        @Html.HiddenFor(m => m.Description, Model.Description)

 

 

        <table id="tblGeneral" class="table table-condensed " style="width:100%;border:2px solid #00ff21;">

 

            <tr style="height:10px">

                <td style="width:115px; border:2px solid #00ff21;"></td>

                <td style="width:200px;border:2px solid #00ff21;"></td>

                <td style="width:155px; border:2px solid #00ff21;"></td>

                <td style="width:300px; border:2px solid #00ff21;"></td>

            </tr>

            <tr>

                <td colspan="4">

 

                    @Html.Label("lbDecommissionedlErrorMsg", (string)ViewBag.DecommissionedErrorMsg, new { style = "color:red;visibility: 'ViewBag.DecommissionedErrorMsg_Visible==true?'visible':'hidden'';" })

                </td>

            </tr>

 

 

            <tr>

                <td colspan="4">

                    <table style="width:100%;border:3px solid #000;">

                        <tr>

                            <td class="tbLabel" style="border:1px solid #000;">

                                Structure:  @Model.Code @Model.Description

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

 

            <tr>

                <td colspan="4">

                    <table>

                        <tr>

                            <td>

                                @Html.Label("lblLabel", "Client LOC")

                            </td>

                            <td>

                                @Html.TextBox("txtClientRef", Model.ClientRef, new { style = "width:185px;disable:disabled", data_toggle = "tooltip", data_placement = "right", title = "Client Loc is ready only" })

                            </td>

 

                            @{

        if (ViewBag.hprGEMapsIconVisible == true && ViewBag.lblGEMapsVisible == true && ViewBag.lblG2dMapsVisible == true && ViewBag.hprG2dMapsVisible == true)

        {

            <td colspan="2">

                <div id="Panel1">

                    <table id="tbStructureData">

                        <tr>

                            <td>@Html.Label("lblGEMaps", "Satellite View")</td>

                            <td>@Html.ActionLink("Please Right Click and open google Maps in a new window", "", null, new { ImageUrl = "~/Content/Images/globeicon.gif", data_toggle = "tooltip", data_placement = "right", title = "Clicking this will open the Google Earth " })</td>

                        </tr>

                        <tr>

                            <td>@Html.Label("lblG2Maps", "2D Maps View")</td>

                            <td>@Html.ActionLink("Please Right Click and open google Maps in a new window", "", null, new { ImageUrl = "~/Content/Images/2Dmap_icon.png", data_toggle = "tooltip", data_placement = "right", title = "Clicking this will open the Google Earth " })</td>

                        </tr>

                    </table>

                </div>

            </td>

        }

                            }

                            @*<div id="Panel1">

                                    <table id="tbStructureData">

                                        <tr>

                                            <td>@Html.Label("lblGEMaps", "Satellite View")</td>

                                            <td>@Html.ActionLink("Please Right Click and open google Maps in a new window", "", null, new { ImageUrl = "~/Content/Images/globeicon.gif", data_toggle = "tooltip", data_placement = "right", title = "Clicking this will open the Google Earth " })</td>

                                        </tr>

                                        <tr>

                                            <td>@Html.Label("lblG2Maps", "2D Maps View")</td>

                                            <td>@Html.ActionLink("Please Right Click and open google Maps in a new window", "", null, new { ImageUrl = "~/Content/Images/2Dmap_icon.png", data_toggle = "tooltip", data_placement = "right", title = "Clicking this will open the Google Earth " })</td>

                                        </tr>

                                    </table>

                                </div>*@

                            @{

        if (ViewBag.txtBatteryReserveVisible == true && ViewBag.lblBatteryReserveVisible == true)

        {

            <td colspan="2">

                <div id="Panelbat">

 

                    <table id="tbStructureData">

                        <tr>

                            <td>@Html.Label("lblLabel", "Battery Reserve(Hrs):")</td>

                            <td>

                                @Html.TextBox("txtBatteryReserve", Model.BatteryReserve, new { data_toggle = "tooltip", title = "You can't edit this field", data_placement = "right", @readonly = "readonly", style = "width:405px;" })

                            </td>

 

                        </tr>

                    </table>

                </div>

            </td>

        }

                            }

 

                        </tr>

                    </table>

                </td>

            </tr>

 

            <tr>

                @if (ViewBag.Panel2_Visible == true)

                {

                    <td colspan="4">

                        <div id="Panel2">

                            <table>

                                <tr>

                                    <td>

                                        @Html.Label("lblLabel", "Special Conditions:")

                                    </td>

                                    <td>

                                        @*<input type="button" id="lnkspecialcond" value="Search">*@

                                       @Html.ActionLink("Click To Enter Special Conditions", null, null, new { id = "lnkspecialcond", @class = "special-condition", data_toggle = "tooltip", data_placement = "right", title = "Click To Enter Site Details" })

                                        <button id="openButton">Open window</button>

                                                @*@Ajax.ActionLink("Click To Enter Special Conditions", "SpecialCondition", new AjaxOptions { UpdateTargetId = "pvspecialcondition", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })*@

 

                                    <td>

                                        @Html.Label("lblLabel", "Site Details:")

                                    </td>

                                    <td>

                                        @Html.ActionLink("Click To Enter Site Details", null, null, new { id = "lnksitedetails", @class = "special-condition", data_toggle = "tooltip", data_placement = "right", title = "Click To Enter Site Details" })

 

                                    </td>

                                </tr>

                            </table>

                        </div>

                    </td>

                }

 

            </tr>

 

            @{

        if (ViewBag.Panel7_Visible == true)

        {

 

            <tr>

                <td colspan="4">

                    <div id="Panel7">

                        <table style="width:100%;">

                            <tr>

                                <td style="width:5%;">@Html.Label("tblLable", "Item:")</td>

                                <td style="width:95%; border:2px solid #000;">

                                    @if (Model != null)

                                    {

                                        @Html.DropDownList("ddlItems", (SelectList)ViewBag.Items, "------------------------------------------------------------------------------------------------------------------------------", new { @class = "Itemdropdown" })

                                    }

 

                                    @*<ul>

                                                <li>Item</li>

                                                <li>Description</li>

                                                <li>Client Name</li>

                                                <li>Client Decsription</li>

                                            </ul>

                                        </td>

                                        <td>

                                            <ul>

                                                <li></li>

                                                <li></li>

                                                <li></li>

                                                <li></li>

                                            </ul>*@

                                </td>

                            </tr>

                            <tr>

                                <td colspan="4">

                                    @Html.Label("lblInvalidItemEntered", "Item Validation Failed.  Item does not exist in MXES/SB or Item is from an incorrect Classification. Please re-select item from the searchable drop down box.", new { style = "display:none;" })

                                </td>

                            </tr>

                        </table>

                    </div>

                </td>

            </tr>

 

        }

            }

 

 

            @* // panel3*@

            <tr>

                <td colspan="4">

                    <div id="Panel3">

                        <table id="tbStructureData">

                            <tr>

                                <td>@Html.Label("tblLable", "Serial No.")</td>

                                <td>

                                    @Html.TextBox("txtSerial", Model.SerNo, new { @class = "textbox", style = "width:185px;" })

                                    @*@Html.TextBoxFor(Model.SerNo, new { @class = "textbox", style = "width:185px;" })*@

                                </td>

                                 

                                @{if (ViewBag.lblFailureCode_Visible == true && ViewBag.FailureCode_Visible == true)

                                {

                                    <td>@Html.Label("lblFailureCode", "Failure Code:", new { @class = "cssClass", style = "width: 185px;" })</td>

                                    <td>

                                        @Html.DropDownList("FailureCode", null, "-------------------", new { style = "width:185px;" , data_toggle = "tooltip", title = "Please select from list", data_placement = "right" })

                                    </td>

                                }

                                }

 

                            </tr>

                            <tr>

                                <td>@Html.Label("tblLable", "Warranty:", new { style = "width: 185px;" })</td>

                                <td>

                                    @*@Html.TextBoxFor(m => m.Warrantee,"{0:dd-MM-yyyy:HH:mm:ss}", new { @class="datepicker", @type = "date", data_toggle = "tooltip", data_placement = "right", title = "Select Date." } )*@

                                    @*@Html.TextBox("txtWarrantee", Model.Warrantee.ToString("dd-MM-yyyyTHH:mm:ss"), new { @class = "datepicker", @type = "date", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })*@

                                    @*@Html.TextBoxFor(m => m.Warrantee,"{0:dd-MM-yyyy:HH:mm:ss}", new { @class = "datepicker", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })*@ @*new { @class = "datepicker", @type = "date", data_toggle = "tooltip", title = "Select Date", data_placement = "right" }*@

 

                                    @(Html.Kendo().DateTimePicker()

                                    .Name("Warantee")

                                    .Value(Model.Warrantee)

                                    .HtmlAttributes(new { style = "width: 100%", title = "Select Date." })

                                    .DateInput()

                                    )

                                </td>

                                <td>@Html.Label("tblLable", "Project Code:", new { @class = "cssClass", style="width: 185px;" })</td>

                                <td>

                                    @Html.TextBox("txtProjectCode", Model.ProjCode, new { @class = "textbox", style = "width:185px;", @readonly = "readonly" })

                                    @*@Html.TextBoxFor(Model.ProjCode , new { @class = "textbox", style = "width:185px;" })*@

 

                                </td>

                            </tr>

                        </table>

 

                    </div>

                </td>

            </tr>

 

 

            @*Panel6*@

            <tr>

                <td colspan="2">

                    <div id="Panel6">

                        <table id="tbStructureData" style="width:50%">

                            <tr>

                                <td>@Html.Label("tblLable", "No PM Date:", new { style = "width: 185px" })</td>

                                <td>

                                    @*@Html.TextBox("txtPMDate", Model.NoPMDate, new { @class = "datepicker", @type = "date", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })*@

                                    @*@Html.TextBoxFor(m=>m.NoPMDate , new { @class = "datepicker", @type = "date", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })*@

                                    @*@(Html.Kendo().DateTimePicker()

                                    .Name("NoPmDate")

                                    .Value(Model.NoPMDate)

                                    .HtmlAttributes(new { style = "width: 215px", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })

                                    .DateInput()

                                    )*@

                                </td>

                            </tr>

                        </table>

 

                    </div>

 

                </td>

                @*Panel4*@

 

                <td colspan="2">

                    <div id="Panel4">

                        <table id="tbStructureData" style="width:50%">

                            <tr>

                                <td>@Html.Label("tblLable", "Maintenance Strategy:", new { style = "width: 185px" })</td>

                                <td>

                                    @*@Html.DropDownListFor(m => m.MaintStrategy, (SelectList)ViewBag.MaintStrategy)*@

 

                                    @Html.DropDownList("MaintStrategy", null, new { style = "width: 185px" })

 

                                    @Html.ValidationMessage("Struture", "Maintenace Strategy is compulsory")

                                </td>

                            </tr>

                        </table>

                    </div>

                </td>

            </tr>

 

            <tr>

                <td>@Html.Label("tblLable", "Status:", new { style = "width: 85px" })</td>

                @{if (ViewBag.Status == "DECOMMISSIONED")

                {

                    @*<td>@Html.TextBox("txtStatus", Model.Status, new { @class = "textbox", style = "width:185px;color: #f00;", @readonly = "readonly" })</td>*@

                    <td>@Html.TextBoxFor(m => m.Status, new { @class = "textbox", style = "width:185px;color: #f00;", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

                }

                else

                {

                    @*<td>@Html.TextBox("txtStatus", Model.Status, new { @class = "textbox", style = "width:185px;color: #fff;", @readonly = "readonly" })</td>*@

                    <td>@Html.TextBoxFor(m => m.Status, new { @class = "textbox", style = "width:185px;color: #f00;", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

                }

                }

                @*<td>@Html.TextBox("txtStatus", Model.Status, new { @class = "textbox", style = "width:185px;color: (ViewBag.Status=='DECOMMISSIONED')?#F00;:#FFF;", @readonly = "readonly" })</td>*@

                <td>@Html.Label("tblLable", "Structure State:")</td>

                <td>@Html.TextBox("txtStructureState", Model.StructureStatus, new { @class = "textbox", style = "width:185px", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

 

            </tr>

            <tr>

                <td>@Html.Label("tblLable", "Updated By:")</td>

                <td>@Html.TextBox("txtUpdatedBy", Model.UpdatedBy, new { @class = "textbox", style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

                <td>@Html.Label("tblLable", "Date Updated:")</td>

                <td>@Html.TextBox("txtDateUpdated", Model.UpdatedDate, new { @class = "textbox", style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

            </tr>

 

        </table>

 

    }   @*  End of Form *@

 

    @section scripts{

        @*@Scripts.Render("~/Scripts/jquery-1.12.4.min.js")*@

        @*@Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.js")*@

    }

     

 

    <div id="window">

        Content of window

        @Html.Partial("_pvSpecialCondition")

    </div>

 

    <div id="categoryGrid1">

 

        @{

            IEnumerable<StB.ViewModels.CategoryViewModel> list = (IEnumerable<StB.ViewModels.CategoryViewModel>)ViewBag.Categories;

            if (list != null && list.Count() > 0)

            {

                @Html.Partial("_CategoryGrid", (IEnumerable<StB.ViewModels.CategoryViewModel>)ViewBag.Categories)

 

            }

        }

 

    </div>

</div>

 

@Scripts.Render("~/bundles/SBScripts")

 

MyGrid parila View

@model  IEnumerable<StB.ViewModels.CategoryViewModel>
@using System.Linq
@{
    var imagePath = "~\\Content\\images\\Info.gif";
    var itemsList = new List<SelectListItem>() {
        new SelectListItem { Text = "item1", Value = "1" },
        new SelectListItem { Text = "item2", Value = "2" },
        new SelectListItem { Text = "item3", Value = "3" }
    };
}

@*//   Ajax Grid //   *@
@*@(Html.Kendo().Grid(Model).Name("CategoryGrid")*@
@(Html.Kendo().Grid<StB.ViewModels.CategoryViewModel>().Name("CategoryGrid")
            .Columns(columns =>
            {
                columns.Bound(c => c.ClientCode).Hidden(true);
                columns.Bound(c => c.Category).ClientGroupHeaderTemplate("Category: " + "#= value#").Width(60);
                columns.Bound(c => c.Attribute).Title("Attribute").Width(100);

                columns.Bound(c => c.Description).Width(150); //.ClientTemplate(@"<div><img id='tooltipIconItem' src='@imagePath' ToolTip =#:data:ToolTip# /></div>" + @"<div> @Html.Label('fieldValueItem', #:data:Description#)</div>");

                columns.Bound(c => c.Required).Width(30); //.ClientTemplate(@"<div><img id='reqEdit' src='~\\Content\\images\\RedStar.gif' /></div>");

                columns.Bound(c => c.FieldType).Hidden(true);
                columns.Bound(c => c.DomainID).Hidden(true);
                // columns.Bound(c => c.DomainID).EditorTemplateName("TestValueEditor").ClientTemplate("#:DoaminID #"); ;
                columns.Bound(c => c.AttrType).Hidden(true);
                columns.Bound(c => c.Tooltip).Hidden(true);

                //columns.Bound(c => c.FieldValue).Width(80).Title("Value").EditorTemplateName("FieldValueEditor").ClientTemplate("#:FieldValue #")

                columns.ForeignKey("FieldValue", new SelectList((IEnumerable<SelectListItem>)ViewData["FieldValueList"], "Value", "Text")).Title("Value");//.EditorTemplateName("FieldValueEditor"); //.ClientTemplate("#:FieldValue #") //.EditorTemplateName("FieldValueEditor")
           //     columns.ForeignKey(c => c.FieldValue, itemsList, "Value", "Text").Title("Dropdown here ").EditorTemplateName("FieldValueEditor"); //.ClientTemplate("#:FieldValue #") //.EditorTemplateName("FieldValueEditor")
                //  IEnumerable<StB.Models.Domain> domains = (IEnumerable<StB.Models.Domain>) ViewData["FieldValueList"];


                //  columns.ForeignKey("FieldValue", new SelectList(domains, "Value", "ShortDescription")).Title("Value").EditorTemplateName("FieldValueEditor"); //.ClientTemplate("#:FieldValue #") //.EditorTemplateName("FieldValueEditor")
                //  columns.ForeignKey(fk => fk.DomainID, (IEnumerable<SelectListItem>)ViewData["FieldValueList"], "Value", "Text").Title("Test Value");//.EditorTemplateName("TestValueEditor");
                //    columns.ForeignKey(fk => fk.DomainID, (IEnumerable<StB.Models.Domain>)ViewData["DomainList"],"DomainID","Desc").Title("Test Value").EditorTemplateName("TestValueEditor")
                //"# if (FieldType == 1) { #" +
                //     "# switch(AttrType) {#" +
                //       "# case 'DATE': #" +
                //       "<input type='text' class='datePicker' id='txtfv' value='01/01/2001' " +
                // "/>" +
                //"# break; #" +
                //"# $('#FieldValue').datepicker(); break; #" +
                //Html.Kendo().DatePicker()
                //.Name("FieldValue")
                //.Format("{0:dd/MM/yyyyTH:mm:ss}")
                //.HtmlAttributes(new {data_bind = "value:FieldValue"}) +
                // "# default: #" +
                //       "<input type='text' value='#= FieldValue #' " +
                //       "/>" +
                //       "# break; #" +
                //" #}#" +
                //"#= Model.FieldValue # "

                // .HtmlAttributes(new { id = "ddlFieldvalues" }); //.EditorTemplateName("FieldValueEditor");

                //.EditorTemplateName("ddlFieldValue").HtmlAttributes(new { @class = "templateCell" });
                //    .EditorTemplateName("FieldValue"); //.EditorTemplateName("ddlDomains").ClientTemplate("#=FieldValue#"); //.HtmlAttributes(new { id = "ddlFieldvalues" }); //.ClientTemplate("#:description#"); ///.ClientTemplate("#=GetEditTemplate(data)#"); // .EditorTemplateName("editFieldValue"); //   .EditorViewData(ViewData["FieldValueList"]).Width(100);

            })
            .Editable(editabel => editabel.Mode(GridEditMode.InCell).Enabled(true))
             .Navigatable()
             .Scrollable()
            .Groupable()
            .Sortable()
            .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
            .AutoBind(false)
            .Pageable(pageable => pageable
                 .Refresh(true)
                .ButtonCount(2))

           .DataSource(datasource => datasource
               .Ajax()
               .Read(read => read.Action("DisplayGridData", "HierarchyBuilder").Type(HttpVerbs.Post))
               .Update(update => update.Action("UpdateCategory", "HierarchyBuilder"))
               .ServerOperation(false)
               .Batch(true)
               .PageSize(60)
               .Model(model => model.Id(p => p.Attribute))
                   .Model(model =>
                   {
                       model.Field(f => f.Category).Editable(false);
                       model.Field(f => f.Attribute).Editable(false);
                       model.Field(f => f.Description).Editable(false);
                       model.Field(f => f.Required).Editable(false);
                       model.Field(f => f.FieldValue).Editable(true).DefaultValue("1");

                   })
               .Aggregates(aggregates => { aggregates.Add(p => p.Category == p.Category).Count(); })
               .Group(groups => groups.Add(m => m.Category))

               )
                       .Events(events => { events.Edit("onCategoryGridEdit").DataBound("onCategoryGridDataBound").Change("onCategoryGridChange"); })
        //       .Events(events => { events.DataBound("onCategoryGridDataBound").Change("onCategoryGridChange"); })

)

@Html.Hidden("ClientCode", HttpContext.Current.Session["ClientCode"])

@*@Html.DropDownList('rcbFieldValue')

    @Html.DropDownList('rcbFieldValueSpecial')*@
@*<script id="client-template" type="text/x-kendo-template">
    @*<div><a id='tooltipIconItem' href=  "~/Content/images/Info.gif" dada-tooltip=#:data:ToolTip# /></div>*@
    "
   @* <img src='" + Url.Content("~/Content/images/Info.gif") + "' />"
   <div>Value : #:data:description#)</div>
</script>*@

@*<script type="text/kendo-template" id="message">
    <div class="k-widget k-tooltip k-tooltip-validation k-invalid-msg field-validation-error" style="margin: 0.5em; display: block; " data-for="#=field#" data-valmsg-for="#=field#" id="#=field#_validationMessage">
        <span class="k-icon k-warning"> </span>#=message#<div class="k-callout k-callout-n"></div>
    </div>
</script>*@

@*<script type="text/javascript">
    var validationMessageTmpl = kendo.template($("#message").html());

    function error(args) {
        if (args.errors) {
            var grid = $("#CategoryGrid").data("kendoGrid");
            grid.one("dataBinding", function (e) {
                e.preventDefault();   // cancel grid rebind if error occurs

                for (var error in args.errors) {
                    showMessage(grid.editable.element, error, args.errors[error].errors);
                }
            });
        }
    }

    function showMessage(container, name, errors) {
        //add the validation message to the form
        container.find("[data-valmsg-for=" + name + "],[data-val-msg-for=" + name + "]")
        .replaceWith(validationMessageTmpl({ field: name, message: errors[0] }))
    }
</script>*@

<div id="window">
    Content of window
    @Html.Partial("_pvSpecialCondition")
</div>

 

My scripts 

 

$(document).ready(function () {

    $('#btnspecialcond').click(function () {
        alert('special condition clicked');
        var url = '/HierarchyBuilder/GetSpecialCondition';
        $.ajax({
            url: url,
            type: 'GET',
            async: true,
            cache: false,
            success: function (data) {
                console.log("Success completed --> " + data);
                $('#window').html(data);
            }

        });
        var win = $("#window").data("kendoWindow");
        win.center().open();
    })




    $('#lnksitedetails').click(function () {
        alert('special condition clicked');
        var url = '/HierarchyBuilder/GetSpecialCondition';
        $.ajax({
            url: url,
            type: 'GET',
            async: true,
            cache: false,
            success: function (data) {
                console.log("Success completed --> " + data);
                $('#window').html(data);
            }

        });
        var win = $("#window").data("kendoWindow");
        win.center().open();
    });


    $('#lnkspecialcond').click(function () {
        alert('special condition clicked');
        var url = '/HierarchyBuilder/GetSpecialCondition';
        $.ajax({
            url: url,
            type: 'GET',
            async: true,
            cache: false,
            success: function (data) {
                console.log("Success completed --> " + data);
                $('#window').html(data);
            }

        });
        var win = $("#window").data("kendoWindow");
        win.center().open();
    });


});



$(document).ready(function () {
    $("#window").kendoWindow({
        width: 500,
        height: 400,
        title: "Centered Window",
        visible: false,
        actions: ["Close", "Minimize", "Maximize"],
    }).data("kendoWindow");
    console.log('windows initialized...');
});

$("#openButton").click(function () {
    //  alert('button clicked');
    var url = '/HierarchyBuilder/GetSpecialCondition';
    $.ajax({
        url: url,
        type: 'GET',
        // data: { 'currentNode': structurecode },
        //  dataType: 'json',
        async: true,
        cache: false,
        //complete: function (data) {
        //    console.log("Response completed : "+data);
        //    // $('#progress').hide();
        //},
        success: function (data) {
            console.log("Success completed --> " + data);
            $('#window').html(data);
            // var win = $('#window').data('kendoWindow');
            // win.open();
            //  wndWindow.open();
            //  callbackFuntion(url);
            //  onOpen(myWindow);
        }

    });
    var win = $("#window").data("kendoWindow");
    win.center().open();
});

 

 

 

 

Could please let me know why am I hetting scripts errors and why cant I load modal window in  form which contains Grid Partial view. I still not resolve this issue along with many issues with kendo. This is a burning issues as I got stucked here plus Grid [Object Object] issues in dropdown list (I already raised another ticket but no successful solution yet) I need urget attention to this. so far I tried and found solution as I am new to Kendo. Please urgent help is required. or do you need my full project? 

 

rgds

 

[Nencho]

Hello Manash,

Indeed, it seems like, the kendo  and jquery scripts are not properly loaded. If the partialview does not use -_Layot.cshtml you should reference the scripts in the partialview as well. Please try adding the needed references and test the behavior again.

Regards,
Nencho
Progress Telerik

[Manash]

Hi Nencho,

Thanks for the reply. well I somehow manged to create kendo window. but I got 2 issues.

1 When I clicked link named 'special Conditions" the kendo window is loading. Then user has to type the inputs and press submit button. when done I keep those input value in hidden field. so I can refer when saving. my issue is when a user click again window is loaded but with empty entry where as it must display already input value. I want to load value by checking hidden field into same window. but Its not loading (scrn2.jpg screen). How can do this by finding "specialCond" TextArea html helper. 

2 when I minimized window it shows multiple icons as noted in highlighted screen "scrn3.jpg". I guess this is due to kendo window is created several times. I tried to create global variable and assign kendo window into it and open it. but failed. Could you please guide me on that. 

 

My partial view for Window (_pvSpecialCondition.cshtml)

@{Layout = null;}
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/SBScripts")
<div class="row">
    <div class="col-md-12">
         @Html.TextArea("specialCond", "", 20, 90, null)
    </div>
    <div class="col-md-12">
        <div class="col-md-4"></div>
            <div class="col-md-4">
                <input type="submit" value="Submit" class="k-button"  id="SpecialConditionSubmit" />
                <input type="button" value="Cancel" id="specialConditionCancel" class="k-button close-button" />
            </div>
        </div>
</div>

 

My page which contains special condition link to load window 

@model StB.Models.Structure

@using System.Linq

 

<div id="kendoTabStrips">

 

    @using (Html.BeginForm("GetGeneralData", "HierarchyBuilder", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "GeneralDataEdit" }))

    {

 

        @Html.HiddenFor(m => m.Code, Model.Code)

        @Html.HiddenFor(m => m.Description, Model.Description)

 

        @*<table id="tblGeneral" class="table table-condensed " style="width:100%;border:2px solid #00ff21;">*@

        <table id="tblGeneral" class="table" style="width:100%;">

 

           

            <tr>

                <td style="width:25%"></td>

                <td style="width:25%"></td>

                <td style="width:25%"></td>

                <td style="width:25%"></td>

            </tr>

            <tr>

                <td colspan="4">

 

                    @Html.Label("lbDecommissionedlErrorMsg", (string)ViewBag.DecommissionedErrorMsg, new { style = "color:red;visibility: 'ViewBag.DecommissionedErrorMsg_Visible==true?'visible':'hidden'';" })

                </td>

            </tr>

 

 

            <tr>

                <td colspan="4">

                    <table style="width:100%;">

                        <tr>

                            @*<td class="tbLabel" style="border:1px solid #000;">*@

                            <td class="tbLabel" >

                                <strong>Structure: </strong>  @Model.Code @Model.Description

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

 

            <tr>

                <td colspan="4">

                    <table>

                        <tr>

                            <td>

                                @Html.Label("lblLabel", "Client LOC")

                            </td>

                            <td>

                                @Html.TextBox("txtClientRef", Model.ClientRef, new { style = "width:185px;disable:disabled", data_toggle = "tooltip", data_placement = "right", title = "Client Loc is ready only" })

                            </td>

 

                            @{

        if (ViewBag.hprGEMapsIconVisible == true && ViewBag.lblGEMapsVisible == true && ViewBag.lblG2dMapsVisible == true && ViewBag.hprG2dMapsVisible == true)

        {

            <td colspan="2">

                <div id="Panel1">

                    <table id="tbStructureData">

                        <tr>

                            <td>@Html.Label("lblGEMaps", "Satellite View")</td>

                            <td>@Html.ActionLink("Please Right Click and open google Maps in a new window", "", null, new { ImageUrl = "~/Content/Images/globeicon.gif", data_toggle = "tooltip", data_placement = "right", title = "Clicking this will open the Google Earth " })</td>

                        </tr>

                        <tr>

                            <td>@Html.Label("lblG2Maps", "2D Maps View")</td>

                            <td>@Html.ActionLink("Please Right Click and open google Maps in a new window", "", null, new { ImageUrl = "~/Content/Images/2Dmap_icon.png", data_toggle = "tooltip", data_placement = "right", title = "Clicking this will open the Google Earth " })</td>

                        </tr>

                    </table>

                </div>

            </td>

        }

                            }

                            <div id="Panel1">

                                <table id="tbStructureData">

                                    <tr>

                                        <td>@Html.Label("lblGEMaps", "Satellite View")</td>

                                        <td>@Html.ActionLink("Please Right Click and open google Maps in a new window", "", null, new { ImageUrl = "~/Content/Images/globeicon.gif", data_toggle = "tooltip", data_placement = "right", title = "Clicking this will open the Google Earth " })</td>

                                    </tr>

                                    <tr>

                                        <td>@Html.Label("lblG2Maps", "2D Maps View")</td>

                                        <td>@Html.ActionLink("Please Right Click and open google Maps in a new window", "", null, new { ImageUrl = "~/Content/Images/2Dmap_icon.png", data_toggle = "tooltip", data_placement = "right", title = "Clicking this will open the Google Earth " })</td>

                                    </tr>

                                </table>

                            </div>

                            @{

        if (ViewBag.txtBatteryReserveVisible == true && ViewBag.lblBatteryReserveVisible == true)

        {

            <td colspan="2">

                <div id="Panelbat">

 

                    <table id="tbStructureData">

                        <tr>

                            <td style="width:50%;border:2px solid #000;">@Html.Label("lblLabel", "Battery Reserve(Hrs):")</td>

                            <td style="width:50%;border:2px solid #000;">

                                @Html.TextBox("txtBatteryReserve", Model.BatteryReserve, new { data_toggle = "tooltip", title = "You can't edit this field", data_placement = "right", @readonly = "readonly", style = "width:405px;" })

                            </td>

 

                        </tr>

                    </table>

                </div>

            </td>

        }

                            }

 

                        </tr>

                    </table>

                </td>

            </tr>

 

            <tr>

                @if (ViewBag.Panel2_Visible == true)

                {

                    <td colspan="4">

                        <div id="Panel2">

                            <table id="tbStructureData" style="width:100%;border:2px solid #808080">

                                <tr>

                                    <td style="width: 185px;">

                                        @Html.Label("lblLabel", "Special Conditions:")

                                    </td>

                                    <td style="width: 185px;">

                                        @Html.ActionLink("Click To Enter Special Conditions", null, null, new { id = "lnkspecialcondition", @class = "special-condition", data_toggle = "tooltip", data_placement = "right", title = "Click To Enter Special conditions" })

                                        @*@Ajax.ActionLink("Click To Enter Special Conditions", "SpecialCondition", new AjaxOptions { UpdateTargetId = "pvspecialcondition", InsertionMode = InsertionMode.Replace, HttpMethod = "GET" })*@

                                    <td style="width: 185px;">

                                        @Html.Label("lblLabel", "Site Details:")

                                    </td>

                                    <td style="width: 185px;">

                                        @Html.ActionLink("Click To Enter Site Details", null, null, new { id = "lnksitedetails", @class = "special-condition", data_toggle = "tooltip", data_placement = "right", title = "Click To Enter Site Details" })

 

                                    </td>

                                </tr>

                            </table>

                        </div>

                    </td>

                }

 

            </tr>

 

            @{

        if (ViewBag.Panel7_Visible == true)

        {

 

            <tr style="width:100%; border:2px solid #ff0">

                <td colspan=" 4">

                <div id="Panel7">

                    <table style="width:100%;border:2px solid #808080">

                        <tr>

                            <td style="width:5%;">@Html.Label("tblLable", "Item:")</td>

                            <td style="width:95%; border:2px solid #000;">

                                @if (Model != null)

                                {

                                    @Html.DropDownList("ddlItems", (SelectList)ViewBag.Items, "------------------------------------------------------------------------------------------------------------------------------", new { @class = "Itemdropdown" })

                                }

 

                                @*<ul>

                                            <li>Item</li>

                                            <li>Description</li>

                                            <li>Client Name</li>

                                            <li>Client Decsription</li>

                                        </ul>

                                    </td>

                                    <td>

                                        <ul>

                                            <li></li>

                                            <li></li>

                                            <li></li>

                                            <li></li>

                                        </ul>*@

                            </td>

                        </tr>

                        <tr>

                            <td colspan="4">

                                @Html.Label("lblInvalidItemEntered", "Item Validation Failed.  Item does not exist in MXES/SB or Item is from an incorrect Classification. Please re-select item from the searchable drop down box.", new { style = "display:none;" })

                            </td>

                        </tr>

                    </table>

                </div>

                </td>

            </tr>

 

        }

            }

 

 

            @* // panel3*@

            <tr>

                <td colspan="4">

                    <div id="Panel3">

                        <table id="tbStructureData">

                            <tr>

                                <td>@Html.Label("tblLable", "Serial No.")</td>

                                <td>

                                    @Html.TextBox("txtSerial", Model.SerNo, new { @class = "textbox", style = "width:185px;" })

                                    @*@Html.TextBoxFor(Model.SerNo, new { @class = "textbox", style = "width:185px;" })*@

                                </td>

 

                                @{if (ViewBag.lblFailureCode_Visible == true && ViewBag.FailureCode_Visible == true)

                                {

                                    <td>@Html.Label("lblFailureCode", "Failure Code:", new { @class = "cssClass", style = "width: 185px;" })</td>

                                    <td>

                                        @Html.DropDownList("FailureCode", null, "-------------------", new { style = "width:185px;" , data_toggle = "tooltip", title = "Please select from list", data_placement = "right" })

                                    </td>

                                }

                                }

 

                            </tr>

                            <tr>

                                <td>@Html.Label("tblLable", "Warranty:", new { style = "width: 185px;" })</td>

                                <td>

                                    @*@Html.TextBoxFor(m => m.Warrantee,"{0:dd-MM-yyyy:HH:mm:ss}", new { @class="datepicker", @type = "date", data_toggle = "tooltip", data_placement = "right", title = "Select Date." } )*@

                                    @*@Html.TextBox("txtWarrantee", Model.Warrantee.ToString("dd-MM-yyyyTHH:mm:ss"), new { @class = "datepicker", @type = "date", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })*@

                                    @*@Html.TextBoxFor(m => m.Warrantee,"{0:dd-MM-yyyy:HH:mm:ss}", new { @class = "datepicker", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })*@ @*new { @class = "datepicker", @type = "date", data_toggle = "tooltip", title = "Select Date", data_placement = "right" }*@

 

                                    @(Html.Kendo().DateTimePicker()

                                    .Name("Warantee")

                                    .Value(Model.Warrantee)

                                    .HtmlAttributes(new { style = "width: 100%", title = "Select Date." })

                                    .DateInput()

                                    )

                                </td>

                                <td>@Html.Label("tblLable", "Project Code:", new { @class = "cssClass", style="width: 185px;" })</td>

                                <td>

                                    @Html.TextBox("txtProjectCode", Model.ProjCode, new { @class = "textbox", style = "width:185px;", @readonly = "readonly" })

                                    @*@Html.TextBoxFor(Model.ProjCode , new { @class = "textbox", style = "width:185px;" })*@

 

                                </td>

                            </tr>

                        </table>

 

                    </div>

                </td>

            </tr>

 

 

            @*Panel6*@

            <tr>

                <td colspan="2">

                    <div id="Panel6">

                        <table id="tbStructureData" style="width:50%">

                            <tr>

                                <td>@Html.Label("tblLable", "No PM Date:", new { style = "width: 185px" })</td>

                                <td>

                                    @*@Html.TextBox("txtPMDate", Model.NoPMDate, new { @class = "datepicker", @type = "date", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })*@

                                    @*@Html.TextBoxFor(m=>m.NoPMDate , new { @class = "datepicker", @type = "date", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })*@

                                    @(Html.Kendo().DateTimePicker()

                                    .Name("NoPmDate")

                                    .Value(Model.NoPMDate)

                                    .HtmlAttributes(new { style = "width: 215px", data_toggle = "tooltip", data_placement = "right", title = "Select Date." })

                                    .DateInput()

                                    )

                                </td>

 

 

                                @*Panel4*@

 

                                <td colspan="2">

                                    <div id="Panel4">

                                        <table id="tbStructureData" style="width:50%">

                                            <tr>

                                                <td>@Html.Label("tblLable", "Maintenance Strategy:", new { style = "width: 185px" })</td>

                                                <td>

                                                    @*@Html.DropDownListFor(m => m.MaintStrategy, (SelectList)ViewBag.MaintStrategy)*@

 

                                                    @Html.DropDownList("MaintStrategy", null, new { style = "width: 185px" })

 

                                                    @Html.ValidationMessage("Struture", "Maintenace Strategy is compulsory")

                                                </td>

                                            </tr>

                                        </table>

                                    </div>

                                </td>

                            

 

                            </tr>

                        </table>

 

                    </div>

 

                </td>

                @*Panel4*@

 

                @*<td colspan="2">

                    <div id="Panel4">

                        <table id="tbStructureData" style="width:50%">

                            <tr>

                                <td>@Html.Label("tblLable", "Maintenance Strategy:", new { style = "width: 185px" })</td>

                                <td>

                                  

 

                                    @Html.DropDownList("MaintStrategy", null, new { style = "width: 185px" })

 

                                    @Html.ValidationMessage("Struture", "Maintenace Strategy is compulsory")

                                </td>

                            </tr>

                        </table>

                    </div>

                </td>

            </tr>*@

 

            <tr>

                <td>@Html.Label("tblLable", "Status:", new { style = "width: 85px" })</td>

                @{if (ViewBag.Status == "DECOMMISSIONED")

                {

                    @*<td>@Html.TextBox("txtStatus", Model.Status, new { @class = "textbox", style = "width:185px;color: #f00;", @readonly = "readonly" })</td>*@

                    <td>@Html.TextBoxFor(m => m.Status, new { @class = "textbox", style = "width:185px;color: #f00;", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

                }

                else

                {

                    @*<td>@Html.TextBox("txtStatus", Model.Status, new { @class = "textbox", style = "width:185px;color: #fff;", @readonly = "readonly" })</td>*@

                    <td>@Html.TextBoxFor(m => m.Status, new { @class = "textbox", style = "width:185px;color: #f00;", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

                }

                }

                @*<td>@Html.TextBox("txtStatus", Model.Status, new { @class = "textbox", style = "width:185px;color: (ViewBag.Status=='DECOMMISSIONED')?#F00;:#FFF;", @readonly = "readonly" })</td>*@

                <td>@Html.Label("tblLable", "Structure State:")</td>

                <td>@Html.TextBox("txtStructureState", Model.StructureStatus, new { @class = "textbox", style = "width:185px", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

 

            </tr>

            <tr>

                <td colspan="2">

                    <table id="tbStructureData" style="width:50%">

                        <tr>

                            <td>@Html.Label("tblLable", "Updated By:")</td>

                            <td>@Html.TextBox("txtUpdatedBy", Model.UpdatedBy, new { @class = "textbox", style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

                            <td>@Html.Label("tblLable", "Date Updated:")</td>

                            <td>@Html.TextBox("txtDateUpdated", Model.UpdatedDate, new { @class = "textbox", style = "width:185px;", @readonly = "readonly", data_toggle = "tooltip", title = "you can't update, Read only", data_placement = "right" })</td>

                        </tr>

                    </table>

                </td>

            </tr>

            

        </table>

 

        }   @*  End of Form *@

 

        @section scripts{

           

        }

 

1.         <div id="SpecialConditionWindow" style="visibility:hidden">
2.             @Html.Partial("_pvSpecialCondition")             
3.         </div>

 

        <div id="SiteDetailsWindow" style="visibility:hidden">

            @Html.Partial("_pvSiteDetails")             

        </div>

 

        @Html.Hidden("txtSpecialCondition")

        @Html.Hidden("txtSiteDetails")

 

 

        <div id="categoryGrid1">

            @{

            IEnumerable<StB.ViewModels.CategoryViewModel> list = (IEnumerable<StB.ViewModels.CategoryViewModel>)ViewBag.Categories;

            if (list != null && list.Count() > 0)

            {

                @Html.Partial("_CategoryGrid", (IEnumerable<StB.ViewModels.CategoryViewModel>)ViewBag.Categories)

            }

            }

        </div>

 

</div>

 

 

 

@Scripts.Render("~/bundles/SBScripts")

 

 

 

 

my Script to create and load kendo window

 

$(document).ready(function () {




    $('#lnksitedetails').click(function (event) {
        event.preventDefault();

        var windowWidget = $("#SiteDetailsWindow").data("kendoWindow");
        kendo.ui.progress(windowWidget.element, true);

        var url = '/HierarchyBuilder/GetSiteDetails';
        $.ajax({
            url: url,
            type: 'GET',
            async: true,
            cache: false,
            success: function (data) {
               // console.log("Success completed --> " + data);
                $('#SiteDetailsWindow').html(data);
            }
        });
        var win = $("#SiteDetailsWindow").data("kendoWindow");
        win.center().open();
    });

});




$(document).ready(function () {


    $("#SiteDetailsWindow").kendoWindow({
        width: 500,
        height: 400,
        title: "Site Details",
        visible: false,
        actions: ["Close", "Minimize", "Maximize"],
    }).data("kendoWindow");
    console.log('SiteDetailsWindow initialized SUCCESSFULLY...!!!!!!!!!!!');



    $("#siteDetailsCancel").click(function () {
        // call 'close' method on nearest kendoWindow
        alert('siteDetailsCancel button clicked');

        var content = $('#siteDetails').val();
        alert(content);
        //  $('#txtSpecialCondition').val(content);
        $('#txtSiteDetails').val(content);
        $(this).closest("[data-role=window]").data("kendoWindow").close();
        // the above is equivalent to:
        //$(this).closest(".k-window-content").data("kendoWindow").close();
    });



    $('#siteDetailsSubmit').click(function () {
        alert('Submit clicked');
    });
    //
});

[Nencho]

Hello Manash,

Thank you for the detailed information. However, I was unable to get the provided code snippet runnable due to the missing models and some other referenced. This is why, I would like to ask you to isolate the issue in a simplified runnable example and provide us with it. Hence, we will be able to examine the behavior and pin down the reason for the issue.

Regards,
Nencho
Progress Telerik