Dynamically Resize HTML elements

One day I got real tired of havig to statically assign height and width to my MVC web pages, so I used this little tidbit to help dynamically resize a web app depending on the size of the window after document ready and after a resize event has fired.

function ResizeElements()
{
    var bodyDiv = document.getElementById('body');
    var contentWrapper = $('#body > .content-wrapper');
    var featuredHeight = $('#body > .featured').outerHeight(true);
    var kendoGrid = $('.KendoGrid');

    // set the height of the overall body container
    bodyDiv.style.height = (window.outerHeight - 125).toString() + 'px';

    // set the width of the content wrapper.  the wrapper inherits it's
// height from the body container
    contentWrapper.width(window.outerWidth - 200).toString() + 'px';

    // if there is a KendoGrid class element present, set it's height so
    // the bottom is about 10 pixels from the footer
    if (kendoGrid.length > 0)
    {
        kendoGrid.height(window.outerHeight - featuredHeight - 275);

// this helps re-render the kendo grid
        kendoGrid.data('kendoGrid').resize();
    }
}

$(document).ready(function ()
{
    ResizeElements();
});

$(window).resize(function()
{
    ResizeElements();
});

Advertisements
Dynamically Resize HTML elements

Toffer and the Multi-Select CheckBoxes

So I was whipping up a MVC view the other day that allowed a user to update the status of a given database object.  The who and what isn’t important for the point of the post.  As I was testing the functionality out it hit me that it was a total pain in the butt to use if you needed to set the same status to several rows…and it would sure be handy if there was some way to multi select rows to update.  So I turned on the .Batch(true) in the .Ajax property of the Kendo Grid.  This allowed me to set rows, then click the “Save” button to submit the results.  Functional but it still felt unnatural to do.  What I really wanted was to add a CheckBox column to the Grid and then some method to do the bulk updating of all the selected rows.  So off I went in search of a snippit of code to show me how it’s done…and I was very successful.  Not only did I figure out how to add a CheckBox column…but I also figured out how to add one to the header row so that it would check all rows.  Here’s the relevant code I used to do it.

The important part to look at in the Kendo Grid code below is the column that starts with “c.Template(@<text></text>)”.  The ClientTemplate and Header template is where the CheckBoxes are being added in and the JavaScript function sets a “Selected” property that MUST already be in the object model being used in the Grid.  That was the part I kept having difficulty with is that I was looking for a way in that I didn’t have to add some special property to the object model…but I couldn’t figure it out so I took the easy way by customizing the model object bound to the grid.

Javascript Functions:
$(function ()
{
    $('#YourKendoGridName').on('click', '.chkbx', function ()
    {
        var checked = $(this).is(':checked');
        var grid = $('#YourKendoGridName').data().kendoGrid;
        var dataItem = grid.dataItem($(this).closest('tr'));
        dataItem.set('Selected', checked);
    })
})

function checkAll(e)
{
    var state = $(e).is(':checked');
    var grid = $('#YourKendoGridName').data().kendoGrid;

    $.each(grid.dataSource.view(), function ()
    {
        if (this['Selected'] != state)
            this.dirty = true;

        this['Selected'] = state;
    });

    grid.refresh();
}

Kendo Grid Razor Code:
@{ var columnWidth = 150; }

@(Html.Kendo().Grid<YourCustomObjectModel>()
    .Columns(c =>
    {
        c.Template(@<text></text>)
.ClientTemplate("<input type='checkbox' #= Selected ? checked='checked':'' # class='chkbx' />")
            .HeaderTemplate("<input type='checkbox' id='masterCheckBox' onclick='checkAll(this)'/>")
            .Width(80);
        c.Bound(s => s.SomeColumnOne)
            .Title("One")
            .Width(columnWidth);
        c.Bound(s => s.SomeColumnTwo)
            .Title("Two")
            .Width(columnWidth);
        c.Bound(s => s.SomeColumnThree)
            .Title("Three")
            .Width(columnWidth);
        c.Bound(s => s.SomeColumnFour)
            .Title("Four")
            .Width(columnWidth);
    })
    .DataSource(ds => ds
        .Ajax()
        .Batch(true)
        .Read(r => r.Action("YourReadAction", "YourControllerName"))
    .Name("YourGridName")
    .Scrollable()
    .Sortable()

 

Toffer and the Multi-Select CheckBoxes

The Greeting…

Hello everyone!

Here begins my attempt at trying to communicate my adventures in learning more about coding.  I have a horrible style of writing…an even more horrible sense of humor…but I’m very open to suggestions and opinions, so if you will…please comment.  🙂

There’s a quote I like from Einstein that seems to fit me well.

I have no special talents. I am only passionately curious.

Now…with all that being said…onto some real posts…

The Greeting…