This is a migrated thread and some comments may be shown as answers.

Special Grid Problem

15 Answers 423 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Tony
Top achievements
Rank 1
Tony asked on 12 Jan 2013, 06:37 PM
Hi,

I'm a commercial complete client and have a simple but very strange problem.
 
I am using a kendo grid in a GoldMine (a windows based CMS) project and have one issue that needs to be resolved. I'm sure it has to do with the stripped down version of IE that Goldmine uses in it's GM+view tab. The GM+view tab is simply an embedded IE browser that exposes the contact data so that external web apps can be integrated.

Here's the problem. When the user clicks on the column header name of a sortble column a new browser window is opened with an empty grid. I'm using the column menu so I don't need the column header to be a link for sorting the column. This only happens in the Goldmine app so I know this is special, but it's a deal breaker for me because this is one of my apps that I'd like to integrate and there is a substantial user base at stake.

So, can the sorting link be disabled for column headers while still maintaining the ability to sort using the column menu? I'm sure there is a way to modify the JS but I'm not able to find it. Unfortunately there is no project I can send to show the problem but I can easily setup a GoToMeeting session and screen share to demo the issue.

My hope is that there's a simple fix for this. I think the IE version is 9 but I'm not sure what the embedded version is like.

Thanks in advance

15 Answers, 1 is accepted

Sort by
0
Dimo
Telerik team
answered on 14 Jan 2013, 02:47 PM
Hi Tony,

If you execute the following scrpt after initializing the Grid, the header cells will no longer be clickable and the users will be able to sort via the column menu only:

$(".k-grid-header .k-header").off("click.kendoSortable").on("click", false);


Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 1
answered on 16 Jan 2013, 03:33 PM
Hi Dimo,

Thanks! That works perfectly. I still get the new window when the user double clicks though. Is there another method I need to add to cancel the double clicking as well?

Thanks again.
Tony
0
Tony
Top achievements
Rank 1
answered on 16 Jan 2013, 08:50 PM
Hi,

Never mind the double click question. I found the dblclick I needed.

However, once I made these changes the column menu width shrunk and now moves the message text below the icon as in the image attached. I've already tried to fix this by shortening the message text but even the columns message doesn't fit.

Thanks in advance,
Tony Is there a way to increase the column menu width to accommodate the messages?
0
Dimo
Telerik team
answered on 17 Jan 2013, 08:21 AM
Hi Tony,

I am not sure how attaching and detaching event handlers would influence the column menu appearance. Ptrobably there Is something else that you have customized?

In any case, you can expand the column menu items with

.k-column-menu > .k-menu  .k-link
{
    min-width: 200px;
}


All the best,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 1
answered on 17 Jan 2013, 08:02 PM
Hi,

Well, the code worked to increase the size of the column menu, but it also messed up the datepicker in the filter. With the code included to increase the size of the column menu the date picker in the filter for date columns is not showing the day numbers. Just shows a white background with the weekend number showing (last day of each week) but nother else. The dates are there because I can roll over them with the mouse and the tooltip shows the correct information and the grey box outline for the day works properly....just can't see the numbers for the day.

Unfortunately I can't make a screenshot because the picker disappears when the mouse is moved off it.

Hope this is clear and thanks for your help in advance.
Tony

Here's my code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=8"></meta>
<title>Offer History</title>
<link type="text/css" href="css/kendo.common.css" rel="stylesheet" />
<link type="text/css" href="css/kendo.default.css" rel="stylesheet" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="js/kendo/kendo.custom.min.js"></script>
<style scoped>
body {
    font-family:Arial, Helvetica, sans-serif;
    font-size: .7em;
    }

       #buyer .k-button k-icon
        {
            vertical-align: top;
            width: 25px;
            padding: .1em .2em .1em;
            display: block;
        }
    .k-column-menu .k-menu .k-link
        {
            min-width: 200px;
        }
        
