0

I am using Jqgrid in my project. In one column we are showing email address. If we are giving some long email address then the column is automatically re-sized to the length and that screw up the whole grid layout. Since email dont have any spaces so its not warping also. I want ignore the extra content and show how much can be accommodated in the given width. I already tried with giving fixed width. Please let me know if anyone have the solution for this.

Code:

   jQuery('#userDetail').jqGrid({
    url: endpoint,
    datatype: 'json',
    height: 50,
    colNames:['Names','Email', 'Phone Number', 'Fax Number', 'Country'],
    colModel:[
        {
           name:'names',
           index:'names',
           sortable: false,
           width:200,
           resizable: false

        },     {
           name:'email',
           index:'email',
           sortable: false,
           width:200,
           resizable: false

        },     {
           name:'phone',
           index:'phone',
           sortable: false,
           resizable: false,
           width:200

        },     {
           name:'fax',
           index:'fax' ,
           sortable: false,
            resizable: false,
            width:200
        },     {
           name:'country',
           index:'country',
           sortable: false,
            resizable: false,
            width:200,
        }
     ],
     multiselect: false,
     autowidth: true,
     caption: 'User Details',
     loadComplete: function(response) {
        if(!util.errorHandler(response)){
        }
     },
    jsonReader : { 
           root: "rows",
           page: "page",
          total: "total",
        records: "records",
             id: "_id",
      repeatitems: false 
   },
     });

Thanks Sandy

Sandy
  • 525
  • 2
  • 9
  • 17

1 Answers1

2

I am not sure that I understand correct your requirements. You wrote mostly about the problem of warping of long texts having no spaces like email. The problem could be solved by usage of character wrapping. See the answer for more details. Another answer has additional information about implementation of character level wrapping in different web browsers. The most web browsers do word level wrapping if the text contains spaces and do character wrapping only if no spaces exist in the text. Is it not what you need?

Community
  • 1
  • 1
Oleg
  • 220,925
  • 34
  • 403
  • 798
  • Thanks Oleg. I was looking for this only. Let me try. – Sandy Feb 07 '13 at 11:10
  • Hi Oleg,I tried the above code but its not working for me. Do you have any idea what may be the prob. For me its still the same, the character wrapping is not working. – Sandy Feb 07 '13 at 11:29
  • 1
    @Sandy: You are welcome! It's difficult to find why your code not work. It could be some conflicts with other CSS settings which you use. [The demo](http://www.ok-soft-gmbh.com/jqGrid/WordBreakWrapping_.htm) uses the last version of jqGrid, jQuery and jQuery UI and one can see that it still work as the old demo which I posted in the referenced answer. If you'll post the link to your demo I could try to help you to find why character wrapping not work in your project. – Oleg Feb 07 '13 at 11:41
  • Hi Oleg, Its for me now. In my code we have written the below CSS for that it was not working. .ui-jqgrid .ui-jqgrid-btable{table-layout: auto;} .ui-jqgrid .ui-jqgrid-htable{table-layout: auto;} – Sandy Feb 07 '13 at 11:49
  • @Sandy: It's wrong settings. You should remove there. jqGrid (like the most other grids) use *two* (or more) separate tables: one for column headers and another with the column body. It's required to implement vertical scrolling. So your current settings will follow wrong calculation of width of column headers. You should remove the CSS settings. So the setting `table-layout:fixed;` will be used not just for better performance, but one really need it. – Oleg Feb 07 '13 at 11:58
  • I removed it. Thanks for your support and help. :) – Sandy Feb 07 '13 at 12:31