We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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


2 Replies

EG egor May 5, 2017 09:46 AM UTC

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.



JK Jayaprakash Kamaraj Syncfusion Team May 8, 2017 04:02 PM UTC

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.  
 

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>' 
}); 
} 
 



 


Regards, 

Jayaprakash K. 


Loader.
Up arrow icon