Hi All,
I have a requirement in which I dont want to show 5 columns in display.I have used 'Hiding' property of grid.
I have a checkbox in which it is checked want to show all the records of grid in single page and if unchecked want to show with pagination.
I have used the below code to implement.While checking the checkbox hiding property worked and while unchecking hidden columns are displayed in the screen.
Please find the code given below.
$(function () {$.ig.loader({scriptPath: '@Url.Content("~/Content/Scripts")',cssPath: '@Url.Content("~/Content/css")',resources: 'igGrid.*',ready: function () {
$.getJSON("@Url.Content("~/Student/GetAllStudentContractData")", null, function (data) {
var headerTextValues = ["Student ID", "PPO Contract Name", "From Date", "Thru Date", "Contract Rates", "Contract Prompt Payment","Contract Exceptions", "MasterStudentContractPtr", "MasterStudentInternalNum", "MasterStudentID", "MasterStudentSuffix","StudentInternalNum"];$('#tbStudentContractGrid').igGrid({expandCollapseAnimations: true,animationDuration: 1000,expandTooltip: "Expand to View Details",collapseTooltip: "Hide details",dataSource: data,responseDataKey: "Records",dataSourceType: "json",autoGenerateLayouts: false,autoGenerateColumns: false,
rowEditDialogContainment: "owner",showReadonlyEditors: false,
columns: [{ headerText: headerTextValues[0], key: "StudentContractNum", width: "10%" },{ headerText: headerTextValues[1], key: "ContractNam", width: "10%" },{ headerText: headerTextValues[2], key: "StartDate", width: "10%" },{ headerText: headerTextValues[3], key: "ThruDate", width: "10%" },
{ headerText: headerTextValues[4], key: "CountContractRates", width: "10%",template: "{{if ${CountContractRates} > 0 }}<a href='@Url.Content("~/StudentContractRates/StudentContractRates?masterflag=${MasterStudentContractPtr}&contractnum=${StudentContractNum}&masterseqnum=${MasterStudentInternalNum}&providerseqnum=${StudentInternalNum}&contractthrudate=${ThruDate}")' target='_blank'>View Details</a>{{else}}No results found{{/if}}"},{ headerText: headerTextValues[5], key: "CountPromptPayment", width: "10%",template: "{{if ${CountPromptPayment} > 0 }}<a href='@Url.Content("~/StudentContractPayment/StudentContractPayment?masterflag=${MasterStudentContractPtr}&contractnum=${StudentContractNum}&masterseqnum=${MasterStudentInternalNum}&providerseqnum=${StudentInternalNum}&contractthrudate=${ThruDate}")' target='_blank'>View Details</a>{{else}}No results found{{/if}}"},{ headerText: headerTextValues[6], key: "CountException", width: "10%",template: "{{if ${CountException} > 0 }}<a href='@Url.Content("~/ContractException/ContractException?masterflag=${MasterStudentContractPtr}&contractnum=${StudentContractNum}&masterseqnum=${MasterStudentInternalNum}&providerseqnum=${StudentInternalNum}&contractthrudate=${ThruDate}")' target='_blank'>View Details</a>{{else}}No results found{{/if}}"},
{ headerText: headerTextValues[7], key: "MasterStudentContractPtr", width: "10%" },{headerText: headerTextValues[8], key: "MasterStudentInternalNum", width: "15%"},
{ headerText: headerTextValues[9], key: "MasterStudentID", width: "15%" },{ headerText: headerTextValues[10], key: "MasterStudentSuffix", width: "15%" },{ headerText: headerTextValues[11], key: "StudentInternalNum", width: "15%"}],
features: [{name: "Selection",mode: "row",multipleSelection: false},//For Hiding columns{name: "Hiding",columnSettings: [{columnKey: "MasterStudentContractPtr",allowHiding: true,hidden: true},{columnKey: "MasterStudentInternalNum",allowHiding: true,hidden: true},{columnKey: "MasterStudentID",allowHiding: true,hidden: true},{columnKey: "MasterStudentSuffix",allowHiding: true,hidden: true},{columnKey: "StudentInternalNum",allowHiding: true,hidden: true}]},{name: 'Paging',type: 'local',pageSize: 10,inherit: true},{name: 'Filtering',showNullConditions:true},{name: "ColumnMoving",mode: "immediate",
addMovingDropdown: true,mode: "deferred",type: "render"},{name: 'Sorting'
},
{name: "GroupBy",columnSettings: [{isGroupBy: true}]}
],dataRendered: function(evt, ui) {if (ui.owner.dataSource.dataView().length > 0) {//To show the Display all records$("#GridChkbox").show();}}});});
}});})
Please suggest the solution for this.
Regards,
Pradeep SE
Hello Pradeep,
Thank you for posting in our community.
I followed your scenario and created a small sample. However, was not able to reproduce the behavior that you are describing. In my sample I have an igGrid with more than 3 initially hidden columns. There is also a checkbox which determines the page size of the grid.
When changing checkbox state all the columns remain as expected, hidden ones are not visible.
$('#pagingCheckbox').click(function() { var $this = $(this); if ($this.is(":checked")) { var gridDataSourceLength = $("#grid").igGrid("option","dataSource").length; $("#grid").igGridPaging("option", "pageSize", gridDataSourceLength); } else { $("#grid").igGridPaging("option", "pageSize", 10); } });
Please test my sample on your side and let me know what is the result.
If this is not an accurate demonstration of what you are trying to achieve please feel free to modify it and send it back to me for further investigation.
Feel free to contact me if you have any additional questions regarding this matter.
In the sample code if checkbox is checked the entire record count of grid is passed for paging but for myself the requirement was want to disable pagination in grid for that I have created the grid and then will unchecking the grid I want to have pagination.I have created one more grid using paging.But while doing this functionality it got failed when unchecking the checkbox and clicking on next button in grid the hidden values of grid gets automatically displayed.
Can you please help me in resolving the issues and suggest some other ways of doing it.Please help me and it is urgent.
I am not sure whether I understand your requirement completely.
Could you please try modifying my sample in order to match your scenario and send it back to me along with steps to reproduce the issue that you are experiencing.
Alternatively, you can provide me an isolated, ready to run sample of your own. Please remove all the code that is not directly related to this matter and attached the sample in this forum thread.
Having a working sample that replicates the behavior on your my is going to be very helpful for my further investigation.