asp.netjquery-jtable

JTable - How do I customize the css for the input form


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

Edit screen


Solution

  • 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');
    },