I have a JTABLE grid in asp.net web forms. The grid is working great. I need to modify the input form when editing a row. I'd like to override some of the CSS or the template it uses. I'm going to start with expanding the length of the input fields. How do I do this? Override the css classes it uses?
Here is my code.
$('#AnswerTableContainer').jtable({
![enter image description here][1] title: 'Answers ',
//sorting: true, //Enable sorting
//defaultSorting: 'DisplayOrder ASC', //Set default sorting
actions: {
listAction: 'AdminTopicEdit.aspx/TopicAnswerList',
createAction: 'AdminTopicEdit.aspx/TopicAnswerCreate',
updateAction: 'AdminTopicEdit.aspx/TopicAnswerUpdate',
deleteAction: 'AdminTopicEdit.aspx/TopicAnswerDelete'
},
fields: {
OasisReviewTopicAnswerID: {
key: true,
list: false
},
OasisReviewTopicID: {
title: 'OasisReviewTopicID',
create: true,
edit: true,
list: true,
input: function (data) {
//if (data.value) {
return '<input type="text" readonly class="jtable-input-readonly" name="OasisReviewTopicID" value="' + $('#OasisReviewTopicID').val() + '"/>';
//} else {
//nothing to worry about here for your situation, data.value is undefined so the else is for the create/add new record user interaction, create is false for your usage so this else is not needed but shown just so you know when it would be entered
//}
},
width: '5%',
visibility: 'hidden'
},
Answer: {
title: 'Answer',
width: '10%'
},
Description: {
title: 'Description',
width: '35%'
},
Description2: {
title: 'Description2',
width: '35%'
},
DisplayOrder: {
title: 'DisplayOrder',
width: '10%'
},
},
formCreated: function (event, data) {
//data.form.find('input[name="OasisReviewTopicID"]').attr('disabled', 'disabled');
},
formSubmitting: function (event, data) {
//data.form.find('input[name="OasisReviewTopicID"]').val($('#o').val());
//alert(data);
},
//Dispose validation logic when form is closed
formClosed: function (event, data) {
}
}); //JTable
You can do this in the formcreated event:
formCreated: function (event, data)
{
data.form.validationEngine({ promptPosition: "Right", autoPositionUpdate: true});
data.form.find('input').css('width','200px');
},