Porting from Telerik MVC Grid

11 posts, 0 answers
  1. Joe
    Joe avatar
    34 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    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!

  2. Joe
    Joe avatar
    34 posts
    Member since:
    Jul 2012

    Posted 16 Jul 2012 Link to this post

    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.
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Joe
    Joe avatar
    34 posts
    Member since:
    Jul 2012

    Posted 17 Jul 2012 Link to this post

    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!

  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 19 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. Joe
    Joe avatar
    34 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    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!

  7. Joe
    Joe avatar
    34 posts
    Member since:
    Jul 2012

    Posted 19 Jul 2012 Link to this post

    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.
  8. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 23 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  9. KordaMentha
    KordaMentha avatar
    2 posts
    Member since:
    Sep 2008

    Posted 23 Jul 2012 Link to this post

    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.
  10. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 26 Jul 2012 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  11. Joe
    Joe avatar
    34 posts
    Member since:
    Jul 2012

    Posted 28 Jul 2012 Link to this post

    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!
  12. Praseeda
    Praseeda avatar
    7 posts
    Member since:
    Sep 2012

    Posted 16 Oct 2012 Link to this post

    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.
Back to Top
UI for ASP.NET MVC is VS 2017 Ready