Home General Discussion

Cireson portal grid view - remove icon column

Dear All,

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

Thanks

Daniel

Best Answers

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭
    Accepted Answer

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

Answers

  • Mikkel_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭

    Users can filter the columns by themselves

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

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

    Daniel

  • Mikkel_MadsenMikkel_Madsen Customer Advanced IT Monkey ✭✭✭

    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);
    	
    });
    
    
    
  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

    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?

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

    Thank you this has worked.

    Kind Regards

    Daniel

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

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


    });

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

    No still breaks the colour coding.

    Thanks

    Daniel

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

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

    Kind Regards

    Daniel

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

    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

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

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

    Daniel

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

    The colours drop off after a period now.

    Kind Regards

    Daniel

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

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

    Thanks,

    Shane

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

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

    Kind Regards

    Daniel

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

    Thanks Shane but it didn't work.

  • Shane_WhiteShane_White Cireson Support Super IT Monkey ✭✭✭✭✭

    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

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭

    Hi Shane,

    Thank you but no it doesn't work.

    Thank you again though.

    Daniel

  • CaterhamITSupportCaterhamITSupport Member IT Monkey ✭
    Accepted Answer

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

Sign In or Register to comment.