</style>
<script type="text/javascript">
$(document).ready(function() {
    

    var tabStrip = $("#tabstrip").kendoTabStrip().data("kendoTabStrip");
tabStrip.select("#by-buyer");

$("#buyer").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "data/offers-by-buyer.php",
                                cache: true
                            },
                           schema: {
                                model: {
                                   id: "contractID",
                                    fields: {
                                        contractID: { type: "number"},
                                        play_date: { type: "date"},
                                        end_date: { type: "date"},
                                        artist_name: { type: "string"},
                                          venue_name: { type: "string"},
                                        offer_status: { type: "string"},
                                        deal: { type: "string"},
                                        internal_status: { type: "string"},
                                        internal_notes: { type: "string"},
                                        guarantee: { type: "number"},
                                        Overage: { type: "number"},
                                        Fee: { type: "number"},
                                        TicketsSold: { type: "number"},
                                        GrossTicketSales: { type: "number"}
                                        
                                     }
                                }
                            },
                        pageSize: 10,
                        },
                        groupable: true,
                        reorderable: true,
                        resizable: true,
                        columnMenu: {
                            messages: {
                            sortAscending: "Sort Asc",
                            sortDescending: "Sort Desc",
                            filter: "Filter",
                            columns: "Columns"
                            }
                        },
                        sortable: true,                    
                        pageable: {
                          pageSizes: true
                          
                        },
                        filterable: true,
                        columns: [
                        { title: "", template:'<button  class="k-button" id="edit-offer" style="width:"30px" ><span style="width:"30px" class="k-icon k-i-pencil"></span></button>' },
                        { field:"contractID", title: "ID", width: "50px" },
                        { field:"play_date", title: "Date", format: "{0:MM/dd/yyyy}", width: "75px" },
                        { field:"end_date", title: "End", format: "{0:MM/dd/yyyy}", width: "75px"},
                        { field:"artist_name", title: "Artist" },
                        { field:"venue_name", title: "Venue" },
                        { field:"offer_status", title: "Status"},
                        { field:"deal", title: "Deal", hidden: true},
                        { field:"internal_status", title: "Internal Status", hidden: true },
                        { field:"internal_notes", title: "Notes", hidden: true },
                        { field:"guarantee", title: "Fee", width: "65px" },
                        { field:"Overage", title: "Over", width: "65px" },
                        { field:"Fee", title: "Actual", width: "65px" },
                        { field:"TicketsSold", title: "Tix", width: "65px" },
                        { field:"GrossTicketSales", title: "TixSales", width: "65px" }
                        
                        ]
                        
                    });
                    
                
                    $(".k-grid-header .k-header").off("click.kendoSortable").on("click", false);
$(".k-grid-header .k-header").off("dblclick.kendoSortable").on("dblclick", false);
  $("#company").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "data/offers-by-company.php"
                            },
                           schema: {
                                model: {
                                   id: "contractID",
                                    fields: {
                                        contractID: { type: "number"},
                                        play_date: { type: "date"},
                                        end_date: { type: "date"},
                                        artist_name: { type: "string"},
                                          venue_name: { type: "string"},
                                        offer_status: { type: "string"},
                                        deal: { type: "string"},
                                        internal_status: { type: "string"},
                                        internal_notes: { type: "string"},
                                        guarantee: { type: "number"},
                                        Overage: { type: "number"},
                                        Fee: { type: "number"},
                                        TicketsSold: { type: "number"},
                                        GrossTicketSales: { type: "number"}
                                        
                                     }
                                }
                            },
                        pageSize: 10,
                        },
                        sortable: true,
                        groupable: true,
                        reorderable: true,
                        resizable: true,
                        pageable: {
                        pageSizes: true
                        },
                        filterable: true,
                        columnMenu: true,
                        columns: [
                        { title: "", template:'<a class="k-button" href="edit-offer.php?contractID=#=contractID#"><span>Edit</span></a>', width: "60px" },
                        { field:"contractID", title: "ID", width: "50px" },
                        { field:"play_date", title: "Date", format: "{0:MM/dd/yyyy}", width: "75px" },
                        { field:"end_date", title: "End", format: "{0:MM/dd/yyyy}", width: "75px"},
                        { field:"artist_name", title: "Artist" },
                        { field:"venue_name", title: "Venue" },
                        { field:"offer_status", title: "Status"},
                        { field:"deal", title: "Deal", hidden: true},
                        { field:"internal_status", title: "Internal Status", hidden: true },
                        { field:"internal_notes", title: "Notes", hidden: true },
                        { field:"guarantee", title: "Fee", width: "65px" },
                        { field:"Overage", title: "Over", width: "65px" },
                        { field:"Fee", title: "Actual", width: "65px" },
                        { field:"TicketsSold", title: "Tix", width: "65px" },
                        { field:"GrossTicketSales", title: "TixSales", width: "65px" }
                        
                        ]
                        
                    });
                    $(".k-grid-header .k-header").off("click.kendoSortable").on("click", false);
                    $(".k-grid-header .k-header").off("dblclick.kendoSortable").on("dblclick", false);
                    
 $("#venues").kendoGrid({
                        dataSource: {
                            transport: {
                                read: "data/venues-by-buyer.php"
                            },
                           schema: {
                                model: {
                                   id: "venueID",
                                    fields: {
                                        venueID: { type: "number"},
                                           venue_name: { type: "string"},
                                        venue_city: { type: "string"},
                                        venue_state: { type: "string"}
                                    }
                                }
                            },
                        pageSize: 10,
                        
                        },
                        sortable: true,
                        reorderable: true,
                        resizable: true,
                        pageable: {
                         pageSizes: true
                        },
                        filterable: true,
                        columnMenu: true,
                        columns: [
                        { title: "", template:'<a class="k-button" href="edit-venue.php?venueID=#=venueID#"><span>Edit</span></a>', width: "60px" },
                        { field:"venueID", title: "ID", width: "75px" },
                        { field:"venue_name", title: "Venue", width: "200px" },
                        { field:"venue_city", title: "City", width: "120px" },
                        { field:"venue_state", title: "State", width: "120px" }
                        
                        ]
                        
                    });

