I am using Infragistics grid in MVC4. In the Infragistics grid i want a column to resize the checkbox smaller. How do I do that.
I set the
renderCheckboxes: true, int the igHierarchicalGrid
checkbox display in the first column. I need to resize it. How do I do that
thanks.
Sorry. I am overlook that. Thank You all
Hello Ted,
Is there any particular reason you are using different height settings as 12px for Department and 14px for ID, as well in the templates?
I will appreciate if you could attach a simple runnable HTML code sample, so I am able to further look into this and narrow down a possible cause.
I am looking forward feedback from you!
Thank You that is what I need.
However, when I set the rowSelectorColumnWidth: 30 the checkBoxes column width is rezise to 30, but the height is expand bigger
rowSelectorColumnWidth: 30 the checkBoxes column width is rezise to 30, but the height is expand bigger
even I already set the height for each row
columns: [
{ key:
"Department", headerText: " Name", dataType: "string", width: "4%", height: "12px", template: "<div class='gridtextinput' style='height:12px;'>${Department}</div>" },
"ID", headerText: "ID", dataType: "string", width: "0%", height: "14px", template: "<div class='gridtextinput' style='height:0px;'>${ID}</div>", hidden: true }
],
{
name:"RowSelectors",
enableCheckBoxes:true,
enableRowNumbering:false,
rowSelectorColumnWidth: 30,
columnSettings: [
classes:"gridtextinput"
}
]
},
Thanks
It is not very clear what your asking is for, so I will try to cover the most of the possible scenarios.
I have used the following online samples as an example: http://www.igniteui.com/grid/checkbox-column http://www.igniteui.com/grid/row-selectors
You could easily inspect the css classes applied to any rendered HTML element using the available browser’s Dev Tools.What is more, using this approach it is possible to change the CSS and observe changes in real time, as well as a detailed information where this CSS styles are located (in which file as well as the exact line in the file).
I. For example, the responsible css for the checkbox size is currently located under Infragistics.css:71
.ui-igcheckbox-small {display: inline-block;width: 13px;height: 13px;overflow: hidden;}
Changing the width and height here will change the CheckBox size directly.
However, the checked CheckBox image is depending on several styles, and its position and size should be changed as well, if the default Infragistics theme is modified. This change is required, in order to fix the checkmark position when the CheckBox size is changed. For example, the CSS responsible for the image position is located under Infragistics.theme.css:215
.ui-icon-check {background-position: -64px -144px;}
Also please notice there is other CSS involved, as the one specifying the checkmark image location àInfragistics.theme.css:80:
.ui-state-default .ui-icon, .ui-state-hover .ui-state-default .ui-icon {background-image: url( images/ui-icons_888888_256x240.png );}
II. If you are using row selectors, The CSS responsible for the checkBoxes size is located under Infragistics.css file. In particular -->Infragistics.css:68 line
.ui-igcheckbox-normal {display: inline-block;_display: inline;overflow: hidden;width: 16px;height: 16px;}
If it is required to change the checkBoxes column width, and not the checkBoxes size, I suggest take a look at the following option available. http://help.infragistics.com/jQuery/2014.1/ui.iggridrowselectors#options:rowSelectorColumnWidth
This is the general approach. You could further look into the css files and tweak the necessary css styles, in order to achieve the desired styling.Please let me know how these hints work for you!