CODEWITHSUNDEEP
jqueryasp.net-mvckendo-uiselector
Noldor
Noldor

Reputation: 1182

Kendo UI - MVC - Using custom jQuery selector for initialization

I am using Kendo UI 2013.Q2.

I have a scenario that my page is loading multiple modal popup windows (in-page div elements). The contents are loading from partial views with ajax requests. So, if my partial view content includes kendo components, the second popup window fails to initialize kendo elements, because they have got same IDs with the elements from previous modal popup.

Is there any way to modify jQuery selector for kendo initialization, so that i would able to specify parent window element in the selector.

MVC Code :

@(Html.Kendo().NumericTextBoxFor(m => m.DemirbasInfo.SicilSiraNo)
          .Decimals(0).Format("{0:#}")
          .Min(0).Max(int.MaxValue)
          .Spinners(false))

Renders as :

jQuery(function(){jQuery("#DemirbasInfo_SicilSiraNo").kendoNumericTextBox({"format":"{0:#}","spinners":false,"decimals":0});});

I want to modify to render it as :

 jQuery(function(){jQuery("#ModalWin_2 #DemirbasInfo_SicilSiraNo").kendoNumericTextBox({"format":"{0:#}","spinners":false,"decimals":0});});

UPDATE 2020

This question was asked specific to multiple modals at once in the main page, like showing side to side multiple windows for different database records. I had come to a solution using <iframe> modals with this one. But the best practice is never using MVC Helpers from the start anyway.

If you use one modal window at once, just simply destroy the previous modal content so that kendo elements will be destroyed. And then re-open second modal.

Upvotes: 1

Views: 941

Answers (1)

Atanas Korchev
Atanas Korchev

Reputation: 30671

This isn't supported out of the box. You have two options:

  1. Use the JavaScript version of the NumericTextBox

  2. Modify the source code of the wrappers. You need to edit WidgetBase.cs and change the implementation of the Selector property. For example you can create a setter for it

    private string _selector;

public string Selector
{
    get
    { 
        return _selector ?? (IsInClientTemplate ? "\\#" : "#") + Id;
    }
    set
    {
        _selector = value;
    }
}

Then use it like this:

@{

// initialize the NumericTextBox
var numeric = Html.Kendo().NumericTextBoxFor(m => m.DemirbasInfo.SicilSiraNo)
          .Decimals(0).Format("{0:#}")
          .Min(0).Max(int.MaxValue)
          .Spinners(false));

// Set the Selector 
numeric.ToComponent().Selector = "#ModalWin_2 #DemirbasInfo_SicilSiraNo";
};

@* render it *@
@numeric

Upvotes: 1

Related Questions