How to change command buttons dynamically in data bound event

[ANIL]

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. 

[Alexander Valchev]

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

[ANIL]

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: " ", 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

 

[ANIL]

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

[Alexander Valchev]

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

[ANIL]

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.

[ANIL]

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

[ANIL]

Hi Alexander,

Can i get reply for my previous question?

Thanks
Team Symantec

[Alexander Valchev]

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

[ANIL]

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.

[ANIL]

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.

[Alexander Valchev]

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

[Zeeshan]

Hi admin

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

 

Thanks

Sean

[Preslav]

Hi Sean,

Please refer to this forum post on the same subject:

• http://www.telerik.com/forums/mvc-based-implementation-of-existing-thread

Regards,
Preslav
Progress Telerik