$(".k-grid-header .k-header").off("click.kendoSortable").on("click", false);
$(".k-grid-header .k-header").off("dblclick.kendoSortable").on("dblclick", false);
});
</script>
</head>
<body>
<div id="main" class="k-content">
<div id="edit"></div>
<div id="tabstrip">
    <ul>
        <li class="k-state-active">Offers for <?php echo $contact; ?></li>
        <li>Offers for <?php echo $company; ?></li>
        <li>Venues booked by <?php echo $contact; ?></li>
    </ul>
    
    <div id="by-buyer">
<div id="buyer"></div>
</div>
<p></p>
<div id="by-company">
<div id="company"></div>
</div>
<p></p>
<div id="venue">
<div id="venues"></div>
</div>
</div>
</div>

</body>
</html>

0
Dimo
Telerik team
answered on 18 Jan 2013, 08:18 AM
Hi Tony,

Right, well, you can use child selectors then:

.k-column-menu > .k-menu  > .k-item  > .k-link
{
    min-width: 200px;
}


Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 1
answered on 18 Jan 2013, 08:15 PM
Hi,

I tried you code and that didn't work either. This seems to be a bug in IE with the column menu. The only other change I made was to hide certain columns on initial loading. They are available in the column menu to add, but hidden initially. It seems once I made that change the column menu formatting was screwed up.

Is there any connection between the visibility of columns and the formatting of the column menu in IE?

Hope we can get this figured out as I'd like to schedule a demo next week.

Thanks for all you help,
Tony
0
Dimo
Telerik team
answered on 21 Jan 2013, 09:09 AM
Hello Tony,

Please compare your implementation with the following, which expands the context menu items according to the defined CSS styles:

http://jsfiddle.net/dimodi/P8QS2/

I am not sure how you hide the columns or what other customization have been made. Feel free to modify the above demo and send it back for further inspection.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 1
answered on 21 Jan 2013, 03:41 PM
Hi Dimo,

I tried your code to no effect. In fact, I think you misunderstood what the issue is. I also found another problem with the date picker in the embedded IE browser. Again, I can't show screen shots because the picker disappears when the mouse is moved from it.

Here are the problems I have, and they relate to the date picker widget in the filter item of the column menu.

You can see in the code from my recent post that the columns are hidden as per the docs with the hidden: true code. In any case, I removed all of the hidden fields to see if that was causing the problem but it seems to not. The data picker is still showing white space where the day numbers are.

