Grid control (grouping+template coulumn TemplateID) (one more)

[egor]

Hi guys,

Something strange was happen with my previous question. So I repeat it in another thread.

I try to use grouping. Here sample code, just copy it to VS and run:

@using WizzartBuyer.Models.Client
@using WizzartBuyer.Models.Shared
@model List<WizzartBuyer.Models.Shared.CategoryModel>

@{
    ViewBag.Title = "Список продукции";
    var datasource = new[]
    {
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 }, 
        new { id = 0, Name = "", Portion = "", PackCount = 1, CurrentPrice = 40 },
    }; 
}


<script>
    function OnAddProductClicked(productId, amount)
    {
        
    }

    function OnTemplateRefresh(args) {

        var editProductAmount = $(args.cell).find(".editProductAmount");
        var amount = editProductAmount.val();


        editProductAmount.ejNumericTextbox({
            watermarkText: "Кол.шт.",// set watermark in numeric
            minValue: 1,
            value: amount,
            width: "80px",
            height: "30px"

        });

        $(args.cell).find(".buttonAddProduct").ejButton({
            width: "80px",
            height: "30px",
            click: function () { OnAddProductClicked(args.data.Id, editProductAmount.val()); }
        });
    }

</script>

<script type="text/x-jsrender" id="productFillGridAdd">
    <table>
        <tr>
            <td>
                <input type="text" id="productAmount_{{:Id}}" class="editProductAmount" value="1" />
            </td>
            <td>
                <button id="productAdd_{{:Id}}" class="buttonAddProduct" >Добавить</button>
            </td>
        </tr>
    </table>
</script>



<div id="operationResultNotice"></div>

<div class="container">


                <div class="panel-body">
                    @(Html.EJ().Grid<ClientProductModel>("productFillGrid")
                                .Datasource(ds => ds.Json(datasource)
                            .Adaptor(AdaptorType.RemoteSaveAdaptor))
                        //.AllowFiltering(true)
                        //.FilterSettings(filter => { filter.FilterType(FilterType.Excel); })
                        .AllowSorting()
                        .AllowGrouping()
                        .GroupSettings(group => { group.GroupedColumns(col => { col.Add("Name"); }).EnableDropAreaAnimation(false); })
                        .Columns(col =>
                        {
                            col.Field("Id").HeaderText("№").IsIdentity(true).IsPrimaryKey(true).Visible(false).Width(25).Add();
                            col.Field("Name").HeaderText("Наименование продукции").Tooltip("#cellTooltip").AllowEditing(false).Width(105).Add();
                            col.Field("Portion").HeaderText("Фасовка").AllowEditing(false).Width(35).Add();
                            col.Field("PackCount").HeaderText("Кол. в упак.").AllowGrouping(false).AllowSorting(false).AllowFiltering(false).AllowEditing(false).Visible(true).Width(35).Add();
                            col.Field("CurrentPrice").HeaderText("Цена за ед.").Visible(true).AllowEditing(false).Width(35).Add();
                            col.Field("Add").HeaderText("Добавить").AllowGrouping(false).AllowSorting(false).AllowFiltering(false).Visible(true).Template(true).TemplateID("#productFillGridAdd").Width(75).Add();
                        })
                        .GridLines(GridLines.Vertical)
                        .ClientSideEvents(eve => eve.TemplateRefresh("OnTemplateRefresh").QueryCellInfo("OnQueryCellInfo").DataBound("OnDataBound")))
                </div>
        

</div>

At result I got some thing like this:

Some controls were overloaded (36), other not.

Is there any solution to avoid this confuse.

Thanks a lot.

Best regards

[egor]

And I want to show html tooltip with picture for one of the cell. 

But there is not solution how to do that. 

I try 

https://help.syncfusion.com/api/js/ejgrid#members:columns-tooltip

and manipulation with "title" throw the Custom attributes or like this article:

https://help.syncfusion.com/aspnetmvc-classic/grid/how-to/how-to-show-tooltip-on-grid-cell-mousehover-in-server-mode

Best regards, 

Egor.

[Jayaprakash Kamaraj]

Hi Egor,  

Query 1: Some controls were overloaded (36), other not. 

 

We have analyzed your query and we are able to reproduce the reported issue from our end.   

 

So, we suggest you to change the column template as shown in the below code example.  

 

 

<script type="text/x-jsrender" id="productFillGridAdd">  

  

    <input type="text" id="productAmount_{{:Id}}" class="editProductAmount" value="1"style="float:left;padding-right:10px" />  

              

    <button id="productAdd_{{:Id}}" class="buttonAddProduct" >Добавить</button>  

             

</script>  

 

We have prepared a sample and it can be downloadable from the below location.  

 

Sample: http://www.syncfusion.com/downloads/support/forum/130294/ze/SyncfusionMvcApplication1-1169099822  

Query 2: And I want to show html tooltip with picture for one of the cell.  

 

We have achieved your requirement using QueryCellInfo event of Grid. In this event, we need to bind ejTooltip in grid cell using below code example, 

 

@(Html.EJ().Grid<OrdersView>("FlatGrid") 

        .Datasource(ds => ds.Json(datasource) 

        .Adaptor(AdaptorType.RemoteSaveAdaptor)) 

        .AllowGrouping() 

        .GroupSettings(group => { group.GroupedColumns(col => { col.Add("Name"); }).EnableDropAreaAnimation(false); }) 

        .ClientSideEvents(eve => eve.TemplateRefresh("OnTemplateRefresh").QueryCellInfo("OnQueryCellInfo").DataBound("OnDataBound")) 

        .Columns(col => 

        { 

            col.Field("id").HeaderText("ID").Width(75).Add(); 

            col.Field("Name").HeaderText("Name").Width(80).Add(); 

            col.Field("Portion").HeaderText("Portion").Width(75).Add(); 

            col.Field("PackCount").HeaderText("Pack Count").Width(75).Add(); 

            col.Field("CurrentPrice").HeaderText("Current Price").Width(75).Add(); 

            col.Field("Add").HeaderText("Добавить").Visible(true).Template("#productFillGridAdd").Width(75).Add(); 

        }).ClientSideEvents(eve=>eve.QueryCellInfo("querycellInfo"))) 

</div> 

<script type="text/javascript"> 

    function querycellInfo(args){ 

        $(args.cell).ejTooltip( 

{ 

    width: "100px", 

    content: ' <img src="http://js.syncfusion.com/demos/web/images/tooltip/template-2.png" width="50px" height="50px">' + args.text + '</div>' 

}); 

} 

 

https://help.syncfusion.com/js/tooltip/customization#template-support 

https://help.syncfusion.com/api/js/ejgrid#events:querycellinfo 

 

Sample: http://www.syncfusion.com/downloads/support/forum/130306/ze/SyncfusionMvcApplication1-1390086585 

Regards, 

Jayaprakash K.