Jonathan Berry's Web Development and Technology

Tuesday, February 5, 2013

Test Driven Development

I recently started looking into Test Driven Development, and I am interested in how effective it is. It seems that Katas are the main practice for this. Here are the top 3 practice points for TDD:

Roman Numeral conversion
Bowling Game Score
FizzBuzz

To me it seems that this type of practice is a good way to increase the strength of your coding, but not code design. Although, it does limit the chances of over architecture of an application. I will continue to get up to speed on TDD and try to find what limitations it has over traditional functional programming.

Saturday, February 2, 2013

Kendo UI Script Bundling Performance Issues

If you notice performance issues with the Kendo UI script bundles make sure you place your scripts at the beginning of the <body> tag before all of your body markup.

so:

<body>
Script bundles

body code...
</body

Thursday, January 31, 2013

IE Kendo UI error: Object does not support the property or method

[object Object] Has No Method kendoGrid

You may also see it as...

$("#grid").kendoGrid is not a function (FireFox)
Object doesn't support the property of method "kendoGrid" (IE 9+)
Object doesn't support this property or method (IE 8-)

This can occur for a variety of reasons:

You have not included Kendo UI at all
You are referencing the wrong path to Kendo in your page
You include jQuery both before and after Kendo UI which wipes out Kendo

If you have followed all of the above and are using Visual Studio 2012, read below:

I had an issue where I was debugging and IE9 would give me the above error. After hours of troubleshooting, the answer was simple. Clear Browser cache, Close all browsers, Stop all services, Close all visual studio instances, reboot Visual Studio. Problem solved. Very rare instance, but it happened to me.

Monday, August 13, 2012

Kendo UI with MVC: Passing parameters to your controller

<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")
                    .Data("ItemFormValues")
                )
                .ServerOperation(false)

            )
            .Selectable()
            .AutoBind(false)
            .Pageable()
            .Sortable()
            .Events(e => e.DataBound("DoubleClickItemGridRowData"))
        )
</div>

Notice the .Read: The .Data calls a JQuery function that can pass parameters to the controller

function ItemFormValues() {
    return {
        ItemPartNumber: $("#ItemPartNumber").val(),
        ItemManufacturer: $("#ItemManufacturer").val(),
        ItemCategory: $("#ItemCategory").val(),
        DataAreaID: "mdsi",
    };
}

This will automatically send the parameters to the controller:

       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);
        }

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:

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

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

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

disabled="disabled" />

</form>

</div>

Grid:

@(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:

@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:

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",

};

}