If I remove the css code to re-size the column menu the menu looks like the image I attached in my first post. However, the date picker looks fine without the css code and the ugly menu, but is opening a new browser  window instead of filtering the column.

Another problem I found when trying to figure this out is that when a date is picked in the date picker to filter a date column instead of filtering the column a new browser window is open with the grid. Obviously this won't work for an app in an embedded browser. I need a way to make sure the grid filtering doesn't trigger a new browser window.

I hope this clarifies the issue for you. I've tried a lot of things to no avail and really need this to work soon. There seems to be an issue with the date picker in the column menu filter item and It's an important part of the application.

Thanks again for all your help and I look forward to hearing from you soon on this.

Tony
0
Dimo
Telerik team
answered on 23 Jan 2013, 10:42 AM
Hi Tony,

While investigating the issues that you have described, we discovered a problem with the DatePicker automatically opening and closing inside a Grid column menu in IE (i.e. the datepickerworks OK in a standard filtering menu, but not in a column menu with an embedded filtering menu inside). This is probably unrelated to the current discussion, but anyway, we have fixed it.

I am afraid that the opening of extra browser windows is not a correct behavior and the cause of this is unclear. I am not sure that this can be addressed properly. If I understand you correctly, you are not using a standalone browser, but some embedded modification. Unfortunately, we do not support such instances. What I can suggest you is to use a separate date filtering input outside the Grid and trigger filter commands by using the Grid dataSource API.

The same applies for the white space in the popup Calendar - can you reproduce this in a standalone Internet Explorer, e.g. in our online demos? I can't seem to observe such a problem there.

Regards,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 1
answered on 23 Jan 2013, 03:42 PM
Hi Dimo,

Well, that's not encouraging! It's not really practical to use an external date picker to filter this set of grids. In terms of reproducing the behavior in a standalone browser the answer is no, it works fine in all other browsers. The only way I can show you what the problem is, and maybe find a solution, is to arrange a screen share through GoToMeeting, which I am happy to provide, so that I can show you when and where the problem is happening. I would be happy to arrange this at your earliest convenience.

The new window opens, by the way, whether or not the column menu is included. It happens on the standard filtering date columns as well. I assume that it's because the dates, or  day numbers in the calendar are a tags. The embedded ie browser is treating them as target blank links and opening a new page. I had the same problem, as you recall, with the header links. You fixed that with the code provided in the earlier posts. I was hoping we could do the same for the date picker links yet maintain the functionality in the filter.

Let me know if you or someone else in support can participate in a screen sharing session to help fix this issue.

Thanks,
Tony
0
Dimo
Telerik team
answered on 25 Jan 2013, 09:13 AM
Hello Tony,

You can make a simple test - add the following hyperlink to your page:

<a href="#" id="testLink">click me</a>


Then use the following click handler:

$("#testLink").click(function(e){
    e.preventDefault();
});

Do you experience a new browser window opening as with the Kendo UI DatePicker?

In addition, what is the version of the embedded IE browser instance that you are using?

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 1
answered on 25 Jan 2013, 07:46 PM
Hi Dimo,

Thanks for the link test. Did it and yes it still opens a new window. I just found out that the IE version is 8 (YUCK!). Goldmine 9.2 now uses version 9 of IE which does seem more stable. I'll upgrade to the newer version and see if that works.

In the meantime, what did this test tell you? Any other ideas? I'll let you know when I finish the upgrade.

Thanks,
Tony
0
Dimo
Telerik team
answered on 28 Jan 2013, 08:21 AM
Hi Tony,

Thanks for confirming what I already suspected. Unfortunately, the test results mean that the embedded browser instance is flawed and we cannot support it without rewriting core parts of jQuery or our own code.

Greetings,
Dimo
the Telerik team
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Tony
Top achievements
Rank 1
answered on 30 Jan 2013, 04:41 PM
Thanks. Well, I guess we won't be filtering dates.

Another problem now with the grid and date picker. I'll post in a new thread.

Thanks again,
Tony
Tags
Grid
Asked by
Tony
Top achievements
Rank 1
Answers by
Dimo
Telerik team
Tony
Top achievements
Rank 1
Share this question
or