Cireson portal grid view - remove icon column

CaterhamITSupport

Dear All,

Is there a way of removing the icon column in the grid view on the portal?

Thanks

Daniel

Shane_White

Hi @CaterhamITSupport

Paste this in Custom.js and see if this works:

$(document).on('ajaxStop', function() {

setTimeout(function() {

if ($('.grid-container.k-grid').length > 0) {

var grid = $('.grid-container.k-grid').data("kendoGrid");

grid.hideColumn("Icon");

grid.refresh();

};

$(document).off('ajaxStop');

},2000);

});

Thanks,

Shane

Shane_White

Hi @CaterhamITSupport

How about just try this:

setTimeout(function() {

if ($('.grid-container.k-grid').length > 0) {

var grid = $('.grid-container.k-grid').data("kendoGrid");

grid.hideColumn("Icon");

grid.refresh();

};

},2000);

Thanks,

Shane

CaterhamITSupport

Shanes code fixed my issue, i just needed to remove the refresh part.

Mikkel_Madsen

Users can filter the columns by themselves

CaterhamITSupport

They can but when page refreshes it shows again. i want to do this permanently for all users.

Daniel

Mikkel_Madsen

Try this

$(document).ready(function () {
	if (session.user.Analyst === 0) {
		return;
	}


	var url = window.location.href;
	if(url.indexOf("/View/") === -1){ // Loosely verify we are on a page with a gridview. Not really reliable, but it helps...
		return;
	}
	
	//The navigation node doesn't load immediately. Get the main div that definitely exists.
	var mainPageNode = document.getElementById('main_wrapper');
	
	// create an observer instance
	var observer = new MutationObserver(function(mutations) {
		//The page changed. See if our title exists. If it does, then our gridview should also exist.
		var titleElement = $(".page_title"); //The title always exists. If this page has a gridview, then it also exists as soon as the title does.
		
		if (titleElement.length > 0) { //An element with class of page_title exists.
			var gridElement = $('[data-role=grid]') // Get the grid object
										console.log("WP: gridElement length:" + gridElement.length );
			if (gridElement.length > 0) {
				var grid = $('[data-role=grid]').data('kendoGrid').hideColumn("Icon");


				//We are done observing.
				observer.disconnect();
			}
		}
		
	});


	// configure the observer and start the instance.
	var observerConfig = { attributes: true, childList: true, subtree: true, characterData: true };
	observer.observe(mainPageNode, observerConfig);
	
});

CaterhamITSupport

Thanks for the help but unfortunately this didnt work for this. I put the code into custom.js. Can it be done by custom.css?

Shane_White

Hi @CaterhamITSupport

Paste this in Custom.js and see if this works:

$(document).on('ajaxStop', function() {

setTimeout(function() {

if ($('.grid-container.k-grid').length > 0) {

var grid = $('.grid-container.k-grid').data("kendoGrid");

grid.hideColumn("Icon");

grid.refresh();

};

$(document).off('ajaxStop');

},2000);

});

Thanks,

Shane

CaterhamITSupport

Thank you this has worked.

Kind Regards

Daniel

CaterhamITSupport

So actually this breaks this now:

// Code for colours for incident grid panel

$(document).on('ajaxStop', function () {

$('[role=gridcell]').filter(function() {return $(this).text() === "Assigned"; }).css("background-color", "yellow");

$('[role=gridcell]').filter(function() {return $(this).text() === "Resolved"; }).css("background-color", "lightgreen");

$('[role=gridcell]').filter(function() {return $(this).text() === "New"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "Closed"; }).css("background-color", "deepskyblue");

});

Shane_White

Hi @CaterhamITSupport

How about just try this:

setTimeout(function() {

if ($('.grid-container.k-grid').length > 0) {

var grid = $('.grid-container.k-grid').data("kendoGrid");

grid.hideColumn("Icon");

grid.refresh();

};

},2000);

Thanks,

Shane

CaterhamITSupport

No still breaks the colour coding.

Thanks

Daniel

Shane_White

The colours seems to be breaking in the new version of the portal, if you wait for the grid to refresh then it looks like the colours appear. So it is an issue with the other customisation not the one you have added. Try this instead:

