Selection and Click event in Client Detail Template

[Makesh]

Hi,

 I have a Grid with client detail template. The grid  has only one column to display and the client detail template is given below

 <script id="client-template" type="x-kendo-template">

    <div onclick="OnDivClick" class="row">
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>First Name</label>
                <p>#: FirstName #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Last Name</label>
                <p>#: LastName #</p>
            </div>
        </div>
        <div class="col-lg-1 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Inhouse</label>
                <p>#: Inhouse #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Company Name</label>
                <p>#: CompnayName #</p>
            </div>
        </div>
        <div class="col-lg-1 col-md-3 col-sm-12">
            <div class="form-group">
                <label>SAN</label>
                <p>#: StateAccountNumber #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Location Number</label>
                <p>#: LocationNumber #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Last Activity Date</label>
                <p>#: LastActivityDate #</p>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>First Name from Payroll</label>
                <p>#: ClaimentFirstName #</p>
            </div>
        </div>
        <div class="col-lg-2 col-md-3 col-sm-12">
            <div class="form-group">
                <label>Last Name from Payroll</label>
                <p>#: ClaimentLastName #</p>
            </div>
        </div>
        <div class="col-lg-8 col-sm-12 col-md-6">
            <button class="btn btn-success col-lg-offset-11 col-md-offset-9">Select</button>
        </div>       
    </div>

</script>

 

I need to select both row and client detail template of the row when we click in the client detail template area or click the button inside the client detail template.

For this I have used the onclick event of the div. But it is not working.

Also I need to get the row data when we click in the client detail template area or click the button inside the client detail template.

Can any one provide the solution for this .

[Radoslav]

Hello Makesh,

To achieve the desired functionality you need to change the code snippets as following:

<script id="client-template" type="x-kendo-template">
   <div onclick="OnDivClick(this);" class="row">
       <div class="col-lg-2 col-md-3 col-sm-12">

Then in the OnDivClick handler you can use following code snippet in order to select the parent row and to get underlying data item:

function OnDivClick(sender) {
        var gridRow = $(sender).parent().parent().prev();
        var grid = $("#MyGrid").data("kendoGrid");
        grid.select(gridRow);
        var dataTtem = grid.dataItem(gridRow);
        alert(dataTtem.ProductName);
    }

More information about used methods you can find here:
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid?#methods-select
http://docs.telerik.com/kendo-ui/api/javascript/ui/grid?#methods-dataItem

Additionally I am sending you a simple example which demonstrates the desired functionality. Please check it out and let me know if it helps you.

Looking forward for your reply.

Regards,
Radoslav
Telerik