Hello all!
My app has 12 grids that are nearly identical in structure, often appearing on the same page. However, half have one extra column.
Since hey are so similar I have extracted their initialization into a single function.
But now I need to conditionally hide that one column.
In order of preference I'd like to know how to
My app has 12 grids that are nearly identical in structure, often appearing on the same page. However, half have one extra column.
Since hey are so similar I have extracted their initialization into a single function.
$.each($(".kendoGrid"), function () { loadJobGrid('#' + $(this).attr('id'));})But now I need to conditionally hide that one column.
In order of preference I'd like to know how to
- Hide columns after a grid is created. (and will this be a problem after events like datasource refresh, or paging?)
- Or ... Modify the the columns: [ ... ] section to conditionally add a field.
Thanks all!
1 Answer, 1 is accepted
0
Jeremy
Top achievements
Rank 1
Rank 1
answered on 23 Feb 2012, 08:07 PM
I'd like to partially answer my own question. I don't know how to hide a column, or if that's a good idea, but for my scenario the best solution is as follows:
Since the columns: [ .. ] definition simple takes in a Json array, you can pass it in by parameter. This will nativity set up the grid with the correct columns, without resorting to tricks.
I hope this helps someone else.
Since the columns: [ .. ] definition simple takes in a Json array, you can pass it in by parameter. This will nativity set up the grid with the correct columns, without resorting to tricks.
<div id="gridActionItems" class="kendoGrid" data-viewid="3" data-coltype="3"></div>$(document).ready(function () { $.each($(".kendoGrid"), function () { var coltype = $(this).data("coltype"); loadJobGrid('#' + $(this).attr('id'), coltype); })...function loadJobGrid(gridId, colType) { var cols; switch(colType) { case 1: var cols = [ { field: "JobID", title: "Job #" }, { field: "SubmitterName", title: "Submitter" }, { title: "", template: "<a href='javaScript:;' data-url='../Main/MoveJob.aspx' title='Move Job' class='moveLink' data-id='${ JobID }' data-parentGrid='gridPMNew'>Move</a>" } ] break; case 3: var cols = [ { field: "JobID", title: "Job #" }, { field: "Designers", title: "Designers" }, { title: "Job Location Notes", template: "${ JobLocationNotes } <a href='javaScript:;' data-url='../ModalWindows/JobLocationNotes.aspx' title='Location Notes' class='jobLocationLink' data-id='${ JobID }'>Log</a>" }, { title: "", template: "<a href='javaScript:;' data-url='../Main/MoveJob.aspx' title='Move Job' class='moveLink' data-id='${ JobID }' data-parentGrid='gridPMNew'>Move</a>" } ] break; } var grid = $(gridId) grid.kendoGrid({ columns: cols,I hope this helps someone else.