$(document).on('ajaxStop', function () {

setTimeout(function(){

//----------STATUS----------//

$('[role=gridcell]').filter(function() {return $(this).text() === "Active"; }).css({"background-color":"#ff6666","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "Resolved"; }).css({"background-color":"lightgreen","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "Submitted"; }).css({"background-color":"#ff6666","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "In Progress"; }).css({"background-color":"#ffc14d","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "Completed"; }).css({"background-color":"deepskyblue","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "Closed"; }).css({"background-color":"deepskyblue","border-radius":"10px","text-align":"center"});

//---------PRIORITY---------//

$('[role=gridcell]').filter(function() {return $(this).text() === "Low"; }).css({"background-color":"lightgreen","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "Medium"; }).css({"background-color":"#ffff66","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "High"; }).css({"background-color":"#ffc14d","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "Immediate"; }).css({"background-color":"#ff6666","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "1"; }).css({"background-color":"#ff6666","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "2"; }).css({"background-color":"#ffc14d","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "3"; }).css({"background-color":"#ffff66","border-radius":"10px","text-align":"center"});

$('[role=gridcell]').filter(function() {return $(this).text() === "4"; }).css({"background-color":"lightgreen","border-radius":"10px","text-align":"center"});

},3000);

$(document).off('ajaxStop');

});

Thanks,

Shane

CaterhamITSupport

I tried the code above and other from earlier, doesn't work.

Kind Regards

Daniel

Shane_White

Hi @CaterhamITSupport

I have tweaked the above code to add a timeout, yours would look like this:

$(document).on('ajaxStop', function () {

setTimeout(function(){

$('[role=gridcell]').filter(function() {return $(this).text() === "Assigned"; }).css("background-color", "yellow");

$('[role=gridcell]').filter(function() {return $(this).text() === "Resolved"; }).css("background-color", "lightgreen");

$('[role=gridcell]').filter(function() {return $(this).text() === "New"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "Closed"; }).css("background-color", "deepskyblue");

},3000);

$(document).off('ajaxStop');

});

Thanks,

Shane

CaterhamITSupport

There is a slight delay, can we get rid of the delay?

If not then this is the best I suppose and thank you for the help.

Daniel

CaterhamITSupport

Actually the colours go off after a small period of time.

Daniel

Shane_White

Hi @CaterhamITSupport

Yh you just remove the timeout number (e.g 3000 to 1500)

They go off when the grid refreshes, not sure of a way around this at current.

Thanks,

Shane

CaterhamITSupport

The colours drop off after a period now.

Kind Regards

Daniel

Shane_White

Yes that is because of the grid refresh which I cannot figure out how to solve.

Thanks,

Shane

CaterhamITSupport

Ok no worries and really appreciate the effort and help here.

Kind Regards

Daniel

Shane_White

Hi @CaterhamITSupport

Think I figured it out, here is my new code, let me know what you think:

$(document).on('ajaxStop', function () {

setTimeout(function() {

var grid = $('.grid-container.k-grid');

var kendoGrid = grid.data("kendoGrid");

kendoGrid.bind("dataBound", changeGridColours);

kendoGrid.dataSource.fetch();

function changeGridColours() {

$('[role=gridcell]').filter(function() {return $(this).text() === "Assigned"; }).css("background-color", "yellow");

$('[role=gridcell]').filter(function() {return $(this).text() === "Resolved"; }).css("background-color", "lightgreen");

$('[role=gridcell]').filter(function() {return $(this).text() === "New"; }).css("background-color", "red");

$('[role=gridcell]').filter(function() {return $(this).text() === "Closed"; }).css("background-color", "deepskyblue");

};

},2000);

$(document).off('ajaxStop');

});

Thanks,

Shane

CaterhamITSupport

Thanks Shane but it didn't work.

Shane_White

Just out of curiosity change the timeout number, which is currently 2000, to something like 5000 and see if it works?

When you are adding in new code are you doing a hard refresh of your browser (Ctrl+F5)?

Thanks,

Shane

CaterhamITSupport

Hi Shane,

Thank you but no it doesn't work.

Thank you again though.

Daniel

CaterhamITSupport

Shanes code fixed my issue, i just needed to remove the refresh part.