Porting from Telerik MVC Grid

[Joe]

I am trying to port a telerik mvc project to use the Kendo controls and am having difficulties on a few issues with the grid. If anyone can help with any of these issues I would appreciate it!

• I am using an editor template for editing a certain view model object. The add/edit window that pops up is way too narrow and has a horizontal scroll bar. If I wrap a <div> around my fieldset and put width on it, the width is ignored. Currently the form is not usable because it is so narrow. How can I specify the width of my editor template? The following also has no effect:
  • .Editable( editing => editing

        .Mode( GridEditMode.PopUp )

        .DisplayDeleteConfirmation( true )

        .Window( window => window.Width( 500 ) ))
• When I click the "Add" button, the title of the window still states "Edit". How do I dynamically change this based on the mode?
• I need to have a "Details" button in my master grid which will open a modal popup that displays all the details of the selected row. How is this accomplished with the Kendo grid?
• Edit, Add & Delete buttons only have text. In the Telerik version we could specify to display text, text + image or image only. Where has this functionality gone? I need to only display icons on the buttons.
• In the editor template, the "Update" button does not fire off the specified controller method. It simply closes the window.
• The filter icon does not show up and filtering is not possible

I have looked through the limited documentation and examples and have not been able to answer these questions but if I missed an example I am happy to have that pointed out so I can take a look.

Thanks for your help!

[Joe]

I figured out my third bullet point item (I need to have a "Details" button in my master grid which will open a modal popup that displays all the details of the selected row. How is this accomplished with the Kendo grid?) after finding the Custom Commands grid example in the downloaded examples for the wrappers.

[Joe]

The fifth bullet point has also been resolved as the update button just started working for no apparent reason. So to recap I have the following issues left:

1. Editor Template popup window does not apply any width settings and is much too narrow.
2. Dynamically changing the caption of the popup window from "Edit" to "Add"
3. Only display icons on Delete, Update and Add buttons intead of icons + text.
4. Filtering not working (filter icon does not show up on column headers)3

Any help with these is greatly appreciated.

Thanks!

[Daniel]

Hello Joe,

To your questions:

1. Setting the Window options is currently not supported when using Ajax binding. The width could be set in the edit event. For example:
   

   function edit(e) {
           e.container.width(1000);
   }

2. The same event can be used to find the text and replace it depending on whether the item is new - e.model.isNew().
3. Currently setting the button type is not supported in Kendo. The buttons could be customized only with code. 
4. I am not sure if this is causing the problem but the filter icons will not be shown if the images are missing. Could you verify that the folder for the theme is included in the same folder as the CSS file? If the problem persists, please send a small sample that replicates this behavior so I can investigate further.

Regards,
Daniel
the Telerik team

[Joe]

Thanks for the reply!

Setting the window width like you described works perfectly, thanks! Now if I could only get it centered on the form.

I was able to find the "Update" button and change the text to insert but I have not been able to stumble upon the id of the window and how to change the title. Could you give me the ID or how to access the window title?

The theme folders are in the same directory as the .css files. If it was just the image that was missing wouldn't I still be able to click in the right corner to get the filtering dialog to pop up? I can't do that, no matter where I click it only sorts so I don't think it is just a missing image. I could be wrong though!

Thanks so much for all your help!

[Joe]

Update: I can click on the VERY upper right of the column header and get the filter dialog to pop up, but the theme folders are definitely in the same folder as the .css and the sort icons are there along with all the other icons (on the add, edit and delete buttons etc). I am using the legacy themes if that helps but I do see the images in the sprite.

[Daniel]

Hello again Joe,

Thank you for clarifying that you are using a legacy theme. It seems there was problem with the styles in the  telerik.common.css file that is already fixed. Please find the attached file which should resolve it.
Regarding the title, a specific ID is not used for the Window but you can find the title by using the event argument container field which is the Window content element.

function edit(e) {
    if (e.model.isNew() ) {
         e.container.siblings(".k-window-titlebar").find(".k-window-title").text("titleText");
    }
}

 
Regards,
Daniel
the Telerik team

[KordaMentha]

while this fixed most issues with the legacy themes regarding the grid it did not fix the .ColumnMenu() icon can you please fix this and post an update. Thanks for the great support. Note: I tested it in the Demo Sample App so I know its an issue.

[Daniel]

Hello Jason,

Thank you for bringing this problem to our attention. I reproduced it on my side. We will look into it and I will write again once the it has been resolved. 

Kind regards,
Daniel
the Telerik team

[Joe]

Thanks Daniel,

The updated .css did fix my filtering icon issue and the code you supplied works on updating the title text of the editor window.

Thanks again!

[Praseeda]

Hello Joe,
How did you find the Update button and renamed it?
I wanted to change the name of the Update button to "Insert" in the Add mode. But could not do it. Could you please explain how you acheived that. Also the code which is given for changing the title also didn't work for me.

Thanks,
Praseeda.