How to change command buttons dynamically in data bound event

14 posts, 0 answers
  1. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 28 Jun 2012 Link to this post

    Hi,

    I have a command column like as follows.

     { command: ["edit", "destroy", { text: "Reset", className: "Reset-button" }, { text: "Re-Register", className: "Re-Register-button"}], title: " ", width: "420px"}],

    As you can see I have associated 4 buttons to the column.
    In the grid Data Bound event I want to show 2 buttons for some rows and 3 buttons for some rows and 4 buttons for some.


    Please let me know how can i achieve this in Data Bound event, I have already spent nights for this please help .

    Thanks
    Anil. 
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 29 Jun 2012 Link to this post

    Hello Anil,

    To achieve that I would recommend inserting the command buttons via template. In the template definition you could use JavaScript expressions to render different buttons upon a condition. For example:
    <script id="command-template" type="text/x-kendo-template">
        # if(foo % 2 == 0) { #
            <a class="k-button k-grid-even">Even</a>
        # } else { #
            <a class="k-button k-grid-odd">Odd</a>
        # } #
    </script>​

    In this fiddle you can see the approach in action - http://jsfiddle.net/valchev/Q69by/15/ 
    The templates are rendered on each dataBound, so there is no need to manually render them. I hope this solution will fit in your requirements.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 30 Jun 2012 Link to this post

    Hi Alexander,

    Thanks for your reply it works for me, but my requirement is something different.
    In the command button i want default Edit functionality also.My column list is as follows:-

    columns: [

    { field:

     

    "FirstName", title: "First Name" },

     

    { field:

     

    "LastName", title: "Last Name" },

     

    { field:

     

    "EmailId", title: "Email ID" },

     

    { field:

     

    "RegisteredWithMDSText", title: "Is Registered?" },

     

    { field:

     

    "OperationStatusText", title: "Operation Status" },

     

    { command: [

     

    "edit",{ template: kendo.template($("#command-template").html())}], title: "&nbsp;", width: "420px"}]

    And template is defined like as foolows:-

     

    <

     

     

    script id="command-template" type="text/x-kendo-template">

     

     

     

     

     

    # if (OperationStatusText == "Add Requested" ||

    OperationStatusText == "Reset Requested" ||

    OperationStatusText == "ReRegister Requested" ||

    OperationStatusText == "Delete Requested") ;

    else { #

    #if(RegisteredWithMDSText == "False"){#

    <a class="k-button Delete-button">Delete</a>

    <a class="k-button Re-Register-button">Re-Register</a>

    #}

    else {#

    <a class="k-button Delete-button">Delete</a>

    <a class="k-button Reset-button">Reset</a>

    <a class="k-button Re-Register-button">Re-Register</a>

    #}#

    # } #

     

     

    </script>

     

    If i am defining my columns like as above it is giving me error as "OperationStatusText" is not defined.

    But when i am defining my column as follows i am able to see the template button but no default edit button.

    columns: [

    { field:

     

    "FirstName", title: "First Name" },

     

    { field:

     

    "LastName", title: "Last Name" },

     

    { field:

     

    "EmailId", title: "Email ID" },

     

    { field:

     

    "RegisteredWithMDSText", title: "Is Registered?" },

     

    { field:

     

    "OperationStatusText", title: "Operation Status" },

     

     

     

    //{ command: ["edit"], title: "&nbsp;", width: "420px" },

     

    {template: kendo.template($(

     

    "#command-template").html())}]

    Now my question is how can i achieve this default edit button as well as my custom command buttons veries from row to row in kendo grid.

    Thanks
    Team Symantec

     

  4. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 30 Jun 2012 Link to this post

    Hi Alexander,

    Or else please let me know how can i achieve the default edit button popup functionality with custom command edit button clcick.
    This will also solve my problem.

    Thanks
    Anil
    Team Symantec
  5. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 02 Jul 2012 Link to this post

    Hello Anil,

    The edit command could be inserted through the template together with the custom buttons. Basically you have to include its mark-up in the template definition - for example:
    <script id="command-template" type="text/x-kendo-template">
        <a class="k-button k-button-icontext k-grid-edit" href="\\#"><span class="k-icon k-edit"></span>Edit</a>
        # if(foo % 2 == 0) { #
            <a class="k-button k-grid-even">Even</a>
        # } else { #
            <a class="k-button k-grid-odd">Odd</a>
        # } #
    </script>​

    When using this approach however, it is necessary to attach manually the "Update" and "Cancel" buttons that normally appear on edit out of the box. To include them I would recommend changing the command column inner HTML.
    edit: function(e) {
            var commandCell = e.container.find("td:last"); //find the command column
            commandCell.html('<a class="k-button k-button-icontext k-grid-update" href="#"><span class="k-icon k-update"></span>Update</a><a class="k-button k-button-icontext k-grid-cancel" href="#"><span class="k-icon k-cancel"></span>Cancel</a>'); //append the buttons
    }

    For convenience I have updated the previous example, please check the result.

    Alternatively you can use the Grid API (editRow, saveRow methods) to achieve the default functionality with custom buttons.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  6. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 04 Jul 2012 Link to this post

    Hi,

    For Kendo Menu related issues where should i post?
    I am using kendo menu, i have a list which i am binding to menu.
    I want to enable or disable submenus based on some validation,
    how can i acieve this.

    Below is my Menu data which i am returning a list of it from a web service.

    public

     

     

    class MenuData

     

    {

     

     

    public string id { get; set; }

    public string text { get; set; }

     

     

     

    public string imageUrl { get; set; }

     

     

     

    public string url { get; set; }

     

     

     

    public List<MenuData> items { get; set; }

     

     

     

    public string InternalName { get; set; }

     

    }

    Here i am binding it to kendo menu like this.

     

    if

     

     

    (result.d != null) {

     

     

     

    var menu = $('ul[id$="ulCCSModules"]').kendoMenu({

     

    dataSource: result.d

    });

    }

    My menu is displaying well the only thing is i want to disable few sub menus of a main menu.

  7. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 05 Jul 2012 Link to this post

    Hi Alexander,

    I am using kendo hirarchical grid like as follows.

    function

     

     

    PopulateDataForRightPanelGrid() {

     

     

     

    var element = $("#rightPanelGrid").kendoGrid({

     

    dataSource: dataForRightPanel,

    height: 350,

    sortable:

     

    true,

     

     

     

    //pageable: true,

     

    detailInit: ExpandCategory,

    dataBound:

     

    function () {

     

     

     

    this.expandRow(this.tbody.find("tr.k-master-row").first());

     

    },

    columns: [

    {

    field:

     

    "text",

     

    title:

     

    "Selected Security Metrics"

     

    }

    ]

    });

    }

     

     

    function ExpandCategory(e) {

     

    childGrid = $(

     

    "<div/>").appendTo(e.detailCell).kendoGrid({

     

    dataSource: e.data.items,

    scrollable:

     

    false,

     

    sortable:

     

    true,

     

     

     

    //pageable: true,

     

    columns: [

    { field:

     

    "text", title: "Security Metrics Name", width: "250px" },

     

    { command: [{ text:

     

    "<input id='radioGrid' type='radio' style='width: 20px; text-align:center;' class='RadioButton' onclick='radioGrid_onclick();'/>"}], title: "&nbsp;", width: "30px" },

     

    { command: [{ text:

     

    "<input type='number' id='spinGrid' readonly='readonly' min='0' max='10' step='1' style='text-align:center;' visibility:'visible'; class='SpinButton' />"}], title: "&nbsp;", width: "100px"}]

     

     

     

    }).data("kendoGrid");

     

    $.each(e.data.items, function (index, value) {
                        $("#spinGrid").kendoNumericTextBox({ format: "#", value: 0 });
                        //$(".SpinButton").kendoNumericTextBox({ format: "#", value: 0 });
                        //$("#spinGrid").data("kendoNumericTextBox").enable(true);
                    });

    }

    My Question is in the child grid i have two command column, in the first one i have a radio button and in the second one i have a numeric text box with spin button.

    Questions:-
    1.How do i intialize the "kendoNumericTextBox" and Where? in my grid the spin button is only appearing to the first row all the other rows are appearing as text box.


    2. I want only one radio button to to be checked at once in the child grid per main grid row.

    Thanks
    Team Symantec

  8. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 06 Jul 2012 Link to this post

    Hi Alexander,

    Can i get reply for my previous question?

    Thanks
    Team Symantec
  9. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 09 Jul 2012 Link to this post

    Hi Anil,

    To enable or disable an item from a Menu I suggest to use the enable method. For example:
    menu.enable("#item", false);
     
    //where
    //#item is the target element (selector)
    //false is the desired state (boolean)

    Regarding your last post, I would recommend to initialize the numericTextBox widgets on dataBound event of the detail grid. In addition I noticed that in the command column you are rendering elements with equal IDs, which will lead to having an invalid HTML and is most likely to be the cause of your issue. In order to avoid this I suggest to assign a class attribute instead of ID.

    As for the radio buttons requirements, I am afraid that such functionality is not supported out of the box. You may try to hook up to the radio buttons change event and disable the controls after one of them is selected.

    On a side note I would like to remind you that the forums are a community resource - we monitor them, but we do not guarantee a timely reply here. If you need a quick answer, it is best to use the support ticketing system - it assigns a response time to all your tickets (based on the license) and automatically forwards the ticket to the team that works on the corresponding product.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  10. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 09 Jul 2012 Link to this post

    Hi Alexander,

    Thanks for your reply, actually we are in the process of buying developer licences for Kendo UI.
    But before that we want to make sure that our required functionality is achievable through Kendo UI. 

    Thanks
    Anil
    Symantec Corporation.
  11. ANIL
    ANIL avatar
    11 posts
    Member since:
    Apr 2012

    Posted 09 Jul 2012 Link to this post

    Hi Alexander,

    Can you please upload some sample for loading data in panel bar dynamically and a grid inside a panel bar.

    Thanks
    Team Symantec.
  12. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2895 posts

    Posted 12 Jul 2012 Link to this post

    Hi Anil,

    Thank you for your interest in KendoUI.
    A sample demonstrating loading panel bar content dynamically is available at this demo section - the data is fetched via GET Ajax requests when the panel bar item is activated (expanded).  As for your other request I prepared a small sample which demonstrates the usage of a grid widget inside a panel bar.
    I hope this helps.

    Regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  13. Zeeshan
    Zeeshan avatar
    3 posts
    Member since:
    Apr 2017

    Posted 24 Jul 2017 in reply to Alexander Valchev Link to this post

    Hi admin

    Can you please tell how to accomplish this using MVC wrapper ?

     

    Thanks

    Sean

  14. Preslav
    Admin
    Preslav avatar
    583 posts

    Posted 25 Jul 2017 Link to this post

    Hi Sean,

    Please refer to this forum post on the same subject:

    Regards,
    Preslav
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top