SOLVED

I have a very similar use case.  In my case, the width of each columns is not known.  Once the data is loaded I perform and Autofit method on all columns.  What I would like to do is to autofit all columns except the last one and have that one take all remaining space to fill the width of the datagrid (and not have the "empty" section on the datagrid on the right.  Is this possible?

Thank you very much for this, it works perfectly!

Hi!  I need to set the width of a datagrid specific column programatically. Ideally I would like to set the width using the column field name and I would not want to reset the entire columns settings... Is this possible?

For example, my datagrid has 6 columns with 1 frozen column as shown in http://jsfiddle.net/Ng8aL/1/

I would like to change the width of, for example f4, from 180 to 300 using javascript (for example on click of a button)

Thank you!

Very good and thank you !  Now for the next step where I want my datagrid contained within each panel to follow the resizing.  Is the best method to invoke the datagrid resize method after the panel resize method?  For example

$('#theNameOfMyDatagrid').datagrid('resize',{width: theWidthOfTheParentPanel});

Regards.

My requirement is to use multiple datagrids on a single page and the maximum space of the browser should be used.  To test potential solutions, I created a fiddle project ( http://jsfiddle.net/A54pt/ ) that contains:

<div style="width:100%;height:350px;">
    <div class="easyui-layout" style="fit:true;width:100%;height:350px;">
        <div data-options="region:'west',split:false, collapsible:false" title="West" style="width:44%"></div>
        <div data-options="region:'center',title:'Main Title'" style="width:55%">
        </div>
    </div>
 </div>

In this simple test, a Layout with 2 panels is used.  The left panel should use about 40% of the screen width while the one on the right should use about 55% of the width.  As you can see, it does not work when you resize the browser and the left panel does not use 40% of the width...   What am I doing wrong ?

Thanks for your assistance.

That is great, thanks !

What I added is on click of the calendar icon, I set the current date of the Calendar to the selected data from the text data (after performing a conversion on the input text).

            onShowPanel: function () {
                var date = GetDateFromEntry($('#periodStartDate').combobox('getValue'));
                var c = $('#periodStartDate').datebox('calendar');
                c.calendar('moveTo', Date.parse(date));

The above solution works for when the user clicks the text part of the datebox.  However, when the user types-in the text part of the datebox the calendar part still pops-up...

I tried to override the other keys but the calendar still pops-up...

        $('#periodStartDate').datebox('options').keyHandler.query = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.up = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.down = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.left = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.right = function () {
            $(this).datebox('hidePanel');
        };
        $('#periodStartDate').datebox('options').keyHandler.enter = function () {
            $(this).datebox('hidePanel');
        };

What I need is for the calendar to never show unless the user click on the icon.  How can I override all events on the text part of the databox ?

Thank you for your assistance.

Perfect, thanks for the hint !

Here is the final code fragment:

        $('#periodStartDate').datebox('options').keyHandler.query = function () {
            $(this).datebox('hidePanel');
        };

Hi, I need the datebox to NOT show the calendar when a user types in the text field but only when the user clicks on the calendar icon. The user should be able to type in the text field.

What is the way to implement this ?

Thanks!

Hi, I need a special date selection box that contains a free text entry field and a calendar that is shown on click of a small calendar icon.  I tried the option of hiding the calendar on load of the page and then showing it on click of the calendar icon but the problem is that when the calendar object is shown, the other objects on the page are "pushed down" in order to make place for the calendar object.  What I would like to have is the calendar to show "over" the other objects on the page - just like the datebox does.

Please let me know how to do this.

Thanks!

Good idea, thanks !

I found a way to do this.  I use a formater function on the boolean column as shown below.

                 formatter: function (value) {
                     if (value == 'True') {
                         return '<input type="checkbox" checked>';
                     }
                     else {
                         return '<input type="checkbox" >';
                     }

I am using the datagrid without any editor feature.  One of the columns contains a boolean value (true or false).  The users want the grid to show a static checked checkbox when the value is true and a static unchecked checkbox otherwise. Is this feasible?

Thanks!