Kendo Ui MVC with WCF: Item search inside modal Pop up in detail

Item Search Modal:

For this you will need the following:

-          Two Partials:  (Form and Grid) and (Modal)

-          Controller

-          Manager

-          WCF Service

-          View: (the view the modal will be accessed)

-          JQuery

Partial 1: (Form and Grid)

Form:

<div class="SearchFormWrapper">

    <form id="ItemSearchForm" method="post" runat="server">

        <label for="ItemPartNumber">Part Number:</label>

        <input id="ItemPartNumber" type="text" name="ItemPartNumber" />

        <label for="ItemManufacturer">Manufacturer:</label>

        <input id="ItemManufacturer" type="text" name="ItemManufacturer" value=""/>

        <label for="ItemCategory">Category:</label>

        <input id="ItemCategory" type="text" name="ItemCategory" value=""/>

        <input type="button" value="Search" onclick="ItemGridReload()"/>

disabled="disabled" />

    </form>

</div>

Grid:

<div class="SearchGridWrapper">

    @(Html.Kendo().Grid<PACT.DataModel.InventoryItems_Active>()

            .Name("ItemSearchGrid")

            .Columns(columns =>

            {

                columns.Bound(a => a.ItemId).Title("Part #");

                columns.Bound(a => a.ItemName).Title("Description");

                columns.Bound(a => a.InventManufacturerId).Title("Manufacturer");

                columns.Bound(a => a.ItemGroupId).Title("Category");

                columns.Bound(a => a.ModelGroupId).Title("Model Group");

            })

            .DataSource(dataSource => dataSource

                .Ajax()

                .PageSize(10)

                .Read(read => read.Action("Search", "ItemSearch")//define the Action and Controller

                    .Data("ItemFormValues")

                )

                .ServerOperation(false)

)

            .Selectable()

            .AutoBind(false)

            .Pageable()

            .Sortable()

            .Events(e => e.DataBound("DoubleClickItemGridRowData"))  // Jquery to do things when grid row is double clicked.

        )

</div>

The onclick event of the form button will only rebind/reload the grid.  The read action of the grid will do the real work in getting the grid data via controller action.  The .Data will be what parameters you will pass to the controller.

.AutoBind will tell the grid whether to bind on load or only with the read action is called.

.Events will trigger specific grid events

Partial 2: (Modal)

@(Html.Kendo().Window()

      .Name("ItemSearchWindow") //The name of the window is mandatory. It specifies the "id" attribute of the widget.

      .Title("Search for Items") //set the title of the window

      .LoadContentFrom("AjaxContent", "ItemSearch") //define the Action and Controller name

      .Draggable(true)

      .Resizable()

      .Height(600)

      .Width(800)

      .Modal(true)         

)

.LoadContentFrom will load the partial view we just created above.

Controller:

public class ItemSearchController : Controller

    {

        InquiryServiceClient service = new InquiryServiceClient();

        public ActionResult Index()

        {

            return View();

        }

        public PartialViewResult ShowModal()

        {

            return PartialView("_ModalItemSearch");

        }

        public PartialViewResult AjaxContent()

        {

            return PartialView("_ItemSearchContent");

        }

       public ActionResult Search(string ItemPartNumber, string ItemManufacturer, string ItemCategory, string DataAreaID, [DataSourceRequest]DataSourceRequest request)

        {

            IList<InventoryItems_Active> items = new List<InventoryItems_Active>();

            using (service)

            {

                    items = service.GetInventoryItems(ItemPartNumber, ItemManufacturer, ItemCategory, DataAreaID);

            }

            DataSourceResult result = items.ToDataSourceResult(request);

            return Json(result, JsonRequestBehavior.AllowGet);

        }

    }

Manager:

public static IList<InventoryItems_Active> GetInventoryItems(string ItemPartNumber, string ItemManufacturer, string ItemCategory, string DataAreaID)

        {

            IList<InventoryItems_Active> inventoryItems = new List<PACT.DataModel.InventoryItems_Active>();

            using (AXInquiry_Entities inquiry = new AXInquiry_Entities())

            {

                inquiry.Configuration.ProxyCreationEnabled = false;

                inventoryItems = inquiry.GetInventoryItems_Active(ItemPartNumber, ItemManufacturer, ItemCategory, DataAreaID).Take(100).ToList<InventoryItems_Active>();

// this is a proc that returns top 100 results.

            }

            return inventoryItems;

        }

WCF Service:

        [OperationContract]

        IList<InventoryItems_Active> GetInventoryItems(string ItemPartNumber, string ItemManufacturer, string ItemCategory, string DataAreaID);

Layout:

In your main layout you will need to make an invisible Modal Container Div that holds a Section.  Then whatever view you need to call your modal on you will call the section and render your modal partial view via the controller:

In Layout:

    <div id="ModalContainer" style="height: auto; width: auto; z-index: 99; display: none;">

        @RenderSection("ModalSection", required: false)

    </div>

In View:

@section ModalSection{

    @Html.Action("ShowModal", "ItemSearch")  

}

View:

The button in the view just needs to call the jquery to load the Modal:

<input type="button" class="buttonSearch" onmouseup="ModalItemSearch()" value="" />

JQuery:

You can access all kendo elements by there name/id:

function ModalItemSearch() {

    var dialog = $("#ItemSearchWindow");

        dialog.data("kendoWindow").open().center();

}

function ItemGridReload() {

    var grid = $("#ItemSearchGrid").data("kendoGrid");

    grid.dataSource.read();

}

function ItemFormValues() {

    return {

        ItemPartNumber: $("#ItemPartNumber").val(),

        ItemManufacturer: $("#ItemManufacturer").val(),

        ItemCategory: $("#ItemCategory").val(),

        DataAreaID: "mdsi",

    };

}